// Home page

const Hero = ({ accent, hudIntensity, bgDepth, setRoute }) => {
  const [scrollY, setScrollY] = React.useState(0);
  React.useEffect(() => {
    const onScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const accentColor = accent === 'red' ? 'var(--uwr-red)' : 'var(--uwr-cyan)';

  return (
    <section style={{
      position: 'relative',
      height: 'calc(100vh - 60px)',
      minHeight: 640,
      overflow: 'hidden',
      background: bgDepth === 'ocean' ? 'var(--uwr-ocean)' : 'var(--uwr-black)',
    }}>
      {/* parallax bg */}
      <div style={{
        position: 'absolute', inset: 0,
        transform: `translateY(${scrollY * 0.4}px) scale(${1 + scrollY * 0.0003})`,
        transformOrigin: 'center',
      }}>
        <UnderwaterPlaceholder
          src="uploads/bg.png"
          intensity={1}
          style={{ width: '100%', height: '100%' }}
        />
      </div>

      {/* dark wash bottom */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(5,8,10,0.5) 0%, rgba(5,8,10,0.05) 35%, rgba(5,8,10,0.85) 85%, rgba(5,8,10,0.98) 100%)',
        pointerEvents: 'none',
      }} />

      {/* HUD corners */}
      {hudIntensity !== 'min' && (
        <>
          <div style={{ position: 'absolute', top: 24, left: 32, color: accentColor }}>
            <MonoTag color={accentColor}>● LIVE</MonoTag>
            <div className="uwr-mono" style={{ color: 'rgba(242,242,234,0.6)', marginTop: 4 }}>POOL B / LANE 04</div>
          </div>
          <div style={{ position: 'absolute', top: 24, right: 32, textAlign: 'right' }}>
            <div className="uwr-mono" style={{ color: 'rgba(242,242,234,0.6)' }}>DEPTH 3.8M</div>
            <div className="uwr-mono" style={{ color: 'rgba(242,242,234,0.6)', marginTop: 4 }}>TEMP 26°C</div>
          </div>
        </>
      )}

      {/* main copy */}
      <div style={{
        position: 'absolute',
        left: 32, right: 32, bottom: 80,
        display: 'flex', flexDirection: 'column', gap: 24,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ width: 32, height: 1, background: accentColor }} />
          <MonoTag color={accentColor}>DROP 01 — BELOW ZERO / LIVE NOW</MonoTag>
        </div>
        <h1 className="uwr-head" style={{
          margin: 0,
          fontSize: 'clamp(56px, 11vw, 168px)',
          color: 'var(--uwr-off)',
          maxWidth: '90%',
          textWrap: 'balance',
        }}>
          BUILT BELOW<br />THE SURFACE
        </h1>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap' }}>
          <div style={{ maxWidth: 380, fontSize: 15, color: 'var(--uwr-off-dim)', lineHeight: 1.5 }}>
            Performance streetwear for underwater rugby players. Heavy cotton, athletic cut, pressure-tested by the league.
          </div>
          <div style={{ display: 'flex', gap: 12 }}>
            <button onClick={() => setRoute({ name: 'shop' })} className="uwr-btn">
              SHOP THE DROP <Arrow />
            </button>
            <button onClick={() => setRoute({ name: 'about' })} className="uwr-btn ghost">
              MANIFESTO
            </button>
          </div>
        </div>
      </div>

      {/* scroll cue */}
      <div style={{
        position: 'absolute', bottom: 20, left: '50%', transform: 'translateX(-50%)',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
        opacity: Math.max(0, 1 - scrollY / 200),
      }}>
        <div className="uwr-mono" style={{ color: 'var(--uwr-off-dim)' }}>SCROLL TO DESCEND</div>
        <div style={{ width: 1, height: 24, background: 'var(--uwr-off-dim)' }} />
      </div>
    </section>
  );
};

