// Privacy.jsx — privacy policy, on-brand
const Privacy = () => {
  const H = ({ children }) => (
    <div style={{ fontSize: 15, letterSpacing: '0.25em', color: '#00FF41', marginTop: 40, marginBottom: 14 }}>// {children}</div>
  );
  const P = ({ children }) => (
    <p style={{ fontSize: 17, color: '#B8B8B8', lineHeight: 1.8, marginBottom: 16 }}>{children}</p>
  );
  const Li = ({ children }) => (
    <div style={{ fontSize: 16, color: '#B8B8B8', lineHeight: 1.7, paddingLeft: 18, marginBottom: 10 }}>
      <span style={{ color: '#00FF41', marginRight: 8 }}>{'>'}</span>{children}
    </div>
  );

  return (
    <section style={{ padding: '40px 24px 80px', maxWidth: 880, margin: '0 auto' }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 28 }}>
        <div style={{ width: 32, height: 32, border: '1px solid #00FF41', display: 'grid', placeItems: 'center', color: '#00FF41', fontWeight: 800 }}>🔒</div>
        <h1 style={{ fontSize: 24, fontWeight: 800, letterSpacing: '0.12em' }}>PRIVACY POLICY</h1>
      </div>

      <div style={{ padding: '18px 20px', background: 'rgba(0,255,65,0.06)', border: '1px solid rgba(0,255,65,0.3)', color: '#00FF41', fontSize: 16, lineHeight: 1.8, marginBottom: 32 }}>
        $ cat /etc/privacy.conf<br/>
        # look, we just want to send you coffee.<br/>
        # we collect the bare minimum to do that.<br/>
        # no trackers. no ad pixels. no data brokers.<br/>
        # your data isn't the product. the coffee is.
      </div>

      <P>Last updated: June 5, 2026</P>
      <P>Operator Brewing Co. ("we", "us") takes your privacy seriously. We're security people — we know what bad data practices look like, and we want no part of it. This policy explains exactly what we collect, why, and where it goes.</P>

      <H>WHAT WE COLLECT</H>

      <P style={{ color: '#FFF', fontWeight: 700 }}>To make your account and send you coffee:</P>
      <Li><strong style={{ color: '#FFF' }}>Email + name</strong> — login, order confirmations, shipping updates</Li>
      <Li><strong style={{ color: '#FFF' }}>Shipping address</strong> — so the coffee arrives at your door, not ours</Li>
      <Li><strong style={{ color: '#FFF' }}>Handle</strong> — your public display name (3-32 chars, you pick it)</Li>
      <Li><strong style={{ color: '#FFF' }}>Order history</strong> — tier calculations, receipts, and knowing what you like</Li>

      <P style={{ color: '#FFF', fontWeight: 700, marginTop: 20 }}>To run the loyalty system:</P>
      <Li><strong style={{ color: '#FFF' }}>Lifetime spend + tier</strong> — stored in our database for point calculations</Li>
      <Li><strong style={{ color: '#FFF' }}>Notification preferences</strong> — which emails you want (orders, drops, subs)</Li>
      <Li><strong style={{ color: '#FFF' }}>Subscription details</strong> — cadence, grind preference, status</Li>

      <P style={{ color: '#FFF', fontWeight: 700, marginTop: 20 }}>If you verify certifications:</P>
      <Li><strong style={{ color: '#FFF' }}>Cert name + provider</strong> — which cert was verified, for your tier boost</Li>
      <Li><strong style={{ color: '#FFF' }}>A hash of the verification</strong> — prevents duplicate claims across accounts</Li>
      <Li><span style={{ color: '#FFD700' }}>NOT stored:</span> your HTB API token, your Credly email, badge details — these are used once during verification and immediately discarded</Li>

      <P style={{ color: '#FFF', fontWeight: 700, marginTop: 20 }}>If you enable MFA:</P>
      <Li><strong style={{ color: '#FFF' }}>TOTP secret</strong> — AES-256-GCM encrypted at rest</Li>
      <Li><strong style={{ color: '#FFF' }}>Passkey public keys</strong> — for WebAuthn authentication</Li>
      <Li><strong style={{ color: '#FFF' }}>Recovery code hashes</strong> — salted SHA-256 (never plaintext)</Li>

      <H>WHAT WE DON'T COLLECT</H>
      <Li>No analytics or tracking pixels (no Google Analytics, no Facebook Pixel)</Li>
      <Li>No third-party ad scripts or retargeting</Li>
      <Li>No fingerprinting, no behavioral tracking</Li>
      <Li>No selling or sharing data with data brokers — ever</Li>
      <Li>No CRM or marketing automation platforms</Li>
      <Li>We don't store your payment info — Shopify handles all payment processing (PCI-DSS compliant)</Li>

      <H>COOKIES</H>
      <P>We use three cookies. All are functional — none are for tracking.</P>

      <div style={{ border: '1px solid rgba(255,255,255,0.15)', marginBottom: 20 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 0 }}>
          <div style={{ padding: '10px 12px', borderBottom: '1px solid rgba(255,255,255,0.15)', borderRight: '1px solid rgba(255,255,255,0.15)', fontSize: 14, color: '#00FF41', letterSpacing: '0.12em' }}>COOKIE</div>
          <div style={{ padding: '10px 12px', borderBottom: '1px solid rgba(255,255,255,0.15)', borderRight: '1px solid rgba(255,255,255,0.15)', fontSize: 14, color: '#00FF41', letterSpacing: '0.12em' }}>PURPOSE</div>
          <div style={{ padding: '10px 12px', borderBottom: '1px solid rgba(255,255,255,0.15)', fontSize: 14, color: '#00FF41', letterSpacing: '0.12em' }}>DURATION</div>

          <div style={{ padding: '10px 12px', borderBottom: '1px solid rgba(255,255,255,0.1)', borderRight: '1px solid rgba(255,255,255,0.15)', fontSize: 15, color: '#FFF' }}>obc_session</div>
          <div style={{ padding: '10px 12px', borderBottom: '1px solid rgba(255,255,255,0.1)', borderRight: '1px solid rgba(255,255,255,0.15)', fontSize: 15, color: '#B8B8B8' }}>Keeps you logged in (HttpOnly, Secure)</div>
          <div style={{ padding: '10px 12px', borderBottom: '1px solid rgba(255,255,255,0.1)', fontSize: 15, color: '#B8B8B8' }}>10 hours</div>

          <div style={{ padding: '10px 12px', borderBottom: '1px solid rgba(255,255,255,0.1)', borderRight: '1px solid rgba(255,255,255,0.15)', fontSize: 15, color: '#FFF' }}>obc_logged_in</div>
          <div style={{ padding: '10px 12px', borderBottom: '1px solid rgba(255,255,255,0.1)', borderRight: '1px solid rgba(255,255,255,0.15)', fontSize: 15, color: '#B8B8B8' }}>UI flag so the site knows to show your account</div>
          <div style={{ padding: '10px 12px', borderBottom: '1px solid rgba(255,255,255,0.1)', fontSize: 15, color: '#B8B8B8' }}>10 hours</div>

          <div style={{ padding: '10px 12px', borderRight: '1px solid rgba(255,255,255,0.15)', fontSize: 15, color: '#FFF' }}>obc_mfa_pending</div>
          <div style={{ padding: '10px 12px', borderRight: '1px solid rgba(255,255,255,0.15)', fontSize: 15, color: '#B8B8B8' }}>Temporary MFA verification state</div>
          <div style={{ padding: '10px 12px', fontSize: 15, color: '#B8B8B8' }}>5 minutes</div>
        </div>
      </div>

      <P>We also use <strong style={{ color: '#FFF' }}>localStorage</strong> to save your cart contents on your device. This never leaves your browser — it's purely so your cart survives a page refresh.</P>

      <H>WHERE YOUR DATA LIVES</H>

      <Li><strong style={{ color: '#FFF' }}>Shopify</strong> — your email, name, address, order history, and payment info. Shopify is PCI-DSS compliant and handles all payment processing. We never see your card number. Data stored in Shopify is subject to <a href="https://www.shopify.com/legal/privacy" style={{ color: '#00FF41', textDecoration: 'none' }} target="_blank" rel="noopener noreferrer">Shopify's Privacy Policy</a>.</Li>
      <Li><strong style={{ color: '#FFF' }}>Cloudflare D1</strong> — loyalty tier, points, cert verifications, MFA credentials, notification preferences. Encrypted at rest on Cloudflare's edge network.</Li>
      <Li><strong style={{ color: '#FFF' }}>Cloudflare Turnstile</strong> — bot detection on login/register forms. No data stored — just a pass/fail check.</Li>

      <H>THIRD PARTIES</H>
      <P>We share data with exactly three services, all necessary to operate:</P>
      <Li><strong style={{ color: '#FFF' }}>Shopify</strong> — e-commerce platform (orders, payments, customer records) — <a href="https://www.shopify.com/legal/privacy" style={{ color: '#00FF41', textDecoration: 'none' }} target="_blank" rel="noopener noreferrer">their privacy policy</a></Li>
      <Li><strong style={{ color: '#FFF' }}>Cloudflare</strong> — hosting, database, CDN, and bot protection</Li>
      <Li><strong style={{ color: '#FFF' }}>Credly / Hack The Box</strong> — only when YOU initiate a cert verification. We send the minimum needed to confirm your cert, then discard it.</Li>

      <P>That's it. No ad networks. No data brokers. No "partners" getting a copy of your purchase history.</P>

      <H>WHAT SHOPIFY RECEIVES</H>
      <P>Your browsing and cart activity happen entirely on our infrastructure — no Shopify scripts run in your browser while you shop. When you proceed to checkout, the connection is proxied through our Cloudflare network, so you never leave our domain. Shopify receives:</P>
      <Li>Your cart contents (products and quantities)</Li>
      <Li>Your account identity (so checkout can prefill your details)</Li>
      <Li>Your IP address and browser info (forwarded through the proxy)</Li>
      <Li>Your name, email, shipping address, and payment info to complete the order</Li>
      <P>We never see your card number — Shopify handles all payment processing. Data stored in Shopify is subject to <a href="https://www.shopify.com/legal/privacy" style={{ color: '#00FF41', textDecoration: 'none' }} target="_blank" rel="noopener noreferrer">Shopify's Privacy Policy</a>.</P>

      <H>YOUR RIGHTS</H>
      <P>If it's not on your account page, we don't have it. Everything we store about you is visible right there — no hidden profiles, no shadow data.</P>
      <Li><strong style={{ color: '#FFF' }}>Access</strong> — your account page shows everything we know about you</Li>
      <Li><strong style={{ color: '#FFF' }}>Correction</strong> — edit your handle, name, address, and preferences in account settings</Li>
      <Li><strong style={{ color: '#FFF' }}>Deletion</strong> — email us and we'll delete your account from both our database and Shopify</Li>
      <Li><strong style={{ color: '#FFF' }}>Marketing opt-out</strong> — toggle in account settings, or unsubscribe from any email</Li>

      <H>SECURITY</H>
      <Li>All traffic is encrypted with TLS 1.2+</Li>
      <Li>Session cookies are HttpOnly, Secure, and SameSite=Strict with a 10-hour expiry</Li>
      <Li>Sessions are revoked server-side on logout — tokens are invalidated, not just cleared</Li>
      <Li>MFA secrets are AES-256-GCM encrypted at rest with HKDF-derived keys</Li>
      <Li>Recovery codes are salted + hashed (never stored in plaintext)</Li>
      <Li>Rate limiting on login, registration, MFA, and cert verification (per-account and per-IP)</Li>
      <Li>We don't store verification artifacts — emails, API tokens, and badge data are used once and discarded</Li>

      <H>CONTACT</H>
      <P>Questions about your data? Something feel wrong? Let us know.</P>
      <Li><a href="mailto:privacy@operatorbrewing.co" style={{ color: '#00FF41', textDecoration: 'none' }}>privacy@operatorbrewing.co</a></Li>

      <div style={{ marginTop: 40, padding: '14px 18px', border: '1px dashed rgba(255,255,255,0.12)', color: '#6E6E6E', fontSize: 15, lineHeight: 1.7 }}>
        // tl;dr: we collect what we need to send you coffee and run a loyalty program.<br/>
        // we encrypt the important stuff, we don't track you, and we don't sell your data.<br/>
        // if you want out, email us and we'll nuke your records.<br/>
        // drink responsibly. pwn responsibly. store data minimally.
      </div>
    </section>
  );
};

window.Privacy = Privacy;
