// Page sections

const { useState: uS, useEffect: uE, useRef: uR } = React;

/* ============ NAV ============ */
function Nav({ logoVariant }) {
  const [scrolled, setScrolled] = uS(false);
  const [open, setOpen] = uS(false);
  uE(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [
    { href: '#inicio', label: 'Inicio' },
    { href: '#nosotros', label: 'Nosotros' },
    { href: '#servicios', label: 'Servicios' },
    { href: '#valores', label: 'Valores' },
    { href: '#contacto', label: 'Contacto' },
  ];
  return (
    <nav style={{
      position: 'fixed',
      top: 0, left: 0, right: 0,
      zIndex: 100,
      background: scrolled ? 'rgba(11,11,13,0.92)' : 'transparent',
      backdropFilter: scrolled ? 'blur(18px) saturate(140%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(18px) saturate(140%)' : 'none',
      borderBottom: scrolled ? '1px solid rgba(201, 166, 97, 0.18)' : '1px solid transparent',
      transition: 'all 0.4s ease',
    }}>
      <div className="container" style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        height: scrolled ? 100 : 130,
        transition: 'height 0.4s ease',
      }}>
        <a href="#inicio" style={{ display: 'flex', alignItems: 'center', gap: 18, textDecoration: 'none' }}>
          <LogoMark size={scrolled ? 90 : 108} />
          <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
            <span className="gold-text serif" style={{ fontSize: 33, letterSpacing: '0.3em', fontWeight: 500 }}>LEGAL</span>
            <span style={{ fontSize: 13, letterSpacing: '0.4em', color: 'var(--gold-light)', marginTop: 4 }}>ABOGADOS</span>
          </div>
        </a>
        <ul style={{
          display: 'flex',
          gap: 36,
          listStyle: 'none',
          alignItems: 'center',
          margin: '0 32px',
        }} className="nav-links">
          {links.map(l => (
            <li key={l.href}>
              <a href={l.href} style={{
                color: 'var(--cream)',
                textDecoration: 'none',
                fontSize: 11,
                letterSpacing: '0.22em',
                textTransform: 'uppercase',
                fontWeight: 400,
                transition: 'color 0.3s',
              }}
              onMouseEnter={e => e.currentTarget.style.color = 'var(--gold-light)'}
              onMouseLeave={e => e.currentTarget.style.color = 'var(--cream)'}>
                {l.label}
              </a>
            </li>
          ))}
        </ul>
        <a href="#contacto" style={{
          fontSize: 11,
          letterSpacing: '0.22em',
          textTransform: 'uppercase',
          color: 'var(--ink)',
          background: 'linear-gradient(180deg, #e8cf94, #c9a661)',
          padding: '12px 20px',
          textDecoration: 'none',
          fontWeight: 500,
        }} className="nav-cta">
          Consulta
        </a>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .nav-links { display: none !important; }
        }
        @media (max-width: 520px) {
          .nav-cta { display: none !important; }
        }
      `}</style>
    </nav>
  );
}

/* ============ HERO ============ */
function Hero({ logoVariant }) {
  return (
    <section id="inicio" style={{
      position: 'relative',
      minHeight: '100vh',
      background: 'radial-gradient(ellipse at 50% 20%, #1e1e24 0%, #0b0b0d 60%), #0b0b0d',
      color: 'var(--cream)',
      display: 'flex',
      alignItems: 'center',
      overflow: 'hidden',
    }}>
      {/* Decorative corner marks */}
      <div style={{ position: 'absolute', top: 120, left: 48, width: 80, height: 80, borderTop: '1px solid var(--line)', borderLeft: '1px solid var(--line)' }} />
      <div style={{ position: 'absolute', bottom: 60, right: 48, width: 80, height: 80, borderBottom: '1px solid var(--line)', borderRight: '1px solid var(--line)' }} />

      {/* Subtle texture overlay */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(circle at 80% 30%, rgba(201, 166, 97, 0.06), transparent 50%)',
        pointerEvents: 'none',
      }} />

      <div className="container" style={{ position: 'relative', zIndex: 2, paddingTop: 120, paddingBottom: 80 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80, alignItems: 'center' }} className="hero-grid">
          <div>
            <Reveal>
              <div className="eyebrow on-dark" style={{ marginBottom: 28 }}>
                <span className="gold-rule" />Despacho de abogados en Chihuahua · Desde 2010
              </div>
            </Reveal>
            <Reveal delay={100}>
              <h1 className="serif" style={{
                fontSize: 'clamp(48px, 7vw, 96px)',
                lineHeight: 1.02,
                fontWeight: 400,
                letterSpacing: '-0.01em',
                marginBottom: 32,
              }}>
                Abogados en<br />
                <span className="gold-text" style={{ fontStyle: 'italic', fontWeight: 500 }}>Chihuahua</span> que<br />
                defienden tus derechos.
              </h1>
            </Reveal>
            <Reveal delay={200}>
              <p style={{
                fontSize: 18,
                lineHeight: 1.7,
                color: 'var(--muted-on-dark)',
                maxWidth: 520,
                marginBottom: 48,
                fontWeight: 300,
              }}>
                Somos un despacho de abogados en Chihuahua con más de 15 años de experiencia.
                Especialistas en derecho familiar, civil, penal, mercantil y laboral.
                Consulta confidencial y sin compromiso.
              </p>
            </Reveal>
            <Reveal delay={300}>
              <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
                <Button href="#contacto" variant="primary">Agenda consulta →</Button>
                <Button href="#servicios" variant="ghost">Áreas de práctica</Button>
              </div>
            </Reveal>
          </div>

          <Reveal delay={400} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
            <div style={{
              position: 'relative',
              width: '100%',
              maxWidth: 460,
              aspectRatio: '1 / 1',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}>
              {/* Circular frame */}
              <div style={{
                position: 'absolute', inset: 0,
                border: '1px solid var(--line)',
                borderRadius: '50%',
              }} />
              <div style={{
                position: 'absolute', inset: 24,
                border: '1px solid var(--line)',
                borderRadius: '50%',
              }} />
              <Logo variant={logoVariant} size={340} />
            </div>
          </Reveal>
        </div>

        {/* Scroll indicator */}
        <div style={{
          position: 'absolute',
          bottom: 32,
          left: '50%',
          transform: 'translateX(-50%)',
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10,
          color: 'var(--muted-on-dark)',
        }}>
          <span style={{ fontSize: 10, letterSpacing: '0.3em', textTransform: 'uppercase' }}>Explora</span>
          <span style={{ width: 1, height: 40, background: 'linear-gradient(180deg, var(--gold), transparent)' }} />
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .hero-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
        }
      `}</style>
    </section>
  );
}

