const Contato = () => {
  const [form, setForm] = React.useState({ nome:"", empresa:"", whatsapp:"", mensagem:"" });
  const [errors, setErrors] = React.useState({});
  const [sent, setSent] = React.useState(false);

  const validate = () => {
    const e = {};
    if (form.nome.trim().length < 2) e.nome = "Informe seu nome.";
    if (form.empresa.trim().length < 2) e.empresa = "Informe o nome do negócio.";
    const digits = form.whatsapp.replace(/\D/g, "");
    if (digits.length < 10 || digits.length > 13) e.whatsapp = "WhatsApp inválido.";
    if (form.mensagem.trim().length < 5) e.mensagem = "Conte um pouco mais (mín. 5 caracteres).";
    return e;
  };

  const onSubmit = (ev) => {
    ev.preventDefault();
    const e = validate();
    setErrors(e);
    if (Object.keys(e).length === 0) setSent(true);
  };

  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 }));
    if (errors[k]) setErrors(er => ({ ...er, [k]: undefined }));
  };

  const fields = [
    { k:"nome", label:"Seu nome", ph:"Como te chamamos?", type:"text" },
    { k:"empresa", label:"Clínica", ph:"Nome da sua clínica", type:"text" },
    { k:"whatsapp", label:"WhatsApp", ph:"(11) 99999-9999", type:"tel" },
  ];

  return (
    <section id="contato" className="section-pad" style={{borderTop:"1px solid var(--line)"}}>
      <div className="wrap">
        <div style={{display:"grid", gridTemplateColumns:"0.9fr 1.1fr", gap:56, alignItems:"start"}} className="contato-grid">
          {/* left info */}
          <div>
            <span className="eyebrow" data-reveal>Contato</span>
            <h2 data-reveal data-reveal-delay="1" style={{fontSize:"clamp(34px,3.8vw,52px)", margin:"20px 0 0"}}>
              Solicite uma<br/><span className="grad-text">avaliação estratégica.</span>
            </h2>
            <p data-reveal data-reveal-delay="2" style={{color:"var(--ink-dim)", fontSize:17, margin:"22px 0 0", maxWidth:400}}>
              Durante essa conversa vamos entender como sua clínica funciona hoje e verificar se nossa metodologia realmente faz sentido para sua operação.
              Caso identifiquemos que podemos gerar resultados, apresentaremos uma proposta personalizada.
            </p>

            <div data-reveal data-reveal-delay="3" style={{display:"grid", gap:14, marginTop:34}}>
              {[["whatsapp","WhatsApp","(11) 97740-3611"],["mail","E-mail","contato@pixarteaura.com.br"],["pin","Atendimento","Consultivo para clínicas de estética em São Paulo e região"]].map(([ic,l,v])=>(
                <div key={l} style={{display:"flex", alignItems:"center", gap:15}}>
                  <span style={{width:46, height:46, borderRadius:13, flexShrink:0, display:"flex", alignItems:"center", justifyContent:"center",
                    background:"var(--surface)", border:"1px solid var(--glass-border)", color:"var(--primary-2)"}}>
                    <Icon name={ic} size={20}/>
                  </span>
                  <div>
                    <div style={{fontSize:12.5, color:"var(--ink-mute)", textTransform:"uppercase", letterSpacing:".1em"}}>{l}</div>
                    <div style={{fontSize:16, fontWeight:500}}>{v}</div>
                  </div>
                </div>
              ))}
            </div>

          </div>

          {/* form */}
          <div data-reveal data-reveal-delay="2" className="card" style={{padding:"clamp(26px,6vw,38px)"}}>
            {!sent ? (
              <form onSubmit={onSubmit} noValidate>
                <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:18}} className="form-row">
                  {fields.slice(0,2).map(f=><Field key={f.k} f={f} val={form[f.k]} onChange={set(f.k)} err={errors[f.k]}/>)}
                </div>
                <div style={{marginTop:18}}>
                  <Field f={fields[2]} val={form.whatsapp} onChange={set("whatsapp")} err={errors.whatsapp}/>
                </div>
                <div style={{marginTop:18}}>
                  <label style={{display:"block", fontSize:13, color:"var(--ink-dim)", marginBottom:8, fontWeight:500}}>Como funciona sua clínica hoje?</label>
                  <textarea value={form.mensagem} onChange={set("mensagem")} rows={4} placeholder="Conte sobre seus procedimentos e seu volume de atendimento…"
                    style={inputStyle(!!errors.mensagem)} onFocus={focusOn} onBlur={focusOff(!!errors.mensagem)}/>
                  {errors.mensagem && <Err text={errors.mensagem}/>}
                </div>
                <button type="submit" className="btn btn-primary" style={{width:"100%", marginTop:24, padding:"16px"}}>
                  Solicitar avaliação da clínica
                  <Icon name="arrow" size={18}/>
                </button>
                <p style={{fontSize:12.5, color:"var(--ink-mute)", textAlign:"center", marginTop:14}}>
                  <Icon name="shield" size={13} stroke="var(--ink-mute)" style={{verticalAlign:"-2px", marginRight:5}}/>
                  Dados protegidos conforme a LGPD.
                </p>
              </form>
            ) : (
              <div style={{textAlign:"center", padding:"30px 10px"}}>
                <div style={{width:72, height:72, borderRadius:"50%", margin:"0 auto 20px", display:"flex", alignItems:"center", justifyContent:"center",
                  background:"rgba(0,206,201,.14)", color:"var(--accent)"}}>
                  <Icon name="check" size={34} stroke="var(--accent)"/>
                </div>
                <h3 style={{fontSize:26}}>Recebido, {form.nome.split(" ")[0]}! 🎉</h3>
                <p style={{color:"var(--ink-dim)", fontSize:16, margin:"12px auto 0", maxWidth:360}}>
                  Um especialista vai te chamar no WhatsApp <strong style={{color:"var(--ink)"}}>{form.whatsapp}</strong> para avaliar se a Pixarte Aura faz sentido para sua clínica.
                </p>
                <button onClick={()=>{setSent(false); setForm({nome:"",empresa:"",whatsapp:"",mensagem:""});}} className="btn btn-ghost" style={{marginTop:24, padding:"12px 22px"}}>
                  Enviar outra mensagem
                </button>
              </div>
            )}
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 920px){ .contato-grid{ grid-template-columns:1fr !important; gap:40px !important;} } @media (max-width:520px){ .form-row{ grid-template-columns:1fr !important;} }`}</style>
    </section>
  );
};

const inputStyle = (err) => ({
  width:"100%", padding:"13px 15px", borderRadius:12, fontFamily:"inherit", fontSize:15,
  background:"var(--bg)", color:"var(--ink)", outline:"none",
  border:`1px solid ${err ? "#EF4444" : "var(--glass-border)"}`, transition:"border-color .2s",
});
const focusOn = (e)=>{ e.target.style.borderColor = "var(--primary)"; };
const focusOff = (err)=>(e)=>{ e.target.style.borderColor = err ? "#EF4444" : "var(--glass-border)"; };

const Field = ({ f, val, onChange, err }) => (
  <div>
    <label style={{display:"block", fontSize:13, color:"var(--ink-dim)", marginBottom:8, fontWeight:500}}>{f.label}</label>
    <input type={f.type} value={val} onChange={onChange} placeholder={f.ph}
      style={inputStyle(!!err)} onFocus={focusOn} onBlur={focusOff(!!err)}/>
    {err && <Err text={err}/>}
  </div>
);
const Err = ({ text }) => <div style={{fontSize:12.5, color:"#F87171", marginTop:6}}>{text}</div>;

window.Contato = Contato;