// ============================================================
//  MONOGRAM — Home screen
// ============================================================

function HomeScreen({ setRoute, locale, hero }) {
  const t = COPY[locale];

  // Parallax & cursor sheen for hero
  const heroRef = useRef(null);
  const letterRef = useRef(null);
  const bgRef = useRef(null);

  useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      if (bgRef.current) bgRef.current.style.transform = `translate3d(0, ${y * 0.18}px, 0) scale(${1 + y * 0.0002})`;
      if (letterRef.current) letterRef.current.style.transform = `translate3d(0, ${-y * 0.12}px, 0) rotate(${y * 0.01}deg)`;
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <main>
      <Hero hero={hero} setRoute={setRoute} locale={locale} bgRef={bgRef} letterRef={letterRef} heroRef={heroRef}/>
      <OfferingSplit setRoute={setRoute} locale={locale}/>
      <CollectionsStrip setRoute={setRoute} locale={locale}/>
      <ConceptBlock locale={locale}/>
      <CredibilityStrip locale={locale}/>
      <ContactBand setRoute={setRoute} locale={locale}/>
    </main>
  );
}

// =============================================================================
// Hero — three variants
// =============================================================================
function Hero({ hero, setRoute, locale, bgRef, letterRef, heroRef }) {
  const t = COPY[locale].hero;
  const tNav = COPY[locale].nav;

  if (hero === "split") {
    return (
      <section className="hero variant-split" ref={heroRef}>
        <div className="wrap hero-content">
          <div className="hero-left">
            <div className="hero-eyebrow">{t.eyebrow}</div>
            <h1 className="hero-h1">
              {t.h1a}<br/>
              <span className="line2 ital">{t.h1b}</span>
            </h1>
            <blockquote className="hero-tufte">
              {t.tufte}
              <cite>{t.tufteCite}</cite>
            </blockquote>
            <div className="hero-ctas">
              <button className="btn solid" onClick={() => setRoute({ name: "bespoke" })}>
                <span>{t.ctaPrimary}</span><span className="arrow">→</span>
              </button>
              <button className="btn ghost" onClick={() => setRoute({ name: "collection", id: "sculptural" })}>
                <span>{t.ctaSecondary}</span>
              </button>
            </div>
          </div>
          <div className="hero-product" style={{ backgroundImage: "url(media/concept-waw-escaping-flatland.webp)" }}/>
        </div>
      </section>
    );
  }

  if (hero === "magazine") {
    return (
      <section className="hero variant-magazine" ref={heroRef}>
        <div className="hero-bg" ref={bgRef} style={{ backgroundImage: "url(media/hero-bg-escaping-flatland.webp)" }}/>
        <div className="wrap hero-content">
          <div className="mag-issue">
            <span>MONOGRAM · Issue 01</span>
            <span>Escaping Flatland</span>
            <span>Dubai · d3</span>
          </div>
          <div className="hero-eyebrow" style={{ marginTop: 40, marginBottom: 0 }}>{t.eyebrow}</div>
          <h1 className="hero-h1">
            <span style={{ display: "block" }}>{t.h1a}</span>
            <span className="ital">{t.h1b}</span>
          </h1>
          <blockquote className="hero-tufte" style={{ borderLeft: 0, paddingLeft: 0, textAlign: "center", margin: "0 auto", maxWidth: 540 }}>
            {t.tufte}<cite style={{ textAlign: "center" }}>{t.tufteCite}</cite>
          </blockquote>
          <div className="hero-ctas" style={{ justifyContent: "center", marginTop: 36 }}>
            <button className="btn solid" onClick={() => setRoute({ name: "bespoke" })}>
              <span>{t.ctaPrimary}</span><span className="arrow">→</span>
            </button>
            <button className="btn ghost" onClick={() => setRoute({ name: "collection", id: "sculptural" })}>
              <span>{t.ctaSecondary}</span>
            </button>
          </div>
          <div className="mag-foot">
            <span>Vol. <span className="gold">01</span> · Concept</span>
            <span>By appointment · d3</span>
            <span><span className="gold">+971 50 456 3365</span></span>
          </div>
        </div>
      </section>
    );
  }

  // Default: full-bleed concept plate
  return (
    <section className="hero variant-plate" ref={heroRef}>
      <div className="hero-bg" ref={bgRef} style={{ backgroundImage: "url(media/hero-bg-escaping-flatland.webp)" }}/>
      <span className="flatland-letter" ref={letterRef} aria-hidden="true">و</span>
      <div className="wrap hero-content">
        <div className="hero-left">
          <div className="hero-eyebrow">{t.eyebrow}</div>
          <h1 className="hero-h1">
            {t.h1a}<br/>
            <span className="line2 ital">{t.h1b}</span>
          </h1>
          <blockquote className="hero-tufte">
            {t.tufte}
            <cite>{t.tufteCite}</cite>
          </blockquote>
          <div className="hero-ctas">
            <button className="btn solid" onClick={() => setRoute({ name: "bespoke" })}>
              <span>{t.ctaPrimary}</span><span className="arrow">→</span>
            </button>
            <button className="btn ghost" onClick={() => setRoute({ name: "collection", id: "sculptural" })}>
              <span>{t.ctaSecondary}</span>
            </button>
          </div>
        </div>
        <div className="hero-right">
          <div className="hero-meta">
            <span className="gold">— Studio</span>
            <span>{t.meta1}</span>
            <span>{t.meta2}</span>
            <span className="gold">{t.meta3}</span>
          </div>
        </div>
      </div>
      <div className="hero-scroll">{locale === "ar" ? "اسحب للأسفل" : "Scroll · paper to sculpture"}</div>
    </section>
  );
}

