import { createFileRoute } from "@tanstack/react-router";
import { useEffect, useRef, useState } from "react";
import { motion, useInView, useMotionValue, useTransform, animate } from "framer-motion";
import {
  Scale, GraduationCap, Award, Briefcase,
  Car, Home, FileText, ScrollText, FileSignature, UserX, Heart,
  Users, Wallet, Baby, Eye, Gavel, DoorOpen, KeyRound,
  Menu, X, MapPin, Phone, Mail, Clock, Star, Instagram, Facebook, MessageCircle, Send, ArrowRight, Plus,
} from "lucide-react";
import heroImage from "@/assets/hero-office.jpg";
import logo from "@/assets/logo.png";

export const Route = createFileRoute("/")({
  component: Index,
});

const WHATSAPP = "https://wa.me/59898323324";
const MAPS_URL = "https://www.google.com/maps/search/?api=1&query=Cerro+Largo+778,+Ciudad+Vieja,+Montevideo,+Uruguay";
const REVIEWS_URL = "https://www.google.com/maps/search/?api=1&query=Estudio+Juridico+Cerro+Largo+778+Montevideo";

const navLinks = [
  { href: "#inicio", label: "Inicio" },
  { href: "#nosotros", label: "Nosotros" },
  { href: "#servicios", label: "Servicios" },
  { href: "#opiniones", label: "Opiniones" },
  { href: "#contacto", label: "Contacto" },
  { href: "#ubicacion", label: "Ubicación" },
];

const services = [
  { icon: Car, label: "Títulos automotores" },
  { icon: Home, label: "Títulos inmobiliarios" },
  { icon: FileText, label: "Permutas" },
  { icon: ScrollText, label: "Certificados" },
  { icon: FileSignature, label: "Contratos" },
  { icon: UserX, label: "Despidos" },
  { icon: Heart, label: "Ley de concubinato" },
  { icon: Users, label: "Divorcios" },
  { icon: Wallet, label: "Pensiones" },
  { icon: Baby, label: "Tenencias" },
  { icon: Eye, label: "Visitas" },
  { icon: Gavel, label: "Venias" },
  { icon: DoorOpen, label: "Desalojos" },
  { icon: KeyRound, label: "Arrendamientos" },
];

const reviews = [
  { name: "María González", text: "Excelente atención y profesionalismo. Resolvieron mi trámite de sucesión con total transparencia y agilidad. Muy recomendables." },
  { name: "Carlos Fernández", text: "Un estudio serio con muchísima experiencia. Me asesoraron en un tema laboral complejo y quedé conforme con el resultado." },
  { name: "Ana Rodríguez", text: "Amables, claros y muy detallistas. Se nota la trayectoria. Los volvería a elegir sin dudarlo para cualquier consulta legal." },
  { name: "Jorge Silva", text: "Me acompañaron en un divorcio difícil con enorme humanidad y firmeza jurídica. Gracias al equipo por el gran trabajo." },
];

const faqs = [
  { q: "¿Cuánto dura un trámite de sucesión?", a: "Depende de la complejidad del caso y la cantidad de herederos, pero en general una sucesión sencilla puede resolverse entre 4 y 8 meses. Casos con inmuebles, deudas o herederos en el exterior pueden extenderse más." },
  { q: "¿Atienden fuera de Montevideo?", a: "Sí. Además de nuestra sede en Ciudad Vieja atendemos también en Costa de Oro previa coordinación, y podemos gestionar trámites en todo el país." },
  { q: "¿Cómo agendo una consulta?", a: "Podés escribirnos por WhatsApp al 098 323 324, completar el formulario de contacto o llamarnos de lunes a viernes de 09:00 a 19:00. Coordinamos día y horario según tu disponibilidad." },
  { q: "¿La primera consulta tiene costo?", a: "La consulta inicial es sin cargo y sin compromiso. Nos permite evaluar tu situación y presentarte un presupuesto claro antes de iniciar cualquier trámite." },
  { q: "¿Qué documentación debo llevar?", a: "Depende del tipo de trámite. Al coordinar la reunión te indicaremos exactamente qué documentos preparar para agilizar el proceso desde el primer encuentro." },
];