const ProductCard = ({ product, layout, accent, onClick }) => {
  const [hover, setHover] = React.useState(false);
  const accentColor = accent === 'red' ? 'var(--uwr-red)' : 'var(--uwr-cyan)';

  if (layout === 'minimal') {
    return (
      <div onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
           style={{ cursor: 'pointer', display: 'flex', flexDirection: 'column', gap: 10 }}>
        <ProductPlaceholder name={product.code} color={product.color}
          style={{ aspectRatio: '4/5', transition: 'transform 0.4s', transform: hover ? 'scale(1.02)' : 'scale(1)' }} />
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', paddingTop: 4 }}>
          <div className="uwr-head" style={{ fontSize: 14 }}>{product.name.toUpperCase()}</div>
          <div className="uwr-mono" style={{ color: 'var(--uwr-off)' }}>${product.price}</div>
        </div>
        <div className="uwr-mono" style={{ color: 'var(--uwr-off-dim)' }}>{product.code} · {product.weight}</div>
      </div>
    );
  }

  if (layout === 'card') {
    return (
      <div onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
           style={{
             cursor: 'pointer', background: 'var(--uwr-card)',
             border: '1px solid var(--uwr-line)',
             padding: 16,
             transition: 'border-color 0.2s',
             borderColor: hover ? accentColor : 'var(--uwr-line)',
           }}>
        <ProductPlaceholder name={product.code} color={product.color} style={{ aspectRatio: '4/5', marginBottom: 14 }} />
        {product.tag && (
          <div style={{ marginBottom: 8 }}>
            <MonoTag color={product.tag === 'NEW' ? accentColor : 'var(--uwr-off-dim)'}>{product.tag}</MonoTag>
          </div>
        )}
        <div className="uwr-head" style={{ fontSize: 16, marginBottom: 6 }}>{product.name.toUpperCase()}</div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div className="uwr-mono" style={{ color: 'var(--uwr-off-dim)' }}>{product.code}</div>
          <div className="uwr-head" style={{ fontSize: 16 }}>${product.price}</div>
        </div>
      </div>
    );
  }

  // default: technical
  return (
    <div onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
         style={{ cursor: 'pointer', position: 'relative' }}>
      <div style={{ position: 'relative', overflow: 'hidden' }}>
        <ProductPlaceholder name={product.code} color={product.color} hideLabel
          style={{ aspectRatio: '4/5', transition: 'transform 0.4s', transform: hover ? 'scale(1.04)' : 'scale(1)' }} />
        <div style={{
          position: 'absolute', top: 12, left: 12,
          display: 'flex', flexDirection: 'column', gap: 4,
        }}>
          <MonoTag color={accentColor}>{product.code}</MonoTag>
          {product.tag && <MonoTag color={product.tag === 'NEW' ? accentColor : 'var(--uwr-off-dim)'}>{product.tag}</MonoTag>}
        </div>
        <div style={{
          position: 'absolute', bottom: 0, left: 0, right: 0,
          background: 'linear-gradient(180deg, transparent, rgba(5,8,10,0.95))',
          padding: '32px 12px 12px',
          transform: hover ? 'translateY(0)' : 'translateY(8px)',
          opacity: hover ? 1 : 0,
          transition: 'all 0.25s',
        }}>
          <button className="uwr-btn cyan" style={{ width: '100%', justifyContent: 'center', padding: '10px', fontSize: 11, background: accentColor }}>
            QUICK ADD
          </button>
        </div>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 12 }}>
        <div>
          <div className="uwr-head" style={{ fontSize: 15 }}>{product.name.toUpperCase()}</div>
          <div className="uwr-mono" style={{ color: 'var(--uwr-off-dim)', marginTop: 4 }}>{product.fit.toUpperCase()} · {product.weight}</div>
        </div>
        <div className="uwr-head" style={{ fontSize: 15 }}>${product.price}</div>
      </div>
    </div>
  );
};

