import { createFileRoute } from "@tanstack/react-router";
import { Mail, MapPin, Phone } from "lucide-react";
import { SiteShell } from "@/components/site/SiteShell";
import { PageHeader } from "@/components/site/PageHeader";

export const Route = createFileRoute("/contato")({
  head: () => ({
    meta: [
      { title: "Contato — Instituto Vida Segura" },
      {
        name: "description",
        content:
          "Fale com o Instituto Vida Segura. Diagnóstico inicial gratuito para empresas em até 1 dia útil.",
      },
      { property: "og:title", content: "Contato — Instituto Vida Segura" },
      {
        property: "og:description",
        content: "Vamos conversar sobre como cuidar das pessoas da sua empresa.",
      },
    ],
  }),
  component: ContatoPage,
});

function ContatoPage() {
  return (
    <SiteShell>
      <PageHeader
        title="Toda grande transformação começa quando alguém decide ouvir as pessoas."
        highlight="Vamos conversar?"
        description="Conte-nos os desafios da sua organização. Juntos, podemos construir ambientes mais seguros, saudáveis e humanos."
      />

      <section className="container-page py-16 sm:py-24 lg:py-32">
        <div className="grid gap-12 lg:grid-cols-[1.4fr_1fr] lg:gap-20">
          <form
            onSubmit={(e) => {
              e.preventDefault();
              alert("Recebemos sua mensagem! Em breve nosso time entra em contato.");
            }}
            className="glass-card grid gap-5 rounded-3xl p-8 sm:p-10"
          >
            <div className="grid gap-5 sm:grid-cols-2">
              <Field label="Nome" name="nome" placeholder="Como podemos te chamar?" required />
              <Field label="Empresa" name="empresa" placeholder="Nome da empresa" required />
            </div>
            <div className="grid gap-5 sm:grid-cols-2">
              <Field label="E-mail corporativo" name="email" type="email" required />
              <Field label="Telefone / WhatsApp" name="tel" type="tel" />
            </div>
            <div>
              <Label>Solução de interesse</Label>
              <select className="mt-2 w-full rounded-2xl border border-border bg-[color:var(--surface-2)] px-4 py-3 text-sm outline-none focus:border-[color:var(--life)]/60">
                <option>Quero conversar sobre NR-1</option>
                <option>Safe Company · governança & conformidade</option>
                <option>Mind Family · app de saúde e bem-estar</option>
                <option>Palestras / Workshops</option>
                <option>Ecossistema completo</option>
              </select>
            </div>
            <div>
              <Label>Como podemos ajudar?</Label>
              <textarea
                rows={5}
                placeholder="Conte o desafio do momento, número de colaboradores, prazo desejado..."
                className="mt-2 w-full resize-none rounded-2xl border border-border bg-[color:var(--surface-2)] px-4 py-3 text-sm outline-none focus:border-[color:var(--life)]/60"
              />
            </div>
            <button
              type="submit"
              className="mt-2 inline-flex items-center justify-center rounded-full bg-foreground px-6 py-4 text-sm font-medium text-background transition-all hover:shadow-[0_0_40px_-5px_var(--life)]"
            >
              Enviar mensagem
            </button>
            <p className="text-xs text-muted-foreground">
              Ao enviar, você concorda com nossa política de privacidade. Não compartilhamos seus dados.
            </p>
          </form>

          <aside className="space-y-6">
            <InfoBlock
              icon={<Mail className="h-5 w-5" />}
              title="E-mail corporativo"
              value="contato@institutovidasegura.com.br"
            />
            <InfoBlock
              icon={<Phone className="h-5 w-5" />}
              title="Telefone"
              value="(21) 96461-0629"
            />
            <InfoBlock
              icon={<MapPin className="h-5 w-5" />}
              title="Onde estamos"
              value="Teresópolis - RJ · Atendimento nacional"
            />
            <div className="rounded-3xl bg-gradient-life p-7">
              <h3 className="font-display text-xl font-medium leading-snug tracking-tight">
                Para imprensa e parcerias institucionais
              </h3>
              <p className="mt-3 text-sm text-muted-foreground">
                Escreva para <span className="text-foreground">contato@institutovidasegura.com.br</span>&nbsp;
                retornamos em até 48h.
              </p>
            </div>
          </aside>
        </div>
      </section>
    </SiteShell>
  );
}

function Label({ children }: { children: React.ReactNode }) {
  return <span className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">{children}</span>;
}

function Field({
  label,
  name,
  type = "text",
  placeholder,
  required,
}: {
  label: string;
  name: string;
  type?: string;
  placeholder?: string;
  required?: boolean;
}) {
  return (
    <label className="block">
      <Label>{label}</Label>
      <input
        name={name}
        type={type}
        placeholder={placeholder}
        required={required}
        className="mt-2 w-full rounded-2xl border border-border bg-[color:var(--surface-2)] px-4 py-3 text-sm outline-none placeholder:text-muted-foreground focus:border-[color:var(--life)]/60"
      />
    </label>
  );
}

function InfoBlock({ icon, title, value }: { icon: React.ReactNode; title: string; value: string }) {
  return (
    <div className="glass-card flex items-start gap-4 rounded-2xl p-6">
      <span className="grid h-11 w-11 shrink-0 place-items-center rounded-xl border border-[color:var(--life)]/30 text-[color:var(--life)]">
        {icon}
      </span>
      <div className="min-w-0">
        <div className="text-xs uppercase tracking-[0.16em] text-muted-foreground">{title}</div>
        <div className="mt-1 break-words text-sm text-foreground">{value}</div>
      </div>
    </div>
  );
}