/* global React */

// ——— Shared image sources ———
// Men lifestyle (Unsplash featured photos, stable IDs)
// Caucasian men 35–45: professional, athletic, lifestyle
const LIFESTYLE = {
  heroMan: 'https://images.unsplash.com/photo-1560250097-0b93528c311a?w=1200&q=80&auto=format&fit=crop', // professional portrait, suit
  coffee:  'https://images.unsplash.com/photo-1531891437562-4301cf35b7e4?w=900&q=80&auto=format&fit=crop', // man with coffee, casual
  run:     'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=900&q=80&auto=format&fit=crop', // athletic, running
  reading: 'https://images.unsplash.com/photo-1488161628813-04466f872be2?w=900&q=80&auto=format&fit=crop', // lifestyle
  portrait:'https://images.unsplash.com/photo-1560250097-0b93528c311a?w=900&q=80&auto=format&fit=crop',   // professional
  portrait2:'https://images.unsplash.com/photo-1557862921-37829c790f19?w=900&q=80&auto=format&fit=crop',  // professional 2
  portrait3:'https://images.unsplash.com/photo-1506634572416-48cdfe530110?w=900&q=80&auto=format&fit=crop', // athletic portrait
};

// Product "photography": a custom Atwood jar rendered on a warm backdrop.
// This replaces stock gummy photos so the packaging is on-brand (dark matte cedar,
// minimal white typography, à la Seed). Swap to real photography when available.
const JARS = {
  daily: { label: '01 · Daily T-Support',   subl: 'TESTOSTERONE · ENERGY · FOCUS',    color: '#2F4A3C' },
  sleep: { label: '02 · Nightly Recovery',  subl: 'DEEP SLEEP · OVERNIGHT T',         color: '#1F3026' },
  drive: { label: '03 · Drive',             subl: 'LIBIDO · STAMINA · FREE T',        color: '#3B5A4A' },
};

window.LIFESTYLE = LIFESTYLE;
window.JARS = JARS;

// ——— Reveal-on-scroll wrapper ———
function Reveal({ children, delay = 0, as: As = 'div', style }) {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setShown(true); io.disconnect(); } }, { threshold: 0.12 });
    io.observe(el); return () => io.disconnect();
  }, []);
  return (
    <As ref={ref} style={{
      ...style,
      opacity: shown ? 1 : 0,
      transform: shown ? 'translateY(0)' : 'translateY(16px)',
      transition: `opacity 600ms var(--ease) ${delay}ms, transform 600ms var(--ease) ${delay}ms`,
    }}>{children}</As>
  );
}
window.Reveal = Reveal;

// ——— Nav ———
function Nav({ onCart, cartCount }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [['Shop','#shop'],['How it works','#how'],['Science','#science'],['Journal','#journal']];
  return (
    <header style={{
      position:'sticky', top:0, zIndex:20,
      background: scrolled || menuOpen ? 'rgba(244,239,230,0.92)' : 'var(--bone)',
      backdropFilter: scrolled || menuOpen ? 'blur(12px)' : 'none',
      WebkitBackdropFilter: scrolled || menuOpen ? 'blur(12px)' : 'none',
      borderBottom: scrolled || menuOpen ? '1px solid var(--sage-200)' : '1px solid transparent',
      transition:'background var(--dur-panel) var(--ease), border-color var(--dur-panel) var(--ease)',
    }}>
      <div className="section-pad" style={{maxWidth:'var(--maxw)', margin:'0 auto', padding:'14px 20px', display:'flex', alignItems:'center', gap:16}}>
        <a href="#top" style={{fontFamily:'var(--font-display)', fontWeight:500, fontSize:26, color:'var(--cedar-700)', letterSpacing:'-0.02em', textDecoration:'none'}}>atwood</a>
        <nav className="nav-desktop" style={{display:'flex', gap:28, marginLeft:12}}>
          {links.map(([l,h]) =>
            <a key={l} href={h} style={{fontSize:14, fontWeight:500, color:'var(--ink)', textDecoration:'none'}}>{l}</a>
          )}
        </nav>
        <div style={{flex:1}} />
        <a href="#" className="nav-desktop" style={{fontSize:14, color:'var(--slate)', textDecoration:'none'}}>Sign in</a>
        <button onClick={onCart} className="btn btn-ghost btn-sm" style={{position:'relative'}}>
          Cart
          {cartCount > 0 && <span style={{
            marginLeft:8, background:'var(--cedar-700)', color:'var(--bone)',
            borderRadius:999, fontSize:11, padding:'2px 8px', fontWeight:600,
          }}>{cartCount}</span>}
        </button>
        <button className="btn btn-primary btn-sm nav-desktop">Take the quiz</button>
        {/* Mobile menu toggle */}
        <button
          className="only-mobile"
          onClick={()=>setMenuOpen(o => !o)}
          aria-label="Menu"
          style={{
            width:40, height:40, border:'1px solid var(--border)', background:'transparent',
            borderRadius:'var(--r-sm)', cursor:'pointer', display:'flex',
            flexDirection:'column', alignItems:'center', justifyContent:'center', gap:4, padding:0,
          }}
        >
          <span style={{width:18, height:1.5, background:'var(--ink)', transition:'transform 200ms var(--ease)', transform: menuOpen ? 'translateY(3px) rotate(45deg)' : 'none'}}/>
          <span style={{width:18, height:1.5, background:'var(--ink)', opacity: menuOpen ? 0 : 1}}/>
          <span style={{width:18, height:1.5, background:'var(--ink)', transition:'transform 200ms var(--ease)', transform: menuOpen ? 'translateY(-3px) rotate(-45deg)' : 'none'}}/>
        </button>
      </div>

      {/* Mobile dropdown menu */}
      <div className="only-mobile" style={{
        overflow:'hidden',
        maxHeight: menuOpen ? 400 : 0,
        transition: 'max-height var(--dur-panel) var(--ease)',
      }}>
        <nav style={{padding:'8px 20px 24px', display:'flex', flexDirection:'column', gap:2, borderTop: menuOpen ? '1px solid var(--sage-200)' : 'none'}}>
          {links.map(([l,h]) =>
            <a key={l} href={h} onClick={()=>setMenuOpen(false)} style={{fontSize:18, fontWeight:500, color:'var(--ink)', textDecoration:'none', padding:'14px 0', borderBottom:'1px solid var(--sage-200)'}}>{l}</a>
          )}
          <a href="#" onClick={()=>setMenuOpen(false)} style={{fontSize:16, color:'var(--slate)', textDecoration:'none', padding:'14px 0', borderBottom:'1px solid var(--sage-200)'}}>Sign in</a>
          <button className="btn btn-primary btn-lg" style={{marginTop:20, width:'100%'}}>Take the quiz</button>
        </nav>
      </div>
    </header>
  );
}

