/* global React, FramerMotion */
/* Página /contacto — Formulário de contacto */
const { motion: mct, AnimatePresence: APct } = FramerMotion;
const { useState: uSct } = React;
const {
  FadeUp, WordsPullUpMultiStyle,
  IconCheck, IconArrowRight,
  Navbar: NBct, CtaPill: CPct, Footer: FTct,
  EASE_EXPO: EEct,
} = window;

const TOPICS = [
  { id: "assistente", label: "Assistente Virtual" },
  { id: "websites",   label: "Websites" },
  { id: "parceria",   label: "Parceria / imprensa" },
  { id: "outro",      label: "Outro" },
];

function ContactoPage() {
  const [status, setStatus] = uSct("idle");
  const [form, setForm] = uSct({ nome: "", email: "", assunto: "assistente", mensagem: "" });

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus("loading");
    try {
      const res = await fetch("https://api.captixy.com/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ tipo: "contacto", ...form }),
      });
      const data = await res.json();
      setStatus(data.success ? "success" : "error");
    } catch {
      setStatus("error");
    }
  }

  return (
    <>
      <NBct />
      <main className="bg-[#070B1F] min-h-screen">

        {/* Hero */}
        <section className="relative w-full overflow-hidden px-5 md:px-8 pt-24 md:pt-36 pb-16 md:pb-20">
          <div className="absolute -top-32 left-1/2 -translate-x-1/2 w-[60vw] h-[60vw] max-w-[700px] max-h-[700px] rounded-full pointer-events-none"
            style={{ background: "radial-gradient(circle, rgba(59,79,204,0.12), transparent 60%)", filter: "blur(60px)" }} />
          <div className="max-w-2xl mx-auto relative text-center">
            <FadeUp><div className="eyebrow-orange mb-5">Contacto</div></FadeUp>
            <WordsPullUpMultiStyle
              justify="center"
              className="text-3xl sm:text-4xl md:text-5xl text-primary leading-[1.02] max-w-2xl mx-auto"
              segments={[
                { text: "Fala",        className: "font-normal" },
                { text: "connosco.",   className: "serif italic font-normal text-orange" },
              ]}
            />
            <FadeUp delay={0.3}>
              <p className="mt-6 max-w-lg mx-auto text-primary/60 text-sm md:text-base leading-relaxed">
                Temos gosto em responder a questões sobre os nossos produtos,
                parcerias ou qualquer outro assunto. Respondemos em menos de 24 horas úteis.
              </p>
            </FadeUp>
          </div>
        </section>

        {/* Form + Info */}
        <section className="px-5 md:px-8 pb-24 md:pb-36">
          <div className="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-12 gap-10 md:gap-16">

            {/* Contact info */}
            <div className="md:col-span-4">
              <FadeUp>
                <div className="space-y-8">

                  <div>
                    <div className="eyebrow-orange mb-4">Email directo</div>
                    <a href="mailto:contact@captixy.com"
                      className="text-primary text-lg tracking-tight hover:text-orange transition-colors link-underline">
                      contact@captixy.com
                    </a>
                    <p className="mt-1.5 text-primary/45 text-sm">Para qualquer assunto</p>
                  </div>

                  <div className="h-px bg-white/5" />

                  <div>
                    <div className="eyebrow-orange mb-4">Produtos</div>
                    <div className="space-y-3">
                      <a href="/assistant" className="group flex items-center gap-2.5 text-sm text-primary/70 hover:text-primary transition-colors">
                        <span className="w-1.5 h-1.5 rounded-full bg-orange" />
                        Assistente Virtual
                        <IconArrowRight className="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity" />
                      </a>
                      <a href="/websites" className="group flex items-center gap-2.5 text-sm text-primary/70 hover:text-primary transition-colors">
                        <span className="w-1.5 h-1.5 rounded-full bg-orange" />
                        Websites
                        <IconArrowRight className="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity" />
                      </a>
                    </div>
                  </div>

                  <div className="h-px bg-white/5" />

                  <div>
                    <div className="eyebrow-orange mb-4">Informação legal</div>
                    <div className="space-y-2">
                      <a href="/privacidade" className="block text-sm text-primary/45 hover:text-primary/70 transition-colors link-underline">Política de Privacidade</a>
                      <a href="/termos" className="block text-sm text-primary/45 hover:text-primary/70 transition-colors link-underline">Termos de Utilização</a>
                    </div>
                  </div>

                </div>
              </FadeUp>
            </div>

            {/* Form */}
            <div className="md:col-span-8">
              <FadeUp delay={0.15}>
                {status === "success" ? (
                  <div className="rounded-2xl md:rounded-3xl bg-[#111530] hairline p-10 md:p-14 text-center">
                    <div className="w-14 h-14 rounded-full bg-emerald-400/15 flex items-center justify-center mx-auto mb-5">
                      <IconCheck className="w-6 h-6 text-emerald-400" />
                    </div>
                    <h2 className="text-primary text-2xl tracking-tight mb-3">Mensagem recebida!</h2>
                    <p className="text-primary/55 text-sm max-w-sm mx-auto leading-relaxed">
                      Respondemos em menos de 24 horas úteis.
                      Enquanto esperas, explora os nossos produtos.
                    </p>
                    <div className="mt-8 flex flex-wrap items-center justify-center gap-4">
                      <CPct href="/assistant" variant="orange" size="sm">Assistente Virtual</CPct>
                      <CPct href="/websites" variant="ghost-cream" size="sm">Websites</CPct>
                    </div>
                  </div>
                ) : (
                  <form onSubmit={handleSubmit}
                    className="rounded-2xl md:rounded-3xl bg-[#111530] hairline p-7 md:p-10 space-y-5">

                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
                      <Field id="nome" label="Nome" placeholder="O teu nome"
                        value={form.nome} onChange={(v) => setForm((f) => ({ ...f, nome: v }))} />
                      <Field id="email" label="Email" placeholder="nome@dominio.pt" type="email"
                        value={form.email} onChange={(v) => setForm((f) => ({ ...f, email: v }))} />
                    </div>

                    <div>
                      <label className="block text-xs text-primary/50 mb-2 tracking-wide">Assunto</label>
                      <div className="flex flex-wrap gap-2">
                        {TOPICS.map((t) => (
                          <button key={t.id} type="button"
                            onClick={() => setForm((f) => ({ ...f, assunto: t.id }))}
                            className={`px-3.5 py-1.5 rounded-full text-xs transition-all ${
                              form.assunto === t.id
                                ? "bg-orange text-white"
                                : "bg-[#1A1E3A] text-primary/60 hover:text-primary hairline"
                            }`}>
                            {t.label}
                          </button>
                        ))}
                      </div>
                    </div>

                    <div>
                      <label htmlFor="mensagem" className="block text-xs text-primary/50 mb-2 tracking-wide">Mensagem</label>
                      <textarea
                        id="mensagem"
                        value={form.mensagem}
                        onChange={(e) => setForm((f) => ({ ...f, mensagem: e.target.value }))}
                        placeholder="Descreve o teu pedido ou questão..."
                        rows={5}
                        required
                        className="w-full bg-[#1A1E3A] hairline rounded-xl px-4 py-3 text-sm text-primary placeholder-primary/30 outline-none focus:ring-1 focus:ring-orange/50 transition-shadow resize-none"
                      />
                    </div>

                    <div className="flex items-center gap-4 flex-wrap pt-1">
                      <button
                        type="submit"
                        disabled={status === "loading"}
                        className="group inline-flex items-center gap-2 btn-coral rounded-full pl-5 pr-1.5 py-1.5 text-sm font-medium disabled:opacity-60">
                        {status === "loading" ? "A enviar..." : "Enviar mensagem"}
                        <span className="inline-flex items-center justify-center bg-[#070B1F]/30 text-white rounded-full w-9 h-9 transition-transform group-hover:scale-110">
                          <IconArrowRight className="w-4 h-4" />
                        </span>
                      </button>
                      {status === "error" && (
                        <p className="text-xs text-red-400">Erro ao enviar. Tenta pelo email directo.</p>
                      )}
                    </div>
                  </form>
                )}
              </FadeUp>
            </div>
          </div>
        </section>
      </main>
      <FTct />
    </>
  );
}

function Field({ id, label, placeholder, type = "text", value, onChange }) {
  return (
    <div>
      <label htmlFor={id} className="block text-xs text-primary/50 mb-2 tracking-wide">{label}</label>
      <input
        id={id}
        type={type}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        required
        className="w-full bg-[#1A1E3A] hairline rounded-xl px-4 py-3 text-sm text-primary placeholder-primary/30 outline-none focus:ring-1 focus:ring-orange/50 transition-shadow"
      />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<ContactoPage />);