// =============================================================================
// Offering split
// =============================================================================
function OfferingSplit({ setRoute, locale }) {
  const t = COPY[locale].offering;
  return (
    <section className="section">
      <div className="wrap">
        <SectionHead num="(II)" eyebrow={t.eyebrow} title={t.title} titleItal={t.titleItal} sub={t.sub}/>
        <div className="offer-grid">
          <article className="offer-card reveal" onClick={() => setRoute({ name: "collection", id: "sculptural" })}>
            <div className="offer-img" style={{ backgroundImage: "url(media/collection-sculptural.webp)" }}/>
            <div className="offer-content">
              <div className="offer-num">{t.jewelleryNum}</div>
              <div>
                <h3 className="offer-title">{t.jewelleryTitle} <span className="ital">{t.jewelleryTitleItal}</span></h3>
                <p className="offer-sub">{t.jewelleryDesc}</p>
                <div className="offer-cta" style={{ marginTop: 18 }}>
                  {t.jewelleryCta} <span aria-hidden="true">→</span>
                </div>
              </div>
            </div>
          </article>
          <article className="offer-card reveal d1">
            <div className="offer-img" style={{ backgroundImage: "url(media/invitation-card-js.webp)" }}/>
            <div className="offer-content">
              <div className="offer-num">{t.inviteNum}</div>
              <div>
                <h3 className="offer-title">{t.inviteTitle} <span className="ital">{t.inviteTitleItal}</span></h3>
                <p className="offer-sub">{t.inviteDesc}</p>
                <div className="offer-cta" style={{ marginTop: 18 }}>
                  {t.inviteCta} <span aria-hidden="true">→</span>
                </div>
              </div>
            </div>
          </article>
        </div>
      </div>
    </section>
  );
}

