/* =========================================================
   Home page — retail
   ========================================================= */
function HomeHero({ layout, go, onAddToCart }) {
  if (layout === 'frost') {
    return (
      <section className="hero-frost" style={{ padding: '96px 0 72px' }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1.1fr .9fr', gap: 64, alignItems: 'center' }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 20 }}>RESEARCH‑GRADE PEPTIDES </div>
            <h1 style={{ fontSize: 64, fontWeight: 900, color: 'var(--fg-brand)', lineHeight: 1, letterSpacing: '-0.02em', margin: '0 0 24px' }}>
              Reliable High Quality<br />Peptides
            </h1>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--fg1)', maxWidth: 480, margin: '0 0 32px' }}>
              Independently assayed and lot‑traceable. Direct from synthesis to your bench — no pharmacy, no middleman.
            </p>
            <div style={{ display: 'flex', gap: 12 }}>
              <button className="btn btn-primary" onClick={() => go('catalog')}>Shop catalog →</button>
              <button className="btn btn-ghost" onClick={() => go('research')}>Quality methodology</button>
            </div>
          </div>
          <div style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
            <div style={{ width: 380, height: 460, background: 'linear-gradient(180deg, #E4F3EC 0%, #fff 100%)', borderRadius: 16, display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px solid var(--border-strong)' }}>
              <img src="./assets/vial-photo.webp" alt="Clarion vial" style={{ height: 420, width: 'auto', filter: 'drop-shadow(0 20px 30px rgba(8,80,65,.25))' }} />
            </div>
            <div style={{ position: 'absolute', bottom: -12, right: -12, background: '#fff', border: '1px solid var(--border-strong)', borderRadius: 10, padding: '10px 14px', boxShadow: 'var(--shadow-md)' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, fontWeight: 700, letterSpacing: '.14em', color: 'var(--fg-accent)' }}>PURITY</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 22, fontWeight: 600, color: 'var(--fg-brand)' }}>&gt;99%</div>
            </div>
          </div>
        </div>
      </section>
    );
  }
  return (
    <section className="hero-forest" style={{ padding: '120px 0 96px' }}>
      <div className="container" style={{ display: 'grid', gridTemplateColumns: '1.2fr .8fr', gap: 56, alignItems: 'center' }}>
        <div>
          <div className="eyebrow eyebrow-mint" style={{ marginBottom: 24 }}>RESEARCH‑GRADE PEPTIDES </div>
          <h1 style={{ fontSize: 72, fontWeight: 900, color: '#fff', lineHeight: .98, letterSpacing: '-0.025em', margin: '0 0 28px' }}>
            Reliable High Quality<br /><span style={{ color: 'var(--clarion-mint)', fontStyle: 'italic', fontWeight: 400, fontFamily: 'var(--font-serif)' }}>Peptides</span>
          </h1>
          <p style={{ fontSize: 17, lineHeight: 1.65, color: 'rgba(255,255,255,.8)', maxWidth: 500, margin: '0 0 36px' }}>
            Independently assayed and lot‑traceable. Direct from synthesis to your bench — no pharmacy, no middleman.
          </p>
          <div style={{ display: 'flex', gap: 12 }}>
            <button className="btn btn-on-forest" onClick={() => go('catalog')}>Shop catalog →</button>
            <button className="btn" style={{ background: 'transparent', color: 'var(--clarion-mint)', border: '1px solid rgba(157,225,203,.35)' }} onClick={() => go('research')}>Quality methodology</button>
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', position: 'relative' }}>
          <img src="./assets/vial-photo.webp" alt="Clarion vial" style={{ height: 520, width: 'auto', filter: 'drop-shadow(0 30px 40px rgba(0,0,0,.4))' }} />
        </div>
      </div>
      <div className="container" style={{ display: 'flex', gap: 24, marginTop: 72, paddingTop: 24, borderTop: '1px solid rgba(157,225,203,.2)', flexWrap: 'wrap' }}>
        {PRODUCTS.slice(0, 6).map(p => (
          <div key={p.slug} style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'rgba(157,225,203,.6)', letterSpacing: '.1em' }}>
            {p.code.toUpperCase()}
          </div>
        ))}
      </div>
    </section>
  );
}