const HomeDropSection = ({ accent, layout, setRoute }) => {
  const accentColor = accent === 'red' ? 'var(--uwr-red)' : 'var(--uwr-cyan)';
  return (
    <section style={{ padding: '80px 32px 80px', background: 'var(--uwr-black)' }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 48, gap: 24, flexWrap: 'wrap' }}>
        <div>
          <MonoTag color={accentColor}>★ AVAILABLE NOW · 06 PIECES</MonoTag>
          <h2 className="uwr-head" style={{ fontSize: 'clamp(48px, 8vw, 112px)', margin: '14px 0 0' }}>
            DROP 01<br />
            <span style={{ color: accentColor }}>BELOW ZERO</span>
          </h2>
        </div>
        <div style={{ maxWidth: 320 }}>
          <div style={{ fontSize: 14, color: 'var(--uwr-off-dim)', lineHeight: 1.6 }}>
            Six pieces. Heavy cotton. Cut for the players who train where the surface ends and the silence begins.
          </div>
          <button onClick={() => setRoute({ name: 'shop' })} className="uwr-btn ghost" style={{ marginTop: 18 }}>
            VIEW ALL <Arrow />
          </button>
        </div>
      </div>
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))',
        gap: 24,
      }}>
        {PRODUCTS.map((p) => (
          <ProductCard key={p.id} product={p} layout={layout} accent={accent}
                       onClick={() => setRoute({ name: 'pdp', id: p.id })} />
        ))}
      </div>
    </section>
  );
};

const IdentitySection = ({ accent }) => (
  <section style={{ position: 'relative', minHeight: '80vh', overflow: 'hidden', background: 'var(--uwr-ocean)' }}>
    <UnderwaterPlaceholder
      src="uploads/bg3.png"
      intensity={1}
      style={{ position: 'absolute', inset: 0 }}
    />
    <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(5,8,10,0.8) 0%, rgba(5,8,10,0.2) 100%)' }} />
    <div style={{ position: 'relative', padding: '120px 32px', maxWidth: 980 }}>
      <MonoTag color={accent === 'red' ? 'var(--uwr-red)' : 'var(--uwr-cyan)'}>// MANIFESTO</MonoTag>
      <h2 className="uwr-head" style={{
        fontSize: 'clamp(36px, 6vw, 80px)',
        margin: '20px 0 0', textWrap: 'balance', lineHeight: 0.95,
      }}>
        UNDERWATER RUGBY IS<br />NOT A SPORT.<br />
        IT IS PRESSURE,<br />CONTACT, SILENCE,<br />AND CONTROL.
      </h2>
    </div>
  </section>
);