// ——— Hero ———
function Hero({ onQuiz, onShop }) {
  return (
    <section id="top" className="section-pad hero-padding" style={{padding:'48px 32px 120px'}}>
      <div className="grid-hero" style={{maxWidth:'var(--maxw)', margin:'0 auto'}}>
        <Reveal>
          <div className="eyebrow" style={{marginBottom:20}}>Men's Wellness · Est. 2024</div>
          <h1 className="display-1" style={{margin:'0 0 24px'}}>Feel like yourself again.</h1>
          <p className="body-lg" style={{maxWidth:'52ch', color:'var(--slate)', margin:'0 0 32px'}}>
            Daily supplements designed for men, built around how you actually live. Clinically-studied ingredients.
          </p>
          <div style={{display:'flex', gap:12, alignItems:'center'}}>
            <button onClick={onQuiz} className="btn btn-primary btn-lg">Start the quiz</button>
            <button onClick={onShop} className="btn btn-secondary btn-lg">See the lineup</button>
          </div>
          <div style={{marginTop:32, display:'flex', gap:22, alignItems:'center', color:'var(--slate)', fontSize:13, flexWrap:'wrap'}}>
            <span>✓ Clinically studied</span><span>·</span>
            <span>✓ Third-party tested</span><span>·</span>
            <span>✓ Cancel anytime</span>
          </div>
        </Reveal>
        <Reveal delay={120}>
          <div style={{
            aspectRatio:'4/5', borderRadius:'var(--r-lg)', overflow:'hidden',
            boxShadow:'var(--shadow-2)', position:'relative',
          }}>
            <AtwoodJar product={{ name:'Atwood Daily', color:'#2F4A3C', label:'01 · Daily T-Support', subl:'TESTOSTERONE · ENERGY · FOCUS' }} scene="morning" />
          </div>
        </Reveal>
      </div>

      {/* Press strip */}
      <div className="press-strip" style={{maxWidth:'var(--maxw)', margin:'72px auto 0', paddingTop:32, borderTop:'1px solid var(--sage-200)', display:'flex', gap:32, alignItems:'center', justifyContent:'space-between', color:'var(--slate)', flexWrap:'wrap', rowGap:16}}>
        <span className="eyebrow">As seen in</span>
        {['GQ','Men\u2019s Health','Bloomberg','Wired','The Atlantic'].map(n =>
          <span key={n} style={{fontFamily:'var(--font-display)', fontSize:22, fontWeight:500, opacity:0.55, letterSpacing:'-0.01em'}}>{n}</span>
        )}
      </div>
    </section>
  );
}

window.MarketingNav = Nav;
window.MarketingHero = Hero;