// FAQ section for Fongos — trust-builder focus, per provided content.

function FAQ() {
  const [open, setOpen] = React.useState(0);
  const items = [
    {
      q: 'Does Fongos send anything to the cloud?',
      a: <>
        <p>Depends on mode. <b style={{color:FONGOS.cyanSoft}}>Local-only:</b> no. <b style={{color:FONGOS.purpleSoft}}>Cloud-assisted:</b> only the specific prompts and context for your current task, sent to the AI provider you chose.</p>
        <p>No persistent storage on our side. No training on your data. No telemetry beyond opt-in crash reports. <b style={{color:FONGOS.ink}}>Your screen contents, files, and clipboard never leave your machine</b>, regardless of mode.</p>
      </>
    },
    {
      q: 'Can he see passwords or banking?',
      a: <>
        <p>No. Fongos watches your screen but with strict guardrails:</p>
        <ul style={{paddingLeft:18,margin:'10px 0',display:'flex',flexDirection:'column',gap:6}}>
          <li>Password fields are detected and redacted <em>before</em> he ever sees them.</li>
          <li>Sensitive patterns (credit cards, API keys, account numbers) are blocked from storage and from any cloud traffic.</li>
          <li>You can mark specific apps or websites as private — he stops observing them when focused.</li>
          <li>Financial or authentication interfaces require explicit per-action approval.</li>
        </ul>
      </>
    },
    {
      q: 'Is my data used to train models?',
      a: <p>No. Not by us, not by the provider your local instance talks to (your cloud provider's paid-tier policy applies — we recommend settings that disable training). Fongos's own models are trained exclusively on our reference instance with explicit consent. <b style={{color:FONGOS.ink}}>Your local memory never leaves your machine for training purposes.</b></p>
    },
    {
      q: 'How do I stop him from acting on something?',
      a: <>
        <p>Three ways:</p>
        <ul style={{paddingLeft:18,margin:'10px 0',display:'flex',flexDirection:'column',gap:6}}>
          <li>Say <b style={{color:FONGOS.cyanSoft}}>"stop"</b> or click Cancel — the current action halts immediately.</li>
          <li><b style={{color:FONGOS.ink}}>Approval prompts</b> — any change to your system files, admin commands, or code requires one-click approval.</li>
          <li><b style={{color:FONGOS.ink}}>Autonomy slider</b> — Manual (asks before anything) · Balanced (acts on safe operations, asks for the rest) · Full (acts freely during idle time only).</li>
        </ul>
      </>
    },
    {
      q: 'What happens if my internet drops?',
      a: <>
        <p><b style={{color:FONGOS.cyanSoft}}>Local-only mode:</b> nothing changes.</p>
        <p><b style={{color:FONGOS.purpleSoft}}>Cloud-assisted mode:</b> he keeps working — screen awareness, goal reasoning, memory all continue running locally. Tasks that need cloud-tier reasoning queue until you're back online. Nothing crashes.</p>
      </>
    },
    {
      q: 'What does beta access cost?',
      a: <p>Nothing for the local tier. If you use our managed cloud-assisted mode there's a small fee; bring-your-own-keys is always supported. Pricing at general availability will be announced then — <b style={{color:FONGOS.ink}}>a free local tier will always be included</b>.</p>
    },
  ];
  return (
    <section id="faq" style={{padding:'120px 40px',borderBottom:`1px solid ${FONGOS.line}`}}>
      <div style={{maxWidth:1080,margin:'0 auto'}}>
        <SectionLabel num="08" name="Questions people actually ask"/>
        <Headline size={56} style={{marginBottom:48,maxWidth:700}}>
          Hard questions.<br/><span style={{color:FONGOS.inkDim}}>Direct answers.</span>
        </Headline>
        <div style={{border:`1px solid ${FONGOS.line}`}}>
          {items.map((it,i)=>{
            const isOpen = open===i;
            return (
              <div key={i} style={{borderBottom:i<items.length-1?`1px solid ${FONGOS.line}`:'none'}}>
                <button onClick={()=>setOpen(isOpen?-1:i)} style={{
                  width:'100%',background:isOpen?FONGOS.surface:'transparent',color:FONGOS.ink,
                  border:'none',padding:'22px 28px',textAlign:'left',cursor:'pointer',
                  display:'flex',justifyContent:'space-between',alignItems:'center',gap:20,
                  fontFamily:FONGOS.sans,fontSize:16,fontWeight:400,
                }}>
                  <span style={{display:'flex',gap:20,alignItems:'center'}}>
                    <span style={{fontFamily:FONGOS.mono,fontSize:11,color:FONGOS.inkFaint,letterSpacing:'0.15em'}}>
                      {String(i+1).padStart(2,'0')}
                    </span>
                    <span>{it.q}</span>
                  </span>
                  <span style={{fontFamily:FONGOS.mono,color:isOpen?FONGOS.purpleSoft:FONGOS.inkDim,fontSize:18,transform:isOpen?'rotate(45deg)':'none',transition:'transform .2s'}}>+</span>
                </button>
                {isOpen && (
                  <div style={{padding:'0 28px 26px 70px',color:FONGOS.inkDim,fontSize:14,lineHeight:1.65,display:'flex',flexDirection:'column',gap:10}}>
                    {it.a}
                  </div>
                )}
              </div>
            );
          })}
        </div>
        <p style={{textAlign:'center',marginTop:32,fontFamily:FONGOS.mono,fontSize:11,letterSpacing:'0.18em',color:FONGOS.inkFaint,textTransform:'uppercase'}}>
          more in the docs · shipped with beta access
        </p>
      </div>
    </section>
  );
}

Object.assign(window, { FAQ });