/* ============ MARQUEE / STRIP ============ */
function PracticeStrip() {
  const areas = ['Civil', 'Mercantil', 'Laboral', 'Penal', 'Amparo', 'Fiscal', 'Familiar', 'Arrendamientos', 'Marcas'];
  return (
    <div style={{
      background: 'var(--ink)',
      borderTop: '1px solid var(--line)',
      borderBottom: '1px solid var(--line)',
      padding: '28px 0',
      overflow: 'hidden',
      color: 'var(--cream)',
    }}>
      <div style={{ display: 'flex', gap: 72, whiteSpace: 'nowrap' }} className="practice-marquee">
        {[...areas, ...areas, ...areas].map((a, i) => (
          <span key={i} className="serif" style={{ fontSize: 28, fontStyle: 'italic', color: i % 2 === 0 ? 'var(--gold-light)' : 'var(--cream)' }}>
            {a} <span style={{ color: 'var(--gold)', marginLeft: 72 }}>✦</span>
          </span>
        ))}
      </div>
      <style>{`
        .practice-marquee { animation: marquee 40s linear infinite; }
        @media (max-width: 768px) {
          .practice-marquee { animation-duration: 20s; }
        }
        @keyframes marquee {
          0% { transform: translateX(0); }
          100% { transform: translateX(-33.333%); }
        }
      `}</style>
    </div>
  );
}