function CountUp({ value, suffix = "", duration = 2 }: { value: number; suffix?: string; duration?: number }) {
  const ref = useRef<HTMLSpanElement>(null);
  const inView = useInView(ref, { once: true, margin: "-80px" });
  const mv = useMotionValue(0);
  const rounded = useTransform(mv, (v) => Math.round(v).toString() + suffix);
  const [display, setDisplay] = useState("0" + suffix);
  useEffect(() => {
    if (!inView) return;
    const controls = animate(mv, value, { duration, ease: "easeOut" });
    const unsub = rounded.on("change", (v) => setDisplay(v));
    return () => { controls.stop(); unsub(); };
  }, [inView, value, duration, mv, rounded]);
  return <span ref={ref}>{display}</span>;
}

function SectionDecor() {
  return (
    <>
      <span className="pointer-events-none absolute top-8 left-6 h-1.5 w-1.5 rounded-full bg-gold/40" />
      <span className="pointer-events-none absolute top-16 right-10 h-1 w-1 rounded-full bg-gold/30" />
      <span className="pointer-events-none absolute bottom-10 left-12 h-1 w-1 rounded-full bg-gold/30" />
      <span className="pointer-events-none absolute bottom-20 right-6 h-1.5 w-1.5 rounded-full bg-gold/40" />
      <span className="pointer-events-none absolute top-24 left-0 h-px w-24 bg-gradient-to-r from-transparent via-gold/25 to-transparent" />
      <span className="pointer-events-none absolute bottom-32 right-0 h-px w-32 bg-gradient-to-l from-transparent via-gold/25 to-transparent" />
    </>
  );
}

function FaqItem({ q, a, i }: { q: string; a: string; i: number }) {
  const [open, setOpen] = useState(false);
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "-40px" }}
      transition={{ duration: 0.4, delay: i * 0.06 }}
      className="rounded-xl border border-gold/15 bg-navy-soft/40 overflow-hidden"
    >
      <button
        onClick={() => setOpen(!open)}
        className="w-full flex items-center justify-between gap-4 p-6 text-left hover:bg-navy-soft/60 transition-colors"
      >
        <span className="font-serif text-lg text-foreground">{q}</span>
        <Plus className={`h-5 w-5 shrink-0 text-gold transition-transform duration-300 ${open ? "rotate-45" : ""}`} />
      </button>
      <div className={`grid transition-all duration-300 ease-out ${open ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"}`}>
        <div className="overflow-hidden">
          <p className="px-6 pb-6 text-sm text-foreground/75 leading-relaxed">{a}</p>
        </div>
      </div>
    </motion.div>
  );
}