function HomeStats() {
  return (
    <section>
      <div className="container">
        <div className="eyebrow" style={{ marginBottom: 14 }}>THE STANDARD</div>
        <div style={{ fontSize: 26, fontWeight: 600, color: 'var(--fg-brand)', maxWidth: 760, marginBottom: 48, lineHeight: 1.3, letterSpacing: '-0.01em' }}>
          Every lot is released only after passing a full panel of eight assays — purity, potency, sterility, and endotoxin. No exceptions.
        </div>
        <div className="data-row">
          {[
            ['>99%',       'PURITY',         'Minimum HPLC purity on every released lot.'],
            ['8',          'ASSAYS / LOT',    'Identity, purity, sterility, endotoxin, KF, peptide content, and more.'],
            ['24h',        'RELEASE REVIEW', 'Lot documentation reviewed before every dispatch.'],
            ['100%',       'COA COVERAGE',   'Every vial traces back to a lot‑specific certificate of analysis.'],
          ].map(([v, k, n]) => (
            <div className="data-cell" key={k}>
              <div className="k">{k}</div>
              <div className="v">{v}</div>
              <div className="n">{n}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeCatalogPreview({ go, onAddToCart }) {
  return (
    <section style={{ background: 'var(--clarion-frost)' }}>
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 12 }}>THE CATALOG</div>
            <h2 className="section-title">Six compounds, all research‑grade.</h2>
          </div>
          <button className="btn btn-ghost" onClick={() => go('catalog')}>View all →</button>
        </div>
        <div className="product-grid">
          {PRODUCTS.slice(0, 3).map(p => <ProductCard key={p.slug} p={p} onClick={() => go('product', p.slug)} onAddToCart={onAddToCart} />)}
        </div>
      </div>
    </section>
  );
}

function HomeEditorial({ go }) {
  return (
    <section>
      <div className="container-narrow">
        <div className="eyebrow" style={{ marginBottom: 20 }}>FROM THE LAB NOTEBOOK</div>
        <div className="pull-quote">
          The document is the product. Every vial we ship is preceded by a certificate — and the certificate is where trust begins.
        </div>
        <div className="editorial-block" style={{ marginTop: 24 }}>
          <p>Research compounds live or die by provenance. A vial without a lot number is a vial without a story; a lot number without an assay trail is a number without a story either. At Clarion, we treat the certificate of analysis not as a document that follows the product, but as the product itself — the vial is a carrier.</p>
          <p>Every batch passes through an independent panel: identity by HPLC, purity by HPLC, peptide content, residual solvents, water content by Karl Fischer, acetate content, sterility across a 14‑day growth window, and LAL endotoxin. Eight tests, every time, per USP &lt;1226&gt;. We publish the COA before we ship.</p>
        </div>
        <div style={{ marginTop: 32 }}>
          <button className="btn btn-link" onClick={() => go('research')}>Read the full methodology →</button>
        </div>
      </div>
    </section>
  );
}

/* Retail CTA — free shipping reassurance */
function HomeRetailCTA({ go }) {
  return (
    <section>
      <div className="container">
        <div className="on-forest">
          <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 48, alignItems: 'center' }}>
            <div>
              <div className="eyebrow eyebrow-mint" style={{ marginBottom: 14 }}>DIRECT TO YOUR LAB</div>
              <h2 className="section-title" style={{ color: '#fff', marginBottom: 16 }}>
                Fast, discreet shipping,<br/>
                <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400, color: 'var(--clarion-mint)' }}>included over {fmt(FREE_SHIPPING_THRESHOLD)}.</span>
              </h2>
              <p style={{ color: 'rgba(255,255,255,.78)', fontSize: 15, lineHeight: 1.65, maxWidth: 520, margin: '0 0 28px' }}>
                Standard shipping is free over {fmt(FREE_SHIPPING_THRESHOLD)}. Every order includes COAs, temperature-logged transit, and signature delivery — so what's on the certificate is what's in the vial.
              </p>
              <div style={{ display: 'flex', gap: 12 }}>
                <button className="btn btn-on-forest" onClick={() => go('catalog')}>Shop catalog →</button>
                <button className="btn" style={{ background: 'transparent', color: 'var(--clarion-mint)', border: '1px solid rgba(157,225,203,.35)' }} onClick={() => go('research')}>How we ship</button>
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              {[
                ['→',   'Fast dispatch',    'Ships within 1 business day.'],
                ['✓',   'COA included',     'Lot-specific, every vial.'],
                ['⟲',   'Easy reorders',    'From your account.'],
                ['⚡',  'Overnight',        'Dispatched by 5 PM ET.'],
              ].map(([icon, k, v]) => (
                <div key={k} style={{ padding: 20, border: '1px solid rgba(157,225,203,.25)', borderRadius: 12, background: 'rgba(157,225,203,.06)' }}>
                  <div style={{ fontSize: 22, color: 'var(--clarion-mint)', marginBottom: 8 }}>{icon}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '.14em', color: 'rgba(157,225,203,.75)', marginBottom: 4 }}>{k.toUpperCase()}</div>
                  <div style={{ fontSize: 13, color: 'rgba(255,255,255,.85)', lineHeight: 1.5 }}>{v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomePage({ layout, go, onAddToCart }) {
  return (
    <>
      <HomeHero layout={layout} go={go} onAddToCart={onAddToCart} />
      <HomeStats />
      <HomeCatalogPreview go={go} onAddToCart={onAddToCart} />
      <HomeEditorial go={go} />
      <HomeRetailCTA go={go} />
    </>
  );
}

/* =========================================================
   Shared ProductCard — retail w/ price + add-to-cart
   ========================================================= */
function ProductCard({ p, onClick, onAddToCart }) {
  const cart = useCart();
  const [justAdded, setJustAdded] = React.useState(false);
  const [stockTick, setStockTick] = React.useState(0);
  React.useEffect(() => {
    const sync = () => setStockTick(t => t + 1);
    window.addEventListener('clarion-stock-change', sync);
    return () => window.removeEventListener('clarion-stock-change', sync);
  }, []);
  // re-read stock on every render so badge reflects current inventory
  const stock = p.stock;
  const outOfStock = stock <= 0;
  const handleAdd = (e) => {
    e.stopPropagation();
    if (outOfStock) return;
    cart.add(p.slug, 1);
    setJustAdded(true);
    setTimeout(() => setJustAdded(false), 1200);
    if (onAddToCart) onAddToCart();
  };
  return (
    <div className="product-card" onClick={onClick}>
      <div className="product-photo">
        <img src="./assets/vial-photo.webp" alt={p.code} />
        {outOfStock
          ? <div className="product-stock-badge" style={{ background: '#8B2E10' }}>Out of stock</div>
          : (p.combo ? <div className="product-stock-badge" style={{ background: 'var(--clarion-teal)' }}>Combo</div>
             : stock < 10 ? <div className="product-stock-badge">Only {stock} left</div> : null)}
      </div>
      <div className="product-meta">
        <div className="product-cat">{p.category}</div>
        <div className="product-name">{p.code}</div>
        <div style={{ fontSize: 13, color: 'var(--fg2)', marginTop: 6, lineHeight: 1.5, minHeight: 40 }}>{p.blurb.split('.')[0]}.</div>
        <div className="product-specs">
          <span className="product-spec">{p.weight}</span>
          <span className="product-spec">{p.purity}</span>
          <span className="product-spec">−20°C</span>
        </div>
        <div className="product-card-buy">
          <div className="product-card-price">{fmt(p.price)}</div>
          <button className={"btn btn-primary product-card-add" + (justAdded ? ' is-added' : '')} onClick={handleAdd} disabled={outOfStock} style={outOfStock ? { opacity: .45, cursor: 'not-allowed' } : {}}>
            {outOfStock ? 'Sold out' : justAdded ? '✓ Added' : 'Add to cart'}
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { HomePage, ProductCard });