// Maison Yeya — La Maison (founder + atelier)

function MaisonPage({ setRoute, onAppointment }) {
  return (
    <div className="page">
      {/* INTRO: portrait + statement */}
      <section style={{ padding: "60px 56px 100px" }}>
        <div style={{
          display: "grid", gridTemplateColumns: "0.95fr 1.05fr", gap: 56, alignItems: "stretch", minHeight: "calc(100vh - 140px)"
        }}>
          <div className="img-frame" style={{ position: "relative" }}>
            <img src="media/media-03-yasmine-photo-scaled.webp" alt="Yasmine Yeya"
                 style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
            <div className="v-text" style={{ position: "absolute", left: 20, top: 28, color: "rgba(255,255,255,0.85)" }}>
              The Founder · Yasmine Yeya · Photographed 2023
            </div>
          </div>

          <div style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", padding: "20px 0" }}>
            <div>
              <div className="micro" style={{ marginBottom: 24 }}>La Maison · Yasmine Yeya · L'Atelier</div>
              <h1 className="display" style={{ fontSize: "clamp(64px, 8vw, 128px)", margin: 0, lineHeight: 0.95 }}>
                Yasmine<br/>Yeya<span style={{ color: "var(--accent-deep)" }}>.</span>
              </h1>
              <p className="editorial" style={{
                fontSize: 22, lineHeight: 1.5, color: "var(--ink-soft)", marginTop: 32, maxWidth: 480, fontStyle: "italic"
              }}>
                French-Egyptian designer. Couturière. Born 1981. Worked first in Cairo, settled in Dubai in 2017.
              </p>
            </div>

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 36, marginTop: 60 }}>
              <Stat n="2006" label="First steps in fashion"/>
              <Stat n="2008" label="Mission: Fashion milestone"/>
              <Stat n="2017" label="Moved to Dubai"/>
              <Stat n="d3" label="Atelier · Building 4A"/>
            </div>
          </div>
        </div>
      </section>

      {/* THE STORY — long-form */}
      <section style={{ padding: "60px 0 100px", position: "relative" }}>
        <VRail top={60}>The Story · Ismailia to Dubai</VRail>
        <div className="container-narrow">
          <div className="micro" style={{ marginBottom: 28 }}>The Story</div>
          <h2 className="display" style={{ fontSize: "clamp(40px, 4.4vw, 64px)", margin: 0, lineHeight: 1.12 }}>
            <em style={{ fontFamily: "var(--serif-display)", fontStyle: "normal" }}>A childhood in Ismailia</em>, on the Suez Canal — between an Egyptian father and a French mother, between two languages and two ways of dressing a woman.
          </h2>

          <div style={{
            columnCount: 2, columnGap: 56, marginTop: 56,
            fontFamily: "var(--serif-body)", fontSize: 18, lineHeight: 1.6, color: "var(--ink-soft)"
          }}>
            <p style={{ marginTop: 0 }}>
              Yasmine Yeya made her first steps in fashion in 2006. The founder page traces the major turning point to MBC's <em>Mission: Fashion</em> in 2008 — a moment linked to Elie Saab. She set up the couture and bridal house in Cairo before relocating operations to Dubai in 2017 to serve regional clientele.
            </p>
            <p>
              The Maison's character is unmistakable: hand-set embroidery and crystal latticework, sculpted volume disciplined by clean architecture, and a quiet preference for the second look — the reception dress, the departure piece, the moment after the ceremony.
            </p>
            <p>
              Forbes Middle East listed Maison Yeya in <em>Fashion Innovators 2024</em>, and ranked Yasmine 16 in the 2021 list of 40 Women Behind Middle Eastern Brands. The maison was selected for the UAE Pavilion Art Program during Expo 2020 Dubai. CNN has called her <em>"the bridal wedding designer that charmed the world."</em>
            </p>
            <p>
              Today the atelier is in Dubai Design District. The work is appointment-only — every gown hand-made to measure, every quotation given after consultation.
            </p>
          </div>
        </div>
      </section>

      {/* TIMELINE */}
      <section style={{ padding: "100px 0", background: "var(--paper-2)" }}>
        <div className="container">
          <div className="micro" style={{ marginBottom: 22 }}>Maison Chronology</div>
          <h2 className="display" style={{ fontSize: "clamp(48px, 5vw, 80px)", margin: "0 0 64px", lineHeight: 1.04 }}>
            A house, year by year.
          </h2>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 32 }}>
            {TIMELINE.map((t, i) => (
              <div key={t.year} style={{
                borderTop: "1px solid var(--ink)",
                paddingTop: 24,
                position: "relative"
              }}>
                <div className="num" style={{ fontSize: 32, fontWeight: 300, letterSpacing: 0, marginBottom: 18, fontFamily: "var(--serif-display)" }}>
                  {t.year}
                </div>
                <div className="label" style={{ marginBottom: 14 }}>{t.title}</div>
                <p className="editorial" style={{ fontSize: 15, lineHeight: 1.55, color: "var(--ink-soft)", margin: 0 }}>
                  {t.body}
                </p>
              </div>
            ))}
          </div>

          <p className="micro" style={{ marginTop: 56, color: "var(--ink-mute)", maxWidth: 720 }}>
            Note · The maison's official site does not state a single brand founding year. Forbes Middle East 2021 cites establishment 2008; Forbes Middle East 2024 cites 2007. Both are presented with attribution.
          </p>
        </div>
      </section>

      {/* THE ATELIER */}
      <section style={{ padding: "120px 0" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 80, alignItems: "center" }}>
            <div>
              <div className="micro" style={{ marginBottom: 24 }}>L'Atelier</div>
              <h2 className="display" style={{ fontSize: "clamp(48px, 5.5vw, 80px)", margin: 0, lineHeight: 1.04 }}>
                Where the hand still leads.
              </h2>
              <p className="editorial" style={{ fontSize: 20, lineHeight: 1.55, color: "var(--ink-soft)", marginTop: 32, maxWidth: 540 }}>
                The atelier in Building 4A, Dubai Design District is where the maison's bridal and couture pieces are drawn, draped, cut, and embroidered. We work to measure, by quotation, by appointment.
              </p>

              <ul style={{ listStyle: "none", margin: "48px 0 0", padding: 0, display: "flex", flexDirection: "column", gap: 22 }}>
                {[
                  ["Consultation", "An hour with Yasmine and the team — silhouette, fabric, the brief of the day."],
                  ["Sketch & Quotation", "A signed sketch and a private quotation, prepared after consultation."],
                  ["Fittings", "Hand-cut toiles, hand-set embellishment, fittings staged at the atelier."],
                  ["Final Piece", "Hand-delivered. The gown for the day, and often a second look for the reception."]
                ].map(([k, v], i) => (
                  <li key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 24, paddingBottom: 18, borderBottom: "1px solid var(--hair-soft)" }}>
                    <div className="num" style={{ fontFamily: "var(--serif-display)", fontSize: 22 }}>0{i+1}</div>
                    <div>
                      <div className="label" style={{ marginBottom: 6 }}>{k}</div>
                      <p className="editorial" style={{ margin: 0, color: "var(--ink-soft)", fontSize: 16, lineHeight: 1.5 }}>{v}</p>
                    </div>
                  </li>
                ))}
              </ul>

              <p className="micro" style={{ marginTop: 24, color: "var(--ink-mute)" }}>
                Process indicative; specific lead times and stages confirmed at consultation.
              </p>
            </div>

            <div className="img-frame" style={{ aspectRatio: "4/5" }}>
              <img src="media/media-10-maison-yeya-july-20230288-2-scaled.webp" alt="Atelier"/>
            </div>
          </div>
        </div>
      </section>

      {/* QUOTE STRIPE */}
      <section style={{ padding: "100px 0", background: "#14110f", color: "var(--paper)" }}>
        <div className="container-narrow" style={{ textAlign: "center" }}>
          <div className="micro" style={{ color: "rgba(244,239,231,0.6)", marginBottom: 24 }}>From the press</div>
          <p className="display" style={{ fontSize: "clamp(36px, 4.4vw, 64px)", lineHeight: 1.18, margin: 0, color: "var(--paper)" }}>
            "The bridal wedding designer that charmed the world."
          </p>
          <div className="micro" style={{ marginTop: 32, color: "rgba(244,239,231,0.6)" }}>
            — Attributed by Maison Yeya to CNN
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding: "100px 0 20px" }}>
        <div className="container" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 28 }}>
          <h3 className="display" style={{ fontSize: "clamp(36px, 4vw, 56px)", margin: 0, maxWidth: 680 }}>
            Visit the atelier in Dubai Design District.
          </h3>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
            <button className="btn solid" onClick={onAppointment}>Request Appointment</button>
            <button className="btn" onClick={() => setRoute("contact")}>Contact the Maison</button>
          </div>
        </div>
      </section>
    </div>
  );
}

function Stat({ n, label }) {
  return (
    <div style={{ borderTop: "1px solid var(--ink)", paddingTop: 16 }}>
      <div className="num" style={{ fontFamily: "var(--serif-display)", fontSize: 40, lineHeight: 1, marginBottom: 12 }}>{n}</div>
      <div className="micro">{label}</div>
    </div>
  );
}

window.MaisonPage = MaisonPage;