/* global React, Photo, Reveal, Icon */
const { useState: useStateHome, useEffect: useEffectHome, useRef: useRefHome } = React;

/* Marquee strip — small editorial detail */
function Marquee({ items }) {
  const full = [...items, ...items, ...items];
  return (
    <div style={{ overflow: 'hidden', borderTop: '1px solid rgba(245,240,232,0.18)', borderBottom: '1px solid rgba(245,240,232,0.18)', padding: '18px 0' }}>
      <div style={{ display: 'flex', gap: 56, whiteSpace: 'nowrap', animation: 'marquee 38s linear infinite', fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.24em', color: 'rgba(245,240,232,0.7)', textTransform: 'uppercase' }}>
        {full.map((t, i) => (
          <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 56 }}>
            {t}
            <span style={{ color: 'var(--camel)' }}>✦</span>
          </span>
        ))}
      </div>
    </div>
  );
}

function PageHome({ go, toast }) {
  const [email, setEmail] = useStateHome('');

  /* Hero subtle parallax */
  const heroRef = useRefHome(null);
  useEffectHome(() => {
    const onScroll = () => {
      const y = window.scrollY;
      if (heroRef.current) heroRef.current.style.transform = `translate3d(0, ${y * 0.15}px, 0) scale(${1 + y * 0.00015})`;
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const submitEmail = (e) => {
    e.preventDefault();
    if (!email || !/.+@.+\..+/.test(email)) { toast('Please enter a valid email.'); return; }
    toast(`You're in. We'll email ${email} first.`);
    setEmail('');
  };

  return (
    <div className="page-enter">
      {/* SECTION 1 — EDITORIAL WORDMARK HERO */}
      <section className="home-hero" style={{ position: 'relative', minHeight: '100vh', overflow: 'hidden', background: 'var(--forest-deep)' }}>
        {/* Image layer */}
        <div ref={heroRef} style={{ position: 'absolute', inset: 0, willChange: 'transform' }}>
          <Photo dark caption="" src="assets/hero-home.png" alt="Golfer mid-swing" objectPosition="center 30%" style={{ width: '100%', height: '100%' }} tag={false} />
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at center, rgba(26,26,26,0.2) 0%, rgba(31,54,32,0.55) 60%, rgba(26,26,26,0.75) 100%)' }} />
        </div>

        {/* Meta text — top corners, like reference */}
        <div className="home-hero-meta" style={{ position: 'absolute', top: 'calc(var(--nav-h) + 28px)', left: 'var(--gutter)', right: 'var(--gutter)', display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.16em', color: 'rgba(245,240,232,0.78)', textTransform: 'uppercase', zIndex: 3, gap: 24, flexWrap: 'wrap' }}>
          <div style={{ maxWidth: 240, lineHeight: 1.6 }}>
            A golf lifestyle brand.<br/>
            Made for the way you play.
          </div>
          <div style={{ maxWidth: 240, textAlign: 'right', lineHeight: 1.6 }}>
            hi@8tee.golf
          </div>
        </div>

        {/* MASSIVE WORDMARK */}
        <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', alignItems: 'center', paddingBottom: '14vh', zIndex: 2, pointerEvents: 'none' }}>
          <h1 className="hero-word" aria-label="8tee" style={{
            fontFamily: 'var(--serif)',
            fontWeight: 500,
            color: 'var(--cream)',
            fontSize: 'clamp(96px, 24vw, 380px)',
            lineHeight: 0.82,
            letterSpacing: '-0.04em',
            margin: 0,
            textAlign: 'center',
            textTransform: 'lowercase',
            mixBlendMode: 'screen',
          }}>
            8tee<span style={{ fontStyle: 'italic', color: 'var(--camel)' }}>.</span>
          </h1>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 13, letterSpacing: '0.28em', color: 'rgba(245,240,232,0.82)', textTransform: 'uppercase', marginTop: 36, pointerEvents: 'auto' }}>
            Golf, but make it <em style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', color: 'var(--camel)', letterSpacing: 0 }}> yours.</em>
          </div>
        </div>

        {/* Bottom scroll cue */}
        <div style={{ position: 'absolute', bottom: 28, left: '50%', transform: 'translateX(-50%)', fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.3em', color: 'rgba(245,240,232,0.5)', textTransform: 'uppercase', zIndex: 3, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
          <span>Scroll</span>
          <span style={{ width: 1, height: 20, background: 'rgba(245,240,232,0.4)', animation: 'scrollcue 1.8s ease-in-out infinite' }} />
        </div>

        <style>{`
          @keyframes marquee {
            from { transform: translateX(0); }
            to { transform: translateX(-33.333%); }
          }
          @keyframes scrollcue {
            0%, 100% { opacity: 0.3; transform: scaleY(0.5); transform-origin: top; }
            50% { opacity: 1; transform: scaleY(1); }
          }
          @keyframes heroWordIn {
            from { opacity: 0; transform: translateY(40px); letter-spacing: -0.02em; }
            to { opacity: 1; transform: translateY(0); letter-spacing: -0.04em; }
          }
          .hero-word {
            animation: heroWordIn 900ms cubic-bezier(.2,.7,.2,1) both;
          }
          @media (max-width: 640px) {
            .home-hero-sublabels { display: none !important; }
            .home-hero-meta { font-size: 10px !important; }
          }
        `}</style>
      </section>

      {/* SECTION 2 — BRAND MANIFESTO */}
      <section className="bg-off-white sec-pad">
        <div className="container">
          <div className="two-col" style={{ alignItems: 'center' }}>
            <Reveal>
              <Photo aspect="4/5" src="assets/manifesto.png" alt="Golfer at follow-through on the course" objectPosition="center 30%" />
            </Reveal>
            <Reveal delay={120}>
              <div className="eyebrow" style={{ color: 'var(--camel)', marginBottom: 24 }}>The Manifesto</div>
              <p className="serif" style={{ fontSize: 'clamp(26px, 3vw, 40px)', lineHeight: 1.28, margin: 0 }}>
                We started 8tee because golf needed a new story.
              </p>
              <p className="serif-italic" style={{ fontSize: 'clamp(26px, 3vw, 40px)', lineHeight: 1.28, margin: '12px 0', color: 'var(--camel)' }}>
                One that looks like us. Sounds like us. Moves like us.
              </p>
              <p className="serif" style={{ fontSize: 'clamp(26px, 3vw, 40px)', lineHeight: 1.28, margin: 0 }}>
                Welcome to the club.
              </p>
              <hr className="hr-camel" style={{ marginTop: 36 }} />
            </Reveal>
          </div>
        </div>
      </section>

      {/* SECTION 3 — PILLARS */}
      <section className="bg-forest sec-pad">
        <div className="container">
          <div style={{ marginBottom: 56 }}>
            <div className="eyebrow" style={{ color: 'var(--camel)' }}>What we're building</div>
          </div>

          <div className="pillars">
            <div className="pillar" onClick={() => go('rentals')}>
              <div style={{ color: 'var(--camel)' }}><Icon.sim /></div>
              <h3>Simulator Rentals</h3>
              <p>Bring the course to your event. Corporate, private, or anywhere in between. Available June 2026.</p>
              <hr className="hr-camel" />
              <div className="pillar-arrow">Inquire <Icon.arrow /></div>
            </div>
            <div className="pillar" onClick={() => go('apparel')}>
              <div style={{ color: 'var(--camel)' }}><Icon.apparel /></div>
              <h3>Apparel & Gear</h3>
              <p>Golf fashion built for you. Sourced from Seoul, Tokyo, and beyond. Coming end of 2026.</p>
              <hr className="hr-camel" />
              <div className="pillar-arrow">Preview <Icon.arrow /></div>
            </div>
            <div className="pillar" onClick={() => go('the-club')}>
              <div style={{ color: 'var(--camel)' }}><Icon.building /></div>
              <h3>The Club</h3>
              <p>A full golf entertainment destination — sim bays, lounge, school, café. Opening 2027+.</p>
              <hr className="hr-camel" />
              <div className="pillar-arrow">Join Waitlist <Icon.arrow /></div>
            </div>
          </div>
        </div>
      </section>

      {/* SECTION 4 — EMAIL CAPTURE (replaces the social-proof section) */}
      <section className="bg-cream sec-pad">
        <div className="container" style={{ maxWidth: 820, textAlign: 'center' }}>
          <div className="eyebrow" style={{ color: 'var(--camel)', marginBottom: 20 }}>Early access</div>
          <h2 className="h-hero" style={{ marginBottom: 20 }}>
            Be first. <em className="serif-italic" style={{ color: 'var(--camel)' }}>Get access.</em>
          </h2>
          <p className="lead" style={{ margin: '0 auto 48px', maxWidth: '44ch' }}>
            Hear first about rentals, drops, and events.
          </p>
          <form onSubmit={submitEmail} style={{ display: 'flex', gap: 12, maxWidth: 560, margin: '0 auto', alignItems: 'flex-end', flexWrap: 'wrap' }}>
            <div className="field" style={{ flex: 1, minWidth: 240, textAlign: 'left' }}>
              <label>Email address</label>
              <input
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="you@email.com"
              />
            </div>
            <button className="btn btn-camel" type="submit">Join <Icon.arrow /></button>
          </form>
          <div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', color: 'rgba(26,26,26,0.5)', marginTop: 20, textTransform: 'uppercase' }}>
            No spam · Unsubscribe anytime
          </div>
        </div>
      </section>
    </div>
  );
}

window.PageHome = PageHome;