// contact.jsx — contact / scheduling CTA + footer
function ContactForm() {
  const [form, setForm] = React.useState({ nombre: "", area: "Derecho de Familia", mensaje: "" });
  const areas = ["Derecho de Familia", "Derecho Civil", "Derecho de Policía Local", "Derecho Laboral", "Derecho Administrativo", "Otro / no estoy seguro"];
  const submit = (e) => {
    e.preventDefault();
    const msg = `Hola Paula, soy ${form.nombre || "—"}. Quisiera agendar una primera consulta sobre ${form.area}.${form.mensaje ? " " + form.mensaje : ""}`;
    window.open(WA_BASE(msg), "_blank");
  };
  const field = "w-full rounded-sm border border-cream/20 bg-white/[0.06] px-4 py-3 font-body text-[15px] text-cream placeholder-cream/40 outline-none transition-colors focus:border-bronzelt focus:bg-white/[0.1]";
  return (
    <form onSubmit={submit} className="space-y-4">
      <div>
        <label className="mb-1.5 block font-body text-[13px] font-semibold tracking-wide text-cream/65">Nombre</label>
        <input className={field} placeholder="Tu nombre" value={form.nombre}
          onChange={(e) => setForm({ ...form, nombre: e.target.value })} />
      </div>
      <div>
        <label className="mb-1.5 block font-body text-[13px] font-semibold tracking-wide text-cream/65">¿En qué área necesitas ayuda?</label>
        <select className={`${field} appearance-none`} value={form.area}
          onChange={(e) => setForm({ ...form, area: e.target.value })}>
          {areas.map((a) => <option key={a} className="bg-espresso text-cream">{a}</option>)}
        </select>
      </div>
      <div>
        <label className="mb-1.5 block font-body text-[13px] font-semibold tracking-wide text-cream/65">Cuéntame brevemente tu situación <span className="font-normal text-cream/40">(opcional)</span></label>
        <textarea rows="3" className={`${field} resize-none`} placeholder="Describe tu caso en pocas palabras…" value={form.mensaje}
          onChange={(e) => setForm({ ...form, mensaje: e.target.value })}></textarea>
      </div>
      <button type="submit"
        className="group flex w-full items-center justify-center gap-2.5 rounded-sm bg-bronze px-7 py-4 font-body text-[15.5px] font-semibold tracking-wide text-white transition-all hover:bg-[#b08a32] hover:-translate-y-[1px]">
        <span className="block h-[18px] w-[18px]"><Icon name="wa" /></span>
        Enviar y agendar por WhatsApp
      </button>
      <p className="text-center font-body text-[12.5px] text-cream/45">Se abrirá WhatsApp con tu mensaje listo para enviar.</p>
    </form>
  );
}

