/* global React, AtwoodJar, AtwoodProducts */

function PDPHero({ product, sceneA = 'morning', sceneB = 'shelf', sceneC = 'studio' }) {
  const [active, setActive] = React.useState(0);
  const scenes = [sceneA, sceneB, sceneC];
  return (
    <div>
      <div style={{
        aspectRatio:'1/1', borderRadius:'var(--r-lg)', overflow:'hidden', marginBottom:14,
        boxShadow:'var(--shadow-2)',
      }}>
        <AtwoodJar product={product} scene={scenes[active]} />
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:10}}>
        {scenes.map((s, i) => (
          <button key={i} onClick={()=>setActive(i)} style={{
            aspectRatio:'1/1', borderRadius:'var(--r-sm)', overflow:'hidden',
            border: active===i ? '2px solid var(--cedar-700)' : '1px solid var(--border)',
            padding:0, background:'none', cursor:'pointer',
          }}>
            <AtwoodJar product={product} scene={s} />
          </button>
        ))}
      </div>
    </div>
  );
}

function BuyCard({ product, onAdd }) {
  const [plan, setPlan] = React.useState('subscribe');
  const [qty, setQty] = React.useState(1);
  const all = window.AtwoodProducts || [];
  const BUNDLE_REG = 300;
  const BUNDLE_PRICE = 129;
  const singlePrice = +(product.price * 0.7).toFixed(2); // subscribe & save 30%
  const unit = plan === 'bundle' ? BUNDLE_PRICE : singlePrice;
  const total = (unit * qty).toFixed(2);
  return (
    <div style={{
      background:'var(--bone)', border:'1px solid var(--sage-200)',
      borderRadius:'var(--r-lg)', padding:28,
    }}>
      <div className="eyebrow" style={{marginBottom:10}}>{product.tag}</div>
      <h1 className="h2" style={{margin:'0 0 10px', fontSize:32}}>{product.name}</h1>
      <p className="body" style={{color:'var(--slate)', margin:'0 0 20px'}}>{product.sub}</p>

      <div style={{display:'flex', gap:14, alignItems:'center', marginBottom:20, fontSize:13, color:'var(--slate)'}}>
        <span>★★★★★</span>
        <span>4.8 · 2,417 reviews</span>
      </div>

      <div style={{display:'flex', flexDirection:'column', gap:10, marginBottom:18}}>
        {[
          {key:'subscribe', title:`Subscribe & save 30%`, sub:'Ship every 30 days · cancel anytime', pill:'Most popular', price:singlePrice, strike:product.price},
          {key:'bundle', title:'The Complete Atwood System', sub:'Daily + Sleep + Drive · save $171/mo', pill:'Best value', price:BUNDLE_PRICE, strike:BUNDLE_REG},
        ].map(o => (
          <label key={o.key} style={{
            display:'flex', gap:12, padding:'16px 18px',
            borderRadius:'var(--r-md)',
            border:`1px solid ${plan===o.key ? 'var(--cedar-700)' : 'var(--border)'}`,
            background: plan===o.key ? 'var(--paper)' : 'transparent',
            cursor:'pointer', alignItems:'center',
          }}>
            <input type="radio" checked={plan===o.key} onChange={()=>setPlan(o.key)} style={{accentColor:'var(--cedar-700)'}}/>
            <div style={{flex:1}}>
              <div style={{display:'flex', gap:10, alignItems:'center', flexWrap:'wrap'}}>
                <span style={{fontSize:14, fontWeight:600}}>{o.title}</span>
                {o.pill && <span className="pill pill-amber" style={{fontSize:10}}>{o.pill}</span>}
              </div>
              <div className="body-sm" style={{marginTop:2, fontSize:12}}>{o.sub}</div>
            </div>
            <div style={{textAlign:'right'}}>
              <div style={{fontFamily:'var(--font-mono)', fontSize:14, color:'var(--cedar-800)'}}>${o.price.toFixed(2)}</div>
              <div style={{fontFamily:'var(--font-mono)', fontSize:11, color:'var(--mute)', textDecoration:'line-through'}}>${o.strike.toFixed(2)}</div>
            </div>
          </label>
        ))}
      </div>

      <div style={{display:'flex', alignItems:'center', gap:14, marginBottom:16}}>
        <div className="eyebrow">Qty</div>
        <div style={{display:'inline-flex', alignItems:'center', border:'1px solid var(--border)', borderRadius:'var(--r-sm)', overflow:'hidden'}}>
          <button onClick={()=>setQty(Math.max(1, qty-1))} style={{border:'none', background:'none', padding:'6px 12px', cursor:'pointer', fontSize:16}}>−</button>
          <span style={{padding:'0 12px', fontFamily:'var(--font-mono)', fontSize:14}}>{qty}</span>
          <button onClick={()=>setQty(qty+1)} style={{border:'none', background:'none', padding:'6px 12px', cursor:'pointer', fontSize:16}}>+</button>
        </div>
      </div>

      <button onClick={()=>onAdd(product, qty, plan)} className="btn btn-primary btn-lg" style={{width:'100%'}}>
        Add to cart · ${total}
      </button>

      <div style={{marginTop:18, display:'flex', flexDirection:'column', gap:8, fontSize:13, color:'var(--slate)'}}>
        <div>✓ Free shipping on subscriptions</div>
        <div>✓ Cancel, skip, or swap anytime</div>
        <div>✓ 60-day satisfaction guarantee</div>
      </div>
    </div>
  );
}

