// HOME — cinematic hero, collections tape, our story teaser, services, boutiques, press
function HomePage({ arabicAccent }) {
  const { navigate } = useRouter();
  const [activeCol, setActiveCol] = useState(0);

  return (
    <div className="page-enter">
      <style>{`
        /* HERO */
        .hero {
          position: relative;
          height: 100vh;
          min-height: 720px;
          overflow: hidden;
          color: var(--bone);
        }
        .hero__img {
          position: absolute; inset: 0;
          background-image: url('media/home-whispers-land-campaign.webp');
          background-size: cover;
          background-position: center 30%;
          transform: scale(1.04);
          animation: breathe 24s ease-in-out infinite;
        }
        .hero__overlay {
          position: absolute; inset: 0;
          background:
            linear-gradient(180deg, color-mix(in oklab, var(--ink) 32%, transparent) 0%, transparent 25%, transparent 60%, color-mix(in oklab, var(--ink) 92%, transparent) 100%),
            linear-gradient(90deg, color-mix(in oklab, var(--ink) 45%, transparent) 0%, transparent 50%);
        }
        .hero__content {
          position: relative; z-index: 2;
          height: 100%;
          display: flex; flex-direction: column; justify-content: flex-end;
          padding-bottom: clamp(80px, 12vh, 160px);
          color: #F4EFE5;
        }
        .hero__eyebrow {
          font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
          color: var(--gold-soft);
          display: inline-flex; align-items: center; gap: 14px;
        }
        .hero__eyebrow::before, .hero__eyebrow::after {
          content: ""; width: 32px; height: 1px; background: var(--gold-soft);
        }
        .hero__title {
          font-family: var(--display, var(--serif));
          font-weight: 300;
          font-size: clamp(56px, 8.5vw, 130px);
          line-height: 0.96;
          letter-spacing: -0.015em;
          margin: 28px 0 0;
          max-width: 1200px;
        }
        .hero__title em { font-style: italic; color: var(--gold-soft); font-weight: 300; }
        .hero__sub {
          margin-top: 32px;
          max-width: 520px;
          font-size: 17px;
          line-height: 1.65;
          color: #DCD5C7;
        }
        .hero__ctas { margin-top: 44px; display: flex; gap: 14px; flex-wrap: wrap; }
        .hero__arabic {
          position: absolute; top: 38vh; right: var(--pad);
          font-family: var(--arabic);
          font-size: clamp(80px, 14vw, 220px);
          color: rgba(244, 239, 229, 0.05);
          line-height: 1;
          pointer-events: none;
          display: ${arabicAccent ? 'block' : 'none'};
        }
        .hero__meta {
          position: absolute; bottom: 30px; left: var(--pad); z-index: 2;
          font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
          color: rgba(244, 239, 229, 0.5);
          display: flex; align-items: center; gap: 22px;
        }
        .hero__meta-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold-soft); }

        /* COLLECTIONS TAPE */
        .col-tape {
          background: var(--bg);
          padding: clamp(80px, 11vw, 140px) 0 0;
        }
        .col-tape__head {
          display: grid; grid-template-columns: 1fr 1.4fr;
          gap: 60px;
          padding-bottom: clamp(48px, 6vw, 80px);
          align-items: end;
        }
        @media (max-width: 760px) { .col-tape__head { grid-template-columns: 1fr; } }
        .col-tape__title { font-size: clamp(40px, 5.5vw, 80px); line-height: 1.0; }
        .col-tape__title em { color: var(--accent); }
        .col-tape__intro { color: var(--fg-mute); max-width: 520px; font-size: 16px; line-height: 1.7; }

        .col-tape__rail {
          display: grid;
          grid-auto-flow: column;
          grid-auto-columns: clamp(260px, 28vw, 380px);
          gap: 20px;
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          padding: 0 var(--pad) clamp(60px, 8vw, 100px);
          margin: 0 calc(-1 * var(--pad));
          scroll-padding-left: var(--pad);
        }
        .col-tape__rail::-webkit-scrollbar { height: 0; }
        .col-card {
          scroll-snap-align: start;
          cursor: pointer;
          display: flex; flex-direction: column;
        }
        .col-card__img {
          aspect-ratio: 3/4;
          overflow: hidden;
          position: relative;
          background: var(--surface);
        }
        .col-card__img img {
          width: 100%; height: 100%; object-fit: cover;
          transition: transform 1.2s ease;
        }
        .col-card:hover .col-card__img img { transform: scale(1.06); }
        .col-card__num {
          position: absolute; top: 18px; left: 18px;
          font-size: 10px; letter-spacing: 0.28em;
          color: rgba(244, 239, 229, 0.7);
          mix-blend-mode: difference;
        }
        .col-card__arabic {
          position: absolute; top: 16px; right: 18px;
          font-family: var(--arabic);
          font-size: 28px;
          color: rgba(244, 239, 229, 0.9);
          mix-blend-mode: difference;
          display: ${arabicAccent ? 'block' : 'none'};
        }
        .col-card__info {
          padding: 20px 0;
          display: flex; justify-content: space-between; align-items: baseline;
        }
        .col-card__name {
          font-family: var(--display, var(--serif));
          font-size: 30px; letter-spacing: 0.02em;
        }
        .col-card__count {
          font-size: 12px; color: var(--fg-mute);
          letter-spacing: 0.12em;
        }
        .col-card__tag { color: var(--fg-mute); font-size: 13px; font-style: italic; }

        /* MARQUEE FOR FEATURED */
        .marquee {
          padding: clamp(48px, 7vw, 96px) 0;
          border-top: 1px solid var(--rule);
          border-bottom: 1px solid var(--rule);
          overflow: hidden;
        }
        .marquee__inner {
          display: flex; gap: 60px;
          font-family: var(--display, var(--serif));
          font-size: clamp(28px, 4vw, 56px);
          color: var(--fg-mute);
          white-space: nowrap;
          animation: scroll 40s linear infinite;
        }
        .marquee__inner em { color: var(--accent); font-style: italic; }
        @keyframes scroll {
          from { transform: translateX(0); }
          to { transform: translateX(-50%); }
        }
        .marquee__star {
          display: inline-block; width: 24px; height: 24px;
          background-image: url('media/gafla-favicon-star-32.png');
          background-size: contain;
          background-repeat: no-repeat;
          opacity: 0.6;
        }

        /* STORY TEASER */
        .story-teaser {
          padding: clamp(80px, 12vw, 160px) 0;
          background: var(--bg);
        }
        .story-teaser__grid {
          display: grid; grid-template-columns: 1fr 1.3fr;
          gap: clamp(40px, 6vw, 100px);
          align-items: center;
        }
        @media (max-width: 880px) {
          .story-teaser__grid { grid-template-columns: 1fr; }
        }
        .story-teaser__img { aspect-ratio: 4/5; overflow: hidden; }
        .story-teaser__img img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.04); }
        .story-teaser__title { font-size: clamp(40px, 5.5vw, 80px); line-height: 1.02; margin: 20px 0 28px; }
        .story-teaser__title em { color: var(--accent); }
        .story-teaser__body { color: var(--fg-mute); font-size: 17px; line-height: 1.7; max-width: 540px; }
        .story-teaser__body p + p { margin-top: 1.1em; }
        .story-teaser__caravan { margin: 36px 0; max-width: 540px; }

        /* SERVICE STACK */
        .services {
          padding: clamp(60px, 8vw, 100px) 0 clamp(80px, 10vw, 140px);
          border-top: 1px solid var(--rule);
        }
        .services__head { padding-bottom: clamp(48px, 5vw, 64px); }
        .services__head h2 { font-size: clamp(36px, 5vw, 64px); line-height: 1.05; max-width: 800px; }
        .services__head em { color: var(--accent); }
        .services__grid {
          display: grid; grid-template-columns: repeat(3, 1fr);
          gap: 28px;
        }
        @media (max-width: 880px) { .services__grid { grid-template-columns: 1fr; } }
        .svc {
          position: relative;
          overflow: hidden;
          aspect-ratio: 4/5;
          cursor: pointer;
        }
        .svc img {
          width: 100%; height: 100%; object-fit: cover;
          transition: transform 1.4s ease;
        }
        .svc:hover img { transform: scale(1.05); }
        .svc__overlay {
          position: absolute; inset: 0;
          background: linear-gradient(180deg, transparent 50%, rgba(15,14,12,0.9) 100%);
        }
        .svc__content {
          position: absolute; inset: 0;
          display: flex; flex-direction: column; justify-content: flex-end;
          padding: 32px;
          color: #F4EFE5;
        }
        .svc__kicker { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-soft); }
        .svc__title { font-family: var(--display, var(--serif)); font-size: 38px; margin: 12px 0 8px; line-height: 1.05; }
        .svc__lede { font-size: 14px; color: rgba(244, 239, 229, 0.75); line-height: 1.55; max-width: 280px; }
        .svc__cta { margin-top: 20px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-soft); border-bottom: 1px solid var(--gold-soft); padding-bottom: 4px; display: inline-block; }

        /* BOUTIQUES LITE */
        .boutiques-lite { padding: clamp(80px, 10vw, 140px) 0; background: var(--surface); }
        .boutiques-lite__head { display: flex; justify-content: space-between; align-items: end; padding-bottom: 48px; flex-wrap: wrap; gap: 24px; }
        .boutiques-lite__head h2 { font-size: clamp(36px, 4.5vw, 64px); line-height: 1.05; max-width: 600px; }
        .boutiques-lite__head em { color: var(--accent); }
        .boutiques-lite__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
        @media (max-width: 980px) { .boutiques-lite__grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 540px) { .boutiques-lite__grid { grid-template-columns: 1fr; } }
        .blite {
          background: var(--bg);
          padding: 24px;
          border: 1px solid var(--rule);
          display: flex; flex-direction: column; gap: 14px;
          transition: border-color 0.3s, transform 0.4s ease;
        }
        .blite:hover { border-color: var(--accent); transform: translateY(-4px); }
        .blite__img { aspect-ratio: 4/3; overflow: hidden; }
        .blite__img img { width: 100%; height: 100%; object-fit: cover; }
        .blite__city { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); }
        .blite__name { font-family: var(--display, var(--serif)); font-size: 24px; line-height: 1.1; }
        .blite__addr { font-size: 13px; color: var(--fg-mute); line-height: 1.5; }

        /* PRESS STRIP */
        .press {
          padding: 60px 0;
          border-top: 1px solid var(--rule);
          background: var(--bg);
        }
        .press__head { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 28px; }
        .press__row {
          display: grid; grid-template-columns: repeat(4, 1fr);
          gap: 32px;
          align-items: center;
        }
        @media (max-width: 760px) { .press__row { grid-template-columns: repeat(2, 1fr); } }
        .press__name {
          font-family: var(--display, var(--serif));
          font-size: clamp(20px, 2.4vw, 28px);
          color: var(--fg);
        }
        .press__note { font-size: 12px; color: var(--fg-mute); letter-spacing: 0.08em; margin-top: 4px; }
      `}</style>

      {/* HERO */}
      <section className="hero">
        <div className="hero__img"></div>
        <div className="hero__overlay"></div>
        <div className="hero__arabic">قافِلة</div>
        <div className="container hero__content">
          <div className="hero__eyebrow">Caravan — قافِلة</div>
          <h1 className="hero__title">
            Jewels that carry<br/>
            <em>a story.</em>
          </h1>
          <p className="hero__sub">
            A contemporary fine‑jewellery house in Dubai, reinventing the symbols of Arabian tradition for the international collector. Seven living story lines. One Majlis.
          </p>
          <div className="hero__ctas">
            <button className="btn btn--primary" onClick={() => navigate('contact', { tab: 'majlis' })}>
              Book a Private Viewing
            </button>
            <button className="btn btn--ghost arrow" onClick={() => navigate('collections')}>
              <span>Explore Collections</span>
            </button>
          </div>
        </div>
        <div className="hero__meta">
          <span>Dubai · d3</span>
          <span className="hero__meta-dot"></span>
          <span>Abu Dhabi · Tryano</span>
          <span className="hero__meta-dot"></span>
          <span>Louvre Abu Dhabi</span>
          <span className="hero__meta-dot"></span>
          <span>Ounass</span>
        </div>
      </section>

      {/* MARQUEE */}
      <div className="marquee">
        <div className="marquee__inner">
          {Array(2).fill(0).map((_, k) => (
            <React.Fragment key={k}>
              {COLLECTIONS.map((c, i) => (
                <React.Fragment key={c.id + k}>
                  <span><em>{c.name}</em> · <span style={{ fontStyle: 'italic', color: 'inherit' }}>{c.motif}</span></span>
                  <span className="marquee__star"></span>
                </React.Fragment>
              ))}
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* COLLECTIONS TAPE */}
      <section className="col-tape">
        <div className="container">
          <Reveal className="col-tape__head">
            <div>
              <div className="eyebrow" style={{ marginBottom: 16 }}>The Seven Lines</div>
              <h2 className="col-tape__title">A house of <em>motifs.</em></h2>
            </div>
            <p className="col-tape__intro">
              Each Gafla collection turns on a single, deeply local idea — the dive, the heart, the coin, the lantern, the chain, the perfume wand, the eight‑point star — and works it into wearable architecture.
            </p>
          </Reveal>
        </div>
        <div className="col-tape__rail">
          {COLLECTIONS.map((c, i) => (
            <Reveal key={c.id} delay={i * 60} className="col-card" onClick={() => navigate('collection', { id: c.id })}>
              <div className="col-card__img">
                <img src={c.hero} alt={c.name} loading="lazy" />
                <div className="col-card__num">N° 0{i + 1}</div>
                <div className="col-card__arabic">{c.arabic}</div>
              </div>
              <div className="col-card__info">
                <div className="col-card__name">{c.name}</div>
                <div className="col-card__count">{c.count} pieces</div>
              </div>
              <div className="col-card__tag">{c.tagline}</div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* STORY TEASER */}
      <section className="story-teaser">
        <div className="container story-teaser__grid">
          <Reveal className="story-teaser__img">
            <img src="media/founders-gafla-portrait.webp" alt="Gafla founders" loading="lazy" />
          </Reveal>
          <Reveal>
            <div className="eyebrow">The House</div>
            <h2 className="story-teaser__title">
              The caravan, <em>kept moving.</em>
            </h2>
            <CaravanDivider />
            <div className="story-teaser__body">
              <p>
                Gafla means caravan — the slow procession of trade and story that once moved across this peninsula. The house was publicly launched in 2015 from Dubai Design District, gathering pearling, coinage, calligraphy, and Islamic geometry into a single contemporary voice.
              </p>
              <p>
                Hamad Bin Shaiban and Abdulla Beljafla design with hand drawings, slow prototyping, and an unhurried respect for the materials.
              </p>
            </div>
            <div style={{ marginTop: 36, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <button className="btn btn--ghost arrow" onClick={() => navigate('story')}>Read Our Story</button>
            </div>
          </Reveal>
        </div>
      </section>

      {/* SERVICES */}
      <section className="services">
        <div className="container">
          <Reveal className="services__head">
            <div className="eyebrow" style={{ marginBottom: 16 }}>Maison Services</div>
            <h2>A house built on <em>three quiet rooms.</em></h2>
          </Reveal>
          <div className="services__grid">
            <Reveal className="svc" onClick={() => navigate('contact', { tab: 'majlis' })}>
              <img src="media/boutique-majlis-lounge.webp" alt="Gafla Majlis" />
              <div className="svc__overlay"></div>
              <div className="svc__content">
                <div className="svc__kicker">The Majlis</div>
                <div className="svc__title">Private Viewing</div>
                <div className="svc__lede">An unhurried introduction to the house, by appointment at d3.</div>
                <div className="svc__cta">Book a Viewing →</div>
              </div>
            </Reveal>
            <Reveal delay={80} className="svc" onClick={() => navigate('bespoke')}>
              <img src="media/bespoke-workprocess.webp" alt="Gafla Bespoke" />
              <div className="svc__overlay"></div>
              <div className="svc__content">
                <div className="svc__kicker">Gafla Bespoke</div>
                <div className="svc__title">By Commission</div>
                <div className="svc__lede">A highly tailored service that translates a personal idea into fine jewellery.</div>
                <div className="svc__cta">Begin a Commission →</div>
              </div>
            </Reveal>
            <Reveal delay={160} className="svc" onClick={() => navigate('concierge')}>
              <img src="media/concierge-care-repair-polishing.webp" alt="Gafla Concierge" />
              <div className="svc__overlay"></div>
              <div className="svc__content">
                <div className="svc__kicker">Gafla Concierge</div>
                <div className="svc__title">Care & Gifting</div>
                <div className="svc__lede">Gift Card, Size Guide, cleaning, resizing, polishing, repair.</div>
                <div className="svc__cta">Explore Concierge →</div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* BOUTIQUES LITE */}
      <section className="boutiques-lite">
        <div className="container">
          <Reveal className="boutiques-lite__head">
            <h2>Where to find us, <em>in person.</em></h2>
            <button className="btn btn--ghost arrow" onClick={() => navigate('boutiques')}>All Locations</button>
          </Reveal>
          <div className="boutiques-lite__grid">
            {BOUTIQUES.map((b, i) => (
              <Reveal key={b.id} delay={i * 60} className="blite">
                <div className="blite__img"><img src={b.image} alt={b.name} loading="lazy" /></div>
                <div>
                  <div className="blite__city">{b.city}</div>
                  <div className="blite__name">{b.name}</div>
                  <div className="blite__addr">
                    {b.address}<br/>{b.sub}
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* PRESS */}
      <section className="press">
        <div className="container">
          <div className="press__head">As featured by</div>
          <div className="press__row">
            {PRESS.map((p, i) => (
              <Reveal key={p.name} delay={i * 50}>
                <div className="press__name">{p.name}</div>
                <div className="press__note">{p.note}</div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { HomePage });
