// home.jsx — CAJE Collective homepage

function HeroRotator({ overlay = 0.38 }) {
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setI(n => (n + 1) % IMG.hero.length), 6000);
    return () => clearInterval(t);
  }, []);
  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
      {IMG.hero.map((src, idx) => (
        <div key={src} style={{
          position: 'absolute', inset: 0,
          opacity: idx === i ? 1 : 0,
          transition: 'opacity 2.4s var(--ease-silk)',
          animation: idx === i ? 'kenburns 12s var(--ease-silk) forwards' : 'none',
        }}>
          <img src={src} alt="" style={{
            width: '100%', height: '100%', objectFit: 'cover',
            filter: 'saturate(0.7) contrast(1.05) brightness(0.88)',
          }} />
        </div>
      ))}
      <div style={{
        position: 'absolute', inset: 0,
        background: `linear-gradient(180deg, rgba(17,17,17,${overlay * 0.7}) 0%, rgba(17,17,17,${overlay * 0.3}) 40%, rgba(17,17,17,${overlay}) 100%)`,
      }} />
      <style>{`
        @keyframes kenburns {
          from { transform: scale(1.02); }
          to { transform: scale(1.14); }
        }
      `}</style>
    </div>
  );
}

function HomePage({ navigate, heroOverlay, accent }) {
  const ref = useReveal();
  const isMobile = useIsMobile();

  return (
    <div ref={ref} className="page">
      {/* HERO */}
      <section style={{
        position: 'relative', height: '100vh', minHeight: isMobile ? 600 : 720,
        display: 'flex', alignItems: 'flex-end', overflow: 'hidden',
      }}>
        <HeroRotator overlay={heroOverlay} />

        {!isMobile && (
        <div style={{
          position: 'absolute', top: 130, left: 56,
          display: 'flex', flexDirection: 'column', gap: 4,
        }} className="reveal reveal-delay-2">
          <span className="micro" style={{ color: 'rgba(245,240,230,0.55)', fontSize: 10 }}>LAT · LONG · WITHHELD</span>
          <span className="micro" style={{ color: 'rgba(245,240,230,0.35)', fontSize: 10 }}>By appointment · Worldwide</span>
        </div>
        )}

        {!isMobile && (
        <div style={{
          position: 'absolute', top: 130, right: 56,
          display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 4,
        }} className="reveal reveal-delay-3">
          <span className="micro" style={{ color: 'rgba(245,240,230,0.55)', fontSize: 10 }}>ESTABLISHED MMXIX</span>
          <span className="micro" style={{ color: 'rgba(245,240,230,0.35)', fontSize: 10 }}>All commissions upon request</span>
        </div>
        )}

        <div className="container" style={{ position: 'relative', paddingBottom: isMobile ? 72 : 120, paddingTop: 160, width: '100%' }}>
          <div style={{ maxWidth: 1100 }}>
            <div className="reveal" style={{ marginBottom: isMobile ? 24 : 32 }}>
              <Eyebrow num="I" label={isMobile ? 'Est. MMXIX' : 'The Collective · Est. MMXIX'} />
            </div>

            <h1 className="display reveal reveal-delay-1" style={{
              fontSize: 'clamp(43px, 11.5vw, 160px)',
              color: '#F5F0E6',
              lineHeight: 0.97,
            }}>
              <span style={{ fontStyle: 'normal', fontWeight: 300 }}>Architects of the</span><br />
              <em style={{ color: '#F5F0E6' }}>flawlessly</em> <em style={{ color: accent }}>orchestrated.</em>
            </h1>

            <div className="reveal reveal-delay-3" style={{
              maxWidth: 560, marginTop: isMobile ? 32 : 48,
              color: 'rgba(245,240,230,0.78)',
              fontSize: isMobile ? 15 : 16, lineHeight: 1.65, fontWeight: 300,
            }}>
              A private collective designing destination weddings, boutique galas,
              and residencies of rare distinction — sourced anywhere in the world,
              for those who would rather not be found.
            </div>

            <div className="reveal reveal-delay-4" style={{ marginTop: isMobile ? 40 : 56, display: 'flex', gap: isMobile ? 4 : 20, flexDirection: isMobile ? 'column' : 'row', alignItems: isMobile ? 'flex-start' : 'center' }}>
              <CTA onClick={() => navigate('inquiry')}>Begin the Dialogue</CTA>
              <a href="#" onClick={(e) => { e.preventDefault(); navigate('about')  ; }}
                className="linky" style={{
                  color: '#F5F0E6', fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase',
                  alignSelf: isMobile ? 'flex-start' : 'center', padding: '18px 0',
                }}>The Collective</a>
            </div>
          </div>
        </div>

        {!isMobile && (
        <div style={{
          position: 'absolute', bottom: 40, left: '50%', transform: 'translateX(-50%)',
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10,
        }}>
          <span className="micro" style={{ fontSize: 9, color: 'rgba(245,240,230,0.55)' }}>Continue</span>
          <div style={{
            width: 1, height: 44,
            background: 'linear-gradient(180deg, rgba(245,240,230,0.55), transparent)',
            animation: 'scrollLine 2s ease-in-out infinite',
          }} />
          <style>{`
            @keyframes scrollLine { 0%,100%{ transform: scaleY(0.6); opacity: 0.4 } 50%{ transform: scaleY(1); opacity: 1 } }
          `}</style>
        </div>
        )}
      </section>

      {/* MANIFESTO */}
      <section style={{ padding: isMobile ? '90px 0 70px' : '180px 0 140px' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 2.2fr', gap: isMobile ? 36 : 80, alignItems: 'flex-start' }}>
            <div className="reveal">
              <Eyebrow num="II" label="Manifesto" />
            </div>
            <div className="reveal reveal-delay-1">
              <h2 className="display" style={{ fontSize: 'clamp(34px, 5vw, 76px)', lineHeight: 1.06 }}>
                We do not plan events.
                <br />
                <span style={{ color: '#6B6257', fontStyle: 'normal', fontWeight: 300 }}>
                  We compose <em style={{ color: accent }}>atmospheres</em> — private, patient, and precisely measured to the <em>inner register</em> of those who commission them.
                </span>
              </h2>

              <div style={{
                marginTop: isMobile ? 48 : 72,
                display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: isMobile ? 32 : 48,
                paddingTop: 48, borderTop: '1px solid rgba(17,17,17,0.12)',
              }}>
                {[
                  { k: 'Anywhere', label: 'In the world', sub: 'no fixed portfolio' },
                  { k: 'Anything', label: 'Residences · clubs · venues', sub: 'sourced to request' },
                  { k: 'By referral', label: 'Admission only', sub: 'correspondence begins a dialogue' },
                ].map(m => (
                  <div key={m.label} className="reveal">
                    <div className="display" style={{ fontSize: 44, color: accent, fontStyle: 'italic', fontWeight: 400, letterSpacing: '-0.01em', lineHeight: 1.05 }}>
                      {m.k}
                    </div>
                    <div className="micro" style={{ marginTop: 14, color: '#111' }}>{m.label}</div>
                    <div style={{ color: '#6B6257', fontSize: 13, marginTop: 4, fontStyle: 'italic', fontFamily: 'EB Garamond, serif' }}>{m.sub}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      <TickerStrip items={IMG.press} />

      {/* THREE PILLARS */}
      <section style={{ padding: isMobile ? '80px 0 40px' : '160px 0 100px' }}>
        <div className="container">
          <div className="reveal" style={{ textAlign: 'center', marginBottom: isMobile ? 44 : 72 }}>
            <Eyebrow num="III" label="Three Disciplines, One Hand" align="center" />
            <h2 className="display" style={{ fontSize: 'clamp(36px, 6vw, 96px)', marginTop: 28 }}>
              A single <em>signature</em>, thrice expressed.
            </h2>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 2 }}>
            {[
              { num: '01', title: 'Sanctuaries', sub: 'Private residencies, taken in full.', img: IMG.hero[1], route: 'sanctuaries',
                body: 'Residences, private clubs, and venues sourced anywhere in the world. Taken wholly, staffed privately, occupied only by those we introduce.' },
              { num: '02', title: 'Experiences', sub: 'Weddings, galas, retreats.', img: IMG.hero[0], route: 'experiences',
                body: 'A three-day nuptial or a silent retreat — conceived, produced, and quietly remembered. Anywhere you ask of us.' },
              { num: '03', title: 'Continuum', sub: 'A year-round concierge.', img: IMG.hero[3], route: 'experiences',
                body: 'For those who travel between our houses — a single point of contact and one woven calendar across continents.' },
            ].map((p, idx) => (
              <div key={p.num} className="reveal" style={{
                position: 'relative', transitionDelay: `${idx * 0.1}s`,
                background: '#ECE5D6', cursor: 'pointer',
              }} onClick={() => navigate(p.route)}>
                <div style={{ aspectRatio: '4/5' }}>
                  <KBImage src={p.img} alt={p.title} ratio="4/5" overlay={0.28} />
                </div>
                <div style={{ position: 'absolute', top: 24, left: 24 }}>
                  <span className="numeral" style={{ color: '#F5F0E6', fontSize: 13 }}>{p.num}</span>
                </div>
                <div style={{
                  position: 'absolute', bottom: 0, left: 0, right: 0,
                  padding: '36px 28px', color: '#F5F0E6',
                  background: 'linear-gradient(180deg, transparent 0%, rgba(17,17,17,0.72) 100%)',
                }}>
                  <div className="micro" style={{ color: accent, marginBottom: 14, fontSize: 10 }}>{p.sub}</div>
                  <h3 className="display" style={{ fontSize: 48, color: '#F5F0E6', fontStyle: 'italic', marginBottom: 14 }}>
                    {p.title}
                  </h3>
                  <p style={{ fontSize: 13.5, lineHeight: 1.65, color: 'rgba(245,240,230,0.82)', maxWidth: 340, fontWeight: 300 }}>
                    {p.body}
                  </p>
                  <div style={{
                    marginTop: 24, display: 'inline-flex', alignItems: 'center', gap: 12,
                    color: accent, fontSize: 10, letterSpacing: '0.28em', textTransform: 'uppercase',
                  }}>
                    Enter <span style={{ width: 20, height: 1, background: accent }} />
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* UPON REQUEST — full-bleed editorial statement (replaces the fake featured sanctuary + works strip) */}
      <section style={{ padding: isMobile ? '90px 0' : '180px 0', background: 'var(--ivory-deep)', position: 'relative', overflow: 'hidden' }}>
        <div className="container" style={{ position: 'relative' }}>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.4fr', gap: isMobile ? 44 : 120, alignItems: 'center' }}>
            <div className="reveal" style={{ position: 'relative' }}>
              <div style={{ aspectRatio: '3/4', position: 'relative' }}>
                <KBImage src={IMG.hero[3]} alt="" ratio="3/4" overlay={0.12} />
                <div style={{
                  position: 'absolute', bottom: 20, left: 20, right: 20,
                  display: 'flex', justifyContent: 'space-between',
                  color: '#F5F0E6', fontSize: 9, letterSpacing: '0.24em', textTransform: 'uppercase',
                }}>
                  <span>Plate I</span>
                  <span>Interior study · Anonymous</span>
                </div>
              </div>
            </div>
            <div className="reveal reveal-delay-1">
              <Eyebrow num="IV" label="Upon Request" />
              <h2 className="display" style={{ fontSize: 'clamp(44px, 5.2vw, 84px)', marginTop: 28, lineHeight: 1.02 }}>
                Anywhere <em>in the world</em>,<br />
                <span style={{ color: '#6B6257', fontStyle: 'normal', fontWeight: 300 }}>and nothing on the page.</span>
              </h2>
              <p className="body-lede" style={{ marginTop: 40, maxWidth: 540 }}>
                We keep no public directory. A house above the Ligurian coast, a club in Mayfair, a desert encampment in the Empty Quarter, a chalet held by family — every commission is sourced to the specific note of the request.
              </p>
              <div style={{
                marginTop: 48, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28,
                paddingTop: 32, borderTop: '1px solid rgba(17,17,17,0.14)',
              }}>
                {[
                  ['Residences', 'Private villas, estates, compounds'],
                  ['Clubs', 'Memberships, annexes, quiet rooms'],
                  ['Venues', 'Palazzi, châteaux, monasteries'],
                  ['Voyage', 'Yachts, trains, charter aviation'],
                ].map(([k, v]) => (
                  <div key={k}>
                    <div className="micro" style={{ color: accent, marginBottom: 6, fontSize: 10 }}>{k}</div>
                    <div style={{ fontFamily: 'EB Garamond, serif', fontSize: 16, fontStyle: 'italic', color: '#111', lineHeight: 1.35 }}>{v}</div>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 52 }}>
                <CTA onClick={() => navigate('inquiry')}>Make a Request</CTA>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* DIALOGUE CTA */}
      <section style={{ padding: isMobile ? '80px 0' : '180px 0' }}>
        <div className="container">
          <div style={{
            border: '1px solid rgba(17,17,17,0.14)',
            padding: isMobile ? '56px 24px' : '100px 80px', textAlign: 'center',
            position: 'relative', overflow: 'hidden',
          }} className="reveal">
            <div style={{
              position: 'absolute', top: isMobile ? 16 : 28, left: isMobile ? 16 : 28, right: isMobile ? 16 : 28, bottom: isMobile ? 16 : 28,
              border: `1px solid ${accent}`, opacity: 0.25, pointerEvents: 'none',
            }} />
            <Eyebrow num="V" label="An Invitation" align="center" />
            <h2 className="display" style={{ fontSize: 'clamp(34px, 5.5vw, 88px)', marginTop: 32, maxWidth: 900, marginLeft: 'auto', marginRight: 'auto' }}>
              We accept <em>twelve</em> commissions per season.
            </h2>
            <p className="body-lede" style={{ marginTop: 32, maxWidth: 560, margin: '32px auto 0' }}>
              Begin with a letter — in your own words — and we will respond within three days.
            </p>
            <div style={{ marginTop: isMobile ? 40 : 56, display: 'inline-flex', gap: 16, flexDirection: isMobile ? 'column' : 'row', alignItems: 'center' }}>
              <CTA onClick={() => navigate('inquiry')} dark>Begin the Dialogue</CTA>
              <CTA onClick={() => navigate('about')}>The Collective</CTA>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { HomePage });