// Shared site shell — nav, footer, portal-back chip
// Used by all three direction pages

function PortalBack() {
  return (
    <a className="portal-back" href="index.html">
      <span>←</span> Back to portal
    </a>
  );
}

function SiteNav({ activeLink }) {
  const links = ['Shop', 'How it works', 'Science', 'Reviews'];
  return (
    <div className="site-nav">
      <div className="logo"><img src="assets/alterme-logo.png" alt="AlterMe" /></div>
      <div className="links">
        {links.map(l => (
          <span key={l} style={{ color: l === activeLink ? 'var(--ink)' : undefined, fontWeight: l === activeLink ? 500 : 400 }}>{l}</span>
        ))}
      </div>
      <div className="right">
        <span style={{ color: 'rgba(26,24,24,0.7)' }}>Sign in</span>
        <button className="btn-pill btn-ink" style={{ padding: '10px 18px', fontSize: 13 }}>Buy now</button>
      </div>
    </div>
  );
}

function SiteFooter() {
  return (
    <div className="site-footer">
      <div className="footer-grid">
        <div className="footer-col">
          <img src="assets/alterme-logo.png" alt="AlterMe" style={{ height: 30, filter: 'invert(1) brightness(1.5)', marginBottom: 20 }} />
          <p style={{ color: 'rgba(255,252,244,0.7)', fontSize: 14, lineHeight: 1.6, margin: 0, maxWidth: 360 }}>
            AlterMe is your personalized path to real, lasting change. No guesswork. No extremes. Just science-backed results that fit your life.
          </p>
        </div>
        <div className="footer-col">
          <h4>Information</h4>
          <ul>
            <li><a href="#">Why AlterMe</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">Blog</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Company</h4>
          <ul>
            <li><a href="#">Press</a></li>
            <li><a href="#">Who we are</a></li>
            <li><a href="#">Careers</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Resources</h4>
          <ul>
            <li><a href="#">Contact us</a></li>
            <li><a href="#">Privacy</a></li>
            <li><a href="#">Terms</a></li>
            <li><a href="#">Limited Warranty</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <div>© 2026 AlterMe. All rights reserved.</div>
        <div>You deserve to feel amazing.</div>
      </div>
    </div>
  );
}

function CartDrawer({ tier, onClose }) {
  if (!tier) return null;
  return (
    <>
      <div className="cart-backdrop open" onClick={onClose} />
      <div className="cart-drawer open">
        <div style={{ padding: '24px 28px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid var(--line)' }}>
          <div className="eyebrow">Your cart</div>
          <button onClick={onClose} style={{ background: 'transparent', border: 'none', fontSize: 20, cursor: 'pointer' }}>×</button>
        </div>
        <div style={{ padding: 28, flex: 1 }}>
          <div style={{ background: 'var(--bone)', padding: 24, borderRadius: 14, display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span className="dot" style={{ background: tier.accent }} />
              <span style={{ fontSize: 14, fontWeight: 500 }}>AlterMe {tier.name}</span>
            </div>
            <div style={{ fontSize: 36, fontWeight: 200, letterSpacing: '-0.03em' }}>{tier.price}</div>
            <div style={{ fontSize: 13, color: 'var(--mute)' }}>{tier.membership}</div>
            <div style={{ fontSize: 14, lineHeight: 1.5, color: 'rgba(26,24,24,0.78)' }}>{tier.blurb}</div>
          </div>
          <div style={{ marginTop: 24, fontSize: 13, color: 'var(--mute)', lineHeight: 1.8 }}>
            ◯ Free shipping<br/>
            ◯ 60-day money-back guarantee<br/>
            ◯ Financing from $20/mo
          </div>
        </div>
        <div style={{ padding: 24, borderTop: '1px solid var(--line)' }}>
          <button className="btn-pill btn-ink" style={{ width: '100%', justifyContent: 'center' }}>
            Continue to checkout <span className="arrow">→</span>
          </button>
        </div>
      </div>
    </>
  );
}

Object.assign(window, { PortalBack, SiteNav, SiteFooter, CartDrawer });