const { useState, useEffect } = React;

/* =========================================================
   Logo
   ========================================================= */
function Logo({ color = 'var(--fg-brand)', accent = 'var(--fg-accent)' }) {
  return (
    <div className="nav-brand">
      <span className="cl" style={{ color }}>CLARION</span>
      <span className="pp" style={{ color: accent }}>PEPTIDES</span>
    </div>
  );
}

/* =========================================================
   Nav — retail: links + cart + account
   ========================================================= */
function Nav({ route, go, onOpenCart }) {
  const cart = useCart();
  const user = useUser();

  const links = [
    ['home',     'Home'],
    ['catalog',  'Shop'],
    ['about',    'About'],
    ['research', 'Quality'],
    ['blog',     'Journal'],
    ['contact',  'Contact'],
  ];
  return (
    <header className="nav">
      <div className="container nav-inner">
        <div className="nav-left">
          <a onClick={() => go('home')} style={{ cursor: 'pointer' }}><Logo /></a>
          <nav className="nav-links">
            {links.map(([key, label]) => (
              <a key={key} className={route === key ? 'active' : ''} onClick={() => go(key)} style={{ cursor: 'pointer' }}>{label}</a>
            ))}
          </nav>
        </div>
        <div className="nav-right">
          {user ? (
            <button className="btn btn-ghost nav-account-btn" onClick={() => go('account')}>
              <span className="nav-account-dot">{(user.name || user.email)[0].toUpperCase()}</span>
              <span>Account</span>
            </button>
          ) : (
            <button className="btn btn-ghost" onClick={() => go('login')}>Sign in</button>
          )}
          <button className="btn btn-primary nav-cart-btn" onClick={onOpenCart} aria-label={`Cart, ${cart.count} items`}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: 2 }}>
              <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z" />
              <line x1="3" y1="6" x2="21" y2="6" />
              <path d="M16 10a4 4 0 0 1-8 0" />
            </svg>
            <span>Cart</span>
            {cart.count > 0 && <span className="nav-cart-badge">{cart.count}</span>}
          </button>
        </div>
      </div>
    </header>
  );
}

/* =========================================================
   Footer — retail
   ========================================================= */
function Footer({ go }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-signup-wrap">
          <div>
            <div className="nav-brand" style={{ marginBottom: 14 }}>
              <span className="cl" style={{ color: '#fff' }}>CLARION</span>
              <span className="pp" style={{ color: 'var(--clarion-mint)' }}>PEPTIDES</span>
            </div>
            <div style={{ fontSize: 13, lineHeight: 1.7, color: 'rgba(255,255,255,.7)', maxWidth: 320 }}>
              Research‑grade peptides, independently assayed and shipped direct to your lab.
            </div>
          </div>
          <FooterSignup />
        </div>

        <div className="footer-trust">
          <div className="footer-trust-item">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
            <span><strong>SSL</strong> · ENCRYPTED CHECKOUT</span>
          </div>
          <div className="footer-trust-item">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/></svg>
            <span><strong>3RD-PARTY</strong> · LAB ASSAYED</span>
          </div>
          <div className="footer-trust-item">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 12l2.5 2.5L16 9"/></svg>
            <span><strong>RESEARCH-GRADE</strong> · COA GUARANTEE</span>
          </div>
          <div className="footer-trust-item">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>
            <span><strong>STRIPE</strong> · PCI-DSS L1</span>
          </div>
        </div>

        <div className="footer-top">
          <div>
            <h4>Shop</h4>
            <a onClick={() => go('catalog')} style={{cursor:'pointer'}}>All products</a>
            <a onClick={() => go('catalog')} style={{cursor:'pointer'}}>GLP‑1 series</a>
            <a onClick={() => go('catalog')} style={{cursor:'pointer'}}>Structural peptides</a>
            <a onClick={() => go('catalog')} style={{cursor:'pointer'}}>Cofactors</a>
          </div>
          <div>
            <h4>Standards</h4>
            <a onClick={() => go('research')} style={{cursor:'pointer'}}>Quality methodology</a>
            <a onClick={() => go('blog')} style={{cursor:'pointer'}}>Field notes (blog)</a>
            <a onClick={() => go('blog','how-to-read-a-peptide-coa')} style={{cursor:'pointer'}}>How to read a COA</a>
            <a onClick={() => go('blog','hplc-purity-explained')} style={{cursor:'pointer'}}>HPLC purity vs content</a>
          </div>
          <div>
            <h4>Account</h4>
            <a onClick={() => go('account')} style={{cursor:'pointer'}}>My orders</a>
            <a onClick={() => go('login')} style={{cursor:'pointer'}}>Sign in</a>
            <a onClick={() => go('contact')} style={{cursor:'pointer'}}>Help &amp; support</a>
            <a onClick={() => go('shipping')} style={{cursor:'pointer'}}>Shipping &amp; returns</a>
          </div>
          <div>
            <h4>Legal</h4>
            <a onClick={() => go('privacy')} style={{cursor:'pointer'}}>Privacy policy</a>
            <a onClick={() => go('terms')} style={{cursor:'pointer'}}>Terms of service</a>
            <a onClick={() => go('shipping')} style={{cursor:'pointer'}}>Shipping policy</a>
            <a onClick={() => go('contact')} style={{cursor:'pointer'}}>Contact</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 CLARION PEPTIDES · FOR RESEARCH USE ONLY · NOT FOR HUMAN CONSUMPTION</span>
          <span>v1.1 · APRIL 2026</span>
        </div>
      </div>
    </footer>
  );
}

/* =========================================================
   Research attestation gate (first-load modal)
   ========================================================= */
function ResearchGate({ onAccept }) {
  const [researcher, setResearcher] = useState(false);
  const [understand,  setUnderstand]  = useState(false);
  const canEnter = researcher && understand;
  return (
    <div className="gate-overlay">
      <div className="gate-modal">
        <div className="eyebrow">ATTESTATION REQUIRED</div>
        <h2>This site is for qualified researchers only.</h2>
        <p>All Clarion Peptides products are manufactured strictly for laboratory research. They are not drugs, not supplements, and not for human or veterinary use. Access requires attestation.</p>
        <div className="gate-check">
          <input id="r1" type="checkbox" checked={researcher} onChange={e => setResearcher(e.target.checked)} />
          <label htmlFor="r1">I am a qualified researcher, licensed professional, or affiliate of a registered laboratory or institution.</label>
        </div>
        <div className="gate-check">
          <input id="r2" type="checkbox" checked={understand} onChange={e => setUnderstand(e.target.checked)} />
          <label htmlFor="r2">I understand these materials are <strong>for research use only</strong>, never for human consumption, diagnosis, or treatment.</label>
        </div>
        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 8 }}>
          <button className="btn btn-ghost" onClick={() => window.location.href = 'https://nih.gov'}>Exit</button>
          <button className="btn btn-primary" onClick={onAccept} disabled={!canEnter} style={{ opacity: canEnter ? 1 : .4, pointerEvents: canEnter ? 'auto' : 'none' }}>Enter site →</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Logo, Nav, Footer, ResearchGate });