// Maison Yeya — Home

function Home({ setRoute, onAppointment, onOpenLook, onSave, isSaved, hero }) {
  const heroes = {
    marionettes: { src: "media/media-01-yeya-couture-les-marionettes-capella-01.webp", look: "Les Marionettes · Capella" },
    bridal:      { src: "media/media-02-collection-cover-bridal-scaled.webp",            look: "Shades of White · Bridal Couture Privée" },
    valenciennes:{ src: "media/media-07-yeya-valenciennes-lujaina-01.webp",               look: "Les Valenciennes · Lujaina" },
    runway:      { src: "media/media-10-maison-yeya-july-20230288-2-scaled.webp",         look: "L'Ascension · Runway" }
  };
  const h = heroes[hero] || heroes.marionettes;

  const featured = useMemo(() => [
    BRIDAL_COLLECTIONS[2],       // Utopia
    COUTURE_COLLECTIONS[0],      // Marionettes
    BRIDAL_COLLECTIONS[3],       // Valenciennes
    COUTURE_COLLECTIONS[3]       // Sublimissime
  ], []);

  return (
    <div className="page">
      {/* ────────── HERO ────────── */}
      <section style={{ position: "relative", padding: "20px 56px 0" }}>
        <div style={{
          position: "relative",
          display: "grid",
          gridTemplateColumns: "minmax(0,1fr) minmax(0,520px)",
          gap: 40,
          alignItems: "stretch",
          minHeight: "calc(100vh - 100px)"
        }}>
          {/* Left: editorial image */}
          <div className="img-frame" style={{ position: "relative", overflow: "hidden" }}>
            <img src={h.src} alt={h.look} className="drift"
                 style={{ width: "100%", height: "100%", objectFit: "cover" }}/>

            {/* Hero overlay text */}
            <div style={{
              position: "absolute", left: 40, bottom: 36, right: 40,
              display: "flex", justifyContent: "space-between", alignItems: "flex-end",
              color: "#fff", textShadow: "0 1px 24px rgba(0,0,0,0.35)"
            }}>
              <div>
                <div className="micro" style={{ color: "rgba(255,255,255,0.85)", marginBottom: 10 }}>
                  Featured Look · Couture Privée
                </div>
                <div className="display" style={{ fontSize: 28, color: "#fff" }}>{h.look}</div>
              </div>
              <button className="btn on-dark" onClick={() => setRoute("couture")}>View Collection</button>
            </div>

            <div className="v-text" style={{ position: "absolute", left: 18, top: 28, color: "rgba(255,255,255,0.8)" }}>
              Maison Yeya · Est. 2007 / 2008 ✦ Dubai
            </div>
          </div>

          {/* Right: copy stack */}
          <div style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", padding: "20px 0 32px" }}>
            <div>
              <div className="micro" style={{ marginBottom: 22 }}>
                Bridal · Couture · Private Appointment
              </div>
              <h1 className="display fade-up" style={{
                fontSize: "clamp(64px, 8vw, 132px)",
                margin: 0,
                lineHeight: 0.95,
                letterSpacing: "-0.005em"
              }}>
                Maison<br/>Yeya<span style={{ color: "var(--accent-deep)" }}>.</span>
              </h1>
              <p className="editorial fade-up" style={{
                fontSize: 22, lineHeight: 1.45, color: "var(--ink-soft)", marginTop: 36, maxWidth: 460,
                fontStyle: "italic", animationDelay: "120ms"
              }}>
                Bridal and couture by Yasmine Yeya — by private appointment in&nbsp;Dubai Design District.
              </p>
            </div>

            <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
              <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
                <button className="btn solid" onClick={onAppointment}>Request a VIP Appointment</button>
                <button className="btn" onClick={() => setRoute("bridal")}>Explore Bridal</button>
              </div>

              <div className="hair"></div>

              {/* Press attribution lozenge */}
              <div style={{ display: "flex", gap: 32, alignItems: "flex-start" }}>
                <div style={{ minWidth: 56 }}>
                  <div className="display" style={{ fontSize: 30, lineHeight: 1, color: "var(--ink-mute)" }}>"</div>
                </div>
                <div>
                  <p className="editorial" style={{ fontSize: 19, lineHeight: 1.4, margin: 0, fontStyle: "italic" }}>
                    The bridal wedding designer<br/>that charmed the world.
                  </p>
                  <div className="micro" style={{ marginTop: 12 }}>— Per CNN, attributed by Maison Yeya</div>
                </div>
              </div>

              <div className="hair"></div>

              {/* Quick contact */}
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
                <div>
                  <div className="micro" style={{ marginBottom: 6 }}>Atelier · Mobile</div>
                  <a href={CONTACT.mobileHref} className="num" style={{ fontSize: 17 }}>{CONTACT.mobile}</a>
                </div>
                <div>
                  <div className="micro" style={{ marginBottom: 6 }}>Showroom</div>
                  <a href={CONTACT.landlineHref} className="num" style={{ fontSize: 17 }}>{CONTACT.landline}</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ────────── PRESS MARQUEE ────────── */}
      <section style={{ marginTop: 80 }}>
        <Marquee items={[
          "CNN — The bridal wedding designer that charmed the world",
          "Forbes Middle East — Fashion Innovators 2024",
          "Forbes Middle East — 40 Women Behind Middle Eastern Brands · Rank 16",
          "Harper's Bazaar Arabia",
          "Expo 2020 Dubai — UAE Pavilion Art Program",
          "Scoop Empire — Egyptian Queen of Bridal Couture",
          "Ahram Online · A&E Magazine"
        ]}/>
      </section>

      {/* ────────── EDITORIAL INTRO ────────── */}
      <section style={{ padding: "140px 0 100px", position: "relative" }}>
        <VRail top={140}>The House — Bridal · Couture</VRail>
        <div className="container-narrow">
          <div className="micro" style={{ marginBottom: 32 }}>A note from the Maison</div>
          <p className="display" style={{
            fontSize: "clamp(36px, 4.4vw, 64px)", lineHeight: 1.12, margin: 0, maxWidth: 980,
            letterSpacing: "-0.005em"
          }}>
            From Ismailia on the Suez to Dubai Design District —
            <span style={{ color: "var(--ink-mute)" }}> a French-Egyptian couture house built around bridal storytelling, hand-set embroidery, and the choreography of a private fitting.</span>
          </p>

          <div style={{ display: "flex", gap: 28, marginTop: 56, flexWrap: "wrap", alignItems: "center" }}>
            <button className="link-arrow" onClick={() => setRoute("atelier")}>
              <span>Discover La Maison</span><span className="arr">→</span>
            </button>
            <span style={{ width: 1, height: 16, background: "var(--hair)" }}></span>
            <button className="link-arrow" onClick={() => setRoute("press")}>
              <span>Press & Accolades</span><span className="arr">→</span>
            </button>
          </div>
        </div>
      </section>

      {/* ────────── TWIN COLLECTIONS ────────── */}
      <section style={{ padding: "20px 56px 100px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
          <CollectionCard
            label="Bridal · 06 Collections"
            title="Bridal Couture Privée"
            note="Gharami · Shades of White · Utopia · Les Valenciennes · Les Réfugiées d'Amour · Ta Grâce"
            image="media/media-02-collection-cover-bridal-scaled.webp"
            onOpen={() => setRoute("bridal")}
            tall
          />
          <CollectionCard
            label="Couture · 10 Collections"
            title="Couture Privée"
            note="Les Marionettes · Les Nuits d'Aphrodite · Harmony · Sublimissime · L'Ascension · L'Étrangère"
            image="media/media-05-yeya0975-scaled.webp"
            onOpen={() => setRoute("couture")}
            tall
          />
        </div>
      </section>

      {/* ────────── FEATURED LOOKS ────────── */}
      <section style={{ padding: "60px 0", position: "relative" }}>
        <VRail top={60} side="right">Featured · Atelier Picks · 2025</VRail>
        <div className="container">
          <header style={{
            display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 48
          }}>
            <div>
              <div className="micro" style={{ marginBottom: 14 }}>Selected by Yasmine</div>
              <h2 className="display" style={{ fontSize: 72, margin: 0 }}>Featured Looks</h2>
            </div>
            <div style={{ display: "flex", gap: 24, alignItems: "center" }}>
              <button className="link-arrow" onClick={() => setRoute("bridal")}>
                <span>Bridal</span><span className="arr">→</span>
              </button>
              <button className="link-arrow" onClick={() => setRoute("couture")}>
                <span>Couture</span><span className="arr">→</span>
              </button>
            </div>
          </header>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 28 }}>
            {featured.map((look, i) => (
              <div key={look.id} style={{ paddingTop: i % 2 === 0 ? 0 : 48 }}>
                <LookCard look={look} onOpen={onOpenLook} onSave={onSave} saved={isSaved(look)}/>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ────────── FOUNDER STRIPE ────────── */}
      <section style={{ padding: "120px 0 60px" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 80, alignItems: "center" }}>
            <div className="img-frame" style={{ aspectRatio: "4/5" }}>
              <img src="media/media-03-yasmine-photo-scaled.webp" alt="Yasmine Yeya, Founder"/>
            </div>
            <div>
              <div className="micro" style={{ marginBottom: 22 }}>The Founder · Yasmine Yeya</div>
              <h2 className="display" style={{ fontSize: "clamp(48px, 5.5vw, 80px)", margin: "0 0 30px", lineHeight: 1.04 }}>
                A maison built by hand, look by look.
              </h2>
              <p className="editorial" style={{ fontSize: 20, lineHeight: 1.55, color: "var(--ink-soft)", maxWidth: 540 }}>
                Born in 1981 to an Egyptian father and a French mother, raised in Ismailia on the Suez Canal, Yasmine made her first steps in fashion in 2006 and emerged through MBC's Mission: Fashion in 2008 — the milestone linked to Elie Saab. The Maison's operations moved to Dubai in 2017.
              </p>
              <div style={{ display: "flex", gap: 14, marginTop: 36, flexWrap: "wrap" }}>
                <button className="btn" onClick={() => setRoute("atelier")}>Read the Story</button>
                <button className="btn ghost" onClick={() => setRoute("press")}>Press & Accolades</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ────────── ATELIER & APPOINTMENTS ────────── */}
      <section style={{ padding: "100px 0", background: "var(--paper-2)", marginTop: 100 }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 80, alignItems: "center" }}>
            <div>
              <div className="micro" style={{ marginBottom: 22 }}>L'Atelier · Dubai Design District</div>
              <h2 className="display" style={{ fontSize: "clamp(48px, 5.5vw, 80px)", margin: "0 0 30px", lineHeight: 1.04 }}>
                A private fitting — by appointment only.
              </h2>
              <p className="editorial" style={{ fontSize: 20, lineHeight: 1.55, color: "var(--ink-soft)", maxWidth: 520 }}>
                Each piece is hand-made to measure at the atelier in Building 4A, d3. We work by quotation and consultation; the showroom is open by appointment.
              </p>

              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 36, marginTop: 48 }}>
                <div>
                  <div className="micro" style={{ marginBottom: 8 }}>Address</div>
                  <p className="editorial" style={{ margin: 0, fontSize: 17, lineHeight: 1.5 }}>
                    Office 203A, Building 4A<br/>
                    Dubai Design District<br/>
                    United Arab Emirates
                  </p>
                </div>
                <div>
                  <div className="micro" style={{ marginBottom: 8 }}>Hours</div>
                  <p className="editorial" style={{ margin: 0, fontSize: 17, lineHeight: 1.5 }}>
                    10:00 – 18:00<br/>
                    Closed Fridays & UAE public holidays
                  </p>
                </div>
              </div>

              <button className="btn solid" style={{ marginTop: 48 }} onClick={onAppointment}>
                Request a VIP Appointment
              </button>
            </div>

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

