/* global React */

function HowItWorks() {
  const steps = [
    { n:'01', h:'Take the quiz', s:'Six questions about sleep, energy, and goals. Two minutes.' },
    { n:'02', h:'Get your ritual', s:'We match you to Daily, Sleep, Drive, or a bundle built around your goals.' },
    { n:'03', h:'Ship every 30 days', s:'Free shipping on subscriptions. Skip, swap, or cancel in one tap.' },
  ];
  return (
    <section id="how" className="section-pad sec-y">
      <div style={{maxWidth:'var(--maxw)', margin:'0 auto'}}>
        <Reveal>
          <div className="eyebrow" style={{marginBottom:14}}>How it works</div>
          <h2 className="h2" style={{margin:'0 0 56px', maxWidth:'18ch'}}>A routine that fits the life you already have.</h2>
        </Reveal>
        <div className="grid-3" style={{gap:36}}>
          {steps.map((s, i) => (
            <Reveal key={s.n} delay={i*90}>
              <div style={{borderTop:'1px solid var(--sage-200)', paddingTop:22}}>
                <div style={{fontFamily:'var(--font-mono)', fontSize:12, color:'var(--cedar-700)', letterSpacing:'0.15em', marginBottom:16}}>{s.n}</div>
                <div className="h3" style={{margin:'0 0 10px'}}>{s.h}</div>
                <p className="body" style={{color:'var(--slate)', margin:0}}>{s.s}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function LifestyleStrip() {
  const shots = [LIFESTYLE.coffee, LIFESTYLE.run, LIFESTYLE.reading];
  const captions = ['Morning, with coffee', 'After a run, before the day', 'Fifteen minutes, every evening'];
  return (
    <section className="section-pad" style={{paddingBottom:64}}>
      <div className="grid-3" style={{maxWidth:'var(--maxw)', margin:'0 auto', gap:18}}>
        {shots.map((src, i) => (
          <Reveal key={i} delay={i*80}>
            <div style={{
              aspectRatio:'4/5', borderRadius:'var(--r-lg)', overflow:'hidden',
              backgroundImage:`url(${src})`, backgroundSize:'cover', backgroundPosition:'center', position:'relative',
            }}>
              <div style={{position:'absolute', inset:0, background:'linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.4) 100%)'}}/>
              <div style={{position:'absolute', bottom:20, left:22, right:22, color:'var(--bone)', fontFamily:'var(--font-display)', fontSize:22, fontWeight:500, letterSpacing:'-0.01em', lineHeight:1.15}}>{captions[i]}</div>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

function Science() {
  const pillars = [
    { h:'Tongkat Ali · 1,000 mg', s:'Clinically studied to support free testosterone and reduce stress biomarkers.' },
    { h:'Fenugreek · 675 mg', s:'Shown in trials to support libido, strength, and healthy testosterone levels.' },
    { h:'Shilajit · 400 mg', s:'Ayurvedic resin rich in fulvic acid — supports total T and energy.' },
    { h:'Vitamin D3 + K1/K2', s:'The stack most men are low in. Dosed together for absorption and bone health.' },
    { h:'Zinc Citrate · 30 mg', s:'An essential co-factor in testosterone synthesis. Most diets fall short.' },
    { h:'Taurine + Boron', s:'Taurine for heart and recovery. Boron for free T and hormone balance.' },
  ];
  return (
    <section id="science" className="section-pad sec-y" style={{background:'var(--cedar-700)', color:'var(--bone)'}}>
      <div style={{maxWidth:'var(--maxw)', margin:'0 auto'}}>
        <Reveal>
          <div className="eyebrow" style={{color:'var(--moss-300)', marginBottom:18}}>The Science</div>
          <h2 className="h2" style={{margin:'0 0 56px', maxWidth:'18ch', color:'var(--bone)'}}>Eight ingredients. No filler. No fluff.</h2>
        </Reveal>
        <div className="grid-2" style={{gap:'40px 60px', maxWidth:980}}>
          {pillars.map((p, i) => (
            <Reveal key={p.h} delay={i*70}>
              <div style={{height:1, background:'rgba(244,239,230,0.25)', marginBottom:16}}/>
              <div style={{fontFamily:'var(--font-display)', fontSize:26, fontWeight:500, letterSpacing:'-0.01em', marginBottom:8}}>{p.h}</div>
              <div style={{fontSize:15, lineHeight:1.6, color:'rgba(244,239,230,0.78)'}}>{p.s}</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  const quotes = [
    { q:'Two weeks in, my energy in the afternoon is the biggest difference. No crash at 3pm.', n:'Michael, 41 · New York', a:LIFESTYLE.portrait },
    { q:'Finally a wellness brand I\u2019m not embarrassed to leave on the counter.', n:'David, 38 · Austin', a:LIFESTYLE.portrait2 },
    { q:'My sleep score jumped 14 points in the first month. That\u2019s it \u2014 that\u2019s the review.', n:'Tomás, 45 · Los Angeles', a:LIFESTYLE.portrait3 },
  ];
  const [i, setI] = React.useState(0);
  const q = quotes[i];
  return (
    <section className="section-pad sec-y" style={{background:'var(--paper)'}}>
      <div style={{maxWidth:900, margin:'0 auto', textAlign:'center'}}>
        <Reveal>
          <div className="eyebrow" style={{marginBottom:20}}>What members say</div>
          <div style={{fontFamily:'var(--font-display)', fontWeight:500, fontSize:'clamp(28px, 3.4vw, 44px)', lineHeight:1.2, letterSpacing:'-0.015em', color:'var(--ink)', marginBottom:32}}>
            &ldquo;{q.q}&rdquo;
          </div>
          <div style={{display:'flex', alignItems:'center', justifyContent:'center', gap:14}}>
            <div style={{width:48, height:48, borderRadius:999, backgroundImage:`url(${q.a})`, backgroundSize:'cover', backgroundPosition:'center'}}/>
            <div className="body-sm">{q.n}</div>
          </div>
          <div style={{display:'flex', gap:8, justifyContent:'center', marginTop:32}}>
            {quotes.map((_, k) =>
              <button key={k} onClick={()=>setI(k)} aria-label={`Quote ${k+1}`} style={{
                width: i===k ? 28 : 10, height:10, borderRadius:999, border:'none', cursor:'pointer',
                background: i===k ? 'var(--cedar-700)' : 'var(--sage-200)',
                transition:'width 280ms var(--ease), background 280ms var(--ease)',
              }}/>
            )}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function FAQ() {
  const items = [
    { q:'Is Atwood safe to take daily?', a:'Yes. Atwood supplements use clinically-studied doses of ingredients generally recognized as safe. As with anything, talk to your doctor if you\u2019re on medication.' },
    { q:'How long until I feel a difference?', a:'Most men notice changes in energy and sleep within 2–3 weeks. Ingredients like tongkat ali and vitamin D3 build up over time.' },
    { q:'Can I pause or cancel my subscription?', a:'Anytime, from your account. Skip a month, swap products, or cancel in one tap. No calls, no forms.' },
    { q:'Is this a replacement for testosterone therapy?', a:'No. Atwood is a daily supplement, not a medication. If you\u2019re exploring TRT, talk to your doctor.' },
    { q:'Where do you ship?', a:'All 50 US states. International coming later this year.' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section id="journal" className="section-pad sec-y">
      <div style={{maxWidth:880, margin:'0 auto'}}>
        <Reveal>
          <div className="eyebrow" style={{marginBottom:16}}>Questions</div>
          <h2 className="h2" style={{margin:'0 0 40px'}}>What men ask.</h2>
        </Reveal>
        <div style={{borderTop:'1px solid var(--sage-200)'}}>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{borderBottom:'1px solid var(--sage-200)'}}>
                <button onClick={()=>setOpen(isOpen ? -1 : i)} style={{
                  width:'100%', padding:'22px 4px', background:'none', border:'none', cursor:'pointer', textAlign:'left',
                  display:'flex', justifyContent:'space-between', alignItems:'center', gap:16, font:'inherit',
                }}>
                  <span style={{fontFamily:'var(--font-display)', fontSize:22, fontWeight:500, letterSpacing:'-0.01em', color:'var(--ink)'}}>{it.q}</span>
                  <span style={{fontSize:22, color:'var(--cedar-700)', transition:'transform var(--dur-panel) var(--ease)', transform: isOpen ? 'rotate(45deg)' : 'rotate(0)'}}>+</span>
                </button>
                <div style={{
                  maxHeight: isOpen ? 200 : 0, overflow:'hidden',
                  transition:'max-height var(--dur-panel) var(--ease), padding var(--dur-panel) var(--ease)',
                  padding: isOpen ? '0 4px 22px' : '0 4px',
                }}>
                  <p className="body" style={{color:'var(--slate)', margin:0, maxWidth:'62ch'}}>{it.a}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Quiz({ onStart }) {
  return (
    <section className="section-pad sec-y" style={{background:'var(--cedar-700)', color:'var(--bone)'}}>
      <div style={{maxWidth:880, margin:'0 auto', textAlign:'center'}}>
        <Reveal>
          <div className="eyebrow" style={{color:'var(--moss-300)', marginBottom:18}}>Personalized</div>
          <h2 className="h2" style={{margin:'0 0 20px', color:'var(--bone)'}}>Not sure where to start?</h2>
          <p className="body-lg" style={{color:'rgba(244,239,230,0.82)', maxWidth:'46ch', margin:'0 auto 32px'}}>
            Answer six questions about sleep, energy, and goals. We&rsquo;ll match you to a daily ritual in under two minutes.
          </p>
          <button onClick={onStart} className="btn" style={{background:'var(--bone)', color:'var(--cedar-900)', padding:'18px 32px', fontSize:'var(--fs-18)'}}>Take the 2-minute quiz</button>
        </Reveal>
      </div>
    </section>
  );
}

function Footer() {
  const cols = [
    ['Shop', ['Daily','Sleep','Drive','Bundles','Gift card']],
    ['Learn', ['How it works','Science','Journal','FAQ']],
    ['Company', ['About','Careers','Contact','Press']],
    ['Legal', ['Terms','Privacy','Shipping','Accessibility']],
  ];
  return (
    <footer className="section-pad" style={{background:'var(--bone)', borderTop:'1px solid var(--sage-200)', padding:'64px 20px 32px'}}>
      <div style={{maxWidth:'var(--maxw)', margin:'0 auto'}}>
        <div className="grid-footer" style={{marginBottom:48}}>
          <div>
            <div style={{fontFamily:'var(--font-display)', fontWeight:500, fontSize:34, color:'var(--cedar-700)', letterSpacing:'-0.02em', marginBottom:16}}>atwood</div>
            <p className="body-sm" style={{maxWidth:'28ch', margin:0}}>Daily-ritual supplements for men who want their energy, drive, and sleep dialed in.</p>
          </div>
          {cols.map(([h,items]) => (
            <div key={h}>
              <div className="eyebrow" style={{marginBottom:14}}>{h}</div>
              <ul style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:10}}>
                {items.map(i => <li key={i}><a href="#" style={{fontSize:14, color:'var(--ink)', textDecoration:'none'}}>{i}</a></li>)}
              </ul>
            </div>
          ))}
        </div>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', paddingTop:24, borderTop:'1px solid var(--sage-200)', fontSize:12, color:'var(--mute)', gap:24, flexWrap:'wrap'}}>
          <span>© Atwood, Inc. 2026</span>
          <span>These statements have not been evaluated by the FDA. Atwood is not a medication.</span>
        </div>
      </div>
    </footer>
  );
}

window.MarketingHowItWorks = HowItWorks;
window.MarketingLifestyle = LifestyleStrip;
window.MarketingScience = Science;
window.MarketingTestimonials = Testimonials;
window.MarketingFAQ = FAQ;
window.MarketingQuiz = Quiz;
window.MarketingFooter = Footer;