function Index() {
  const [menuOpen, setMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const [form, setForm] = useState({ nombre: "", email: "", telefono: "", asunto: "Asesoría jurídica", mensaje: "" });
  const [sent, setSent] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const body = encodeURIComponent(
      `Nombre: ${form.nombre}\nEmail: ${form.email}\nTeléfono: ${form.telefono}\nAsunto: ${form.asunto}\n\n${form.mensaje}`
    );
    const subject = encodeURIComponent(`Consulta web - ${form.asunto}`);
    window.location.href = `mailto:estudiojuridiconotarial25@gmail.com?subject=${subject}&body=${body}`;
    setSent(true);
  };

  return (
    <div className="relative min-h-screen bg-navy text-foreground overflow-hidden">
      {/* Global grain overlay */}
      <div className="pointer-events-none fixed inset-0 z-[1] bg-grain opacity-[0.04] mix-blend-overlay" aria-hidden />
      {/* HEADER */}
      <header
        className={`fixed inset-x-0 top-0 z-50 transition-all duration-300 ${
          scrolled ? "bg-navy-deep/95 backdrop-blur border-b border-gold/10 py-3" : "bg-transparent py-5"
        }`}
      >
        <div className="mx-auto flex max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
          <a href="#inicio" className="flex items-center gap-3">
            <img src={logo} alt="Estudio Jurídico Notarial Contable" className="h-11 w-11 rounded-full object-cover ring-1 ring-gold/40" />
            <div className="hidden sm:block leading-tight">
              <div className="font-serif text-sm text-gold tracking-wide">Estudio Jurídico</div>
              <div className="text-[10px] uppercase tracking-[0.2em] text-foreground/70">Notarial · Contable</div>
            </div>
          </a>
          <nav className="hidden lg:flex items-center gap-8">
            {navLinks.map((l) => (
              <a key={l.href} href={l.href} className="text-sm text-foreground/80 hover:text-gold transition-colors">
                {l.label}
              </a>
            ))}
            <a href="#contacto" className="rounded-full bg-gold px-5 py-2 text-sm font-medium text-navy-deep hover:bg-gold-bright transition-colors">
              Consultar
            </a>
          </nav>
          <button className="lg:hidden text-foreground" onClick={() => setMenuOpen(!menuOpen)} aria-label="Menu">
            {menuOpen ? <X /> : <Menu />}
          </button>
        </div>
        {menuOpen && (
          <div className="lg:hidden bg-navy-deep border-t border-gold/10">
            <div className="mx-auto max-w-7xl px-4 py-4 flex flex-col gap-3">
              {navLinks.map((l) => (
                <a key={l.href} href={l.href} onClick={() => setMenuOpen(false)} className="py-2 text-foreground/80 hover:text-gold">
                  {l.label}
                </a>
              ))}
            </div>
          </div>
        )}
      </header>

      {/* HERO */}
      <section id="inicio" className="relative min-h-screen flex items-center overflow-hidden">
        <div className="absolute inset-0">
          <img src={heroImage} alt="" className="h-full w-full object-cover" width={1920} height={1280} />
          <div className="absolute inset-0 bg-gradient-to-b from-navy-deep/85 via-navy-deep/75 to-navy-deep" />
        </div>

        {/* Floating gold particles */}
        <div className="pointer-events-none absolute inset-0 overflow-hidden">
          {[...Array(14)].map((_, i) => (
            <motion.span
              key={i}
              className="absolute h-1 w-1 rounded-full bg-gold/40"
              style={{ left: `${(i * 73) % 100}%`, top: `${(i * 41) % 100}%` }}
              animate={{ y: [-20, 20, -20], opacity: [0.2, 0.7, 0.2] }}
              transition={{ duration: 6 + (i % 4), repeat: Infinity, delay: i * 0.3, ease: "easeInOut" }}
            />
          ))}
        </div>

        <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-32 pb-24 grid lg:grid-cols-[1.3fr_1fr] gap-12 items-center">
          <div>
            <motion.div
              initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.7 }}
              className="inline-flex items-center gap-2 rounded-full border border-gold/30 bg-gold/5 px-4 py-1.5 text-xs uppercase tracking-[0.25em] text-gold"
            >
              <span className="h-1.5 w-1.5 rounded-full bg-gold" /> Montevideo · Uruguay
            </motion.div>
            <motion.h1
              initial={{ opacity: 0, y: 30 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8, delay: 0.15 }}
              className="mt-6 font-serif text-4xl sm:text-5xl lg:text-6xl xl:text-7xl leading-[1.05] text-foreground"
            >
              Estudio Jurídico<br />
              <span className="text-gold italic">Notarial</span> Contable
            </motion.h1>
            <motion.p
              initial={{ opacity: 0, y: 30 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8, delay: 0.3 }}
              className="mt-6 max-w-xl text-lg text-foreground/75 leading-relaxed"
            >
              Más de 30 años de experiencia brindando soluciones legales precisas y concretas.
            </motion.p>
            <motion.div
              initial={{ opacity: 0, y: 30 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8, delay: 0.45 }}
              className="mt-10 flex flex-wrap gap-4"
            >
              <a href="#contacto" className="group inline-flex items-center gap-2 rounded-full bg-gold px-8 py-4 text-sm font-medium text-navy-deep shadow-[var(--shadow-gold)] hover:bg-gold-bright transition-all">
                Solicitar consulta
                <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
              </a>
              <a href="#servicios" className="inline-flex items-center gap-2 rounded-full border border-foreground/20 px-8 py-4 text-sm text-foreground hover:border-gold hover:text-gold transition-colors">
                Ver servicios
              </a>
            </motion.div>

            <motion.div
              initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1, delay: 0.7 }}
              className="mt-14 grid grid-cols-3 gap-6 max-w-lg"
            >
              {[
                { v: 30, suffix: "+", l: "Años de trayectoria" },
                { v: 14, suffix: "+", l: "Áreas de práctica" },
                { v: 100, suffix: "%", l: "Compromiso" },
              ].map((s) => (
                <div key={s.l}>
                  <div className="font-serif text-3xl text-gold">
                    <CountUp value={s.v} suffix={s.suffix} />
                  </div>
                  <div className="mt-1 text-xs text-foreground/60 uppercase tracking-wider">{s.l}</div>
                </div>
              ))}
            </motion.div>
          </div>

          {/* Animated scale */}
          <motion.div
            initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 1, delay: 0.4 }}
            className="hidden lg:flex justify-center"
          >
            <div className="relative h-[420px] w-[420px]">
              <div className="absolute inset-0 rounded-full border border-gold/20" />
              <div className="absolute inset-6 rounded-full border border-gold/10" />
              <div className="absolute inset-0 rounded-full bg-[radial-gradient(circle_at_center,oklch(0.735_0.115_82/0.15),transparent_70%)]" />
              <motion.div
                className="absolute inset-0 flex items-center justify-center"
                animate={{ rotate: [-5, 5, -5] }}
                transition={{ duration: 6, repeat: Infinity, ease: "easeInOut" }}
                style={{ transformOrigin: "50% 30%" }}
              >
                <Scale className="h-48 w-48 text-gold" strokeWidth={1} />
              </motion.div>
            </div>
          </motion.div>
        </div>
      </section>

      {/* NOSOTROS */}
      <Section id="nosotros" eyebrow="Sobre el estudio" title="¿Quiénes somos?" variant="a">
        <div className="grid gap-6 md:grid-cols-3">
          {[
            { icon: GraduationCap, title: "Altamente capacitados", text: "Contamos con permanente capacitación y novedades en materia legislativa." },
            { icon: Award, title: "Más de 30 años de experiencia", text: "Nuestra trayectoria profesional nos permite brindar un amplio asesoramiento para soluciones precisas y concretas." },
            { icon: Briefcase, title: "Estudio Jurídico", text: "Ofrecer el mejor servicio es nuestro objetivo, con atención personalizada y compromiso ético." },
          ].map((c, i) => (
            <motion.div
              key={c.title}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: "-80px" }}
              transition={{ duration: 0.6, delay: i * 0.1 }}
              className="group relative rounded-2xl border border-gold/15 bg-navy-soft/40 p-8 backdrop-blur hover:border-gold/40 transition-all"
            >
              <div className="mb-6 inline-flex h-14 w-14 items-center justify-center rounded-xl bg-gold/10 border border-gold/20">
                <c.icon className="h-7 w-7 text-gold" strokeWidth={1.5} />
              </div>
              <h3 className="font-serif text-xl text-foreground mb-3">{c.title}</h3>
              <p className="text-sm text-foreground/70 leading-relaxed">{c.text}</p>
            </motion.div>
          ))}
        </div>
      </Section>

      {/* SERVICIOS */}
      <Section id="servicios" eyebrow="Nuestros servicios" title="Asesoría jurídica" titleGold variant="b">
        <p className="text-center text-foreground/70 max-w-2xl mx-auto -mt-6 mb-14">
          Un abanico completo de servicios legales, notariales y contables para personas y empresas.
        </p>
        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
          {services.map((s, i) => (
            <motion.div
              key={s.label}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: "-40px" }}
              transition={{ duration: 0.4, delay: (i % 8) * 0.05 }}
              className="group flex items-center gap-4 rounded-xl border border-gold/10 bg-navy-soft/30 p-5 hover:border-gold/40 hover:bg-navy-soft/60 transition-all"
            >
              <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-gold/10 text-gold group-hover:bg-gold group-hover:text-navy-deep transition-colors">
                <s.icon className="h-5 w-5" strokeWidth={1.75} />
              </div>
              <span className="text-sm text-foreground/90">{s.label}</span>
            </motion.div>
          ))}
        </div>
      </Section>

      {/* FAQ */}
      <Section id="faq" eyebrow="Preguntas frecuentes" title="Respondemos tus dudas" variant="a">
        <div className="max-w-3xl mx-auto space-y-4">
          {faqs.map((f, i) => (
            <FaqItem key={f.q} q={f.q} a={f.a} i={i} />
          ))}
        </div>
      </Section>

      {/* OPINIONES */}
      <Section id="opiniones" eyebrow="Testimonios" title="Lo que dicen nuestros clientes" variant="b">
        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
          {reviews.map((r, i) => (
            <motion.div
              key={r.name}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: "-40px" }}
              transition={{ duration: 0.5, delay: i * 0.1 }}
              className="rounded-2xl border border-gold/15 bg-navy-soft/40 p-6 flex flex-col"
            >
              <div className="flex gap-1 mb-4">
                {[...Array(5)].map((_, j) => (
                  <Star key={j} className="h-4 w-4 fill-gold text-gold" />
                ))}
              </div>
              <p className="text-sm text-foreground/80 leading-relaxed flex-1">"{r.text}"</p>
              <div className="mt-5 pt-4 border-t border-gold/10 flex items-center justify-between">
                <span className="text-sm font-medium text-foreground">{r.name}</span>
                <span className="text-[10px] uppercase tracking-wider text-foreground/50">Google</span>
              </div>
            </motion.div>
          ))}
        </div>
        <div className="mt-10 flex justify-center">
          <a href={REVIEWS_URL} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-3 rounded-full border border-gold/30 bg-navy-soft/40 px-6 py-3 text-sm text-foreground hover:border-gold hover:text-gold transition-colors">
            <svg viewBox="0 0 24 24" className="h-4 w-4" aria-hidden><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.99.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84C6.71 7.31 9.14 5.38 12 5.38z"/></svg>
            Ver todas las opiniones en Google
          </a>
        </div>
      </Section>

      {/* CONTACTO */}
      <Section id="contacto" eyebrow="Contacto" title="Escríbenos tu consulta" variant="a">
        <div className="grid lg:grid-cols-[1fr_1.2fr] gap-10 items-start">
          <div className="space-y-6">
            <p className="text-foreground/75 leading-relaxed">
              Escríbenos tu consulta y te responderemos en nuestro horario por agenda de{" "}
              <span className="text-gold">lunes a viernes de 09:00 a 19:00</span>.
            </p>
            <div className="space-y-4">
              <InfoRow icon={Phone} label="Teléfono" value="098 323 324" href="tel:+59898323324" />
              <InfoRow icon={Mail} label="Email" value="estudiojuridiconotarial25@gmail.com" href="mailto:estudiojuridiconotarial25@gmail.com" />
              <InfoRow icon={MapPin} label="Dirección" value="Cerro Largo 778, Ciudad Vieja, Montevideo" href={MAPS_URL} />
              <InfoRow icon={Clock} label="Horario" value="Lun a Vie · 09:00 – 19:00" />
            </div>
          </div>

          <form onSubmit={handleSubmit} className="rounded-2xl border border-gold/15 bg-navy-soft/40 p-6 sm:p-8 space-y-4">
            <div className="grid sm:grid-cols-2 gap-4">
              <Field label="Nombre" required value={form.nombre} onChange={(v) => setForm({ ...form, nombre: v })} />
              <Field label="Email" required type="email" value={form.email} onChange={(v) => setForm({ ...form, email: v })} />
            </div>
            <div className="grid sm:grid-cols-2 gap-4">
              <Field label="Teléfono (opcional)" value={form.telefono} onChange={(v) => setForm({ ...form, telefono: v })} />
              <div>
                <label className="block text-xs uppercase tracking-wider text-foreground/60 mb-2">Tipo de consulta</label>
                <select
                  value={form.asunto}
                  onChange={(e) => setForm({ ...form, asunto: e.target.value })}
                  className="w-full rounded-lg bg-navy-deep/60 border border-gold/20 px-4 py-3 text-sm text-foreground focus:border-gold focus:outline-none"
                >
                  <option>Asesoría jurídica</option>
                  <option>Notarial</option>
                  <option>Contable</option>
                  <option>Otro</option>
                </select>
              </div>
            </div>
            <div>
              <label className="block text-xs uppercase tracking-wider text-foreground/60 mb-2">Mensaje</label>
              <textarea
                required rows={5}
                value={form.mensaje}
                onChange={(e) => setForm({ ...form, mensaje: e.target.value })}
                className="w-full rounded-lg bg-navy-deep/60 border border-gold/20 px-4 py-3 text-sm text-foreground focus:border-gold focus:outline-none resize-none"
              />
            </div>
            <button type="submit" className="group inline-flex items-center gap-2 rounded-full bg-gold px-8 py-3.5 text-sm font-medium text-navy-deep hover:bg-gold-bright transition-colors">
              {sent ? "Enviado ✓" : "Enviar consulta"}
              <Send className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
            </button>
          </form>
        </div>
      </Section>

      {/* UBICACIÓN */}
      <Section id="ubicacion" eyebrow="Ubicación" title="Dónde encontrarnos" variant="b">
        <div className="grid lg:grid-cols-[1fr_1.4fr] gap-8 items-stretch">
          <div className="rounded-2xl border border-gold/15 bg-navy-soft/40 p-8 flex flex-col justify-center">
            <MapPin className="h-8 w-8 text-gold mb-4" strokeWidth={1.5} />
            <h3 className="font-serif text-2xl text-foreground mb-3">Cerro Largo 778</h3>
            <p className="text-foreground/75 leading-relaxed">
              Ciudad Vieja, Montevideo.<br />
              <span className="text-gold font-medium">Estacionamiento para clientes.</span>
            </p>
            <div className="mt-6 pt-6 border-t border-gold/10">
              <p className="text-sm text-foreground/70">
                También atendemos en <span className="text-foreground">Costa de Oro</span> — Consultar.
              </p>
            </div>
            <a href={MAPS_URL} target="_blank" rel="noopener noreferrer" className="mt-6 inline-flex items-center gap-2 text-sm text-gold hover:text-gold-bright">
              Cómo llegar <ArrowRight className="h-4 w-4" />
            </a>
          </div>
          <div className="rounded-2xl overflow-hidden border border-gold/15 min-h-[360px]">
            <iframe
              title="Ubicación del estudio"
              src="https://www.google.com/maps?q=Cerro+Largo+778,+Ciudad+Vieja,+Montevideo,+Uruguay&output=embed"
              className="h-full w-full min-h-[360px]"
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
            />
          </div>
        </div>
      </Section>

      {/* FOOTER */}
      <footer className="border-t border-gold/10 bg-navy-deep">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16 grid gap-10 md:grid-cols-3">
          <div>
            <div className="flex items-center gap-3 mb-4">
              <img src={logo} alt="" className="h-12 w-12 rounded-full ring-1 ring-gold/40" />
              <div>
                <div className="font-serif text-gold">Estudio Jurídico</div>
                <div className="text-xs uppercase tracking-[0.2em] text-foreground/60">Notarial · Contable</div>
              </div>
            </div>
            <p className="text-sm text-foreground/60 leading-relaxed max-w-xs">
              Más de 30 años brindando soluciones legales, notariales y contables en Uruguay.
            </p>
          </div>
          <div>
            <h4 className="font-serif text-gold mb-4">Contacto</h4>
            <ul className="space-y-2 text-sm text-foreground/70">
              <li><a href="tel:+59898323324" className="hover:text-gold">098 323 324</a></li>
              <li><a href="mailto:estudiojuridiconotarial25@gmail.com" className="hover:text-gold break-all">estudiojuridiconotarial25@gmail.com</a></li>
              <li>Cerro Largo 778, Ciudad Vieja</li>
              <li>Lun a Vie · 09:00 – 19:00</li>
            </ul>
          </div>
          <div>
            <h4 className="font-serif text-gold mb-4">Síguenos</h4>
            <div className="flex gap-3">
              {[
                { icon: Instagram, href: "#" },
                { icon: Facebook, href: "#" },
                { icon: MessageCircle, href: WHATSAPP },
              ].map((s, i) => (
                <a key={i} href={s.href} target="_blank" rel="noopener noreferrer" className="flex h-10 w-10 items-center justify-center rounded-full border border-gold/30 text-gold hover:bg-gold hover:text-navy-deep transition-colors">
                  <s.icon className="h-4 w-4" />
                </a>
              ))}
            </div>
          </div>
        </div>
        <div className="border-t border-gold/10">
          <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-6 flex flex-col sm:flex-row items-center justify-between gap-2 text-xs text-foreground/50">
            <span>© {new Date().getFullYear()} Estudio Jurídico Notarial Contable. Todos los derechos reservados.</span>
            <span>Montevideo, Uruguay</span>
          </div>
        </div>
      </footer>

      {/* Floating WhatsApp */}
      <a
        href={WHATSAPP}
        target="_blank"
        rel="noopener noreferrer"
        aria-label="WhatsApp"
        className="fixed bottom-6 right-6 z-50 flex h-14 w-14 items-center justify-center rounded-full bg-[#25D366] text-white shadow-[0_10px_30px_-5px_rgba(37,211,102,0.6)] hover:scale-110 transition-transform"
      >
        <svg viewBox="0 0 24 24" className="h-7 w-7" fill="currentColor" aria-hidden>
          <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.611-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347M12.05 21.785h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.999-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884M20.52 3.449C18.24 1.245 15.24.03 12.045.03 5.463.03.104 5.388.101 11.969c0 2.096.548 4.14 1.588 5.945L0 24l6.335-1.652a11.98 11.98 0 005.71 1.454h.005c6.581 0 11.94-5.358 11.943-11.939a11.86 11.86 0 00-3.473-8.414"/>
        </svg>
      </a>
    </div>
  );
}

