/* V2 Shop + Product Detail — simplified, benefit-first. */

function CatalogV2({ onProduct }) {
  const cats = window.VC_CATEGORIES;
  const products = window.VC_PRODUCTS;
  const catImg = window.VC_CAT_IMG;
  const prodImg = window.VC_PRODUCT_IMG || {};
  const imgFor = (p) => prodImg[p.name] || catImg[p.cat];
  const sizeFor = (p) => (window.VC_SIZE_LABEL && window.VC_SIZE_LABEL[p.name]) || p.size || (p.cat === 'supplies' ? '5 mL' : '10 mg');
  const assistant = (view = 'builder') => window.dispatchEvent(new CustomEvent('mvc-cta-open', { detail: { view } }));
  const [active, setActive] = React.useState('all');
  const shown = active === 'all' ? products : products.filter((p) => p.cat === active);

  const labelMap = {
    all: 'All', regeneration: 'Skin & Glow', recovery: 'Recovery',
    metabolic: 'Reset', longevity: 'Long-term', cognitive: 'Focus',
    vitality: 'Vitality', supplies: 'Essentials',
  };
  const friendly = (p) => ({
    'GLOW Complex': 'Radiant, healthy-looking skin.',
    'GHK-Cu':       'The copper peptide skin loves.',
    'BPC-157':      'Recovery\'s best-kept secret.',
    'TB-500':       'For deep, slow-burn repair.',
      'Retatrutide 10 mg': 'Modern metabolic support · 10 mg vial.',
      'Retatrutide 12 mg': 'Modern metabolic support · 12 mg vial.',
    'Tirzepatide':  'Weight and appetite reset.',
    'Tesamorelin':  'Body composition, elevated.',
    'Ipamorelin':   'Sleep. Recover. Repeat.',
    'CJC-1295':     'Deeper sleep, stronger mornings.',
    'NAD+':         'The cellular battery.',
    'MOTS-c':       'Mitochondrial energy on tap.',
    'Epitalon':     'Age like a redwood.',
    'Selank':       'Calm, focused, present.',
    'Semax':        'Clear-headed focus.',
    'PT-141':       'Confidence & connection.',
    'Bacteriostatic Water': 'The essential mixer.',
  })[p.name] || p.blurb;

  React.useEffect(() => { window.lucide && window.lucide.createIcons(); }, [active]);

  return (
    <div>
      {/* Hero */}
      <section style={{ background: 'var(--v2-cream-2)', borderBottom: '1px solid var(--v2-line)' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: 'clamp(56px,7vw,110px) clamp(20px,4vw,56px) 40px' }}>
          <div style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--v2-accent)', fontWeight: 600 }} className="v2-up">The shop</div>
          <h1 className="v2-up v2-d1" style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 400, fontSize: 'clamp(2.4rem,5.2vw,4.4rem)', letterSpacing: '-0.02em', lineHeight: 1.02, color: 'var(--v2-ink)', margin: '12px 0 0', maxWidth: 20 + 'ch' }}>
            Everything, <span style={{ fontStyle: 'italic', color: 'var(--v2-accent)' }}>simply.</span>
          </h1>
          <p className="v2-up v2-d2" style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--v2-ink-2)', margin: '24px 0 0', maxWidth: 58 + 'ch' }}>
            Sixteen carefully chosen peptides and cellular nutrients — grouped by what you want to feel different.
            Every order arrives clearly labeled with an easy start-here guide.
          </p>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 32 }}>
            {cats.map((c) => (
              <button key={c.key} className="v2-pill" data-on={active === c.key} onClick={() => setActive(c.key)}>
                {labelMap[c.key] || c.label}
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* Grid */}
      <section>
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: 'clamp(40px,5vw,72px) clamp(20px,4vw,56px) clamp(64px,8vw,110px)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }} className="v2-grid-3">
            {shown.map((p) => (
              <article key={p.name} className="v2-card" style={{ cursor: 'pointer' }} onClick={() => onProduct(p.name)}>
                <div style={{ position: 'relative', aspectRatio: '1/1', background: '#f0ebe1', overflow: 'hidden' }}>
                  <img src={imgFor(p)} alt={p.name}
                       style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'contain' }} />
                  <button
                    aria-label={p.outOfStock ? `${p.name} is out of stock` : `Add ${p.name} to cart`}
                    disabled={p.outOfStock}
                    onClick={(e) => { e.stopPropagation(); if (p.outOfStock) return; window.VC_CART.add({ name: p.name, catLabel: p.catLabel, formula: p.formula }); }}
                    style={{ position: 'absolute', bottom: 14, right: 14, width: 42, height: 42, borderRadius: 999,
                             background: p.outOfStock ? 'rgba(27,29,28,0.62)' : 'var(--v2-ink)', color: '#fff', border: 0, cursor: p.outOfStock ? 'not-allowed' : 'pointer',
                             display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                             boxShadow: '0 12px 24px -12px rgba(0,0,0,0.35)' }}>
                    <i data-lucide={p.outOfStock ? 'clock' : 'plus'} style={{ width: 18, height: 18 }}></i>
                  </button>
                </div>
                <div style={{ padding: '20px 22px 24px' }}>
                  <div style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--v2-muted)', fontWeight: 600 }}>{labelMap[p.cat] || p.catLabel}</div>
                  <h3 style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 500, fontSize: 22, margin: '8px 0 6px', color: 'var(--v2-ink)', letterSpacing: '-0.01em' }}>{p.name}</h3>
                  <div style={{ fontSize: 12, color: 'var(--v2-accent)', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 7 }}>{sizeFor(p)}</div>
                  <p style={{ margin: 0, fontSize: 14, lineHeight: 1.55, color: 'var(--v2-muted)' }}>{friendly(p)}</p>
                  <div style={{ marginTop: 14, display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
                    <span style={{ fontFamily: 'var(--font-display-v2)', fontSize: 20, color: p.outOfStock ? 'var(--v2-muted)' : 'var(--v2-ink)' }}>{p.outOfStock ? 'Out of stock' : `$${window.VC_CART.price(p.name).toFixed(0)}`}</span>
                    <span style={{ fontSize: 13, color: 'var(--v2-accent)', fontWeight: 500 }}>Details →</span>
                  </div>
                </div>
              </article>
            ))}
          </div>
          <p style={{ marginTop: 44, fontSize: 12, color: 'var(--v2-muted)', maxWidth: 78 + 'ch', lineHeight: 1.6 }}>
            My Vital Cell products are provided for wellness and educational use. Information is not a substitute for medical advice.
            If you have a health condition, are pregnant, or take medication, please consult your healthcare provider first.
          </p>
        </div>
      </section>

      {/* Reconstitution how-to */}
      <section style={{ background: 'var(--v2-cream-2)', borderTop: '1px solid var(--v2-line)' }}>
        <div style={{ maxWidth: 1040, margin: '0 auto', padding: 'clamp(48px,6vw,90px) clamp(20px,4vw,56px)', display: 'grid', gridTemplateColumns: '1.2fr 0.8fr', gap: 'clamp(24px,4vw,48px)', alignItems: 'center' }} className="v2-grid-2">
          <div>
            <div style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--v2-accent)', fontWeight: 600 }}>How-to · 90 seconds</div>
            <h3 style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 400, fontSize: 'clamp(1.6rem,3.2vw,2.4rem)', margin: '10px 0 18px', letterSpacing: '-0.02em', color: 'var(--v2-ink)' }}>
              How to reconstitute your peptides.
            </h3>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--v2-ink-2)', margin: 0 }}>
              First time with a vial? This short walkthrough covers everything — from opening the kit to drawing your first dose.
              Simple, calm, and no chemistry degree required.
            </p>
            <p style={{ fontSize: 14, lineHeight: 1.7, color: 'var(--v2-muted)', margin: '18px 0 0' }}>
              Still have questions? <a onClick={() => assistant('contact')} className="v2-link" style={{ color: 'var(--v2-accent)', cursor: 'pointer', borderColor: 'var(--v2-accent)' }}>Ask us anything →</a>
            </p>
          </div>
          <div style={{ position: 'relative', maxWidth: 300, width: '100%', margin: '0 auto', aspectRatio: '9 / 16', borderRadius: 20, overflow: 'hidden', background: '#0b0b10', boxShadow: '0 24px 60px -24px rgba(0,0,0,0.3)', border: '1px solid var(--v2-line)' }}>
            <video
              src="/__l5e/assets-v1/901a0ef0-a3e3-4298-ae46-e521413b59c0/reconstitution.mp4"
              poster="/__l5e/assets-v1/d266e3ca-05a0-40b1-8347-139a79d547fa/reconstitution-poster.jpg"
              controls
              playsInline
              preload="metadata"
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
            />
          </div>
        </div>
      </section>

    </div>
  );
}

