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'],
    ['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-top">
          <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>
          <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>Certificates of Analysis</a>
            <a>Batch index</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 & support</a>
            <a onClick={() => go('contact')} style={{cursor:'pointer'}}>Shipping & returns</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 CLARION PEPTIDES · FOR RESEARCH USE ONLY · NOT FOR HUMAN CONSUMPTION</span>
          <span>v1.0 · 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 });