// home.jsx — Home page for Version Française Pour Elle

function VFMonogram({ size = 56, color = "var(--champagne-gold)" }) {
  // Recreated from the reception desk monogram — a V|F mark inside a circle.
  return (
    <svg width={size} height={size} viewBox="0 0 80 80" aria-hidden style={{ display: "block" }}>
      <circle cx="40" cy="40" r="37" fill="none" stroke={color} strokeWidth="1.4" />
      <path d="M19 24 L34 56 L40 56" fill="none" stroke={color} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M40 24 L40 56 M40 24 L58 24 M40 38 L54 38" fill="none" stroke={color} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function HomePage({ lang, setRoute, hero }) {
  const t = window.VFPE_DATA.t[lang];
  const D = window.VFPE_DATA;

  return (
    <main>
      {/* ── Hero ─────────────────────────────────────────────── */}
      <Hero lang={lang} variant={hero} />

      {/* ── Trust strip ─────────────────────────────────────── */}
      <TrustStrip lang={lang} />

      {/* ── Signature services ──────────────────────────────── */}
      <SignatureServices lang={lang} setRoute={setRoute} />

      {/* ── About / atmosphere ──────────────────────────────── */}
      <AtmosphereStrip lang={lang} />

      {/* ── Brand strip ─────────────────────────────────────── */}
      <BrandStrip lang={lang} />

      {/* ── Team teaser ─────────────────────────────────────── */}
      <TeamTeaser lang={lang} />

      {/* ── Gallery teaser ──────────────────────────────────── */}
      <GalleryTeaser lang={lang} />

      {/* ── Review snippet ──────────────────────────────────── */}
      <ReviewSnippet lang={lang} />

      {/* ── Closer / book cta ───────────────────────────────── */}
      <CloserBand lang={lang} />
    </main>
  );
}

// ── HERO ─────────────────────────────────────────────────────────

function Hero({ lang, variant = "split" }) {
  const t = window.VFPE_DATA.t[lang];
  const head = lang === "fr"
    ? { line1: "Beauté",   line2: <em>française</em>, line3: ", exclusivement pour elles." }
    : { line1: "Refined",  line2: <em>French</em>,    line3: " beauty, only for ladies." };
  const sub = lang === "fr"
    ? "Une villa privée sur Al Wasl Road. Cinq stylistes seniors, deux étages, une seule règle : prendre le temps qu’il faut."
    : "A private villa on Al Wasl Road. Five senior stylists, two floors, one rule: take the time it takes.";

  if (variant === "centered") return <HeroCentered head={head} sub={sub} lang={lang} />;
  if (variant === "fullbleed") return <HeroFullBleed head={head} sub={sub} lang={lang} />;
  return <HeroSplit head={head} sub={sub} lang={lang} />;
}

function HeroSplit({ head, sub, lang }) {
  const t = window.VFPE_DATA.t[lang];
  return (
    <section className="hero-split" data-screen-label="Home / Hero">
      <div className="container hero-split-grid">
        <div className="hero-copy">
          <Reveal>
            <Eyebrow>
              {lang === "fr"
                ? <>Salon de Beauté<span className="dot" />Al Wasl Road<span className="dot" />Dubaï</>
                : <>Beauty Salon<span className="dot" />Al Wasl Road<span className="dot" />Dubai</>}
            </Eyebrow>
            <h1 className="h1 display" style={{ marginTop: 28, marginBottom: 0 }}>
              {head.line1} <span style={{ fontStyle: "italic", fontWeight: 500 }}>{head.line2.props ? head.line2 : <em>{head.line2}</em>}</span>{head.line3}
            </h1>
            <p className="lead" style={{ marginTop: 28 }}>{sub}</p>
            <div className="hero-ctas">
              <BookButton lang={lang} />
              <WhatsAppButton lang={lang} variant="ghost" />
            </div>
            <div className="hero-meta">
              <TrustChip lang={lang} />
              <span className="hero-meta-since">
                <span className="micro">{lang === "fr" ? "Maison fondée" : "House founded"}</span>
                <span className="display" style={{ fontSize: 26, lineHeight: 1, marginTop: 4 }}>2006</span>
              </span>
              <span className="hero-meta-since">
                <span className="micro">{lang === "fr" ? "Pour Elle ouvert" : "Pour Elle opened"}</span>
                <span className="display" style={{ fontSize: 26, lineHeight: 1, marginTop: 4 }}>2023</span>
              </span>
            </div>
          </Reveal>
        </div>
        <div className="hero-art">
          <Reveal delay={150}>
            <div className="hero-art-main">
              <img src="media/images/fresha-gallery-01.webp" alt="Reception lounge at Version Française Pour Elle, Al Wasl Road" />
              <div className="hero-art-tag">
                <span className="micro" style={{ color: "var(--champagne-gold)" }}>Villa 873</span>
                <span style={{ fontSize: 11, color: "var(--cream)" }}>Al Wasl · Al Safa 2</span>
              </div>
            </div>
            <div className="hero-art-side">
              <img src="media/images/fresha-gallery-04.webp" alt="Kérastase shelf" />
            </div>
            <div className="hero-art-mono">
              <VFMonogram size={64} />
            </div>
          </Reveal>
        </div>
      </div>

      <style>{`
        .hero-split { padding: clamp(48px, 8vw, 96px) 0 clamp(64px, 9vw, 120px); }
        .hero-split-grid {
          display: grid;
          grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
          gap: clamp(28px, 5vw, 80px);
          align-items: center;
        }
        .hero-copy { padding-top: 8px; }
        .hero-ctas { display: flex; gap: 12px; margin-top: 40px; flex-wrap: wrap; }
        .hero-meta {
          display: flex;
          align-items: center;
          gap: 32px;
          margin-top: 56px;
          padding-top: 28px;
          border-top: 1px solid var(--gold-hairline);
          flex-wrap: wrap;
        }
        .hero-meta-since { display: inline-flex; flex-direction: column; }
        .hero-art {
          position: relative;
          display: grid;
          grid-template-columns: 1fr 0.5fr;
          grid-template-rows: auto auto;
          gap: 16px;
        }
        .hero-art-main {
          grid-column: 1 / -1;
          aspect-ratio: 16 / 11;
          border: 1px solid var(--gold-hairline);
          overflow: hidden;
          position: relative;
          background: var(--blush-nude);
        }
        .hero-art-main img { width: 100%; height: 100%; object-fit: cover; }
        .hero-art-tag {
          position: absolute; bottom: 14px; left: 14px;
          background: rgba(28,26,24,0.78);
          color: var(--cream);
          padding: 10px 14px;
          display: flex; flex-direction: column; gap: 2px;
          backdrop-filter: blur(8px);
        }
        .hero-art-side {
          aspect-ratio: 1 / 1;
          border: 1px solid var(--gold-hairline);
          overflow: hidden;
          background: var(--blush-nude);
        }
        .hero-art-side img { width: 100%; height: 100%; object-fit: cover; }
        .hero-art-mono {
          aspect-ratio: 1 / 1;
          background: var(--cream);
          border: 1px solid var(--gold-hairline);
          display: flex; align-items: center; justify-content: center;
        }
        @media (max-width: 960px) {
          .hero-split-grid { grid-template-columns: 1fr; }
          .hero-art { grid-template-columns: 1fr 1fr; }
        }
      `}</style>
    </section>
  );
}

function HeroCentered({ head, sub, lang }) {
  return (
    <section className="hero-centered" data-screen-label="Home / Hero">
      <div className="container" style={{ textAlign: "center", paddingTop: "clamp(64px, 10vw, 120px)", paddingBottom: "clamp(40px, 7vw, 80px)" }}>
        <Reveal>
          <div style={{ display: "flex", justifyContent: "center", marginBottom: 24 }}><VFMonogram size={72} /></div>
          <Eyebrow align="center">
            {lang === "fr" ? <>Salon de Beauté<span className="dot" />Pour Elle</> : <>Beauty Salon<span className="dot" />For Ladies Only</>}
          </Eyebrow>
          <h1 className="h1 display" style={{ marginTop: 24, marginBottom: 0, maxWidth: 16 + "ch", marginLeft: "auto", marginRight: "auto" }}>
            {head.line1} <em style={{ fontStyle: "italic", fontWeight: 500 }}>{head.line2.props ? head.line2.props.children : head.line2}</em>{head.line3}
          </h1>
          <p className="lead" style={{ marginTop: 24, marginLeft: "auto", marginRight: "auto" }}>{sub}</p>
          <div style={{ display: "flex", justifyContent: "center", gap: 12, marginTop: 36, flexWrap: "wrap" }}>
            <BookButton lang={lang} />
            <WhatsAppButton lang={lang} variant="ghost" />
          </div>
          <div style={{ marginTop: 28, display: "flex", justifyContent: "center" }}>
            <TrustChip lang={lang} />
          </div>
        </Reveal>
      </div>
      <div className="container" style={{ paddingBottom: "clamp(48px, 8vw, 96px)" }}>
        <Reveal delay={150}>
          <div style={{ overflow: "hidden", border: "1px solid var(--gold-hairline)", aspectRatio: "21 / 9" }}>
            <img src="media/images/fresha-gallery-01.webp" alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function HeroFullBleed({ head, sub, lang }) {
  return (
    <section className="hero-fb" data-screen-label="Home / Hero">
      <img src="media/images/fresha-gallery-03.webp" alt="" className="hero-fb-bg" />
      <div className="hero-fb-scrim" />
      <div className="container hero-fb-content">
        <Reveal>
          <Eyebrow><span style={{ color: "var(--champagne-gold)" }}>{lang === "fr" ? "Villa 873 · Al Wasl Road" : "Villa 873 · Al Wasl Road"}</span></Eyebrow>
          <h1 className="h1 display" style={{ marginTop: 24, color: "var(--cream)", maxWidth: 18 + "ch" }}>
            {head.line1} <em style={{ fontStyle: "italic" }}>{head.line2.props ? head.line2.props.children : head.line2}</em>{head.line3}
          </h1>
          <p className="lead" style={{ marginTop: 24, color: "rgba(251,248,243,0.85)", maxWidth: 50 + "ch" }}>{sub}</p>
          <div style={{ display: "flex", gap: 12, marginTop: 36, flexWrap: "wrap" }}>
            <a className="btn btn-gold" href={window.VFPE_DATA.links.fresha} target="_blank" rel="noopener" style={{ background: "var(--champagne-gold)", color: "var(--noir)", borderColor: "var(--champagne-gold)" }}>
              {window.VFPE_DATA.t[lang].booknow} <span className="arrow">→</span>
            </a>
            <a className="btn btn-ghost" href={window.VFPE_DATA.links.whatsapp} target="_blank" rel="noopener" style={{ color: "var(--cream)", borderColor: "rgba(251,248,243,0.4)" }}>
              <WAIcon /> WhatsApp
            </a>
          </div>
        </Reveal>
      </div>
      <style>{`
        .hero-fb { position: relative; min-height: 720px; display: flex; align-items: center; overflow: hidden; margin-top: -1px; }
        .hero-fb-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
        .hero-fb-scrim { position: absolute; inset: 0; background: linear-gradient(110deg, rgba(28,26,24,0.78) 0%, rgba(28,26,24,0.55) 45%, rgba(28,26,24,0.25) 100%); }
        .hero-fb-content { position: relative; z-index: 1; padding: 96px 0; }
        @media (max-width: 720px) { .hero-fb { min-height: 560px; } .hero-fb-scrim { background: linear-gradient(180deg, rgba(28,26,24,0.65) 0%, rgba(28,26,24,0.75) 100%); } }
      `}</style>
    </section>
  );
}

// ── TRUST STRIP ──────────────────────────────────────────────────

function TrustStrip({ lang }) {
  const t = window.VFPE_DATA.t[lang];
  const items = [
    { stat: lang === "fr" ? "5,0" : "5.0", label: "Fresha · 330+ " + (lang === "fr" ? "avis" : "reviews"), icon: "stars" },
    { stat: "2006", label: lang === "fr" ? "expertise française" : "French expertise" },
    { stat: lang === "fr" ? "Pour Elles" : "Ladies Only", label: lang === "fr" ? "Villa privée" : "Private villa" },
    { stat: "Al Wasl", label: "Al Safa 2 · Dubai" },
  ];
  return (
    <section className="trust" data-screen-label="Home / Trust">
      <div className="container">
        <Reveal>
          <div className="trust-grid">
            {items.map((it, i) => (
              <div key={i} className="trust-cell">
                {it.icon === "stars"
                  ? <div className="trust-stars" aria-hidden>★★★★★</div>
                  : <div className="trust-bullet" aria-hidden />}
                <div className="trust-stat display">{it.stat}</div>
                <div className="trust-label">{it.label}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
      <style>{`
        .trust { background: var(--cream); border-top: 1px solid var(--gold-hairline); border-bottom: 1px solid var(--gold-hairline); padding: 56px 0; }
        .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
        .trust-cell { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 20px; position: relative; }
        .trust-cell + .trust-cell::before {
          content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px;
          background: var(--gold-hairline);
        }
        .trust-stat { font-size: 40px; line-height: 1; color: var(--noir); }
        .trust-label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-50); margin-top: 12px; }
        .trust-stars { color: var(--champagne-gold); letter-spacing: 0.1em; font-size: 18px; margin-bottom: 8px; }
        .trust-bullet { width: 6px; height: 6px; background: var(--champagne-gold); border-radius: 50%; margin-bottom: 18px; }
        @media (max-width: 720px) {
          .trust-grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
          .trust-cell + .trust-cell::before { display: none; }
          .trust-cell:nth-child(odd)::before { display: none; }
        }
      `}</style>
    </section>
  );
}

// ── SIGNATURE SERVICES ───────────────────────────────────────────

function SignatureServices({ lang, setRoute }) {
  const D = window.VFPE_DATA;
  const t = D.t[lang];
  return (
    <section className="section" data-screen-label="Home / Signature">
      <div className="container">
        <Reveal>
          <div className="sec-head">
            <div>
              <Eyebrow>{lang === "fr" ? "Signatures de la Maison" : "House Signatures"}</Eyebrow>
              <h2 className="h2 display" style={{ marginTop: 12, marginBottom: 0 }}>
                {lang === "fr" ? <>Les rituels <em style={{ fontStyle: "italic" }}>les plus demandés</em>.</>
                              : <>Our <em style={{ fontStyle: "italic" }}>most-requested</em> rituals.</>}
              </h2>
            </div>
            <a href="#/services" onClick={(e) => { e.preventDefault(); setRoute("services"); }}
               className="sec-link">{lang === "fr" ? "Voir toutes les prestations" : "See full menu"} <span className="arrow">→</span></a>
          </div>
        </Reveal>

        <div className="sig-grid">
          {D.signatures.map((s, i) => (
            <Reveal key={s.id} delay={i * 80}>
              <article className="sig-card" onClick={() => setRoute("services")}>
                <div className="sig-img">
                  <img src={s.img} alt={L({ en: s.en, fr: s.fr }, lang)} />
                  <div className="sig-img-tag">
                    {s.signature && <span className="sig-signature">{lang === "fr" ? "Signature" : "Signature"}</span>}
                  </div>
                </div>
                <div className="sig-body">
                  <h3 className="h4 display" style={{ margin: 0 }}>{L({ en: s.en, fr: s.fr }, lang)}</h3>
                  <div className="sig-price tabular">
                    {s.onRequest
                      ? <span style={{ color: "var(--ink-50)" }}>{t.priceOnRequest}</span>
                      : s.from
                        ? <><span className="micro">{t.from}</span> <span>{t.aed} {s.from}</span></>
                        : <span>{t.aed} {s.price}</span>}
                  </div>
                </div>
              </article>
            </Reveal>
          ))}
        </div>
      </div>

      <style>{`
        .sec-head {
          display: flex;
          justify-content: space-between;
          align-items: end;
          gap: 32px;
          padding-bottom: 56px;
          border-bottom: 1px solid var(--gold-hairline);
          margin-bottom: 56px;
        }
        .sec-link {
          font-size: 12px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          font-weight: 500;
          color: var(--noir);
          border-bottom: 1px solid var(--champagne-gold);
          padding-bottom: 4px;
          white-space: nowrap;
        }
        .sec-link:hover { color: var(--champagne-gold); }
        .sig-grid {
          display: grid;
          grid-template-columns: 1.4fr 1fr 1fr;
          grid-template-rows: auto auto;
          gap: 16px;
        }
        .sig-grid > div:nth-child(1) { grid-row: span 2; }
        .sig-grid > div:nth-child(5) { grid-column: span 2; }
        .sig-card {
          background: var(--cream);
          border: 1px solid var(--gold-faint);
          overflow: hidden;
          cursor: pointer;
          display: flex;
          flex-direction: column;
          height: 100%;
          transition: border-color 200ms ease, transform 200ms ease;
        }
        .sig-card:hover { border-color: var(--champagne-gold); }
        .sig-card:hover .sig-img img { transform: scale(1.03); }
        .sig-img {
          position: relative;
          flex: 1;
          aspect-ratio: 4 / 3;
          overflow: hidden;
          background: var(--blush-nude);
        }
        .sig-grid > div:nth-child(1) .sig-img { aspect-ratio: 4 / 5; }
        .sig-grid > div:nth-child(5) .sig-img { aspect-ratio: 16 / 7; }
        .sig-img img {
          width: 100%; height: 100%; object-fit: cover;
          transition: transform 600ms ease;
        }
        .sig-img-tag {
          position: absolute; top: 14px; left: 14px;
          display: flex; gap: 6px;
        }
        .sig-signature {
          background: var(--champagne-gold);
          color: var(--noir);
          padding: 4px 10px;
          font-size: 9.5px;
          letter-spacing: 0.22em;
          text-transform: uppercase;
          font-weight: 600;
        }
        .sig-body {
          padding: 22px 22px 24px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 16px;
          border-top: 1px solid var(--gold-faint);
        }
        .sig-price { font-size: 15px; font-weight: 500; display: inline-flex; gap: 6px; align-items: baseline; }
        @media (max-width: 880px) {
          .sig-grid { grid-template-columns: 1fr 1fr; }
          .sig-grid > div:nth-child(1) { grid-row: auto; }
          .sig-grid > div:nth-child(5) { grid-column: span 2; }
        }
        @media (max-width: 560px) {
          .sec-head { flex-direction: column; align-items: flex-start; }
          .sig-grid { grid-template-columns: 1fr; }
          .sig-grid > div:nth-child(5) { grid-column: auto; }
        }
      `}</style>
    </section>
  );
}

// ── ATMOSPHERE STRIP (about teaser) ──────────────────────────────

function AtmosphereStrip({ lang }) {
  return (
    <section className="atmos" data-screen-label="Home / Atmosphere">
      <div className="container atmos-grid">
        <Reveal>
          <div className="atmos-img-stack">
            <img src="media/images/fresha-gallery-05.webp" alt="" className="atmos-img-main" />
            <img src="media/images/fresha-gallery-08.webp" alt="" className="atmos-img-side" />
          </div>
        </Reveal>
        <Reveal delay={150}>
          <div className="atmos-copy">
            <Eyebrow>{lang === "fr" ? "La Maison" : "The House"}</Eyebrow>
            <h2 className="h2 display" style={{ marginTop: 16, marginBottom: 24 }}>
              {lang === "fr"
                ? <>Une <em>villa</em> sur Al Wasl,<br/> pas un salon de plus.</>
                : <>A private <em>villa</em>, <br/>not another salon.</>}
            </h2>
            <p style={{ color: "var(--ink-70)", fontSize: 16, lineHeight: 1.7, maxWidth: 46 + "ch" }}>
              {lang === "fr"
                ? "Fondée à Dubaï en 2006 par Alex et Karine, la maison Version Française a ouvert en 2023 son adresse la plus précieuse : un cadre exclusivement féminin, pensé pour qu’on s’y sente comme à la maison — café, calme, lumière douce, et l’expertise française au bout des doigts."
                : "Founded in Dubai in 2006 by Alex and Karine, the Version Française house opened its most precious address in 2023: a sanctuary exclusively for ladies, designed to feel like home — coffee, quiet, soft light, and French expertise at your fingertips."}
            </p>
            <div className="atmos-meta">
              <div className="atmos-meta-cell">
                <div className="micro">{lang === "fr" ? "Adresse" : "Address"}</div>
                <div style={{ marginTop: 6, fontSize: 14 }}>Villa 873, Al Wasl Road<br/>Al Safa 2, Dubai</div>
              </div>
              <div className="atmos-meta-cell">
                <div className="micro">{lang === "fr" ? "Ouverte" : "Open"}</div>
                <div style={{ marginTop: 6, fontSize: 14 }}>
                  {lang === "fr" ? "Lun — Sam · 9h30 → 19h30" : "Mon — Sat · 9:30am → 7:30pm"}<br/>
                  {lang === "fr" ? "Dim · 9h30 → 14h30" : "Sun · 9:30am → 2:30pm"}
                </div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
      <style>{`
        .atmos { padding-top: clamp(56px, 9vw, 120px); padding-bottom: clamp(56px, 9vw, 120px); }
        .atmos-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
        .atmos-img-stack { position: relative; aspect-ratio: 4 / 5; }
        .atmos-img-main { width: 88%; height: 88%; object-fit: cover; border: 1px solid var(--gold-hairline); position: absolute; top: 0; left: 0; }
        .atmos-img-side { width: 50%; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid var(--gold-hairline); position: absolute; right: 0; bottom: 0; box-shadow: -16px -16px 0 var(--ivory); }
        .atmos-copy { padding-left: clamp(0px, 2vw, 24px); }
        .atmos-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--gold-hairline); }
        .atmos-meta-cell { line-height: 1.6; }
        @media (max-width: 880px) {
          .atmos-grid { grid-template-columns: 1fr; }
          .atmos-img-stack { aspect-ratio: 4 / 3; }
        }
      `}</style>
    </section>
  );
}

// ── BRAND STRIP ──────────────────────────────────────────────────

function BrandStrip({ lang }) {
  const brands = window.VFPE_DATA.brands;
  return (
    <section className="brands" data-screen-label="Home / Brands">
      <div className="container">
        <Reveal>
          <div style={{ textAlign: "center", marginBottom: 36 }}>
            <Eyebrow align="center">{lang === "fr" ? "Maisons partenaires" : "House Partners"}</Eyebrow>
          </div>
          <div className="brand-row">
            {brands.map((b, i) => (
              <div className="brand-mark" key={i}>{b}</div>
            ))}
          </div>
        </Reveal>
      </div>
      <style>{`
        .brands { padding: clamp(48px, 7vw, 88px) 0; background: var(--cream); border-top: 1px solid var(--gold-hairline); border-bottom: 1px solid var(--gold-hairline); }
        .brand-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; align-items: center; }
        .brand-mark {
          font-family: var(--display);
          font-size: clamp(18px, 2vw, 26px);
          font-style: italic;
          text-align: center;
          color: var(--noir);
          padding: 24px 8px;
          letter-spacing: 0.01em;
          border-left: 1px solid var(--gold-faint);
        }
        .brand-mark:first-child { border-left: 0; }
        @media (max-width: 720px) {
          .brand-row { grid-template-columns: repeat(2, 1fr); row-gap: 0; }
          .brand-mark { border-left: 0; border-top: 1px solid var(--gold-faint); padding: 16px 0; font-size: 18px; }
          .brand-mark:first-child, .brand-mark:nth-child(2) { border-top: 0; }
        }
      `}</style>
    </section>
  );
}

// ── TEAM TEASER ──────────────────────────────────────────────────

function TeamTeaser({ lang }) {
  const team = window.VFPE_DATA.team.slice(0, 4);
  // Tier-B portrait mood — we don't have real headshots, so we use abstract
  // wood-toned panels (matching the actual reception wood paneling) with the
  // stylist's initial set in display serif. Honest about what's available.
  return (
    <section className="section" data-screen-label="Home / Team">
      <div className="container">
        <Reveal>
          <div className="sec-head">
            <div>
              <Eyebrow>{lang === "fr" ? "L'équipe" : "The Team"}</Eyebrow>
              <h2 className="h2 display" style={{ marginTop: 12, marginBottom: 0 }}>
                {lang === "fr" ? <>Des seniors, <em>tous notés 5,0</em>.</> : <>Senior stylists, <em>all rated 5.0</em>.</>}
              </h2>
            </div>
            <a href="#/about" className="sec-link"
               onClick={(e) => { e.preventDefault(); window.__VFPE_setRoute?.("about"); }}>
              {lang === "fr" ? "Découvrir l'équipe" : "Meet the team"} <span className="arrow">→</span>
            </a>
          </div>
        </Reveal>

        <div className="team-row">
          {team.map((m, i) => (
            <Reveal key={m.name} delay={i * 80}>
              <article className="team-card">
                <div className={cx("team-portrait", `team-portrait--${m.tone}`)}>
                  <div className="team-initial">{m.name[0]}</div>
                  <div className="team-rating">
                    <span style={{ color: "var(--champagne-gold)", fontSize: 11, letterSpacing: "0.1em" }}>★★★★★</span>
                    <span className="tabular" style={{ fontSize: 11, color: "var(--ink-50)" }}>{lang === "fr" ? "5,0" : "5.0"}</span>
                  </div>
                </div>
                <div style={{ padding: "20px 4px 0" }}>
                  <h3 className="display" style={{ fontSize: 22, margin: 0, lineHeight: 1.1 }}>{m.name}</h3>
                  <div style={{ marginTop: 6, fontSize: 12, letterSpacing: "0.08em", color: "var(--ink-50)", textTransform: "uppercase" }}>{L(m.role, lang)}</div>
                </div>
              </article>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        .team-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
        .team-card { background: transparent; }
        .team-portrait {
          aspect-ratio: 4 / 5;
          position: relative;
          overflow: hidden;
          border: 1px solid var(--gold-hairline);
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .team-portrait--rose  { background: linear-gradient(135deg, #efd8d1 0%, #e0c5b8 100%); }
        .team-portrait--cream { background: linear-gradient(135deg, var(--cream) 0%, var(--blush-nude) 100%); }
        .team-portrait--taupe { background: linear-gradient(135deg, #d0bda8 0%, #b8a693 100%); }
        .team-initial {
          font-family: var(--display);
          font-size: 110px;
          color: rgba(28,26,24,0.18);
          font-style: italic;
          line-height: 1;
        }
        .team-rating {
          position: absolute;
          bottom: 14px;
          left: 14px;
          right: 14px;
          background: rgba(251,248,243,0.92);
          padding: 6px 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border: 1px solid var(--gold-faint);
        }
        @media (max-width: 880px) { .team-row { grid-template-columns: repeat(2, 1fr); } }
      `}</style>
    </section>
  );
}

// ── GALLERY TEASER ───────────────────────────────────────────────

function GalleryTeaser({ lang }) {
  const g = window.VFPE_DATA.gallery.tierA;
  return (
    <section className="section-tight" data-screen-label="Home / Gallery">
      <div className="container">
        <Reveal>
          <div className="sec-head">
            <div>
              <Eyebrow>{lang === "fr" ? "À l'intérieur" : "Inside the Villa"}</Eyebrow>
              <h2 className="h2 display" style={{ marginTop: 12, marginBottom: 0 }}>
                {lang === "fr" ? <>Sept espaces, <em>une seule maison</em>.</> : <>Seven rooms, <em>one house</em>.</>}
              </h2>
            </div>
          </div>
        </Reveal>

        <Reveal delay={120}>
          <div className="gal-grid">
            {g.slice(0, 6).map((img, i) => (
              <div key={i} className={cx("gal-cell", i === 0 && "gal-cell-lead")}>
                <img src={img.src} alt={L(img.caption, lang)} />
                <div className="gal-cap">
                  <span className="micro" style={{ color: "var(--champagne-gold)" }}>{img.tag}</span>
                  <span style={{ fontSize: 13, color: "var(--cream)" }}>{L(img.caption, lang)}</span>
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
      <style>{`
        .gal-grid {
          display: grid;
          grid-template-columns: 2fr 1fr 1fr;
          grid-template-rows: 1fr 1fr;
          gap: 12px;
          margin-top: 48px;
        }
        .gal-cell {
          position: relative;
          overflow: hidden;
          aspect-ratio: 1 / 1;
          border: 1px solid var(--gold-faint);
          background: var(--blush-nude);
        }
        .gal-cell-lead { grid-row: span 2; aspect-ratio: auto; }
        .gal-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms ease; }
        .gal-cell:hover img { transform: scale(1.05); }
        .gal-cap {
          position: absolute; bottom: 12px; left: 12px;
          background: rgba(28,26,24,0.78);
          padding: 8px 12px;
          display: flex; flex-direction: column; gap: 2px;
          backdrop-filter: blur(6px);
        }
        @media (max-width: 880px) {
          .gal-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
          .gal-cell-lead { grid-row: auto; grid-column: span 2; aspect-ratio: 16/10; }
        }
      `}</style>
    </section>
  );
}

// ── REVIEW SNIPPET ───────────────────────────────────────────────

function ReviewSnippet({ lang }) {
  const r = window.VFPE_DATA.reviews[0];
  return (
    <section className="rev" data-screen-label="Home / Review">
      <div className="container">
        <Reveal>
          <div className="rev-inner">
            <div className="rev-mark" aria-hidden>«</div>
            <blockquote className="rev-quote display">
              {L(r.quote, lang)}
            </blockquote>
            <div className="rev-meta">
              <div>
                <div className="rev-stars">★★★★★</div>
                <div style={{ marginTop: 6, fontSize: 12, letterSpacing: "0.1em", color: "var(--ink-50)", textTransform: "uppercase" }}>
                  {r.name} <span style={{ color: "var(--ink-30)" }}>·</span> {r.date} <span style={{ color: "var(--ink-30)" }}>·</span> Fresha
                </div>
              </div>
              <div className="rev-verify">
                <span className="micro" style={{ color: "var(--champagne-gold)" }}>{lang === "fr" ? "Avis vérifié" : "Verified review"}</span>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
      <style>{`
        .rev { background: var(--cream); padding: clamp(64px, 9vw, 120px) 0; border-top: 1px solid var(--gold-hairline); border-bottom: 1px solid var(--gold-hairline); }
        .rev-inner { max-width: 920px; margin: 0 auto; position: relative; padding: 0 24px; }
        .rev-mark { font-family: var(--display); font-style: italic; font-size: 160px; color: var(--champagne-gold); line-height: 0.5; position: absolute; top: 24px; left: -8px; opacity: 0.85; }
        .rev-quote { font-size: clamp(22px, 2.8vw, 32px); line-height: 1.4; font-style: italic; font-weight: 500; margin: 0; color: var(--noir); padding-left: 56px; max-width: 60ch; }
        .rev-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; padding-left: 56px; gap: 16px; flex-wrap: wrap; }
        .rev-stars { color: var(--champagne-gold); letter-spacing: 0.12em; font-size: 16px; }
        @media (max-width: 600px) { .rev-mark { font-size: 100px; left: -4px; } .rev-quote { padding-left: 28px; } .rev-meta { padding-left: 28px; } }
      `}</style>
    </section>
  );
}

// ── CLOSER BAND ──────────────────────────────────────────────────

function CloserBand({ lang }) {
  const t = window.VFPE_DATA.t[lang];
  return (
    <section className="closer" data-screen-label="Home / Closer">
      <div className="container closer-inner">
        <Reveal>
          <Eyebrow><span style={{ color: "var(--champagne-gold)" }}>{lang === "fr" ? "Réserver" : "Reserve your seat"}</span></Eyebrow>
          <h2 className="display" style={{ fontSize: "clamp(40px, 6vw, 72px)", lineHeight: 1.05, color: "var(--cream)", marginTop: 24, marginBottom: 0 }}>
            {lang === "fr" ? <>L'expertise française,<br/><em>chez nous, près de chez vous</em>.</>
                           : <>The French expertise,<br/><em>around the corner</em>.</>}
          </h2>
          <div className="closer-ctas">
            <a className="btn" href={window.VFPE_DATA.links.fresha} target="_blank" rel="noopener"
               style={{ background: "var(--champagne-gold)", color: "var(--noir)", borderColor: "var(--champagne-gold)" }}>
              {t.booknow} <span className="arrow">→</span>
            </a>
            <a className="btn btn-ghost" href={window.VFPE_DATA.links.tel}
               style={{ color: "var(--cream)", borderColor: "rgba(251,248,243,0.4)" }}>
              <PhoneIcon /> {t.phone}
            </a>
            <a className="btn btn-ghost" href={window.VFPE_DATA.links.whatsapp} target="_blank" rel="noopener"
               style={{ color: "var(--cream)", borderColor: "rgba(251,248,243,0.4)" }}>
              <WAIcon /> WhatsApp
            </a>
          </div>
        </Reveal>
      </div>
      <style>{`
        .closer { background: var(--noir); padding: clamp(80px, 12vw, 160px) 0; position: relative; overflow: hidden; }
        .closer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--champagne-gold), transparent); opacity: 0.5; }
        .closer::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--champagne-gold), transparent); opacity: 0.5; }
        .closer-inner { text-align: center; }
        .closer-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 48px; }
      `}</style>
    </section>
  );
}

Object.assign(window, {
  HomePage, VFMonogram,
});