const TechSection = ({ accent }) => {
  const accentColor = accent === 'red' ? 'var(--uwr-red)' : 'var(--uwr-cyan)';
  const bullets = [
    { n: '01', label: 'HEAVY COTTON', desc: '240–280 GSM. Cut to last seasons of pool deck and post-training.' },
    { n: '02', label: 'ATHLETIC FIT', desc: 'Tested on the league. Shoulder mobility for forward play, no excess fabric.' },
    { n: '03', label: 'BUILT BY PLAYERS', desc: 'Designed by active UWR players in Auckland, NZ. Tested in the pool before it ships.' },
  ];
  return (
    <section style={{ padding: '100px 32px', borderTop: '1px solid var(--uwr-line)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(260px, 1fr) 2fr', gap: 64, alignItems: 'flex-start' }}>
        <div>
          <MonoTag color={accentColor}>// TECH SPEC</MonoTag>
          <h2 className="uwr-head" style={{ fontSize: 'clamp(36px, 5vw, 64px)', margin: '16px 0 0', lineHeight: 0.95 }}>
            MADE FOR THE POOL DECK.<br />
            <span style={{ color: 'var(--uwr-off-dim)' }}>WORN OUTSIDE IT.</span>
          </h2>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
          {bullets.map((b, i) => (
            <div key={b.n} style={{
              display: 'grid', gridTemplateColumns: '60px 1fr 1.5fr',
              gap: 24, padding: '28px 0',
              borderTop: i === 0 ? '1px solid var(--uwr-line-strong)' : '1px solid var(--uwr-line)',
              borderBottom: i === bullets.length - 1 ? '1px solid var(--uwr-line-strong)' : 'none',
              alignItems: 'baseline',
            }}>
              <MonoTag color={accentColor}>{b.n}</MonoTag>
              <div className="uwr-head" style={{ fontSize: 18 }}>{b.label}</div>
              <div style={{ fontSize: 14, color: 'var(--uwr-off-dim)', lineHeight: 1.6 }}>{b.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Footer = ({ accent }) => {
  const accentColor = accent === 'red' ? 'var(--uwr-red)' : 'var(--uwr-cyan)';
  return (
    <footer style={{ background: 'var(--uwr-black)', borderTop: '1px solid var(--uwr-line-strong)', padding: '56px 32px 32px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 32, marginBottom: 48 }}>
        <div>
          <div className="uwr-head" style={{ fontSize: 32, marginBottom: 12 }}>UWR/SHOP</div>
          <div className="uwr-mono" style={{ color: 'var(--uwr-off-dim)' }}>BUILT BELOW THE SURFACE</div>
        </div>
        <div>
          <div className="uwr-mono" style={{ color: 'var(--uwr-off-dim)', marginBottom: 14 }}>// SHOP</div>
          {['Drop 01', 'Tees', 'Crewnecks', 'Lookbook'].map((x) => (
            <div key={x} style={{ marginBottom: 8, fontSize: 13 }}>{x}</div>
          ))}
        </div>
        <div>
          <div className="uwr-mono" style={{ color: 'var(--uwr-off-dim)', marginBottom: 14 }}>// CLUB</div>
          {['Manifesto', 'The League', 'Pro Players', 'Find a Club'].map((x) => (
            <div key={x} style={{ marginBottom: 8, fontSize: 13 }}>{x}</div>
          ))}
        </div>
        <div>
          <div className="uwr-mono" style={{ color: 'var(--uwr-off-dim)', marginBottom: 14 }}>// JOIN THE DEPTH</div>
          <div style={{ display: 'flex', borderBottom: '1px solid var(--uwr-line-strong)' }}>
            <input placeholder="email@depth.io" style={{
              flex: 1, background: 'transparent', border: 'none', color: 'var(--uwr-off)',
              padding: '8px 0', fontFamily: 'var(--uwr-mono)', fontSize: 11, outline: 'none',
            }} />
            <button style={{ background: 'transparent', border: 'none', color: accentColor, padding: 4 }}>
              <Arrow />
            </button>
          </div>
          <div className="uwr-mono" style={{ color: 'var(--uwr-off-dim)', marginTop: 10 }}>DROP NOTICES · NO SPAM</div>
        </div>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16, paddingTop: 24, borderTop: '1px solid var(--uwr-line)' }}>
        <div className="uwr-mono" style={{ color: 'var(--uwr-off-dim)' }}>© UWR/SHOP 2026 · ALL RIGHTS</div>
        <div className="uwr-mono" style={{ color: 'var(--uwr-off-dim)' }}>SHIPPING WORLDWIDE · AUCKLAND, NZ</div>
      </div>
    </footer>
  );
};

const HomePage = ({ accent, hudIntensity, bgDepth, cardLayout, setRoute }) => (
  <>
    <Hero accent={accent} hudIntensity={hudIntensity} bgDepth={bgDepth} setRoute={setRoute} />
    <HomeDropSection accent={accent} layout={cardLayout} setRoute={setRoute} />
    <IdentitySection accent={accent} />
    <TechSection accent={accent} />
    <Footer accent={accent} />
  </>
);

Object.assign(window, { HomePage, ProductCard, Footer });