function Section({ id, eyebrow, title, titleGold, variant = "a", children }: { id: string; eyebrow: string; title: string; titleGold?: boolean; variant?: "a" | "b"; children: React.ReactNode }) {
  return (
    <section id={id} className={`relative py-24 sm:py-32 overflow-hidden ${variant === "a" ? "section-a" : "section-b"}`}>
      <SectionDecor />
      <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-100px" }}
          transition={{ duration: 0.6 }}
          className="text-center mb-14"
        >
          <div className="text-xs uppercase tracking-[0.3em] text-gold mb-4">{eyebrow}</div>
          <h2 className={`relative inline-block title-glow font-serif text-3xl sm:text-4xl lg:text-5xl ${titleGold ? "text-gold italic" : "text-foreground"}`}>
            {title}
          </h2>
          <div className="mx-auto mt-6 h-px w-16 bg-gold/50" />
        </motion.div>
        {children}
      </div>
    </section>
  );
}

function InfoRow({ icon: Icon, label, value, href }: { icon: any; label: string; value: string; href?: string }) {
  const inner = (
    <div className="flex items-start gap-4 group">
      <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-gold/10 border border-gold/20 text-gold">
        <Icon className="h-5 w-5" strokeWidth={1.5} />
      </div>
      <div className="min-w-0">
        <div className="text-xs uppercase tracking-wider text-foreground/50">{label}</div>
        <div className="text-foreground group-hover:text-gold transition-colors break-words">{value}</div>
      </div>
    </div>
  );
  return href ? <a href={href} target={href.startsWith("http") ? "_blank" : undefined} rel="noopener noreferrer">{inner}</a> : inner;
}

function Field({ label, value, onChange, type = "text", required }: { label: string; value: string; onChange: (v: string) => void; type?: string; required?: boolean }) {
  return (
    <div>
      <label className="block text-xs uppercase tracking-wider text-foreground/60 mb-2">{label}</label>
      <input
        type={type}
        required={required}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className="w-full rounded-lg bg-navy-deep/60 border border-gold/20 px-4 py-3 text-sm text-foreground focus:border-gold focus:outline-none"
      />
    </div>
  );
}