/* security.jsx — What's On 2 security & trust page. Reuses brand CSS + Icons + Footer. */
(function(){
  const { useEffect } = React;
  const I = window.Icons;
  const { SectionHead, useReveal, Footer } = window;

  const SEC_EMAIL = 'mailto:whatson-support@chappleproperty.co.uk?subject=Security';

  function Header(){
    // Identical to the Pricing page top bar (.cs-topbar) — brandmark + nav + back arrow.
    return (
      <header className="cs-topbar">
        <a className="cs-brand" href="/" aria-label="What’s On 2 — home">What’s On<span className="two">2</span></a>
        <nav>
          <a href="/#how">How it works</a>
          <a href="/#movein">Move-In</a>
          <a href="/pricing/Pricing.html">Pricing</a>
          <a href="/#privacy">Privacy</a>
        </nav>
        <a className="back-to-site" href="/" aria-label="Back to What’s On">← What’s On</a>
      </header>
    );
  }

  function Hero(){
    return (
      <section className="sec-hero" id="top">
        <div className="wrap">
          <div className="reveal"><span className="eyebrow">Security &amp; trust</span></div>
          <h1 className="reveal sec-h1">Built so we <span className="on">can’t</span> read your email.</h1>
          <p className="reveal sec-lead">
            What’s On is an email assistant — so we take the obvious worry head-on. In <b>Private</b>,
            triage runs entirely on your device and your mail never reaches us. In <b>Connected</b>,
            it’s processed through the Claude plan you already trust. Here’s exactly how that works,
            and what we will and won’t claim.
          </p>
        </div>
      </section>
    );
  }

  function Principles(){
    const pts = [
      [I.Cpu,'On-device in Private','Triage runs locally on your iPhone or Mac. Your email is read where it already lives — it never travels to our servers.'],
      [I.EyeOff,'We can’t see your mail','In Private there’s no server in the loop, so there’s no copy of your inbox on our side. We’re structurally incapable of reading it.'],
      [I.Key,'Your keys stay yours','Your own AI key and account credentials are stored on your device. They power on-device triage and never touch our systems.'],
      [I.CloudOff,'No inbox on our servers','We don’t warehouse your messages. In Connected, mail is processed in the cloud via your Claude plan — not retained by us.'],
      [I.Lock,'Encrypted in transit','Account connections use the providers’ standard OAuth and TLS-encrypted links. We never store your mailbox passwords.'],
      [I.Shield,'Least data, by design','We collect the minimum needed to run the app. No selling, no ad profiling, no third-party data sharing.'],
    ];
    return (
      <section className="section sec-divider">
        <div className="wrap">
          <SectionHead label="Principles" title="Six commitments we design around"
            intro="These aren’t aspirations bolted on later — they shape how the product is built."/>
          <div className="priv-grid">
            <div className="priv-points reveal">
              {pts.map(([Ico,h,p],i)=>(
                <div className="priv-pt" key={i}>
                  <span className="pi"><Ico/></span>
                  <div><h4>{h}</h4><p>{p}</p></div>
                </div>
              ))}
            </div>
            <div className="receipt reveal">
              <div className="rtop"><I.Shield/> PRIVATE MODE · ON THIS DEVICE</div>
              <div className="rline"><span>Emails read on device</span><b>2,481</b></div>
              <div className="rline"><span>Emails sent to our servers</span><span className="zero">0</span></div>
              <div className="rline"><span>Drafts written locally</span><b>37</b></div>
              <div className="rline"><span>Keys stored off-device</span><span className="zero">0</span></div>
              <div className="rline"><span>Data shared with third parties</span><span className="zero">0</span></div>
              <div className="rline"><span>Processing location</span><span className="ok">your device</span></div>
              <div className="rfoot">RUNS ONLY ON YOUR DEVICE · WE NEVER SEE YOUR MAIL</div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  function Models(){
    return (
      <section className="section sec-divider">
        <div className="wrap">
          <SectionHead label="Two security models" title="Pick the level of isolation you need"
            intro="The same calm inbox — your choice of where the thinking happens."/>
          <div className="ways-grid">
            <div className="way connected reveal">
              <span className="wtag"><I.Cpu/> Connected</span>
              <div className="wname">Cloud, via your Claude plan</div>
              <p className="wbody">Triage runs inside your own Claude account. Your mail is processed in Anthropic’s cloud under the plan and terms you already accepted — and <b>not retained by us</b>.</p>
              <ul className="wlist">
                <li><I.Check/><span>OAuth connections; no passwords stored</span></li>
                <li><I.Check/><span>Processed under your Claude plan’s terms</span></li>
                <li><I.Check/><span>No What’s On server copy of your inbox</span></li>
              </ul>
              <div className="wfor"><b>Best for:</b> everyday inboxes that want strong privacy with zero setup.</div>
            </div>
            <div className="way private reveal">
              <span className="ribbon">Most private</span>
              <span className="wtag"><I.Lock/> Private · on-device</span>
              <div className="wname">Zero-knowledge, on your device</div>
              <p className="wbody">Everything runs locally with <b>your own AI key</b>. Email content stays on the device; the only thing that leaves is the AI call you authorise — and it never passes through us.</p>
              <ul className="wlist">
                <li><I.Check/><span>Runs only on your iPhone or Mac</span></li>
                <li><I.Check/><span>Your keys, your mail — never ours</span></li>
                <li><I.Check/><span>Built for confidential correspondence</span></li>
              </ul>
              <div className="wfor"><b>Best for:</b> legal, finance, healthcare and anyone who means it about privacy.</div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  function Disclosure(){
    return (
      <section className="section sec-divider">
        <div className="wrap">
          <div className="sec-disclose reveal">
            <div>
              <div className="eyebrow" style={{color:'var(--gold)'}}>Responsible disclosure</div>
              <h3 className="sec-disclose-h">Found something? Tell us.</h3>
              <p className="sec-disclose-p">We welcome reports from security researchers and treat them as a priority. Email our team with steps to reproduce and we’ll acknowledge quickly. Please give us a reasonable window to fix before any public disclosure.</p>
            </div>
            <a className="btn btn-primary" href={SEC_EMAIL}>Report a vulnerability</a>
          </div>
        </div>
      </section>
    );
  }

  function App(){
    useReveal();
    return (
      <React.Fragment>
        <div className="bg-glow"></div>
        <Header/>
        <main id="root-main">
          <Hero/>
          <Principles/>
          <Models/>
          <Disclosure/>
          <Footer/>
        </main>
      </React.Fragment>
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
})();