// About page — the studio, the founder, the HQ.

function AboutPage({ setRoute }) {
  const milestones = [
    { y: "1976", t: "Founded in Dubai", d: "Architect & interior designer Samir M. Badro establishes the studio." },
    { y: "1990s", t: "First royal commission", d: "Move into palace fit-out work; under continuous non-disclosure since." },
    { y: "1999", t: "An iconic Dubai hotel", d: "The first of many five-star hospitality public-area fit-outs." },
    { y: "2008", t: "Jebel Ali HQ opens", d: "520,000 sq.ft headquarters and factory in the Jebel Ali Free Zone." },
    { y: "2014", t: "ISO 9001 accreditation", d: "Formal quality system aligned to international standard." },
    { y: "Today", t: "1,000+ projects", d: "An international network across seven cities; 2,000+ craftsmen and designers." },
  ];

  const principles = [
    { n: "01", t: "Make what you draw.", d: "Design and manufacturing under one roof. No supplier proxy between sketch and shop floor." },
    { n: "02", t: "Solution finders.", d: "Most fit-outs are won and lost on the awkward third week. We're set up for that week." },
    { n: "03", t: "Discreet by default.", d: "Royal and private residential work is anonymous. The client decides what is published, ever." },
    { n: "04", t: "On the operator's clock.", d: "Hotels open on a date. We work backwards from that date, and we don't miss it." },
  ];

  return (
    <div className="page-enter">
      <section style={{ padding: "80px 0 32px", borderBottom: "1px solid var(--line)" }}>
        <div className="container">
          <Eyebrow n="—">About the studio</Eyebrow>
          <h1 className="display-xxl" style={{ marginTop: 16, marginBottom: 32, maxWidth: "18ch" }}>
            Fifty years of <em style={{ fontStyle: "italic", color: "var(--green-deep)" }}>making</em> what we draw.
          </h1>
          <p className="lede" style={{ maxWidth: "62ch" }}>
            Greenline Interiors was founded in Dubai in 1976 by the architect and interior designer
            Samir M. Badro. Five decades on, we are one of the region's oldest and largest luxury
            turnkey fit-out houses — and the only one of comparable scale that designs, manufactures
            and contracts every interior under one roof.
          </p>
        </div>
      </section>

      {/* Chairman */}
      <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 80, alignItems: "center" }}>
            <div style={{
              aspectRatio: "4/5",
              background: "repeating-linear-gradient(45deg, var(--paper-2) 0 1px, transparent 1px 18px)",
              border: "1px solid var(--line-2)",
              display: "flex", alignItems: "center", justifyContent: "center", textAlign: "center", padding: 32
            }}>
              <div>
                <div className="mono" style={{ color: "var(--graphite)" }}>PLACEHOLDER</div>
                <div style={{ marginTop: 12, fontFamily: "var(--font-serif)", fontSize: 22, color: "var(--ink-2)" }}>
                  Samir M. Badro<br/>portrait
                </div>
                <div className="small" style={{ marginTop: 8 }}>Awaiting client-supplied portrait.</div>
              </div>
            </div>
            <div>
              <Eyebrow n="01">Chairman's message</Eyebrow>
              <h2 className="display-l" style={{ margin: "20px 0 24px" }}>
                "The work, and the work alone."
              </h2>
              <p className="lede" style={{ marginBottom: 18 }}>
                "We grew up making things. When I opened the studio in 1976, the city was a fraction
                of what it is now, and what we offered was simple — that you could come to one address,
                describe an interior, and leave with a contract for the whole of it."
              </p>
              <p className="lede" style={{ marginBottom: 32 }}>
                "Fifty years later that's still the proposition. Bigger factory, longer client list,
                same offer."
              </p>
              <div style={{ fontFamily: "var(--font-serif)", fontSize: 22, color: "var(--ink)" }}>— Samir M. Badro</div>
              <div className="mono" style={{ color: "var(--graphite)", marginTop: 6 }}>ARCHITECT · FOUNDER · CHAIRMAN &amp; CEO</div>
            </div>
          </div>
        </div>
      </section>

      {/* HQ image */}
      <section style={{ padding: 0 }}>
        <div className="img-wrap" style={{ aspectRatio: "21/9" }}>
          <img src="media/headquarters-01.webp" alt="" />
        </div>
        <div className="container" style={{ marginTop: 14, marginBottom: 96 }}>
          <div className="credit">HEADQUARTERS · JEBEL ALI FREE ZONE · DUBAI · ~520,000 SQ.FT</div>
        </div>
      </section>

      {/* Principles */}
      <section className="section" style={{ background: "var(--paper-2)" }}>
        <div className="container">
          <SectionHead eyebrow="How we work" eyebrowN="02" title="Four principles. Held since 1976." />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 0, borderTop: "1px solid var(--ink)" }}>
            {principles.map((p, i) => (
              <div key={p.n} style={{
                padding: "40px 32px",
                borderRight: i % 2 === 0 ? "1px solid var(--line)" : 0,
                borderBottom: i < 2 ? "1px solid var(--line)" : "1px solid var(--ink)",
              }}>
                <div style={{ display: "flex", alignItems: "baseline", gap: 14 }}>
                  <span className="mono" style={{ color: "var(--brass)" }}>{p.n}</span>
                  <h3 className="display-m" style={{ margin: 0 }}>{p.t}</h3>
                </div>
                <p style={{ marginTop: 14, fontSize: 15, color: "var(--ink-2)", lineHeight: 1.6, maxWidth: "46ch" }}>{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Timeline */}
      <section className="section">
        <div className="container">
          <SectionHead eyebrow="Milestones" eyebrowN="03" title="Half a century, in seven dates." />
          <div style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 32 }}>
            {milestones.map((m, i) => (
              <React.Fragment key={i}>
                <div style={{ paddingTop: 16, fontFamily: "var(--font-serif)", fontSize: 28, color: "var(--green-deep)" }}>
                  {m.y}
                </div>
                <div style={{ padding: "16px 0 28px", borderBottom: i < milestones.length - 1 ? "1px solid var(--line)" : 0 }}>
                  <div style={{ fontFamily: "var(--font-serif)", fontSize: 22 }}>{m.t}</div>
                  <div className="small" style={{ marginTop: 6, maxWidth: "60ch" }}>{m.d}</div>
                </div>
              </React.Fragment>
            ))}
          </div>
        </div>
      </section>

      {/* Network */}
      <section className="section" style={{ background: "var(--ink)", color: "#fff" }}>
        <div className="container">
          <Eyebrow><span style={{ color: "rgba(255,255,255,0.6)" }}>The network</span></Eyebrow>
          <h2 className="display-xl" style={{ color: "#fff", margin: "20px 0 32px", maxWidth: "20ch" }}>
            Seven cities. One studio.
          </h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 0, borderTop: "1px solid rgba(255,255,255,0.18)", borderBottom: "1px solid rgba(255,255,255,0.18)" }}>
            {window.GLI_DATA.CITIES.map((c, i, arr) => (
              <div key={c} style={{ padding: "32px 16px", borderRight: i < arr.length - 1 ? "1px solid rgba(255,255,255,0.12)" : 0, textAlign: "center" }}>
                <div className="mono" style={{ color: "rgba(255,255,255,0.5)" }}>0{i+1}</div>
                <div style={{ fontFamily: "var(--font-serif)", fontSize: 22, color: "#fff", marginTop: 8 }}>{c}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Sister brand */}
      <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
            <div>
              <Eyebrow n="04">Sister brand</Eyebrow>
              <h2 className="display-l" style={{ margin: "20px 0 20px" }}>
                Greenline Yacht Interiors.
              </h2>
              <p className="lede" style={{ marginBottom: 24 }}>
                A separate division of the family — GLYI specialises in superyacht interiors,
                from refit to full new-build, and shares the Jebel Ali campus with us.
                Yacht awards belong to that division; we keep our portfolios distinct.
              </p>
              <a className="btn-ghost">Visit GLYI ↗</a>
            </div>
            <div className="img-wrap" style={{ aspectRatio: "4/3" }}>
              <img src="media/headquarters-02.webp" alt="" />
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { AboutPage });