/* global React */

// Distinct per-product formulations
const DAILY_FORMULA = [
  'Tongkat Ali (Longjack) · 1,000 mg',
  'Fenugreek Seed Extract · 675 mg',
  'Taurine · 675 mg',
  'Shilajit · 400 mg',
  'Vitamin D3 (Cholecalciferol) · 100 mcg (~500% DV)',
  'Vitamin K1 & K2 · 100 mcg',
  'Zinc (Zinc Citrate) · 30 mg',
  'Boron · 4 mg',
  'Green Coffee Bean Extract · 50 mg caffeine',
];

const SLEEP_FORMULA = [
  'Magnesium Bisglycinate Chelate · 200 mg elemental',
  'Glycine · 1,000 mg',
  'L-Theanine (Suntheanine) · 200 mg',
  'KSM-66 Ashwagandha · 300 mg',
  'Apigenin (chamomile extract) · 50 mg',
  'Melatonin · 0.5 mg',
  'Zinc Bisglycinate · 10 mg elemental',
  'Vitamin D3 · 2,000 IU',
  'Vitamin K2 (MK-7) · 100 mcg',
];

const DRIVE_FORMULA = [
  'Creatine Monohydrate · 5,000 mg',
  'L-Citrulline Malate · 3,000 mg',
  'Maca Root Extract (gelatinized) · 1,500 mg',
  'Horny Goat Weed (20% Icariin) · 500 mg',
  'Panax Ginseng (Korean Red) · 400 mg',
  'Pine Bark Extract (Pycnogenol) · 100 mg',
  'CoQ10 (Ubiquinone) · 100 mg',
  'Beet Root Extract · 500 mg',
];

const atwoodProducts = [
  { key:'daily', name:'Atwood Daily', tag:'Morning Ritual',
    sub:'Testosterone, energy, focus', price:99, sku:'60 gummies',
    img: window.JARS.daily, color:'#2F4A3C',
    ingredients: DAILY_FORMULA,
    copy:'The synthesis stack. A daytime hormonal foundation.',
    headline:'The synthesis stack.',
    narrative:"Daily sets your hormonal tone for the next 16 hours. Tongkat Ali at 1,000 mg is the workhorse — the strongest evidence-backed botanical for raising free testosterone by lowering SHBG. Fenugreek and Shilajit stack on with complementary mechanisms; PrimaVie Shilajit data showed ~23% total T increases over 90 days.\n\nBoron at 4 mg is the hidden lever almost no competitor uses correctly — it lowers SHBG and estradiol, freeing bound testosterone. Zinc, D3, and K1/K2 are the cofactors without which Leydig cells can't synthesize T at all. Taurine handles oxidative stress in the testes. The 50 mg of caffeine from green coffee bean gives a clean morning lift — not a pre-workout." },

  { key:'sleep', name:'Atwood Sleep', tag:'Evening Ritual',
    sub:'Recovery, deep sleep, T at night', price:99, sku:'60 gummies',
    img: window.JARS.sleep, color:'#2F4A3C',
    ingredients: SLEEP_FORMULA,
    copy:'The recovery and synthesis stack disguised as a sleep aid.',
    headline:'The recovery stack.',
    narrative:"Testosterone isn't made during the day — it peaks during REM. Men sleeping five hours have T levels comparable to men a decade older. Sleep does three jobs at once: it crushes cortisol (T's primary antagonist), deepens sleep architecture so the nocturnal T pulse fires, and sneaks in two ingredients that directly support T synthesis.\n\nKSM-66 Ashwagandha is the star — a clinically proven cortisol reducer that's independently been shown to raise testosterone 14–22%. Magnesium glycinate does double duty: GABAergic sleep support plus direct free-T elevation via SHBG reduction. Apigenin is a mild aromatase inhibitor, blocking overnight T-to-estrogen conversion. Glycine and L-Theanine handle onset and depth. Low-dose melatonin — 0.5 mg, not the 5–10 mg garbage everyone sells — restores rhythm without next-day fog. Zinc bisglycinate at night because nocturnal T synthesis demands it. This isn't a sleep aid. It's a recovery and synthesis stack disguised as one." },

  { key:'drive', name:'Atwood Drive', tag:'Libido + Performance',
    sub:'Libido, stamina, pump', price:99, sku:'60 gummies',
    img: window.JARS.drive, color:'#4E6E5E',
    ingredients: DRIVE_FORMULA,
    copy:'The expression stack. Hormones made visible.',
    headline:'The expression stack.',
    narrative:"Daily and Sleep optimize the hormones. Drive turns those hormones into results — workouts, erections, mental drive, performance.\n\nCreatine at 5 g is the foundation: the most-studied supplement in history, it increases DHT (the more potent androgen), boosts ATP for training, and has strong cognitive data. L-Citrulline at 3 g is the blood-flow engine — it converts to arginine and drives nitric oxide, the same pathway Viagra targets, but upstream. Pine Bark (Pycnogenol) paired with L-Citrulline has its own published RCTs for erectile function. Horny Goat Weed's icariin is a natural PDE5 inhibitor (again, Viagra's target). Maca and Korean Red Ginseng handle libido and drive adaptogenically. Beet root adds another NO pathway. CoQ10 supports mitochondrial function, including sperm quality.\n\nNotably absent: no Tongkat Ali, no Ashwagandha, no Fenugreek — those are covered in Daily and Sleep. Drive isn't redundant. It's the conversion layer." },
];
window.ATWOOD_DAILY = DAILY_FORMULA;
window.ATWOOD_SLEEP = SLEEP_FORMULA;
window.ATWOOD_DRIVE = DRIVE_FORMULA;
window.AtwoodProducts = atwoodProducts;

function ProductGrid({ onSelect, onAdd }) {
  return (
    <section id="shop" className="section-pad sec-y" style={{background:'var(--paper)'}}>
      <div style={{maxWidth:'var(--maxw)', margin:'0 auto'}}>
        <Reveal>
          <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom:40, gap:24, flexWrap:'wrap'}}>
            <div>
              <div className="eyebrow" style={{marginBottom:10}}>The Lineup</div>
              <h2 className="h2" style={{margin:0, maxWidth:'14ch'}}>Three rituals.<br/>One dialed-in routine.</h2>
            </div>
            <a href="#" style={{fontSize:14, fontWeight:500}}>See all products →</a>
          </div>
        </Reveal>
        <div className="grid-3">
          {atwoodProducts.map((p, i) => (
            <Reveal key={p.key} delay={i*90}>
              <div className="card-product" style={{padding:20}}>
                <button onClick={()=>onSelect(p)} style={{
                  display:'block', width:'100%', padding:0, border:'none', background:'none', cursor:'pointer',
                }}>
                  <div style={{
                    aspectRatio:'4/5', borderRadius:'var(--r-md)', marginBottom:18, overflow:'hidden',
                  }}>
                    <AtwoodJar product={p} scene={i===1 ? 'shelf' : i===2 ? 'studio' : 'morning'} />
                  </div>
                </button>
                <div className="eyebrow" style={{marginBottom:6}}>{p.tag}</div>
                <div className="h4" style={{margin:'0 0 6px'}}>{p.name}</div>
                <div className="body-sm" style={{marginBottom:14}}>{p.sub}</div>
                <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', gap:12}}>
                  <span style={{fontFamily:'var(--font-mono)', fontSize:14, color:'var(--cedar-800)'}}>${p.price} / mo</span>
                  <button onClick={()=>onAdd(p)} className="btn btn-secondary btn-sm">Add to cart</button>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.MarketingProductGrid = ProductGrid;