/* ============ MISSION / VISION ============ */
function MissionVision() {
  return (
    <section id="nosotros" style={{ padding: '140px 0', background: 'var(--paper)' }}>
      <div className="container">
        <Reveal>
          <div style={{ textAlign: 'center', marginBottom: 80 }}>
            <div className="eyebrow" style={{ marginBottom: 20 }}>
              <span className="gold-rule" />Nuestro despacho
            </div>
            <h2 className="serif" style={{ fontSize: 'clamp(40px, 5vw, 64px)', fontWeight: 400, lineHeight: 1.1, maxWidth: 900, margin: '0 auto' }}>
              Tu despacho de abogados de confianza en <span className="serif" style={{ fontStyle: 'italic' }}>Chihuahua</span>.
            </h2>
            <p style={{
              marginTop: 20,
              fontSize: 15,
              letterSpacing: '0.12em',
              color: 'var(--muted)',
              fontWeight: 400,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              gap: 10,
            }}>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ color: 'var(--gold)', flexShrink: 0 }}>
                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                <circle cx="12" cy="10" r="3"/>
              </svg>
              C. José Esteban Coronado 509, Col. Centro, Chihuahua, Chih.
            </p>
          </div>
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64 }} className="mv-grid">
          <Reveal>
            <div style={{ paddingRight: 24, borderLeft: '1px solid var(--gold)', paddingLeft: 40 }}>
              <div className="eyebrow" style={{ marginBottom: 24 }}>Misión</div>
              <h3 className="serif" style={{ fontSize: 32, fontWeight: 400, marginBottom: 20, lineHeight: 1.2 }}>
                Proteger tus derechos e intereses.
              </h3>
              <p style={{ color: 'var(--muted)', fontSize: 16, lineHeight: 1.8 }}>
                Ofrecemos soluciones legales efectivas y personalizadas en cada caso. Trabajamos con estrategias
                confidenciales y responsables para garantizar tu seguridad jurídica en todo momento.
              </p>
            </div>
          </Reveal>
          <Reveal delay={150}>
            <div style={{ paddingRight: 24, borderLeft: '1px solid var(--gold)', paddingLeft: 40 }}>
              <div className="eyebrow" style={{ marginBottom: 24 }}>Visión</div>
              <h3 className="serif" style={{ fontSize: 32, fontWeight: 400, marginBottom: 20, lineHeight: 1.2 }}>
                Ser un referente en el ámbito legal.
              </h3>
              <p style={{ color: 'var(--muted)', fontSize: 16, lineHeight: 1.8 }}>
                Reconocidos por nuestra excelencia técnica y liderazgo en el sector. Ofrecemos soluciones
                innovadoras y efectivas que superan las expectativas — integridad, profesionalismo y compromiso
                con la excelencia en la práctica del derecho.
              </p>
            </div>
          </Reveal>
        </div>

        <style>{`
          @media (max-width: 820px) {
            .mv-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

/* ============ STATS ============ */
function StatsBand() {
  return (
    <section style={{
      background: 'var(--ink)',
      color: 'var(--cream)',
      padding: '80px 0',
      borderTop: '1px solid var(--line)',
    }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }} className="stats-grid">
          {STATS.map((s, i) => (
            <Reveal key={i} delay={i * 100}>
              <div style={{ textAlign: 'center', padding: '12px 8px' }}>
                <div className="serif gold-text" style={{ fontSize: 'clamp(44px, 5vw, 72px)', fontWeight: 500, lineHeight: 1, marginBottom: 12 }}>
                  {s.k}
                </div>
                <div style={{ fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--muted-on-dark)' }}>
                  {s.v}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
        <style>{`
          @media (max-width: 720px) {
            .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

/* ============ SERVICES (expandable) ============ */
function ServiceRow({ service, index, open, onToggle }) {
  const num = String(index + 1).padStart(2, '0');
  return (
    <div style={{
      borderBottom: '1px solid var(--line-dark)',
      transition: 'background 0.3s',
      background: open ? 'rgba(201, 166, 97, 0.04)' : 'transparent',
    }}>
      <button
        onClick={onToggle}
        style={{
          width: '100%',
          background: 'none',
          border: 'none',
          cursor: 'pointer',
          padding: '36px 0',
          textAlign: 'left',
          display: 'grid',
          gridTemplateColumns: '80px 1fr auto 60px',
          gap: 32,
          alignItems: 'center',
          fontFamily: 'inherit',
          color: 'inherit',
        }}
        className="svc-row"
      >
        <span className="serif" style={{ color: 'var(--gold-deep)', fontSize: 14, letterSpacing: '0.1em' }}>
          — {num}
        </span>
        <span className="serif" style={{
          fontSize: 'clamp(28px, 3.2vw, 42px)',
          fontWeight: 400,
          fontStyle: open ? 'italic' : 'normal',
          transition: 'font-style 0.3s',
          color: open ? 'var(--gold-deep)' : 'var(--ink)',
        }}>
          {service.title}
        </span>
        <span style={{ color: 'var(--muted)', fontSize: 14, maxWidth: 260, textAlign: 'right' }} className="svc-short">
          {service.short}
        </span>
        <span style={{
          width: 44,
          height: 44,
          border: '1px solid var(--gold)',
          borderRadius: '50%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'var(--gold-deep)',
          fontSize: 20,
          transition: 'all 0.3s',
          transform: open ? 'rotate(45deg)' : 'rotate(0)',
          background: open ? 'var(--gold)' : 'transparent',
          justifySelf: 'end',
        }}>+</span>
      </button>

      <div style={{
        maxHeight: open ? 2000 : 0,
        overflow: 'hidden',
        transition: 'max-height 0.6s ease, padding 0.4s ease',
      }}>
        <div style={{ padding: '0 0 48px 112px' }} className="svc-items">
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
            gap: '32px 48px',
          }}>
            {service.items.map((item, i) => (
              <div key={i} style={{ borderTop: '1px solid var(--gold)', paddingTop: 18 }}>
                <div className="serif" style={{ fontSize: 20, fontWeight: 500, marginBottom: 8, color: 'var(--ink)' }}>
                  {item.name}
                </div>
                <div style={{ fontSize: 14, color: 'var(--muted)', lineHeight: 1.7 }}>
                  {item.desc}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        .svc-row:hover .serif { color: var(--gold-deep); }
        @media (max-width: 900px) {
          .svc-row { grid-template-columns: 50px 1fr 44px !important; }
          .svc-short { display: none; }
          .svc-items { padding-left: 0 !important; }
        }
      `}</style>
    </div>
  );
}

function Services() {
  const [openIdx, setOpenIdx] = uS(0);
  return (
    <section id="servicios" style={{ padding: '140px 0', background: 'var(--paper)' }}>
      <div className="container">
        <Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, marginBottom: 80, alignItems: 'end' }} className="svc-head">
            <div>
              <div className="eyebrow" style={{ marginBottom: 20 }}>
                <span className="gold-rule" />Áreas de práctica
              </div>
              <h2 className="serif" style={{ fontSize: 'clamp(40px, 5vw, 64px)', fontWeight: 400, lineHeight: 1.05 }}>
                Servicios jurídicos<br/>
                <span style={{ fontStyle: 'italic' }} className="gold-text">integrales</span>.
              </h2>
            </div>
            <p style={{ color: 'var(--muted)', fontSize: 17, lineHeight: 1.8, maxWidth: 480 }}>
              Especializados en 8 áreas clave del derecho. Cada caso se aborda con estrategia
              personalizada, confidencialidad y excelencia técnica. Selecciona una categoría
              para ver el detalle.
            </p>
          </div>
          <style>{`
            @media (max-width: 820px) {
              .svc-head { grid-template-columns: 1fr !important; gap: 32px !important; }
            }
          `}</style>
        </Reveal>

        <div>
          {SERVICES.map((svc, i) => (
            <ServiceRow
              key={svc.id}
              service={svc}
              index={i}
              open={openIdx === i}
              onToggle={() => setOpenIdx(openIdx === i ? -1 : i)}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ VALUES ============ */
function ValuesSection() {
  return (
    <section id="valores" style={{
      padding: '160px 0',
      background: 'var(--ink)',
      color: 'var(--cream)',
      position: 'relative',
      overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute',
        top: -100, right: -100,
        width: 400, height: 400,
        border: '1px solid var(--line)',
        borderRadius: '50%',
        pointerEvents: 'none',
      }} />
      <div style={{
        position: 'absolute',
        bottom: -120, left: -120,
        width: 320, height: 320,
        border: '1px solid var(--line)',
        borderRadius: '50%',
        pointerEvents: 'none',
      }} />

      <div className="container" style={{ position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80, alignItems: 'center' }} className="val-grid">
          <Reveal>
            <div>
              <div className="eyebrow on-dark" style={{ marginBottom: 20 }}>
                <span className="gold-rule" />Valores fundamentales
              </div>
              <h2 className="serif" style={{ fontSize: 'clamp(40px, 5vw, 60px)', fontWeight: 400, lineHeight: 1.1, marginBottom: 28 }}>
                Principios que<br/>
                <span style={{ fontStyle: 'italic' }} className="gold-text">nos definen</span>.
              </h2>
              <p style={{ color: 'var(--muted-on-dark)', fontSize: 16, lineHeight: 1.8, maxWidth: 440 }}>
                Cada relación cliente-abogado se construye sobre principios innegociables.
                Son el estándar con el que medimos cada decisión, cada alegato, cada contrato.
              </p>
            </div>
          </Reveal>
          <Reveal delay={150}>
            <ul style={{ listStyle: 'none' }}>
              {VALUES.map((v, i) => (
                <li key={i} style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 24,
                  padding: '22px 0',
                  borderBottom: i < VALUES.length - 1 ? '1px solid var(--line)' : 'none',
                }}>
                  <span className="serif gold-text" style={{ fontSize: 14, letterSpacing: '0.15em', width: 40 }}>
                    {String(i + 1).padStart(2, '0')}
                  </span>
                  <span className="serif" style={{ fontSize: 28, fontWeight: 400 }}>
                    {v.label}
                  </span>
                  <span style={{ marginLeft: 'auto', color: 'var(--gold)', fontSize: 18 }}>✦</span>
                </li>
              ))}
            </ul>
          </Reveal>
        </div>
        <style>{`
          @media (max-width: 880px) {
            .val-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

/* ============ CONTACT ============ */
function Contact() {
  const [form, setForm] = uS({ nombre: '', email: '', telefono: '', area: '', mensaje: '' });
  const [errors, setErrors] = uS({});
  const [sent, setSent] = uS(false);

  const update = (k) => (e) => {
    setForm({ ...form, [k]: e.target.value });
    if (errors[k]) setErrors({ ...errors, [k]: null });
  };

  const submit = (e) => {
    e.preventDefault();
    const err = {};
    if (!form.nombre.trim()) err.nombre = 'Campo requerido';
    if (!form.email.trim()) err.email = 'Campo requerido';
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) err.email = 'Email inválido';
    if (!form.mensaje.trim()) err.mensaje = 'Cuéntanos tu caso';
    if (Object.keys(err).length) { setErrors(err); return; }
    setSent(true);
  };

  const fieldStyle = (hasErr) => ({
    width: '100%',
    padding: '16px 0',
    background: 'transparent',
    border: 'none',
    borderBottom: `1px solid ${hasErr ? '#c24' : 'var(--line-dark)'}`,
    fontFamily: 'inherit',
    fontSize: 15,
    color: 'var(--ink)',
    outline: 'none',
    transition: 'border-color 0.3s',
  });
  const labelStyle = {
    display: 'block',
    fontSize: 11,
    letterSpacing: '0.22em',
    textTransform: 'uppercase',
    color: 'var(--muted)',
    marginBottom: 4,
  };

  return (
    <section id="contacto" style={{
      background: 'var(--paper)',
      padding: '140px 0',
      borderTop: '1px solid var(--line-dark)',
    }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 96 }} className="contact-grid">
          <Reveal>
            <div>
              <div className="eyebrow" style={{ marginBottom: 20 }}>
                <span className="gold-rule" />Contáctanos
              </div>
              <h2 className="serif" style={{ fontSize: 'clamp(40px, 5vw, 60px)', fontWeight: 400, lineHeight: 1.1, marginBottom: 32 }}>
                Agenda una<br/>
                <span style={{ fontStyle: 'italic' }} className="gold-text">consulta</span>.
              </h2>
              <p style={{ color: 'var(--muted)', fontSize: 16, lineHeight: 1.8, marginBottom: 48, maxWidth: 420 }}>
                Respondemos en menos de 24 horas. Tu consulta inicial es confidencial
                y sin compromiso.
              </p>

              <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
                {[
                   { k: 'Teléfono', v: '+52 (614) 120 8883' },
                   { k: 'Correo', v: 'contacto@abogados-legal.com' },
                   { k: 'Oficina', v: 'C. José Esteban Coronado 509\nCol. Centro, Chihuahua, Chih.' },
                   { k: 'Horario', v: 'Lun – Vie · 9:00 – 19:00\nEmergencias 24/7' },
                ].map((it, i) => (
                  <div key={i} style={{ display: 'grid', gridTemplateColumns: '100px 1fr', gap: 24, alignItems: 'start' }}>
                    <span className="eyebrow">{it.k}</span>
                    <span style={{ fontSize: 15, color: 'var(--ink)', whiteSpace: 'pre-line', lineHeight: 1.6 }}>{it.v}</span>
                  </div>
                ))}
              </div>
            </div>
          </Reveal>

          <Reveal delay={150}>
            <form onSubmit={submit} style={{
              background: 'var(--cream)',
              padding: 56,
              border: '1px solid var(--line)',
              position: 'relative',
            }} className="contact-form">
              {/* Corner ornaments */}
              <span style={{ position: 'absolute', top: 16, left: 16, width: 20, height: 20, borderTop: '1px solid var(--gold)', borderLeft: '1px solid var(--gold)' }} />
              <span style={{ position: 'absolute', top: 16, right: 16, width: 20, height: 20, borderTop: '1px solid var(--gold)', borderRight: '1px solid var(--gold)' }} />
              <span style={{ position: 'absolute', bottom: 16, left: 16, width: 20, height: 20, borderBottom: '1px solid var(--gold)', borderLeft: '1px solid var(--gold)' }} />
              <span style={{ position: 'absolute', bottom: 16, right: 16, width: 20, height: 20, borderBottom: '1px solid var(--gold)', borderRight: '1px solid var(--gold)' }} />

              {sent ? (
                <div style={{ textAlign: 'center', padding: '60px 0' }}>
                  <div style={{ marginBottom: 24 }}>
                    <Ornament />
                  </div>
                  <h3 className="serif" style={{ fontSize: 32, fontWeight: 400, marginBottom: 16, fontStyle: 'italic' }} className="gold-text">Gracias.</h3>
                  <p style={{ color: 'var(--muted)', fontSize: 15, maxWidth: 340, margin: '0 auto', lineHeight: 1.7 }}>
                    Hemos recibido tu solicitud. Un abogado te contactará en las próximas 24 horas.
                  </p>
                </div>
              ) : (
                <>
                  <div style={{ marginBottom: 36 }}>
                    <div className="serif" style={{ fontSize: 24, fontWeight: 500, marginBottom: 8 }}>Solicita tu consulta</div>
                    <div style={{ color: 'var(--muted)', fontSize: 14 }}>Completa los campos y nos pondremos en contacto.</div>
                  </div>

                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28 }} className="form-row">
                    <div>
                      <label style={labelStyle}>Nombre completo *</label>
                      <input type="text" value={form.nombre} onChange={update('nombre')} style={fieldStyle(errors.nombre)} placeholder="Tu nombre" />
                      {errors.nombre && <span style={{ color: '#c24', fontSize: 11, marginTop: 6, display: 'block' }}>{errors.nombre}</span>}
                    </div>
                    <div>
                      <label style={labelStyle}>Teléfono</label>
                      <input type="tel" value={form.telefono} onChange={update('telefono')} style={fieldStyle(false)} placeholder="55 0000 0000" />
                    </div>
                  </div>

                  <div style={{ marginTop: 28 }}>
                    <label style={labelStyle}>Correo electrónico *</label>
                    <input type="email" value={form.email} onChange={update('email')} style={fieldStyle(errors.email)} placeholder="tu@email.com" />
                    {errors.email && <span style={{ color: '#c24', fontSize: 11, marginTop: 6, display: 'block' }}>{errors.email}</span>}
                  </div>

                  <div style={{ marginTop: 28 }}>
                    <label style={labelStyle}>Área de interés</label>
                    <select value={form.area} onChange={update('area')} style={fieldStyle(false)}>
                      <option value="">Selecciona un área...</option>
                      {SERVICES.map(s => <option key={s.id} value={s.id}>{s.title}</option>)}
                    </select>
                  </div>

                  <div style={{ marginTop: 28 }}>
                    <label style={labelStyle}>Cuéntanos tu caso *</label>
                    <textarea
                      value={form.mensaje}
                      onChange={update('mensaje')}
                      rows={4}
                      style={{ ...fieldStyle(errors.mensaje), resize: 'vertical', fontFamily: 'inherit' }}
                      placeholder="Describe brevemente tu situación..."
                    />
                    {errors.mensaje && <span style={{ color: '#c24', fontSize: 11, marginTop: 6, display: 'block' }}>{errors.mensaje}</span>}
                  </div>

                  <div style={{ marginTop: 40, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 20, flexWrap: 'wrap' }}>
                    <span style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.08em', maxWidth: 220 }}>
                      Al enviar aceptas nuestra política de confidencialidad.
                    </span>
                    <Button type="submit" variant="primary">Enviar consulta →</Button>
                  </div>
                </>
              )}

              <style>{`
                @media (max-width: 600px) {
                  .contact-form { padding: 32px !important; }
                  .form-row { grid-template-columns: 1fr !important; }
                }
              `}</style>
            </form>
          </Reveal>
        </div>
        <style>{`
          @media (max-width: 900px) {
            .contact-grid { grid-template-columns: 1fr !important; gap: 56px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

/* ============ FOOTER ============ */
function Footer({ logoVariant }) {
  return (
    <footer style={{
      background: 'var(--ink)',
      color: 'var(--cream)',
      padding: '80px 0 40px',
      borderTop: '1px solid var(--line)',
    }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 64, marginBottom: 64 }} className="footer-grid">
          <div>
            <Logo variant={logoVariant} size={140} />
            <p style={{ color: 'var(--muted-on-dark)', fontSize: 14, lineHeight: 1.7, marginTop: 24, maxWidth: 320 }}>
              Tu despacho de abogados en Chihuahua de confianza. Defensa efectiva de tus derechos
              con estrategia e integridad.
            </p>
          </div>

          <div>
            <div className="eyebrow on-dark" style={{ marginBottom: 20 }}>Áreas</div>
            <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
              {SERVICES.slice(0, 6).map(s => (
                <li key={s.id}>
                  <a href="#servicios" style={{ color: 'var(--cream)', textDecoration: 'none', fontSize: 14 }}>{s.title}</a>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <div className="eyebrow on-dark" style={{ marginBottom: 20 }}>Despacho</div>
            <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
              <li><a href="#nosotros" style={{ color: 'var(--cream)', textDecoration: 'none', fontSize: 14 }}>Nosotros</a></li>
              <li><a href="#valores" style={{ color: 'var(--cream)', textDecoration: 'none', fontSize: 14 }}>Valores</a></li>
              <li><a href="#contacto" style={{ color: 'var(--cream)', textDecoration: 'none', fontSize: 14 }}>Contacto</a></li>
            </ul>
          </div>

          <div>
            <div className="eyebrow on-dark" style={{ marginBottom: 20 }}>Contacto</div>
            <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10, fontSize: 14 }}>
              <li>+52 (614) 120 8883</li>
              <li>contacto@abogados-legal.com</li>
              <li style={{ color: 'var(--muted-on-dark)' }}>C. José Esteban Coronado 509<br/>Col. Centro, Chihuahua, Chih.</li>
            </ul>
          </div>
        </div>

        <div style={{
          borderTop: '1px solid var(--line)',
          paddingTop: 28,
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          flexWrap: 'wrap',
          gap: 16,
          fontSize: 12,
          color: 'var(--muted-on-dark)',
          letterSpacing: '0.1em',
        }}>
          <span>© 2026 LEGAL ABOGADOS · Todos los derechos reservados.</span>
          <span>Aviso de privacidad · Términos</span>
        </div>

        <style>{`
          @media (max-width: 880px) {
            .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 40px !important; }
          }
          @media (max-width: 500px) {
            .footer-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, PracticeStrip, MissionVision, StatsBand, Services, ValuesSection, Contact, Footer });