// ── Home — hero only ──────────────────────────────────────────────────

function HeroCentered({ particleI }) {
  return (
    <section style={{
      position: 'relative',
      minHeight: '100svh',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      overflow: 'hidden',
    }} className="hero-section">
      {/* Background photo */}
      <div style={{
        position: 'absolute', inset: 0, zIndex: 0,
        backgroundImage: 'url(assets/hero-bg.jpg)',
        backgroundSize: 'cover',
        backgroundPosition: 'center 40%',
      }} />
      {/* Vignette */}
      <div className="hero-bg-overlay" style={{
        position: 'absolute', inset: 0, zIndex: 1,
        background:
          'radial-gradient(ellipse 58% 56% at 50% 46%, rgba(0,0,0,.08) 0%, rgba(0,0,0,.76) 100%),' +
          'linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.60) 100%)',
      }} />
      {/* Particles */}
      <div style={{ position: 'absolute', inset: 0, zIndex: 2, pointerEvents: 'none' }}>
        <ParticleField count={Math.round(38 * particleI)} intensity={particleI} />
      </div>
      {/* Brand */}
      <div style={{
        position: 'relative', zIndex: 3,
        display: 'flex', flexDirection: 'column',
        alignItems: 'center', textAlign: 'center',
        padding: 'clamp(40px, 6vw, 96px)',
        transform: 'translateY(-47px)',
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          <h1 className="display" style={{
            fontSize: 'clamp(80px, 18vw, 300px)',
            margin: 0, lineHeight: .9, letterSpacing: '-.01em', fontWeight: 400,
            color: 'var(--fg)',
          }}>JT</h1>
          <div style={{
            fontFamily: 'var(--font-display)',
            fontSize: 'clamp(14px, 3.2vw, 52px)',
            letterSpacing: '.32em',
            textTransform: 'uppercase',
            color: 'var(--crimson)',
            fontWeight: 400,
            marginTop: '0.42em',
          }}>ATELIER</div>
        </div>
      </div>
      <div className="scroll-cue" />
    </section>
  );
}

function HeroSplit({ particleI }) {
  return (
    <section style={{
      position: 'relative', minHeight: '100svh', overflow: 'hidden',
    }} className="hero-section">
      <div style={{
        position: 'absolute', inset: 0, zIndex: 0,
        backgroundImage: 'url(assets/hero-bg.jpg)',
        backgroundSize: 'cover', backgroundPosition: 'center',
      }} />
      <div className="hero-bg-overlay" style={{
        position: 'absolute', inset: 0, zIndex: 1,
        background:
          'linear-gradient(100deg, rgba(0,0,0,.80) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.20) 100%),' +
          'linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.55) 100%)',
      }} />
      <div style={{ position: 'absolute', inset: 0, zIndex: 2, pointerEvents: 'none' }}>
        <ParticleField count={Math.round(24 * particleI)} intensity={particleI} />
      </div>
      <div className="container" style={{
        position: 'relative', zIndex: 3,
        display: 'flex', flexDirection: 'column', justifyContent: 'center',
        minHeight: '100svh', paddingTop: 60, paddingBottom: 60,
      }}>
        <div style={{ maxWidth: 680 }}>
          <div>
            <h1 className="display" style={{
              fontSize: 'clamp(80px, 14vw, 240px)', margin: 0, lineHeight: .9, fontWeight: 400,
            }}>JT</h1>
            <div style={{
              fontFamily: 'var(--font-display)',
              fontSize: 'clamp(14px, 3vw, 48px)',
              letterSpacing: '.32em',
              textTransform: 'uppercase',
              color: 'var(--crimson)',
              fontWeight: 400,
              marginTop: '0.42em',
            }}>ATELIER</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroEditorial({ particleI }) {
  return (
    <section style={{
      position: 'relative', minHeight: '100svh', overflow: 'hidden',
    }} className="hero-section">
      <div style={{
        position: 'absolute', inset: 0, zIndex: 0,
        backgroundImage: 'url(assets/hero-bg.jpg)',
        backgroundSize: 'cover', backgroundPosition: 'center 40%',
      }} />
      <div className="hero-bg-overlay" style={{
        position: 'absolute', inset: 0, zIndex: 1,
        background: 'linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.85) 85%)',
      }} />
      <div style={{ position: 'absolute', inset: 0, zIndex: 2, pointerEvents: 'none' }}>
        <ParticleField count={Math.round(26 * particleI)} intensity={particleI} />
      </div>
      <div className="container" style={{
        position: 'relative', zIndex: 3,
        minHeight: '100svh',
        display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
        paddingBottom: 80, paddingTop: 80,
      }}>
        <div>
          <h1 className="display" style={{
            fontSize: 'clamp(80px, 16vw, 260px)', margin: 0, lineHeight: .9, fontWeight: 400,
          }}>JT</h1>
          <div style={{
            fontFamily: 'var(--font-display)',
            fontSize: 'clamp(14px, 3.4vw, 52px)',
            letterSpacing: '.32em',
            textTransform: 'uppercase',
            color: 'var(--crimson)',
            fontWeight: 400,
            marginTop: '0.42em',
          }}>ATELIER</div>
        </div>
      </div>
    </section>
  );
}

// ── Featured set promo / journal entry ────────────────────────────────
const JEANLUC_COPY = `Command the room in unapologetic luxury with the Jean-Luc leather jacket and pants set by JT Atelier, crafted for those who never ask for attention—they attract it. Each panel of rich, crocodile-embossed leather is precision cut and tailored to sculpt your frame, while the high-gloss finish catches every flicker of light, amplifying your presence with every move. Double-breasted detailing and sharp, structured lines echo the energy of private lounges, velvet ropes, and champagne on ice, creating a silhouette that feels as powerful as it looks. Elevate your style, own the night, and claim the spotlight—secure your Jean-Luc set from JT Atelier today.`;

function JournalPromo({ goTo }) {
  const mobile = useMobile();
  const product = (window.PRODUCTS || []).find(p => p.id === 'p-0332');
  return (
    <section className="fade-up" style={{
      position: 'relative',
      background: 'linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%)',
      borderTop: '.5px solid var(--line)',
      borderBottom: '.5px solid var(--line)',
      padding: mobile ? '56px 0' : 'clamp(80px, 9vw, 140px) 0',
    }}>
      <div className="container" style={{
        display: 'grid',
        gridTemplateColumns: mobile ? '1fr' : '1.05fr .95fr',
        gap: mobile ? 32 : 'clamp(40px, 5vw, 80px)',
        alignItems: 'center',
      }}>
        {/* VIP lifestyle image */}
        <div style={{ position: 'relative', overflow: 'hidden', background: 'var(--surface)' }}>
          <img
            src="assets/journal/jean-luc-vip.jpg?v=2"
            alt="The Jean-Luc set, worn in the room"
            style={{
              width: '100%',
              height: mobile ? 'auto' : 'clamp(440px, 46vw, 660px)',
              objectFit: 'cover', objectPosition: 'center', display: 'block',
            }}
          />
        </div>

        {/* Copy + product card */}
        <div>
          <div className="mono" style={{
            fontSize: 11, letterSpacing: '.28em', textTransform: 'uppercase',
            color: 'var(--crimson)', marginBottom: 18,
          }}>The Journal · Featured Set</div>

          <h2 className="display" style={{
            fontSize: 'clamp(40px, 5.2vw, 76px)', lineHeight: .96,
            margin: '0 0 22px', fontWeight: 400,
          }}>Own The Night</h2>

          <p style={{
            fontSize: 15, lineHeight: 1.78, color: 'var(--fg-2)',
            maxWidth: 580, margin: '0 0 32px',
          }}>{JEANLUC_COPY}</p>

          {product && (
            <div style={{
              display: 'flex', gap: mobile ? 18 : 28,
              alignItems: 'stretch', flexWrap: 'wrap',
            }}>
              <div style={{ width: 196, flexShrink: 0 }}>
                <ProductCard product={product} goTo={goTo} />
              </div>
              <div style={{
                display: 'flex', flexDirection: 'column',
                justifyContent: 'center', gap: 12, minWidth: 200,
              }}>
                <button className="btn" onClick={() => goTo('product', { product })} style={{
                  whiteSpace: 'nowrap',
                }}>Secure Your Jean-Luc Set →</button>
                <span className="mono" style={{ fontSize: 11, color: 'var(--fg-3)', letterSpacing: '.04em' }}>
                  Crocodile-embossed leather · Blazer &amp; pants · Made to order
                </span>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function Home({ goTo, t }) {
  useFadeUp();
  const Hero = { centered: HeroCentered, split: HeroSplit, editorial: HeroEditorial }[t.heroVariant] || HeroCentered;
  const Peel = window.JournalPeelStack;
  return (
    <div>
      <Hero goTo={goTo} particleI={t.particles} />
      {Peel ? <Peel goTo={goTo} /> : <JournalPromo goTo={goTo} />}
    </div>
  );
}

Object.assign(window, { Home });