// =============================================================================
// Collections strip
// =============================================================================
function CollectionsStrip({ setRoute, locale }) {
  const t = COPY[locale].collSection;
  return (
    <section className="section">
      <div className="wrap">
        <SectionHead num={t.num} eyebrow={t.eyebrow} title={t.title} titleItal={t.titleItal} sub={t.sub}/>
        <div className="coll-grid">
          {COLLECTIONS.map((c, i) => (
            <article key={c.id} className={`coll-card reveal d${i}`} onClick={() => setRoute({ name: "collection", id: c.id })}>
              <div className="ct-img" style={{ backgroundImage: `url(${c.image})` }}>
                <span className="ct-letter" aria-hidden="true">{c.letter}</span>
              </div>
              <div className="ct-meta">
                <div className="ct-name">{locale === "ar" ? c.nameAr : c.nameEn}</div>
                <div className="ct-num">0{i + 1}</div>
              </div>
              <p className="ct-desc">{locale === "ar" ? c.descAr : c.descEn}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// =============================================================================
// Concept block
// =============================================================================
function ConceptBlock({ locale }) {
  const t = COPY[locale].concept;
  return (
    <section className="section" id="concept-section">
      <div className="wrap">
        <SectionHead num={t.num} eyebrow={t.eyebrow} title={t.title} titleItal={t.titleItal}/>
        <div className="concept-block">
          <div className="concept-image reveal" style={{ backgroundImage: "url(media/concept-waw-escaping-flatland.webp)" }}>
            <div className="caption">{t.caption}</div>
          </div>
          <div className="concept-text reveal d1">
            <h2 className="display">{t.title} <span className="ital">{t.titleItal}</span></h2>
            <p className="lead">{t.lead}</p>
            <p>{t.p1}</p>
            <p>{t.p2}</p>
          </div>
        </div>

        <div className="letter-triptych">
          {t.letters.map((l, i) => (
            <article key={l.name} className={`letter-card reveal d${i}`}>
              <div className="lc-meta">
                <span>{l.role}</span>
                <span className="name">{l.name}</span>
              </div>
              <div className="lc-letter">{l.ar}</div>
              <div className="lc-meta">
                <span>{locale === "ar" ? "ملاحظة" : "note"}</span>
                <span style={{ maxWidth: "22ch", textAlign: locale === "ar" ? "left" : "right", textTransform: "none", letterSpacing: 0, color: "var(--muted)", fontSize: 12 }}>
                  {l.note}
                </span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// =============================================================================
// Credibility strip
// =============================================================================
function CredibilityStrip({ locale }) {
  const t = COPY[locale].cred;
  return (
    <section className="section">
      <div className="wrap">
        <SectionHead num={t.num} eyebrow={t.eyebrow} title={t.title} titleItal={t.titleItal}/>
        <div className="cred-strip">
          {t.items.map((it, i) => (
            <article key={it.year} className={`cred-card reveal d${i}`}>
              <div className="cc-year">{it.year}</div>
              <div className="cc-title">{it.title}</div>
              <div className="cc-where">{it.where}</div>
              <p className="cc-note">{it.note}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// =============================================================================
// Contact band
// =============================================================================
function ContactBand({ setRoute, locale }) {
  const t = COPY[locale].contact;
  return (
    <section id="contact-section">
      <div className="contact-band">
        <div>
          <div className="eyebrow">{t.num} · {t.title}</div>
          <h2><span>{t.title}</span> <span className="ital">{t.titleItal}</span></h2>
          <p>{t.sub}</p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <a className="btn solid" href="https://wa.me/971504563365" target="_blank" rel="noopener noreferrer">
              <span>{t.cta}</span><span className="arrow">→</span>
            </a>
            <button className="btn ghost" onClick={() => setRoute({ name: "bespoke" })}>
              <span>{COPY[locale].nav.book}</span>
            </button>
          </div>
        </div>
        <dl className="contact-detail">
          <div><div className="ce-label">{t.l1}</div><div className="ce-value gold">{t.v1}</div></div>
          <div><div className="ce-label">{t.l2}</div><div className="ce-value">{t.v2}</div></div>
          <div><div className="ce-label">{t.l3}</div><div className="ce-value" style={{ whiteSpace: "pre-line" }}>{t.v3}</div></div>
          <div><div className="ce-label">{t.l4}</div><div className="ce-value" style={{ whiteSpace: "pre-line" }}>{t.v4}</div></div>
        </dl>
      </div>
    </section>
  );
}

Object.assign(window, { HomeScreen });