function IngredientAccordion({ product }) {
  const details = {
    // Daily
    'Tongkat Ali (Longjack) · 1,000 mg': 'Clinically-studied adaptogen shown to support free testosterone, reduce cortisol, and improve markers of stress and recovery in men.',
    'Fenugreek Seed Extract · 675 mg': 'Libido- and strength-supporting botanical. Multiple RCTs in men aged 30–45 show improvements in total T and sexual function.',
    'Taurine · 675 mg': 'Amino acid that supports heart health, athletic recovery, and mitochondrial energy production.',
    'Shilajit · 400 mg': 'Ayurvedic resin rich in fulvic acid. Studied for total testosterone support and cellular energy (ATP).',
    'Vitamin D3 (Cholecalciferol) · 100 mcg (~500% DV)': 'The testosterone vitamin. Most men are low. Dosed at 500% DV for real replenishment.',
    'Vitamin K1 & K2 · 100 mcg': 'Partners with D3 for calcium transport and bone and arterial health.',
    'Zinc (Zinc Citrate) · 30 mg': 'Essential co-factor in testosterone synthesis. Dosed in the readily-absorbed citrate form.',
    'Boron · 4 mg': 'Trace mineral shown to increase free testosterone and improve T:E ratio.',
    'Green Coffee Bean Extract · 50 mg caffeine': 'A clean, moderate lift — about half a cup of coffee. Pairs with adaptogens for focus without jitters.',

    // Sleep
    'Magnesium Bisglycinate Chelate · 200 mg elemental': 'The most bioavailable form of magnesium. Supports muscle relaxation, parasympathetic tone, and deep sleep.',
    'Glycine · 1,000 mg': 'Amino acid that lowers core body temperature and improves subjective and objective sleep quality.',
    'L-Theanine (Suntheanine) · 200 mg': 'Amino acid from green tea that promotes alpha-wave brain activity — calm, without sedation.',
    'KSM-66 Ashwagandha · 300 mg': 'The most-studied ashwagandha extract. Lowers cortisol and supports recovery when dosed before sleep.',
    'Apigenin (chamomile extract) · 50 mg': 'Flavonoid from chamomile. Gently binds GABA receptors to help the nervous system wind down.',
    'Melatonin · 0.5 mg': 'A deliberately low dose. Helps you fall asleep without the grogginess of 3–5 mg doses.',
    'Zinc Bisglycinate · 10 mg elemental': 'Supports overnight testosterone synthesis and immune function. Chelated form is gentle on the stomach.',
    'Vitamin D3 · 2,000 IU': 'Evening D3 to round out daily intake. Works alongside K2 for calcium metabolism.',
    'Vitamin K2 (MK-7) · 100 mcg': 'The long-acting form of K2. Directs calcium to bones and away from arteries. D3\u2019s essential partner.',

    // Drive
    'Creatine Monohydrate · 5,000 mg': 'The most-studied supplement in sports science. Clinically dosed for strength, power, and lean mass.',
    'L-Citrulline Malate · 3,000 mg': 'Boosts nitric oxide production for vasodilation and pump. Studied for endurance and reduced soreness.',
    'Maca Root Extract (gelatinized) · 1,500 mg': 'Peruvian adaptogen traditionally used for libido, stamina, and mood. Gelatinized form is easier on digestion.',
    'Horny Goat Weed (20% Icariin) · 500 mg': 'Standardized for icariin — the active compound studied for circulation and libido support.',
    'Panax Ginseng (Korean Red) · 400 mg': 'Traditional adaptogen clinically studied for erectile function, energy, and cognitive performance.',
    'Pine Bark Extract (Pycnogenol) · 100 mg': 'Antioxidant flavonoid complex clinically studied for circulation and vascular health.',
    'CoQ10 (Ubiquinone) · 100 mg': 'Mitochondrial coenzyme essential for cellular energy and heart health. Levels decline with age.',
    'Beet Root Extract · 500 mg': 'Natural source of dietary nitrates that convert to nitric oxide — the same pathway as citrulline.',
  };
  const [open, setOpen] = React.useState(0);
  const countLabel = { 9:'Nine', 8:'Eight' }[product.ingredients.length] || String(product.ingredients.length);
  return (
    <div>
      <div className="eyebrow" style={{marginBottom:14}}>What's inside</div>
      <h2 className="h2" style={{margin:'0 0 24px'}}>{countLabel} ingredients. Clinical doses.</h2>
      <div style={{borderTop:'1px solid var(--sage-200)'}}>
        {product.ingredients.map((ing, i) => {
          const isOpen = open === i;
          return (
            <div key={ing} style={{borderBottom:'1px solid var(--sage-200)'}}>
              <button onClick={()=>setOpen(isOpen ? -1 : i)} style={{
                width:'100%', padding:'20px 0', 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:20, fontWeight:500, letterSpacing:'-0.01em', color:'var(--ink)'}}>{ing}</span>
                <span style={{fontSize:20, 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 0 20px' : '0',
              }}>
                <p className="body" style={{color:'var(--slate)', margin:0, maxWidth:'64ch'}}>{details[ing] || 'Clinically-dosed, third-party tested.'}</p>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function ClinicalStrip() {
  const stats = [
    { v:'+34%', l:'Avg. free testosterone after 12 weeks*' },
    { v:'82%',  l:'Reported improved energy at week 6*' },
    { v:'+27%', l:'Improvement in sleep quality score*' },
    { v:'4',    l:'Human RCTs referenced in formulation' },
  ];
  return (
    <section className="sec-y" style={{background:'var(--cedar-700)', color:'var(--bone)', margin:'64px 0', borderRadius:'var(--r-lg)'}}>
      <div style={{padding:'0 28px'}}>
        <div className="eyebrow" style={{color:'var(--moss-300)', marginBottom:14}}>Clinical backbone</div>
        <h2 className="h2" style={{color:'var(--bone)', margin:'0 0 40px', maxWidth:'20ch'}}>Clinically-studied doses. Not label dressing.</h2>
        <div className="grid-4" style={{gap:24}}>
          {stats.map(s => (
            <div key={s.l} style={{borderTop:'1px solid rgba(244,239,230,0.25)', paddingTop:18}}>
              <div style={{fontFamily:'var(--font-display)', fontSize:48, fontWeight:500, letterSpacing:'-0.02em', lineHeight:1, marginBottom:10}}>{s.v}</div>
              <div style={{fontSize:13, color:'rgba(244,239,230,0.78)', lineHeight:1.45}}>{s.l}</div>
            </div>
          ))}
        </div>
        <div style={{marginTop:32, fontSize:11, color:'rgba(244,239,230,0.55)', letterSpacing:'0.05em'}}>
          *Results cited from published clinical trials on individual formulation ingredients. Atwood has not conducted a clinical trial on the combined product. See full references below.
        </div>
      </div>
    </section>
  );
}

function HowToTake({ product }) {
  return (
    <section style={{padding:'72px 0'}}>
      <div className="eyebrow" style={{marginBottom:14}}>How to take it</div>
      <h2 className="h2" style={{margin:'0 0 40px'}}>Two gummies. With coffee.</h2>
      <div className="grid-3">
        {[
          { n:'01', h:'Morning', s:'Take two gummies with water or coffee. Works with or without food.' },
          { n:'02', h:'30-day supply', s:'Each jar holds 60 gummies \u2014 a full month of consistent dosing.' },
          { n:'03', h:'Recurring', s:'Your next jar arrives in 30 days. Skip, pause, or cancel any time.' },
        ].map(s => (
          <div key={s.n} style={{borderTop:'1px solid var(--sage-200)', paddingTop:20}}>
            <div style={{fontFamily:'var(--font-mono)', fontSize:12, color:'var(--cedar-700)', letterSpacing:'0.15em', marginBottom:14}}>{s.n}</div>
            <div className="h3" style={{margin:'0 0 8px'}}>{s.h}</div>
            <p className="body" style={{color:'var(--slate)', margin:0}}>{s.s}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function Reviews() {
  const reviews = [
    { r:5, t:'Three weeks in, energy is back', b:'The 3pm crash is gone. I don\u2019t need a second coffee anymore. The packaging is also genuinely nice \u2014 not embarrassing on the counter.', n:'Michael · 41', v:'Verified member' },
    { r:5, t:'Finally a men\u2019s brand I don\u2019t hate',    b:'No chrome, no shouting, no gym-bro nonsense. Clean formula. My sleep score jumped noticeably within the first month.', n:'David · 38', v:'Verified member' },
    { r:4, t:'Worth it for the D3 + K2 alone',     b:'Most men\u2019s multis under-dose D3. This hits 500% DV which is what the studies actually suggest. Everything else is a bonus.', n:'Tom\u00e1s · 45', v:'Verified member' },
  ];
  return (
    <section style={{padding:'72px 0', borderTop:'1px solid var(--sage-200)'}}>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:32, flexWrap:'wrap', gap:16}}>
        <div>
          <div className="eyebrow" style={{marginBottom:10}}>Member reviews</div>
          <h2 className="h2" style={{margin:0}}>4.8 out of 5 · 2,417 reviews</h2>
        </div>
        <a href="#" style={{fontSize:14, fontWeight:500}}>See all reviews →</a>
      </div>
      <div className="grid-3">
        {reviews.map((r, i) => (
          <div key={i} style={{
            background:'var(--paper)', borderRadius:'var(--r-md)', padding:24,
          }}>
            <div style={{color:'var(--cedar-700)', marginBottom:10, letterSpacing:'0.1em'}}>{'★'.repeat(r.r)}{'☆'.repeat(5-r.r)}</div>
            <div style={{fontFamily:'var(--font-display)', fontSize:20, fontWeight:500, letterSpacing:'-0.01em', marginBottom:10}}>{r.t}</div>
            <p className="body" style={{color:'var(--slate)', margin:'0 0 18px'}}>{r.b}</p>
            <div className="body-sm" style={{paddingTop:14, borderTop:'1px solid var(--sage-200)'}}>
              <div style={{fontWeight:600, color:'var(--ink)'}}>{r.n}</div>
              <div>{r.v}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function PDPFAQ() {
  const items = [
    { q:'Is Atwood safe to take daily?', a:'Yes. Our formula uses clinically-studied doses of ingredients generally recognized as safe. Talk to your doctor if you are on medication.' },
    { q:'When will I notice a difference?', a:'Most men notice changes in energy and sleep within 2\u20133 weeks. Ingredients like tongkat ali and D3 build up over time.' },
    { q:'Is this TRT?', a:'No. Atwood is a daily supplement, not a medication. If you\u2019re considering TRT, talk to a doctor.' },
    { q:'Can I stack it with creatine or protein?', a:'Yes. Atwood is designed to work with whatever else you\u2019re already doing.' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{padding:'72px 0', borderTop:'1px solid var(--sage-200)'}}>
      <div className="eyebrow" style={{marginBottom:14}}>Questions</div>
      <h2 className="h2" style={{margin:'0 0 32px'}}>What men ask.</h2>
      <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:'20px 0', 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:20, fontWeight:500, letterSpacing:'-0.01em', color:'var(--ink)'}}>{it.q}</span>
                <span style={{fontSize:20, color:'var(--cedar-700)', transition:'transform var(--dur-panel) var(--ease)', transform: isOpen ? 'rotate(45deg)' : 'rotate(0)'}}>+</span>
              </button>
              <div style={{
                maxHeight: isOpen ? 180 : 0, overflow:'hidden',
                transition:'max-height var(--dur-panel) var(--ease), padding var(--dur-panel) var(--ease)',
                padding: isOpen ? '0 0 20px' : '0',
              }}>
                <p className="body" style={{color:'var(--slate)', margin:0, maxWidth:'64ch'}}>{it.a}</p>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

function CrossSell({ current, onSelect }) {
  const others = (window.AtwoodProducts || []).filter(p => p.key !== current.key);
  return (
    <section style={{padding:'72px 0', borderTop:'1px solid var(--sage-200)'}}>
      <div className="eyebrow" style={{marginBottom:14}}>Also in the lineup</div>
      <h2 className="h2" style={{margin:'0 0 32px'}}>Complete the ritual.</h2>
      <div className="grid-2">
        {others.map(p => (
          <button key={p.key} onClick={()=>onSelect(p)} style={{
            background:'var(--paper)', border:'1px solid var(--sage-200)', borderRadius:'var(--r-md)',
            padding:20, display:'flex', gap:18, alignItems:'center', cursor:'pointer', font:'inherit', textAlign:'left',
          }}>
            <div style={{width:100, height:120, borderRadius:'var(--r-sm)', overflow:'hidden', flex:'none'}}>
              <AtwoodJar product={p} scene="studio" />
            </div>
            <div style={{flex:1}}>
              <div className="eyebrow" style={{marginBottom:4}}>{p.tag}</div>
              <div className="h4" style={{margin:'0 0 6px'}}>{p.name}</div>
              <div className="body-sm" style={{marginBottom:10}}>{p.sub}</div>
              <div style={{fontFamily:'var(--font-mono)', fontSize:14, color:'var(--cedar-800)'}}>From ${(p.price*0.7).toFixed(2)} / mo</div>
            </div>
          </button>
        ))}
      </div>
    </section>
  );
}

function PDP({ product, onBack, onAdd, onSelect }) {
  return (
    <section className="section-pad" style={{padding:'20px 32px 72px'}}>
      <div style={{maxWidth:'var(--maxw)', margin:'0 auto'}}>
        <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:20, fontSize:13, color:'var(--slate)'}}>
          <button onClick={onBack} style={{border:'none', background:'none', padding:0, cursor:'pointer', color:'var(--slate)', font:'inherit'}}>Shop</button>
          <span>/</span>
          <span style={{color:'var(--ink)'}}>{product.name}</span>
        </div>

        <div className="grid-pdp">
          {/* Left scroll column */}
          <div>
            <PDPHero product={product} />
            <div style={{marginTop:64}}>
              <div className="eyebrow" style={{marginBottom:14}}>About this product</div>
              <h2 className="h2" style={{margin:'0 0 24px'}}>{product.headline || product.copy}</h2>
              {(product.narrative || '').split('\n\n').map((para, i) => (
                <p key={i} className="body-lg" style={{color:'var(--slate)', margin:'0 0 18px', maxWidth:'58ch'}}>{para}</p>
              ))}
            </div>

            <div style={{marginTop:64}}>
              <IngredientAccordion product={product} />
            </div>

            <ClinicalStrip />

            <HowToTake product={product} />

            <Reviews />

            <PDPFAQ />

            <CrossSell current={product} onSelect={onSelect || (()=>{})} />
          </div>

          {/* Right buy card — sticky on desktop only */}
          <div className="buy-card-sticky">
            <BuyCard product={product} onAdd={onAdd} />
          </div>
        </div>
      </div>
    </section>
  );
}

function CartDrawer({ open, items, onClose, onRemove }) {
  const subtotal = items.reduce((s, it) => s + it.unit * it.qty, 0);
  return (
    <>
      <div onClick={onClose} style={{
        position:'fixed', inset:0, zIndex:30, background:'rgba(26,31,27,0.4)',
        opacity: open ? 1 : 0, pointerEvents: open ? 'auto' : 'none',
        transition:'opacity var(--dur-panel) var(--ease)',
      }}/>
      <aside style={{
        position:'fixed', top:0, right:0, height:'100vh', width:'min(440px, 92vw)', zIndex:31,
        background:'var(--bone)', display:'flex', flexDirection:'column',
        transform: open ? 'translateX(0)' : 'translateX(100%)',
        transition:'transform var(--dur-panel) var(--ease)',
        boxShadow:'-20px 0 40px rgba(26,31,27,0.12)',
      }}>
        <div style={{padding:'22px 28px', display:'flex', justifyContent:'space-between', alignItems:'center', borderBottom:'1px solid var(--sage-200)'}}>
          <div className="h4" style={{margin:0}}>Your cart</div>
          <button onClick={onClose} style={{border:'none', background:'none', fontSize:22, cursor:'pointer', color:'var(--slate)'}}>×</button>
        </div>
        <div style={{flex:1, overflowY:'auto', padding:'12px 28px'}}>
          {items.length === 0 ? (
            <div style={{padding:'40px 0', textAlign:'center', color:'var(--slate)'}}>Your cart is empty.</div>
          ) : items.map((it, i) => (
            <div key={i} style={{display:'flex', gap:14, padding:'18px 0', borderBottom:'1px solid var(--sage-200)'}}>
              <div style={{width:72, height:90, borderRadius:'var(--r-sm)', overflow:'hidden', flex:'none'}}>
                <AtwoodJar product={it} scene="studio" />
              </div>
              <div style={{flex:1}}>
                <div className="eyebrow" style={{marginBottom:4}}>{it.plan === 'bundle' ? 'Bundle · 40% off' : 'Subscription · 30% off'}</div>
                <div style={{fontSize:15, fontWeight:600}}>{it.name}</div>
                <div className="body-sm">{it.qty} × ${it.unit.toFixed(2)}</div>
                <button onClick={()=>onRemove(i)} style={{border:'none', background:'none', padding:0, marginTop:6, color:'var(--slate)', fontSize:13, cursor:'pointer', textDecoration:'underline'}}>Remove</button>
              </div>
              <div style={{fontFamily:'var(--font-mono)', fontSize:14, color:'var(--cedar-800)'}}>${(it.unit * it.qty).toFixed(2)}</div>
            </div>
          ))}
        </div>
        <div style={{padding:'22px 28px', borderTop:'1px solid var(--sage-200)'}}>
          <div style={{display:'flex', justifyContent:'space-between', marginBottom:14, fontFamily:'var(--font-mono)', fontSize:14}}>
            <span style={{color:'var(--slate)'}}>Subtotal</span>
            <span style={{color:'var(--cedar-800)'}}>${subtotal.toFixed(2)}</span>
          </div>
          <button className="btn btn-primary btn-lg" style={{width:'100%'}} disabled={items.length===0}>Checkout</button>
          <div className="body-sm" style={{textAlign:'center', marginTop:12}}>Free shipping on subscriptions · Cancel anytime</div>
        </div>
      </aside>
    </>
  );
}

window.MarketingPDP = PDP;
window.MarketingCartDrawer = CartDrawer;