function CollectionCard({ label, title, note, image, onOpen, tall }) {
  const [hover, setHover] = useState(false);
  return (
    <article onClick={onOpen}
             onMouseEnter={() => setHover(true)}
             onMouseLeave={() => setHover(false)}
             style={{ cursor: "pointer", position: "relative" }}>
      <div className="img-frame" style={{ aspectRatio: tall ? "5/7" : "4/5", position: "relative", overflow: "hidden" }}>
        <img src={image} alt={title}
             style={{ width: "100%", height: "100%", objectFit: "cover",
                      transform: hover ? "scale(1.04)" : "scale(1)",
                      transition: "transform 1200ms cubic-bezier(0.22, 1, 0.36, 1)" }}/>
        <div style={{ position: "absolute", inset: 0,
                      background: "linear-gradient(to top, rgba(20,17,15,0.7), rgba(20,17,15,0.0) 55%)" }}></div>

        <div style={{
          position: "absolute", left: 32, right: 32, bottom: 28,
          color: "#fff",
          display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24
        }}>
          <div>
            <div className="micro" style={{ color: "rgba(255,255,255,0.85)", marginBottom: 14 }}>{label}</div>
            <h3 className="display" style={{ fontSize: "clamp(42px, 4vw, 64px)", margin: 0, color: "#fff", lineHeight: 1 }}>
              {title}
            </h3>
            <p className="editorial" style={{
              fontSize: 15, lineHeight: 1.5, color: "rgba(255,255,255,0.85)",
              marginTop: 18, marginBottom: 0, maxWidth: 420
            }}>
              {note}
            </p>
          </div>
          <div className="label" style={{
            border: "1px solid rgba(255,255,255,0.5)", padding: "12px 18px",
            color: "#fff", whiteSpace: "nowrap",
            background: hover ? "#fff" : "transparent",
            color: hover ? "var(--ink)" : "#fff",
            transition: "all 220ms ease"
          }}>
            Enter →
          </div>
        </div>
      </div>
    </article>
  );
}

window.Home = Home;