// Approach.jsx — process / methodology in 4 numbered phases on dark
function Approach() {
  const phases = [
    { n: "Phase i",   t: "Begegnung",     b: "Ein erstes, unverbindliches Gespräch im Studio oder vor Ort. Wir hören zu — Ort, Lebensrhythmus, Sammlung, Erinnerungen. Daraus entsteht das Briefing.", d: "ca. 2 Wochen" },
    { n: "Phase ii",  t: "Konzept",       b: "Räumliches Narrativ, Materialpalette, Lichtkonzept und erste Skizzen. Eine kuratierte Auswahl aus unserem Materialarchiv geht zum Klienten.", d: "8–10 Wochen" },
    { n: "Phase iii", t: "Ausführung",    b: "Detailplanung, Möbelentwicklung mit ausgewählten Manufakturen, Koordination mit Architekten und Gewerken. Tägliche Begleitung der Baustelle.", d: "6–14 Monate" },
    { n: "Phase iv",  t: "Inszenierung",  b: "Styling, Kunstkuration, Bibliothek, finale Schicht. Das Haus wird mit allem ausgestattet, was es zum Bewohnen braucht — bevor der Klient eintritt.", d: "2–4 Wochen" },
  ];
  return (
    <section
      id="approach"
      data-screen-label="Approach"
      style={{
        background: "var(--ferella-chocolate)",
        color: "var(--fg-on-dark)",
        padding: "176px 56px",
      }}
    >
      <div style={{ maxWidth: 1440, margin: "0 auto" }}>
        <div style={{
          display: "grid", gridTemplateColumns: "200px 1fr",
          gap: 64, alignItems: "baseline", marginBottom: 96,
          paddingBottom: 28, borderBottom: "1px solid var(--border-on-dark)",
        }}>
          <div style={{
            fontFamily: "var(--font-sans)", fontSize: 11,
            letterSpacing: "0.32em", textTransform: "uppercase",
            color: "var(--fg-on-dark-muted)",
          }}>III · Approach</div>
          <h2 style={{
            fontFamily: "var(--font-serif)", fontWeight: 300,
            fontSize: "clamp(44px, 5vw, 76px)", lineHeight: 1.05,
            letterSpacing: "0.005em", margin: 0,
            color: "var(--fg-on-dark)", maxWidth: 1100,
          }}>
            Vier Phasen — von der ersten <span style={{ fontStyle: "italic" }}>Begegnung</span> bis zur finalen Inszenierung.
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0 }}>
          {phases.map((p, i) => (
            <div key={i} style={{
              padding: i === 0 ? "0 40px 0 0" : "0 40px",
              paddingLeft: i === 0 ? 0 : 40,
              paddingRight: i === phases.length - 1 ? 0 : 40,
              borderRight: i < phases.length - 1 ? "1px solid var(--border-on-dark)" : "0",
            }}>
              <div style={{
                fontFamily: "var(--font-serif)", fontStyle: "italic",
                fontSize: 14, letterSpacing: "0.04em",
                color: "var(--fg-on-dark-muted)", marginBottom: 32,
              }}>{p.n}</div>
              <h3 style={{
                fontFamily: "var(--font-serif)", fontWeight: 300,
                fontSize: 36, lineHeight: 1.1,
                margin: 0, color: "var(--fg-on-dark)",
              }}>{p.t}</h3>
              <p style={{
                marginTop: 24,
                fontFamily: "var(--font-sans)", fontSize: 14,
                lineHeight: 1.7, color: "rgba(237,231,221,0.78)",
              }}>{p.b}</p>
              <div style={{
                marginTop: 32, paddingTop: 16,
                borderTop: "1px solid var(--border-on-dark)",
                fontFamily: "var(--font-sans)", fontSize: 10,
                letterSpacing: "0.28em", textTransform: "uppercase",
                color: "var(--fg-on-dark-muted)",
              }}>Dauer · {p.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Approach = Approach;