const Footer = () => {
  const [form, setForm] = React.useState({ nome:"", whatsapp:"", clinica:"" });
  const [sent, setSent] = React.useState(false);
  const set = (k) => (ev) => {
    let v = ev.target.value;
    if (k === "whatsapp") {
      const d = v.replace(/\D/g, "").slice(0, 11);
      if (d.length > 6) v = `(${d.slice(0,2)}) ${d.slice(2,7)}-${d.slice(7)}`;
      else if (d.length > 2) v = `(${d.slice(0,2)}) ${d.slice(2)}`;
      else v = d;
    }
    setForm(f => ({ ...f, [k]: v }));
  };
  const onSubmit = (ev) => { ev.preventDefault(); setSent(true); };
  const cols = [
    ["Sistema", ["Metodologia","Para quem é","Sobre","Contato"]],
    ["Empresa", ["Sobre a Pixarte","Casos de uso","Contato"]],
    ["Legal", ["Privacidade","Termos de uso","LGPD"]],
  ];
  return (
    <footer style={{borderTop:"1px solid var(--line)", background:"var(--bg-2)"}}>
      {/* final CTA band */}
      <div className="wrap" style={{padding:"80px 28px 70px"}}>
        <div className="card" data-reveal style={{position:"relative", overflow:"hidden", padding:"clamp(32px,7vw,56px)", textAlign:"center",
          background:"linear-gradient(135deg, rgba(255,107,53,.14), rgba(0,206,201,.08))", border:"1px solid rgba(255,107,53,.3)"}}>
          <div aria-hidden style={{position:"absolute", inset:0, opacity:.5,
            background:"radial-gradient(circle at 20% 0%, rgba(255,107,53,.3), transparent 50%), radial-gradient(circle at 85% 100%, rgba(0,206,201,.25), transparent 50%)"}}/>
          <div style={{position:"relative"}}>
            <h2 style={{fontSize:"clamp(30px,3.6vw,48px)"}}>Sua clínica pronta para<br/>atender com previsibilidade.</h2>
            <p style={{color:"var(--ink-dim)", fontSize:18, margin:"18px auto 0", maxWidth:480}}>
              Solicite uma avaliação estratégica e descubra se a Pixarte Aura faz sentido para sua operação.
            </p>
            <div style={{display:"flex", gap:14, justifyContent:"center", flexWrap:"wrap", marginTop:30}}>
              <a href="#contato" className="btn btn-primary" style={{padding:"16px 30px", fontSize:16}}>
                Agendar uma avaliação <Icon name="arrow" size={18}/>
              </a>
              <a href="#metodologia" className="btn btn-ghost" style={{padding:"16px 26px", fontSize:15}}>Ver metodologia</a>
            </div>

            {/* always-visible mini form */}
            <div style={{marginTop:36, maxWidth:640, width:"100%", marginLeft:"auto", marginRight:"auto", boxSizing:"border-box"}}>
              {!sent ? (
                <form onSubmit={onSubmit} style={{display:"grid", gridTemplateColumns:"repeat(3, minmax(0,1fr))", gap:10, width:"100%"}} className="mini-form">
                  <input required value={form.nome} onChange={set("nome")} placeholder="Seu nome" style={miniInput}/>
                  <input required value={form.whatsapp} onChange={set("whatsapp")} placeholder="WhatsApp" style={miniInput}/>
                  <input required value={form.clinica} onChange={set("clinica")} placeholder="Nome da clínica" style={miniInput}/>
                  <button type="submit" className="btn btn-primary" style={{padding:"14px 20px", fontSize:14.5, whiteSpace:"nowrap", gridColumn:"1 / -1"}}>Solicitar Demonstração</button>
                </form>
              ) : (
                <div style={{padding:"18px 22px", borderRadius:14, background:"rgba(0,206,201,.12)", border:"1px solid rgba(0,206,201,.35)", fontSize:15}}>
                  Recebido, {form.nome.split(" ")[0] || "tudo certo"}! Um especialista vai entrar em contato no WhatsApp {form.whatsapp}.
                </div>
              )}
            </div>
          </div>
        </div>
      </div>

      {/* footer links */}
      <div className="wrap" style={{padding:"10px 28px 40px"}}>
        <div style={{display:"grid", gridTemplateColumns:"1.6fr 1fr 1fr 1fr", gap:40, paddingBottom:44, borderBottom:"1px solid var(--line)"}} className="foot-grid">
          <div>
            <a href="#home" style={{display:"inline-flex", alignItems:"center", gap:11, marginBottom:18}}>
              <Icon name="logo" size={30}/>
              <span style={{fontWeight:800, fontSize:21}}>Pixarte Aura</span>
            </a>
            <p style={{color:"var(--ink-dim)", fontSize:15, maxWidth:280, lineHeight:1.6}}>
              A plataforma exclusiva desenvolvida para transformar o atendimento de clínicas de estética através de Inteligência Artificial.
            </p>
            <div style={{display:"flex", gap:10, marginTop:20}}>
              {["whatsapp","instagram","globe"].map(ic=>(
                <a key={ic} href="#" style={{width:40, height:40, borderRadius:11, display:"flex", alignItems:"center", justifyContent:"center",
                  background:"var(--surface)", border:"1px solid var(--glass-border)", color:"var(--ink-dim)", transition:"all .2s"}}
                  onMouseEnter={e=>{e.currentTarget.style.color="var(--ink)";e.currentTarget.style.borderColor="rgba(255,255,255,.25)";}}
                  onMouseLeave={e=>{e.currentTarget.style.color="var(--ink-dim)";e.currentTarget.style.borderColor="var(--glass-border)";}}>
                  <Icon name={ic} size={18}/>
                </a>
              ))}
            </div>
          </div>
          {cols.map(([h,links])=>(
            <div key={h}>
              <div style={{fontSize:12.5, fontWeight:600, letterSpacing:".14em", textTransform:"uppercase", color:"var(--ink-mute)", marginBottom:16}}>{h}</div>
              <ul style={{listStyle:"none", padding:0, margin:0, display:"grid", gap:11}}>
                {links.map(l=>(
                  <li key={l}><a href="#" style={{fontSize:14.5, color:"var(--ink-dim)", transition:"color .2s"}}
                    onMouseEnter={e=>e.currentTarget.style.color="var(--ink)"} onMouseLeave={e=>e.currentTarget.style.color="var(--ink-dim)"}>{l}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", paddingTop:26, flexWrap:"wrap", gap:12}}>
          <span style={{fontSize:13, color:"var(--ink-mute)"}}>© 2026 Pixarte Aura · Sistema inteligente para clínicas de estética.</span>
          <span style={{fontSize:13, color:"var(--ink-mute)", display:"flex", alignItems:"center", gap:7}}>
            <span style={{width:7, height:7, borderRadius:"50%", background:"var(--accent)"}}/> Vagas limitadas para novas clínicas parceiras
          </span>
        </div>
      </div>
      <style>{`@media (max-width: 820px){ .foot-grid{ grid-template-columns:1fr 1fr !important; gap:32px !important;} } @media (max-width:680px){ .mini-form{ grid-template-columns:1fr !important;} .mini-form button{ grid-column:1 !important;} }`}</style>
    </footer>
  );
};
const miniInput = { padding:"13px 15px", borderRadius:12, fontFamily:"inherit", fontSize:14.5, background:"var(--bg)", color:"var(--ink)", outline:"none", border:"1px solid var(--glass-border)", width:"100%", boxSizing:"border-box" };
window.Footer = Footer;