const Precos = () => {
  const fit = ["Desejam crescer", "Recebem muitos contatos pelo WhatsApp", "Valorizam atendimento rápido", "Querem reduzir perdas de pacientes", "Estão dispostas a profissionalizar seus processos"];
  const notFit = ["Procuram apenas o menor preço", "Não desejam mudar processos", "Não possuem interesse em acompanhar indicadores", "Querem uma solução pronta sem personalização"];
  const faqs = [
    ["A Aura substitui minha recepção?","Não — ela elimina o trabalho repetitivo e responde a qualquer hora. Sua equipe entra nos casos que pedem toque humano, e a Aura transfere a conversa com todo o contexto."],
    ["Preciso trocar o número de WhatsApp da clínica?","Não. A Aura conecta ao número atual via WhatsApp Business API, sem perder histórico nem contatos."],
    ["Como funciona a avaliação da clínica?","Conversamos sobre sua operação hoje, seu volume de atendimento e seus procedimentos. Só seguimos para a proposta se identificarmos que a metodologia faz sentido para sua clínica."],
    ["Os dados dos pacientes ficam seguros?","Sim. Todas as conversas são criptografadas e tratadas em conformidade com a LGPD. A clínica é titular dos dados e pode exportá-los quando quiser."],
    ["Quanto tempo leva a implantação?","Varia conforme a personalização necessária. Depois do diagnóstico, apresentamos um cronograma claro de implantação e acompanhamento."],
  ];
  return (
    <section id="paraquem" className="section-pad" style={{borderTop:"1px solid var(--line)"}}>
      <div className="wrap">
        <div style={{textAlign:"center", maxWidth:680, margin:"0 auto"}}>
          <span className="eyebrow" style={{justifyContent:"center"}} data-reveal>Para quem é</span>
          <h2 data-reveal data-reveal-delay="1" style={{fontSize:"clamp(34px,3.8vw,54px)", margin:"20px 0 0"}}>
            Procuramos clínicas<br/>que <span className="grad-text">fazem sentido para nós.</span>
          </h2>
          <p data-reveal data-reveal-delay="2" style={{color:"var(--ink-dim)", fontSize:17, margin:"18px auto 0", maxWidth:520}}>
            Avaliamos cada projeto antes de iniciar uma parceria. Isso garante atenção real a cada clínica implantada.
          </p>
        </div>

        <div style={{marginTop:50, display:"grid", gridTemplateColumns:"1fr 1fr", gap:20}} className="fit-grid">
          <div data-reveal data-reveal-delay="1" className="card" style={{padding:"clamp(24px,6vw,32px) clamp(22px,6vw,30px)", border:"1px solid rgba(0,206,201,.35)"}}>
            <h3 style={{fontSize:20, fontWeight:700, color:"var(--accent)"}}>Nosso sistema é indicado para clínicas que</h3>
            <ul style={{listStyle:"none", padding:0, margin:"22px 0 0", display:"grid", gap:14}}>
              {fit.map((f,i)=>(
                <li key={i} style={{display:"flex", alignItems:"flex-start", gap:11, fontSize:15.5, color:"var(--ink)"}}>
                  <Icon name="check" size={19} stroke="var(--accent)" style={{flexShrink:0, marginTop:2}}/>{f}
                </li>
              ))}
            </ul>
          </div>
          <div data-reveal data-reveal-delay="2" className="card" style={{padding:"clamp(24px,6vw,32px) clamp(22px,6vw,30px)", border:"1px solid var(--glass-border)", opacity:.9}}>
            <h3 style={{fontSize:20, fontWeight:700, color:"var(--ink-dim)"}}>Nosso sistema não é indicado para clínicas que</h3>
            <ul style={{listStyle:"none", padding:0, margin:"22px 0 0", display:"grid", gap:14}}>
              {notFit.map((f,i)=>(
                <li key={i} style={{display:"flex", alignItems:"flex-start", gap:11, fontSize:15.5, color:"var(--ink-dim)"}}>
                  <span style={{flexShrink:0, marginTop:1, color:"var(--primary-2)", fontWeight:700}}>✕</span>{f}
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* FAQ */}
        <div style={{marginTop:96, display:"grid", gridTemplateColumns:"0.7fr 1.3fr", gap:56, alignItems:"start"}} className="faq-grid">
          <div style={{position:"sticky", top:110}}>
            <span className="eyebrow" data-reveal>Dúvidas frequentes</span>
            <h2 data-reveal data-reveal-delay="1" style={{fontSize:"clamp(30px,3vw,42px)", margin:"18px 0 0"}}>
              Tudo que você<br/>precisa saber.
            </h2>
            <p data-reveal data-reveal-delay="2" style={{color:"var(--ink-dim)", fontSize:16, marginTop:18, maxWidth:300}}>
              Ainda com dúvida? <a href="#contato" style={{color:"var(--accent)", fontWeight:600}}>Solicite uma avaliação</a> e converse com um especialista.
            </p>
          </div>
          <div data-reveal>
            {faqs.map((f,i)=><FaqItem key={i} q={f[0]} a={f[1]} defaultOpen={i===0}/>)}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 820px){ .fit-grid{ grid-template-columns:1fr !important;} }
        @media (max-width: 920px){ .faq-grid{ grid-template-columns:1fr !important; gap:32px !important;} .faq-grid > div:first-child{ position:static !important;} }
      `}</style>
    </section>
  );
};

const FaqItem = ({ q, a, defaultOpen }) => {
  const [open, setOpen] = React.useState(!!defaultOpen);
  return (
    <div style={{borderBottom:"1px solid var(--line)"}}>
      <button onClick={()=>setOpen(o=>!o)} style={{display:"flex", alignItems:"center", gap:18, width:"100%", textAlign:"left", padding:"22px 0"}}>
        <span style={{fontSize:18.5, fontWeight:600, flex:1, color: open?"var(--ink)":"var(--ink-dim)"}}>{q}</span>
        <span style={{flexShrink:0, width:34, height:34, borderRadius:"50%", border:"1px solid var(--line)", display:"flex", alignItems:"center", justifyContent:"center",
          transform: open?"rotate(45deg)":"none", transition:"transform .3s", color:"var(--primary-2)"}}>
          <Icon name="plus" size={16}/>
        </span>
      </button>
      <div style={{maxHeight: open?260:0, opacity: open?1:0, overflow:"hidden", transition:"all .4s cubic-bezier(.2,.7,.2,1)"}}>
        <p style={{color:"var(--ink-dim)", fontSize:16, lineHeight:1.6, padding:"0 52px 24px 0"}}>{a}</p>
      </div>
    </div>
  );
};

window.Precos = Precos;
