// Compare, FAQ, CTA, Footer

function Compare() {
  const rows = [
    { label:'Price',              icloud:'Free',              opass:'$36/yr',          cypher:'$19.99 once' },
    { label:'Where your data lives', icloud:'Apple\u2019s cloud', opass:'AWS',           cypher:'Sandboxed on your Mac' },
    { label:'Account required',   icloud:'Apple ID',          opass:'1Password acct',  cypher:'None' },
    { label:'Works offline',      icloud:'Partial',           opass:'Partial',         cypher:'Always' },
    { label:'Technology',         icloud:'Proprietary',       opass:'Electron / web',  cypher:'Swift + CryptoKit + GRDB' },
    { label:'Passwords',          icloud:true,                opass:true,              cypher:true },
    { label:'Seed phrases',       icloud:false,               opass:'Free-form',       cypher:'BIP-39 validated' },
    { label:'API keys',           icloud:false,               opass:'Free-form',       cypher:'Auto-tagged + live-tested' },
    { label:'Encrypted notes',    icloud:false,               opass:true,              cypher:'AES-256-GCM blobs' },
    { label:'Sync',               icloud:'Automatic (cloud)', opass:'Automatic (cloud)', cypher:'Manual · your iCloud Drive' },
    { label:'Subscription',       icloud:false,               opass:true,              cypher:false },
    { label:'Open-source crypto', icloud:false,               opass:false,             cypher:'CryptoKit + GRDB' },
  ];
  const cols = [
    { key:'icloud', h:'iCloud Keychain', tag:'Apple · Cloud' },
    { key:'opass',  h:'1Password',       tag:'SaaS · Cloud'  },
    { key:'cypher', h:'CypherKeep',      tag:'Local · Once',   featured:true },
  ];

  const renderCell = (v, featured) => {
    if (v === true)  return <span style={{ color: featured ? ACCENT : '#10b981', fontSize:18 }}>✓</span>;
    if (v === false) return <span style={{ color:'rgba(15,14,20,.25)', fontSize:18 }}>—</span>;
    return (
      <span style={{
        fontSize:13.5, color: featured ? INK : 'rgba(15,14,20,.78)',
        fontWeight: featured ? 500 : 400,
      }}>{v}</span>
    );
  };

  return (
    <section id="compare" style={{ padding:'140px 40px', background:BONE }}>
      <div style={{ maxWidth:1180, margin:'0 auto' }}>
        <Reveal>
          <div style={{ fontSize:12, color:ACCENT, fontFamily:"'Geist Mono', monospace", letterSpacing:'.15em', marginBottom:16 }}>03 — HOW WE COMPARE</div>
        </Reveal>
        <Reveal delay={80}>
          <h2 style={{ fontSize:'clamp(32px, 5vw, 64px)', fontWeight:500, letterSpacing:'-.035em', margin:'0 0 56px', lineHeight:1 }}>
            Why not just use<br/>iCloud Keychain <span style={{ color:'rgba(15,14,20,.35)' }}>or 1Password?</span>
          </h2>
        </Reveal>

        <Reveal delay={160}>
          <div className="compare-table-wrap" style={{ overflowX: 'auto', WebkitOverflowScrolling: 'touch' }}>
          <div className="compare-table" style={{
            position:'relative',
            border:`1px solid ${BONE_FAINT}`,
            borderRadius:40,
            background:'#fff',
            overflow:'hidden',
            minWidth: 640,
          }}>
            {/* featured column highlight */}
            <div style={{
              position:'absolute', top:0, bottom:0,
              left:'calc(34% + ((66% / 3) * 2))',
              width:'calc(66% / 3)',
              background:`linear-gradient(180deg, ${ACCENT}0d, ${ACCENT}04)`,
              borderLeft:`1px solid ${ACCENT}22`,
              borderRight:`1px solid ${ACCENT}22`,
              pointerEvents:'none',
            }}/>

            {/* header row */}
            <div style={{
              position:'relative',
              display:'grid',
              gridTemplateColumns:'34% 1fr 1fr 1fr',
              borderBottom:`1px solid ${BONE_FAINT}`,
            }}>
              <div style={{
                padding:'28px 28px',
                fontSize:11, fontFamily:"'Geist Mono', monospace",
                letterSpacing:'.15em', color:'rgba(15,14,20,.4)',
                alignSelf:'end',
              }}>
                CAPABILITY
              </div>
              {cols.map(c => (
                <div key={c.key} style={{
                  padding:'28px 20px 22px',
                  textAlign:'center',
                  borderLeft:`1px solid ${BONE_FAINT}`,
                }}>
                  <div style={{
                    fontSize:10.5, fontFamily:"'Geist Mono', monospace",
                    letterSpacing:'.12em', color: c.featured ? ACCENT : 'rgba(15,14,20,.4)',
                    marginBottom:8,
                  }}>{c.tag.toUpperCase()}</div>
                  <div style={{
                    fontSize:19, fontWeight:500, letterSpacing:'-.015em',
                    color: c.featured ? INK : INK,
                    display:'inline-flex', alignItems:'center', gap:8,
                  }}>
                    {c.featured && <span style={{
                      width:7, height:7, borderRadius:'50%', background:ACCENT,
                      boxShadow:`0 0 0 4px ${ACCENT}22`,
                    }}/>}
                    {c.h}
                  </div>
                </div>
              ))}
            </div>

            {/* data rows */}
            {rows.map((r,i) => (
              <div key={i} style={{
                position:'relative',
                display:'grid',
                gridTemplateColumns:'34% 1fr 1fr 1fr',
                borderBottom: i < rows.length-1 ? `1px solid ${BONE_FAINT}` : 'none',
              }}>
                <div style={{
                  padding:'18px 28px',
                  fontSize:14, color:'rgba(15,14,20,.7)',
                  alignSelf:'center',
                }}>{r.label}</div>
                {cols.map(c => (
                  <div key={c.key} style={{
                    padding:'18px 20px',
                    textAlign:'center',
                    borderLeft:`1px solid ${BONE_FAINT}`,
                    alignSelf:'center',
                  }}>
                    {renderCell(r[c.key], c.featured)}
                  </div>
                ))}
              </div>
            ))}
          </div>
          </div>
        </Reveal>

        <div style={{
          marginTop:20, fontSize:12, fontFamily:"'Geist Mono', monospace",
          color:'rgba(15,14,20,.4)', textAlign:'center',
        }}>
          Comparisons based on public documentation · December 2025
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const [open, setOpen] = React.useState(0);
  const items = [
    ['What if I forget my master password?', 'There\u2019s no recovery. The master password is stored in the macOS Keychain (protected by kSecAttrAccessibleWhenUnlockedThisDeviceOnly) and used to derive the AES key. Without it, encrypted data cannot be decrypted. Write it down and keep it safe.'],
    ['Does it sync across devices?', 'Not automatically. You can manually export a .cypherkeep encrypted backup from Settings \u2192 Database and copy it to another Mac. Import requires the same master password \u2014 the backup is end-to-end encrypted. CypherKeep never initiates sync itself.'],
    ['Is it open source?', 'The cryptographic primitives are Apple\u2019s own CryptoKit (open source) and GRDB.swift (MIT). The CypherKeep application itself is proprietary \u2014 all rights reserved.'],
    ['Does it lock automatically?', 'Yes. Auto-lock can be configured in Settings \u2192 Security. The vault locks after a configurable idle period (tracked even when the app is in the background), and also immediately when you switch to another app if the timeout is short enough. Touch ID / Face ID can be used for quick re-unlock.'],
    ['What happens if CypherKeep goes away?', 'Your vault is a single SQLite file on your Mac. Because it uses standard AES-256-GCM and PBKDF2 parameters documented in the security model, the ciphertext format is reproducible \u2014 your data is never trapped behind us.'],
    ['Is there a free version?', 'There\u2019s a 14-day trial with the full feature set. After that it\u2019s $19.99 once on the Mac App Store. No subscriptions, ever.'],
  ];
  return (
    <section id="faq" style={{ padding:'140px 40px', borderTop:`1px solid ${BONE_FAINT}` }}>
      <div className="faq-grid" style={{ maxWidth:1080, margin:'0 auto', display:'grid', gridTemplateColumns:'300px 1fr', gap:80 }}>
        <div className="faq-sticky" style={{ position:'sticky', top:100, alignSelf:'start' }}>
          <div style={{ fontSize:12, color:ACCENT, fontFamily:"'Geist Mono', monospace", letterSpacing:'.15em', marginBottom:16 }}>04 — QUESTIONS</div>
          <h2 style={{ fontSize:'clamp(28px, 4vw, 56px)', fontWeight:500, letterSpacing:'-.035em', margin:0, lineHeight:1 }}>
            Good<br/>questions,<br/>
            <span style={{ fontFamily:"'Instrument Serif', serif", fontStyle:'italic' }}>answered.</span>
          </h2>
        </div>
        <div>
          {items.map(([q,a],i)=>(
            <div key={i} style={{ borderBottom:`1px solid ${BONE_FAINT}` }}>
              <button onClick={()=>setOpen(open===i?-1:i)} style={{
                all:'unset', cursor:'pointer', width:'100%',
                padding:'22px 0', display:'flex', alignItems:'flex-start', gap:16,
              }}>
                <span style={{
                  fontFamily:"'Geist Mono', monospace", fontSize:11,
                  color:'rgba(15,14,20,.35)', paddingTop:5, letterSpacing:'.05em',
                }}>{String(i+1).padStart(2,'0')}</span>
                <span style={{ fontSize:18, fontWeight:500, flex:1, letterSpacing:'-.01em' }}>{q}</span>
                <span style={{
                  width:28, height:28, borderRadius:'50%', background:'rgba(15,14,20,.05)',
                  display:'inline-flex', alignItems:'center', justifyContent:'center',
                  fontSize:16, color:'rgba(15,14,20,.6)',
                  transform: open===i ? 'rotate(45deg)':'rotate(0)', transition:'transform .3s',
                }}>+</span>
              </button>
              <div style={{
                maxHeight: open===i ? 220 : 0, overflow:'hidden',
                transition:'max-height .4s ease',
              }}>
                <p style={{
                  paddingLeft: 40, paddingRight: 52, paddingBottom: 22,
                  margin:0, fontSize:15, lineHeight:1.65, color:BONE_DIM,
                  overflowWrap:'break-word', wordBreak:'break-word',
                }}>{a}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTA() {
  return (
    <section id="download" style={{ padding:'160px 40px 140px', textAlign:'center', position:'relative', overflow:'hidden' }}>
      <div style={{
        position:'absolute', top:'50%', left:'50%', transform:'translate(-50%,-50%)',
        width:900, height:900, borderRadius:'50%',
        background:`radial-gradient(closest-side, ${ACCENT}18, transparent 70%)`,
        filter:'blur(40px)', zIndex:0, pointerEvents:'none',
      }}/>
      <div style={{ position:'relative', zIndex:1, maxWidth:900, margin:'0 auto' }}>
        <Reveal>
          <ShieldLogo size={48} accent={ACCENT}/>
        </Reveal>
        <Reveal delay={80}>
          <h2 style={{
            fontSize:'clamp(28px, 7vw, 104px)', fontWeight:500, letterSpacing:'-.045em',
            margin:'28px 0 24px', lineHeight:.95,
          }}>
            Take your secrets<br/>
            <span style={{ fontFamily:"'Instrument Serif', serif", fontStyle:'italic' }}>home.</span>
          </h2>
        </Reveal>
        <Reveal delay={160}>
          <p style={{ fontSize:17, color:BONE_DIM, marginBottom:36, maxWidth:540, margin:'0 auto 36px' }}>
            $19.99 once on the Mac App Store. 14-day trial, 7-day refund,
            zero questions.
          </p>
        </Reveal>
        <Reveal delay={220}>
          <div style={{ display:'inline-flex', gap:10 }}>
            <MagneticButton primary>
              <DownloadMark size={14} color={BONE}/> Download for macOS
            </MagneticButton>
            <MagneticButton>
              View on App Store <span style={{ opacity:.5 }}>↗</span>
            </MagneticButton>
          </div>
        </Reveal>
        <div style={{ fontSize:12, fontFamily:"'Geist Mono', monospace", color:'rgba(15,14,20,.4)', marginTop:24 }}>
          macOS 14+ · Swift + CryptoKit · notarized
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{ padding:'60px 40px 48px', borderTop:`1px solid ${BONE_FAINT}`, background:BONE }}>
      <div style={{ maxWidth:1180, margin:'0 auto' }}>
        <div className="footer-grid" style={{
          display:'grid',
          gridTemplateColumns:'2fr 1fr 1fr 1fr',
          gap:40, marginBottom:48,
        }}>
          <div>
            <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:16 }}>
              <ShieldLogo size={25} accent={ACCENT} glow={false}/>
              <Wordmark size={19} color={INK}/>
            </div>
            <p style={{ fontSize:13, color:BONE_DIM, lineHeight:1.6, maxWidth:320 }}>
              A native macOS vault for the secrets you can't afford to lose.
              Built in Lisbon.
            </p>
          </div>
          {[
            { h:'Product', links:[
                ['Download','#download'],
                ['Features','#features'],
                ['Security','#security'],
                ['FAQ','#faq'],
              ]},
            { h:'Support', links:[
                ['Contact','mailto:hello@cypherkeep.com'],
                ['Help','support.html'],
              ]},
            { h:'Legal', links:[
                ['Privacy','privacy.html'],
                ['Terms','terms.html'],
              ]},
          ].map(c=>(
            <div key={c.h}>
              <div style={{ fontSize:11, fontFamily:"'Geist Mono', monospace", color:'rgba(15,14,20,.4)', letterSpacing:'.12em', marginBottom:14 }}>{c.h.toUpperCase()}</div>
              {c.links.map(([label,href])=>(
                <a key={label} href={href} style={{ display:'block', fontSize:13, color:'rgba(15,14,20,.7)', marginBottom:10, cursor:'pointer', textDecoration:'none' }}>{label}</a>
              ))}
            </div>
          ))}
        </div>
        <div style={{
          paddingTop:28, borderTop:`1px solid ${BONE_FAINT}`,
          display:'flex', justifyContent:'space-between', alignItems:'center',
          fontSize:12, fontFamily:"'Geist Mono', monospace", color:'rgba(15,14,20,.45)',
        }}>
          <div>© 2026 CypherKeep · v1.0</div>
          <a href="mailto:hello@cypherkeep.com" style={{ color:'rgba(15,14,20,.6)', textDecoration:'none' }}>hello@cypherkeep.com</a>
        </div>
      </div>
    </footer>
  );
}

function App() {
  return (
    <>
      <Nav/>
      <Hero/>
      <Marquee/>
      <Features/>
      <Security/>
      <Compare/>
      <FAQ/>
      <CTA/>
      <Footer/>
    </>
  );
}

Object.assign(window, { Compare, FAQ, CTA, Footer, App });
ReactDOM.createRoot(document.getElementById('root')).render(<App/>);