function Contact() {
  const channels = [
    { icon: "wa", label: "WhatsApp", value: "", href: WA_AGENDAR, tint: "wa" },
    { icon: "phone", label: "Teléfono", value: "+56 9 9291 9059", href: `tel:${TEL}` },
    { icon: "mail", label: "Correo", value: EMAIL, href: `mailto:${EMAIL}` },
  ];
  return (
    <section id="contacto" className="relative overflow-hidden bg-espresso py-24 text-cream lg:py-32">
      <div className="pointer-events-none absolute -left-32 -top-20 h-96 w-96 rounded-full bg-bronze/[0.08] blur-3xl"></div>
      <div className="mx-auto grid max-w-7xl gap-14 px-6 lg:grid-cols-2 lg:gap-20 lg:px-10">
        <div>
          <Eyebrow className="text-bronzelt">Agenda tu primera consulta</Eyebrow>
          <h2 className="mt-5 font-display text-[clamp(2.3rem,4.8vw,3.6rem)] font-semibold leading-[1.04]">
            Da el primer paso.<br /><span className="italic text-bronzelt">Conversemos tu caso.</span>
          </h2>
          <p className="mt-6 max-w-lg text-pretty font-body text-[17px] leading-relaxed text-cream/72">
            La consulta inicial tiene un valor de $30.000 y, si decides contratar mis servicios, se descuenta de los honorarios. Escríbeme y te responderé a la brevedad para coordinar una reunión presencial u online.
          </p>

          <div className="mt-10 space-y-3">
            {channels.map((c) => (
              <a key={c.label} href={c.href} target="_blank" rel="noopener"
                 className="group flex items-center gap-4 rounded-sm border border-cream/12 bg-white/[0.04] p-4 transition-colors hover:border-bronzelt/40 hover:bg-white/[0.07]">
                <span className={`flex h-11 w-11 items-center justify-center rounded-sm ${c.tint === "wa" ? "bg-[#25D366]/20 text-[#25D366]" : "bg-bronze/15 text-bronzelt"}`}><span className="block h-5 w-5"><Icon name={c.icon} /></span></span>
                <span className="leading-tight">
                  <span className="block font-body text-[12.5px] uppercase tracking-[0.2em] text-cream/50">{c.label}</span>
                  {c.value && <span className="mt-0.5 block font-body text-[16px] font-semibold text-cream">{c.value}</span>}
                </span>
                <span className="ml-auto block h-4 w-4 text-cream/40 transition-transform group-hover:translate-x-1"><Icon name="arrow" /></span>
              </a>
            ))}
          </div>

          <div className="mt-8 flex flex-wrap gap-x-8 gap-y-3 border-t border-cream/12 pt-6">
            <span className="flex items-center gap-2.5 font-body text-[14.5px] text-cream/70"><span className="block h-[18px] w-[18px] text-bronzelt"><Icon name="clock" /></span>Lunes a viernes · 9:00 – 18:00 hrs</span>
            <span className="flex items-center gap-2.5 font-body text-[14.5px] text-cream/70"><span className="block h-[18px] w-[18px] text-bronzelt"><Icon name="pin" /></span>Talca, Región del Maule</span>
          </div>
        </div>

        {/* Form card */}
        <div className="overflow-hidden rounded-sm border border-cream/12 bg-white/[0.04]">
          <div className="relative h-40 w-full overflow-hidden">
            <img src="images/images.jpg" alt="Acuerdo y representación legal de confianza" className="h-full w-full object-cover" />
            <div className="absolute inset-0 bg-gradient-to-t from-[#0e4a5e] via-[#0e4a5e]/30 to-transparent"></div>
            <span className="absolute bottom-3.5 left-7 font-roman text-[11px] uppercase tracking-[0.28em] text-bronzelt">Atención directa y confidencial</span>
          </div>
          <div className="p-7 lg:p-9">
            <h3 className="font-display text-[26px] font-semibold text-cream">Solicita tu hora</h3>
            <p className="mb-6 mt-1.5 font-body text-[14.5px] text-cream/60">Completa y te escribo de vuelta.</p>
            <ContactForm />
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="bg-[#0a3543] py-14 text-cream/70">
      <div className="mx-auto max-w-7xl px-6 lg:px-10">
        <div className="flex flex-col gap-10 border-b border-cream/10 pb-10 lg:flex-row lg:items-start lg:justify-between">
          <div className="max-w-sm">
            <div className="flex items-center gap-4">
              <span className="flex h-[52px] w-[52px] shrink-0 items-center justify-center rounded-sm bg-cream/[0.06] text-bronzelt ring-1 ring-bronze/40"><span className="block h-7 w-7"><Icon name="scale" stroke={1.5} /></span></span>
              <span className="leading-none">
                <span className="block whitespace-nowrap font-roman text-[22px] tracking-[0.11em] text-cream">PAULA ROJAS ROJAS</span>
                <span className="mt-1.5 flex items-center gap-2 font-body text-[11px] font-bold uppercase tracking-[0.30em] text-bronzelt">
                  Abogada
                  <span className="h-[3px] w-[3px] rounded-full bg-bronzelt"></span>
                  Talca
                </span>
              </span>
            </div>
            <p className="mt-5 font-body text-[14px] leading-relaxed text-cream/55">
              Asesoría y representación legal con rigor técnico y trato cercano en la Región del Maule.
            </p>
          </div>
          <div className="grid grid-cols-2 gap-10 sm:grid-cols-3 sm:gap-14">
            <div>
              <h4 className="font-roman text-[12px] uppercase tracking-[0.22em] text-cream/45">Navegación</h4>
              <ul className="mt-4 space-y-2.5 font-body text-[14.5px]">
                <li><a href="#inicio" className="transition-colors hover:text-bronzelt">Inicio</a></li>
                <li><a href="#areas" className="transition-colors hover:text-bronzelt">Áreas legales</a></li>
                <li><a href="#preguntas" className="transition-colors hover:text-bronzelt">Preguntas frecuentes</a></li>
                <li><a href="#contacto" className="transition-colors hover:text-bronzelt">Contacto</a></li>
              </ul>
            </div>
            <div>
              <h4 className="font-roman text-[12px] uppercase tracking-[0.22em] text-cream/45">Contacto</h4>
              <ul className="mt-4 space-y-2.5 font-body text-[14.5px]">
                <li><a href={`tel:${TEL}`} className="transition-colors hover:text-bronzelt">+56 9 9291 9059</a></li>
                <li><a href={`mailto:${EMAIL}`} className="inline-block whitespace-nowrap text-[13px] tracking-tight transition-colors hover:text-bronzelt">{EMAIL}</a></li>
                <li className="text-cream/55">Lun a Vie · 9:00–18:00</li>
              </ul>
            </div>
            <div>
              <h4 className="font-roman text-[12px] uppercase tracking-[0.22em] text-cream/45">Enlaces útiles</h4>
              <ul className="mt-4 space-y-2.5 font-body text-[14.5px]">
                {[
                  ["Diario Oficial", "https://www.diariooficial.interior.gob.cl/"],
                  ["Poder Judicial", "https://oficinajudicialvirtual.pjud.cl/"],
                  ["Tribunal Tributario Maule", "https://www.tta.cl/tribunal-tributario-y-aduanero-de-la-region-del-maule/"],
                  ["Fiscalía de Chile", "https://www.fiscaliadechile.cl/"],
                  ["Diario Financiero", "https://www.df.cl/"],
                  ["Diario Talca", "https://diariotalca.cl/"],
                ].map(([label, url]) => (
                  <li key={url}>
                    <a href={url} target="_blank" rel="noopener noreferrer"
                       className="inline-flex items-center gap-1.5 whitespace-nowrap transition-colors hover:text-bronzelt">
                      {label}
                      <span className="block h-3 w-3 shrink-0 opacity-50"><Icon name="arrow" stroke={1.8} /></span>
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
        <div className="mt-8 flex flex-col gap-2 font-body text-[13px] text-cream/45 sm:flex-row sm:items-center sm:justify-between">
          <span>© {new Date().getFullYear()} Paula Rojas Rojas · Abogada. Todos los derechos reservados.</span>
          <span>Talca, Región del Maule, Chile.</span>
        </div>
      </div>
    </footer>
  );
}
Object.assign(window, { Contact, Footer });