function ProductDetailV2({ name, onProduct, onNav }) {
  const products = window.VC_PRODUCTS;
  const catImg = window.VC_CAT_IMG;
  const prodImgDetail = window.VC_PRODUCT_IMG_DETAIL || {};
  const prodImg = window.VC_PRODUCT_IMG || {};
  const heroImgFor = (x) => prodImgDetail[x.name] || prodImg[x.name] || catImg[x.cat];
  const relImgFor  = (x) => prodImg[x.name] || catImg[x.cat];
  const p = products.find((x) => x.name === name) || products[0];
  const related = products.filter((x) => x.cat === p.cat && x.name !== p.name).slice(0, 3);
  const sizeFor = (x) => (window.VC_SIZE_LABEL && window.VC_SIZE_LABEL[x.name]) || x.size || (x.cat === 'supplies' ? '5 mL' : '10 mg');
  const assistant = (view = 'builder') => window.dispatchEvent(new CustomEvent('mvc-cta-open', { detail: { view } }));

  const softenLong = (text) => text || '';

  React.useEffect(() => { window.lucide && window.lucide.createIcons(); }, [name]);

  return (
    <div>
      {/* breadcrumb */}
      <div style={{ background: 'var(--v2-cream)', borderBottom: '1px solid var(--v2-line)' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: '18px clamp(20px,4vw,56px)', fontSize: 12.5, color: 'var(--v2-muted)' }}>
          <span onClick={() => onNav('home')} style={{ cursor: 'pointer' }}>Home</span>
          <span style={{ margin: '0 8px' }}>/</span>
          <span onClick={() => onNav('compounds')} style={{ cursor: 'pointer' }}>Shop</span>
          <span style={{ margin: '0 8px' }}>/</span>
          <span style={{ color: 'var(--v2-ink-2)' }}>{p.name}</span>
        </div>
      </div>

      {/* Hero */}
      <section style={{ maxWidth: 1240, margin: '0 auto', padding: 'clamp(40px,6vw,80px) clamp(20px,4vw,56px)',
                        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(32px,5vw,72px)', alignItems: 'center' }} className="v2-grid-2">
        <div style={{ position: 'relative', aspectRatio: '1/1', borderRadius: 32, overflow: 'hidden', background: '#f0ebe1' }}>
          <img src={heroImgFor(p)} alt={p.name} className="v2-ken"
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'contain' }} />
        </div>
        <div>
          <div style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--v2-accent)', fontWeight: 600 }}>{p.catLabel}</div>
          <h1 style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 400, fontSize: 'clamp(2.2rem,4.4vw,3.6rem)', letterSpacing: '-0.02em', lineHeight: 1.02, margin: '10px 0 6px', color: 'var(--v2-ink)' }}>
            {p.name}
          </h1>
          <div style={{ fontSize: 13, color: 'var(--v2-muted)', fontFamily: 'IBM Plex Mono, monospace', marginBottom: 20 }}>{sizeFor(p)} · {p.formula}</div>

          <p style={{ fontSize: 18, lineHeight: 1.6, color: 'var(--v2-ink-2)', margin: 0, maxWidth: 52 + 'ch' }}>{p.blurb}</p>

          <div style={{ marginTop: 24, display: 'flex', alignItems: 'baseline', gap: 14 }}>
            <span style={{ fontFamily: 'var(--font-display-v2)', fontSize: 34, color: p.outOfStock ? 'var(--v2-muted)' : 'var(--v2-ink)' }}>{p.outOfStock ? 'Out of stock' : `$${window.VC_CART.price(p.name).toFixed(0)}`}</span>
            <span style={{ fontSize: 12, color: 'var(--v2-muted)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>{sizeFor(p)} vial</span>
          </div>

          <div style={{ marginTop: 22, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            {!p.outOfStock && <button className="v2-btn primary" onClick={() => window.VC_CART.add({ name: p.name, catLabel: p.catLabel, formula: p.formula })}>Add to cart</button>}
            <button className="v2-btn secondary" onClick={() => assistant(p.outOfStock ? 'contact' : 'builder')}>{p.outOfStock ? 'Request availability' : 'Start Here'}</button>
          </div>

          <div style={{ marginTop: 32, display: 'flex', gap: 22, flexWrap: 'wrap', fontSize: 13, color: 'var(--v2-muted)' }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><i data-lucide="shield-check" style={{ width: 14, height: 14, color: 'var(--v2-accent)' }}></i> Third-party tested</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><i data-lucide="file-text" style={{ width: 14, height: 14, color: 'var(--v2-accent)' }}></i> CoA on request</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><i data-lucide="rotate-ccw" style={{ width: 14, height: 14, color: 'var(--v2-accent)' }}></i> Damaged items replaced</span>
          </div>
        </div>
      </section>

      {/* Long story */}
      <section style={{ background: '#fff', borderTop: '1px solid var(--v2-line)', borderBottom: '1px solid var(--v2-line)' }}>
        <div style={{ maxWidth: 900, margin: '0 auto', padding: 'clamp(56px,7vw,110px) clamp(20px,4vw,56px)' }}>
          <div style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--v2-accent)', fontWeight: 600 }}>The story</div>
          <h2 style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 400, fontSize: 'clamp(1.8rem,3.6vw,2.6rem)', letterSpacing: '-0.02em', margin: '12px 0 24px', color: 'var(--v2-ink)' }}>
            What it does, in plain words.
          </h2>
          {(p.long || '').split('\n\n').map((para, i) => (
            <p key={i} style={{ fontSize: i === 0 ? 18 : 15, lineHeight: 1.7,
                                 color: i === 0 ? 'var(--v2-ink)' : 'var(--v2-ink-2)',
                                 margin: i === 0 ? '0 0 18px' : '0 0 14px',
                                 fontStyle: para.startsWith('*') ? 'italic' : 'normal' }}>{softenLong(para)}</p>
          ))}
        </div>
      </section>

      {/* Focus areas — soften "pathways under research" */}
      <section>
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: 'clamp(56px,7vw,110px) clamp(20px,4vw,56px)' }}>
          <div style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--v2-accent)', fontWeight: 600 }}>What it works on</div>
          <h2 style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 400, fontSize: 'clamp(1.6rem,3.2vw,2.2rem)', letterSpacing: '-0.02em', margin: '10px 0 32px', color: 'var(--v2-ink)' }}>
            Areas of focus.
          </h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }} className="v2-grid-3">
            {p.pathways.map((pw, i) => (
              <div key={pw} style={{ background: 'var(--v2-cream-2)', border: '1px solid var(--v2-line)', borderRadius: 18, padding: '26px 24px' }}>
                <div style={{ fontFamily: 'IBM Plex Mono, monospace', fontSize: 12, color: 'var(--v2-accent)', marginBottom: 10 }}>{String(i + 1).padStart(2, '0')}</div>
                <div style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 500, fontSize: 18, color: 'var(--v2-ink)', lineHeight: 1.3, letterSpacing: '-0.01em' }}>{pw}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Handling / Care */}
      {p.handling && (
        <section style={{ background: 'var(--v2-cream-2)', borderTop: '1px solid var(--v2-line)' }}>
          <div style={{ maxWidth: 1040, margin: '0 auto', padding: 'clamp(48px,6vw,90px) clamp(20px,4vw,56px)', display: 'grid', gridTemplateColumns: '1.2fr 0.8fr', gap: 'clamp(24px,4vw,48px)', alignItems: 'center' }} className="v2-grid-2">
            <div>
              <div style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--v2-accent)', fontWeight: 600 }}>Care & handling</div>
              <h3 style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 400, fontSize: 26, margin: '10px 0 18px', letterSpacing: '-0.01em', color: 'var(--v2-ink)' }}>How to keep it fresh.</h3>
              <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--v2-ink-2)', margin: 0 }}>{p.handling}</p>
              <p style={{ fontSize: 14, lineHeight: 1.7, color: 'var(--v2-muted)', margin: '18px 0 0' }}>
                New to peptides? The short video shows exactly how to reconstitute your first vial.
                {' '}<a onClick={() => assistant('contact')} className="v2-link" style={{ color: 'var(--v2-accent)', cursor: 'pointer', borderColor: 'var(--v2-accent)' }}>Or ask us anything →</a>
              </p>
            </div>
            <div style={{ position: 'relative', maxWidth: 300, width: '100%', margin: '0 auto', aspectRatio: '9 / 16', borderRadius: 20, overflow: 'hidden', background: '#0b0b10', boxShadow: '0 24px 60px -24px rgba(0,0,0,0.3)', border: '1px solid var(--v2-line)' }}>
              <video
                src="/__l5e/assets-v1/901a0ef0-a3e3-4298-ae46-e521413b59c0/reconstitution.mp4"
                poster="/__l5e/assets-v1/d266e3ca-05a0-40b1-8347-139a79d547fa/reconstitution-poster.jpg"
                controls
                playsInline
                preload="metadata"
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
              />
              <span style={{ position: 'absolute', top: 12, left: 12, background: 'rgba(11,11,16,0.7)', color: '#fff', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', padding: '5px 9px', borderRadius: 999, fontWeight: 600 }}>How-to · 90s</span>
            </div>
          </div>
        </section>
      )}

      {/* Related */}
      {related.length > 0 && (
        <section>
          <div style={{ maxWidth: 1240, margin: '0 auto', padding: 'clamp(56px,7vw,110px) clamp(20px,4vw,56px)' }}>
            <div style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--v2-accent)', fontWeight: 600 }}>You might also like</div>
            <h3 style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 400, fontSize: 'clamp(1.6rem,3.2vw,2.2rem)', letterSpacing: '-0.02em', margin: '10px 0 32px', color: 'var(--v2-ink)' }}>More in this space.</h3>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }} className="v2-grid-3">
              {related.map((r) => (
                <article key={r.name} className="v2-card" style={{ cursor: 'pointer' }} onClick={() => onProduct(r.name)}>
                  <div style={{ position: 'relative', aspectRatio: '1/1', overflow: 'hidden' }}>
                    <img src={relImgFor(r)} alt={r.name} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'contain' }} />
                  </div>
                  <div style={{ padding: '18px 20px 22px' }}>
                    <div style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--v2-muted)', fontWeight: 600 }}>{r.catLabel}</div>
                    <h4 style={{ fontFamily: 'var(--font-display-v2)', fontWeight: 500, fontSize: 20, margin: '6px 0 4px', color: 'var(--v2-ink)', letterSpacing: '-0.01em' }}>{r.name}</h4>
                    <p style={{ margin: 0, fontSize: 13.5, color: 'var(--v2-muted)', lineHeight: 1.55 }}>{r.blurb}</p>
                  </div>
                </article>
              ))}
            </div>
          </div>
        </section>
      )}
    </div>
  );
}

Object.assign(window, { CatalogV2, ProductDetailV2 });