// Reusable sections: Header, Hero, About, Services grid, Footer, WhatsApp button

const Header = ({ onNavigate, currentService }) => {
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);

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

  const goHome = (e) => {
    e?.preventDefault?.();
    onNavigate(null);
    setOpen(false);
  };

  const goAnchor = (anchor) => (e) => {
    e.preventDefault();
    setOpen(false);
    if (currentService) {
      onNavigate(null);
      setTimeout(() => {
        document.getElementById(anchor)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }, 80);
    } else {
      document.getElementById(anchor)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  };

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      background: scrolled ? 'rgba(245, 239, 230, 0.95)' : 'transparent',
      backdropFilter: scrolled ? 'blur(12px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--line-gold)' : '1px solid transparent',
      transition: 'all 0.3s ease',
      padding: '14px 0',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 32px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <a href="#" onClick={goHome} style={{ display: 'flex', alignItems: 'center', gap: 14, textDecoration: 'none' }}>
          <div style={{ background: scrolled ? 'transparent' : 'transparent', padding: 0 }}>
            <SCGLogo size={scrolled ? 44 : 52} />
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
            <span className="serif" style={{
              color: scrolled ? 'var(--burgundy)' : 'var(--cream)',
              fontSize: scrolled ? 18 : 20,
              fontWeight: 500,
              letterSpacing: '0.02em',
              transition: 'all 0.3s ease',
            }}>Suyai Q. Giménez</span>
            <span className="italic-serif" style={{
              color: scrolled ? 'var(--gold-deep)' : 'var(--gold-bright)',
              fontSize: 13,
              marginTop: 3,
              letterSpacing: '0.08em',
            }}>Abogada</span>
          </div>
        </a>

        {/* Desktop nav */}
        <nav style={{ display: 'flex', alignItems: 'center', gap: 36 }} className="desktop-nav">
          {[
            { label: 'Inicio', anchor: 'hero' },
            { label: 'Sobre mí', anchor: 'about' },
            { label: 'Servicios', anchor: 'services' },
            { label: 'Reserva', anchor: 'booking' },
            { label: 'Preguntas', anchor: 'faq' },
            { label: 'Contacto', anchor: 'contact' },
          ].map(item => (
            <a key={item.anchor} href={`#${item.anchor}`} onClick={goAnchor(item.anchor)} style={{
              color: scrolled ? 'var(--ink)' : 'var(--cream)',
              fontSize: 12,
              letterSpacing: '0.16em',
              textTransform: 'uppercase',
              textDecoration: 'none',
              fontWeight: 500,
              transition: 'color 0.2s ease',
            }}>{item.label}</a>
          ))}
        </nav>

        <button
          onClick={() => setOpen(!open)}
          className="mobile-nav-btn"
          style={{
            display: 'none', background: 'none', border: 'none', cursor: 'pointer',
            color: scrolled ? 'var(--burgundy)' : 'var(--cream)',
          }}
          aria-label="Menú"
        >
          {open ? <Icon.Close /> : <Icon.Menu />}
        </button>
      </div>

      {/* Mobile menu */}
      {open && (
        <div style={{
          position: 'absolute', top: '100%', left: 0, right: 0,
          background: 'var(--cream)', borderTop: '1px solid var(--line-gold)',
          padding: '20px 32px',
          display: 'flex', flexDirection: 'column', gap: 4,
        }} className="mobile-menu">
          {[
            { label: 'Inicio', anchor: 'hero' },
            { label: 'Sobre mí', anchor: 'about' },
            { label: 'Servicios', anchor: 'services' },
            { label: 'Reserva', anchor: 'booking' },
            { label: 'Preguntas', anchor: 'faq' },
            { label: 'Contacto', anchor: 'contact' },
          ].map(item => (
            <a key={item.anchor} href={`#${item.anchor}`} onClick={goAnchor(item.anchor)} style={{
              color: 'var(--ink)', fontSize: 14, letterSpacing: '0.1em',
              textTransform: 'uppercase', textDecoration: 'none', padding: '12px 0',
              borderBottom: '1px solid var(--line)',
            }}>{item.label}</a>
          ))}
        </div>
      )}

      <style>{`
        @media (max-width: 880px) {
          .desktop-nav { display: none !important; }
          .mobile-nav-btn { display: block !important; }
        }
      `}</style>
    </header>
  );
};

const Hero = ({ photoUrl }) => {
  return (
    <section id="hero" className="burgundy-bg" style={{
      minHeight: '100vh', display: 'flex', alignItems: 'center', position: 'relative',
      paddingTop: 120, paddingBottom: 80,
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 32px', width: '100%' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 60, alignItems: 'center',
        }} className="hero-grid">

          <div className="float-in">
            <div style={{ marginBottom: 32 }}>
              <span className="gold-rule serif italic-serif" style={{ fontSize: 15, letterSpacing: '0.18em' }}>
                Estudio Jurídico
              </span>
            </div>
            <h1 className="serif gold-text" style={{
              fontSize: 'clamp(48px, 7vw, 92px)',
              lineHeight: 1.02,
              fontWeight: 500,
              margin: 0,
              letterSpacing: '-0.01em',
            }}>
              Asesoramiento<br/>
              <span className="italic-serif" style={{ fontWeight: 400 }}>jurídico</span> con<br/>
              compromiso humano.
            </h1>
            <p style={{
              color: 'rgba(245, 239, 230, 0.85)',
              fontSize: 17, lineHeight: 1.65, maxWidth: 520, marginTop: 32, marginBottom: 40,
              fontWeight: 300,
            }}>
              Más de una década acompañando a personas y familias en los momentos que más importan.
              Sucesiones, contratos, accidentes, familia y derecho societario, con la cercanía de un trato personal.
            </p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <a href="#booking" className="btn btn-cream" onClick={(e) => { e.preventDefault(); document.getElementById('booking')?.scrollIntoView({ behavior: 'smooth' }); }}>
                Reservar Consulta
                <Icon.Arrow size={14} />
              </a>
              <a href="#services" className="btn btn-gold" onClick={(e) => { e.preventDefault(); document.getElementById('services')?.scrollIntoView({ behavior: 'smooth' }); }}>
                Ver Servicios
              </a>
            </div>
          </div>

          {/* Photo column */}
          <div className="float-in" style={{ animationDelay: '0.2s', position: 'relative' }}>
            <div style={{
              position: 'relative',
              aspectRatio: '4/5',
              maxHeight: 620,
              border: '1px solid rgba(201, 169, 97, 0.4)',
              padding: 14,
            }}>
              <div style={{
                position: 'absolute', inset: -1, border: '1px solid rgba(201, 169, 97, 0.25)',
                transform: 'translate(14px, 14px)', pointerEvents: 'none',
              }}></div>
              {photoUrl ? (
                <img src={photoUrl} alt="Suyai Q. Giménez"
                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
              ) : (
                <div className="placeholder-photo"
                  data-label="Foto de Suyai (retrato profesional · vertical 4:5)"
                  style={{ width: '100%', height: '100%' }}>
                </div>
              )}
            </div>
            <div style={{
              position: 'absolute', bottom: -24, left: -20,
              background: 'var(--cream)', padding: '16px 22px',
              borderLeft: '2px solid var(--gold)',
              maxWidth: 280,
            }}>
              <div className="serif italic-serif" style={{ fontSize: 15, color: 'var(--burgundy)', lineHeight: 1.4 }}>
                "Cada caso es único.<br/>Cada persona, también."
              </div>
            </div>
          </div>
        </div>

        <a href="#about" onClick={(e) => { e.preventDefault(); document.getElementById('about')?.scrollIntoView({ behavior: 'smooth' }); }}
          className="scroll-cue scroll-cue-link" style={{
          position: 'absolute', bottom: 40, left: 32,
          color: 'var(--gold)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
          fontSize: 10, letterSpacing: '0.3em', textTransform: 'uppercase',
          textDecoration: 'none', cursor: 'pointer',
        }}>
          Descubrir
          <Icon.ChevronDown size={14} />
        </a>
      </div>

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

const About = ({ photoUrl }) => {
  return (
    <section id="about" style={{ padding: '120px 32px', background: 'var(--cream)' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 80, alignItems: 'center',
        }} className="about-grid">

          <div style={{ position: 'relative' }}>
            <div style={{
              aspectRatio: '4/5',
              maxHeight: 580,
              position: 'relative',
              border: '1px solid var(--line-gold)',
              padding: 12,
            }}>
              {photoUrl ? (
                <img src={photoUrl} alt="Suyai" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', filter: 'sepia(0.05)' }} />
              ) : (
                <div className="placeholder-photo"
                  data-label="Segunda foto · de trabajo / estudio"
                  style={{ width: '100%', height: '100%' }}></div>
              )}
            </div>
            <div className="burgundy-bg" style={{
              position: 'absolute', bottom: -32, right: -32,
              padding: '24px 28px', maxWidth: 240, color: 'var(--gold-bright)',
            }}>
              <div className="serif" style={{ fontSize: 44, fontWeight: 500, lineHeight: 1, color: 'var(--gold-bright)' }}>+10</div>
              <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', marginTop: 6, color: 'rgba(245,239,230,0.8)' }}>
                años de experiencia
              </div>
            </div>
          </div>

          <div>
            <div className="gold-rule serif italic-serif" style={{ fontSize: 14, letterSpacing: '0.18em', color: 'var(--gold-deep)' }}>
              Sobre mí
            </div>
            <h2 className="serif" style={{
              fontSize: 'clamp(36px, 4.5vw, 56px)',
              color: 'var(--burgundy)',
              fontWeight: 500, lineHeight: 1.05, margin: '20px 0 28px',
            }}>
              Un estudio jurídico<br/>con <span className="italic-serif" style={{ color: 'var(--gold-deep)' }}>mirada cercana</span>.
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--ink-soft)', marginBottom: 20 }}>
              Soy Suyai Q. Giménez, abogada matriculada. Atiendo casos de derecho civil, familiar y comercial
              en Río Negro y representaciones en otras jurisdicciones del país.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--ink-soft)', marginBottom: 36 }}>
              Mi forma de trabajar combina rigor técnico, comunicación clara y respeto por el tiempo de cada cliente.
              No vas a recibir tecnicismos vacíos: vas a entender qué se hace, por qué y qué podés esperar.
            </p>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginTop: 36 }} className="values-grid">
              {[
                { t: 'Cercanía', d: 'Atención personal en cada etapa del expediente.' },
                { t: 'Transparencia', d: 'Honorarios claros y avances comunicados a tiempo.' },
                { t: 'Compromiso', d: 'Tu caso recibe la atención que merece.' },
                { t: 'Experiencia', d: 'Más de 10 años de matrícula activa.' },
              ].map(v => (
                <div key={v.t} style={{ borderTop: '1px solid var(--line-gold)', paddingTop: 16 }}>
                  <div className="serif" style={{ fontSize: 22, color: 'var(--burgundy)', fontWeight: 500 }}>{v.t}</div>
                  <div style={{ fontSize: 14, color: 'var(--ink-soft)', marginTop: 6, lineHeight: 1.5 }}>{v.d}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

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

const ServicesGrid = ({ onSelectService }) => {
  return (
    <section id="services" style={{ padding: '120px 32px', background: 'var(--cream-warm)', position: 'relative' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 72 }}>
          <div className="gold-rule serif italic-serif" style={{ fontSize: 14, letterSpacing: '0.18em', color: 'var(--gold-deep)' }}>
            Áreas de práctica
          </div>
          <h2 className="serif" style={{
            fontSize: 'clamp(36px, 4.5vw, 56px)',
            color: 'var(--burgundy)',
            fontWeight: 500, lineHeight: 1.1, margin: '20px 0 16px',
          }}>
            Servicios profesionales
          </h2>
          <p style={{ fontSize: 17, color: 'var(--ink-soft)', maxWidth: 580, margin: '0 auto' }}>
            Cada área cuenta con su sección dedicada. Hacé clic para conocer en detalle el alcance,
            el proceso y las preguntas más frecuentes.
          </p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0,
          border: '1px solid var(--line-gold)',
          background: 'var(--cream)',
        }} className="services-grid">
          {SERVICES.map((s, i) => {
            const IconComp = Icon[s.icon];
            const row = Math.floor(i / 3);
            const col = i % 3;
            return (
              <div
                key={s.id}
                className="service-card"
                onClick={() => onSelectService(s.id)}
                style={{
                  padding: '48px 36px 40px',
                  borderRight: col < 2 ? '1px solid var(--line-gold)' : 'none',
                  borderBottom: row < 1 ? '1px solid var(--line-gold)' : 'none',
                  display: 'flex', flexDirection: 'column', gap: 16,
                  minHeight: 340,
                }}
              >
                <div style={{
                  width: 56, height: 56, borderRadius: '50%',
                  border: '1px solid var(--gold)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: 'var(--gold-deep)', marginBottom: 8,
                }}>
                  <IconComp size={26} />
                </div>
                <h3 className="serif" style={{
                  fontSize: 26, color: 'var(--burgundy)', fontWeight: 500,
                  margin: 0, lineHeight: 1.15,
                }}>{s.title}</h3>
                <p style={{ fontSize: 14.5, color: 'var(--ink-soft)', lineHeight: 1.6, margin: 0, flexGrow: 1 }}>
                  {s.short}
                </p>
                <div className="arrow" style={{
                  display: 'inline-flex', alignItems: 'center', gap: 10, marginTop: 8,
                  color: 'var(--gold-deep)', fontSize: 11, letterSpacing: '0.18em',
                  textTransform: 'uppercase', fontWeight: 500,
                }}>
                  Conocer más <Icon.Arrow size={14} />
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <style>{`
        @media (max-width: 1024px) {
          .services-grid { grid-template-columns: repeat(2, 1fr) !important; }
        }
        @media (max-width: 640px) {
          .services-grid { grid-template-columns: 1fr !important; }
          .services-grid .service-card { border-right: none !important; border-bottom: 1px solid var(--line-gold) !important; }
        }
      `}</style>
    </section>
  );
};

const Footer = ({ onNavigate }) => {
  const goAnchor = (a) => (e) => {
    e.preventDefault();
    document.getElementById(a)?.scrollIntoView({ behavior: 'smooth' });
  };
  return (
    <footer className="burgundy-bg" style={{ padding: '80px 32px 32px', color: 'var(--cream)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 48, paddingBottom: 60,
          borderBottom: '1px solid rgba(201,169,97,0.25)',
        }} className="footer-grid">
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 20 }}>
              <SCGLogo size={56} />
              <div>
                <div className="serif" style={{ fontSize: 19, color: 'var(--cream)' }}>Suyai Q. Giménez</div>
                <div className="italic-serif" style={{ fontSize: 13, color: 'var(--gold-bright)' }}>Abogada</div>
              </div>
            </div>
            <p style={{ fontSize: 14, color: 'rgba(245,239,230,0.7)', lineHeight: 1.6, maxWidth: 320 }}>
              Estudio jurídico de atención personal. Sucesiones, contratos, familia, accidentes y derecho societario.
            </p>
          </div>

          <div>
            <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--gold-bright)', marginBottom: 16 }}>
              Navegación
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {['hero', 'about', 'services', 'booking', 'faq', 'contact'].map((a, i) => (
                <a key={a} href={`#${a}`} onClick={goAnchor(a)} style={{
                  color: 'rgba(245,239,230,0.75)', fontSize: 14, textDecoration: 'none',
                }}>{['Inicio','Sobre mí','Servicios','Reserva','Preguntas','Contacto'][i]}</a>
              ))}
            </div>
          </div>

          <div>
            <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--gold-bright)', marginBottom: 16 }}>
              Áreas
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {SERVICES.map(s => (
                <a key={s.id} href="#" onClick={(e) => { e.preventDefault(); onNavigate(s.id); }} style={{
                  color: 'rgba(245,239,230,0.75)', fontSize: 14, textDecoration: 'none',
                }}>{s.title}</a>
              ))}
            </div>
          </div>

          <div>
            <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--gold-bright)', marginBottom: 16 }}>
              Contacto
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, fontSize: 14, color: 'rgba(245,239,230,0.8)' }}>
              <a href={`tel:${CONTACT.phoneIntl}`} style={{ color: 'inherit', textDecoration: 'none', display: 'flex', gap: 10, alignItems: 'center' }}>
                <Icon.Phone size={16} color="var(--gold-bright)" />
                {CONTACT.phone}
              </a>
              <a href={`mailto:${CONTACT.email}`} style={{ color: 'inherit', textDecoration: 'none', display: 'flex', gap: 10, alignItems: 'center' }}>
                <Icon.Mail size={16} color="var(--gold-bright)" />
                {CONTACT.email}
              </a>
              <a href={CONTACT.instagramUrl} target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', textDecoration: 'none', display: 'flex', gap: 10, alignItems: 'center' }}>
                <Icon.Instagram size={16} color="var(--gold-bright)" />
                {CONTACT.instagram}
              </a>
              <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start', marginTop: 4 }}>
                <Icon.Pin size={16} color="var(--gold-bright)" />
                <div>
                  {CONTACT.city}<br/>
                  <span style={{ fontSize: 12, opacity: 0.7 }}>{CONTACT.hours}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div style={{
          paddingTop: 28, display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          fontSize: 12, color: 'rgba(245,239,230,0.5)', flexWrap: 'wrap', gap: 12,
        }}>
          <div>© 2026 Suyai Q. Giménez · Todos los derechos reservados</div>
          <div className="italic-serif" style={{ fontSize: 14, color: 'var(--gold-bright)' }}>
            Lex et Veritas
          </div>
        </div>
      </div>

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

const WhatsAppFAB = ({ phone, message }) => {
  const url = `https://wa.me/${phone.replace(/\D/g,'')}?text=${encodeURIComponent(message || 'Hola Suyai, me gustaría hacer una consulta.')}`;
  return (
    <a
      href={url} target="_blank" rel="noopener noreferrer"
      className="wa-pulse"
      style={{
        position: 'fixed', bottom: 24, right: 24, zIndex: 60,
        width: 60, height: 60, borderRadius: '50%',
        background: '#25D366', color: 'white',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        textDecoration: 'none',
        transition: 'transform 0.2s ease',
      }}
      onMouseEnter={(e) => e.currentTarget.style.transform = 'scale(1.08)'}
      onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}
      aria-label="Contactar por WhatsApp"
    >
      <Icon.WhatsApp size={30} color="white" />
    </a>
  );
};

const ContactForm = () => {
  const [data, setData] = React.useState({ name: '', email: '', phone: '', subject: 'Sucesiones', message: '' });
  const [sent, setSent] = React.useState(false);
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 4500);
    setData({ name: '', email: '', phone: '', subject: 'Sucesiones', message: '' });
  };
  return (
    <section id="contact" style={{ background: 'var(--cream)', padding: '120px 32px' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 80, alignItems: 'start' }} className="contact-grid">
          <div>
            <div className="gold-rule serif italic-serif" style={{ fontSize: 14, letterSpacing: '0.18em', color: 'var(--gold-deep)' }}>
              Contacto
            </div>
            <h2 className="serif" style={{
              fontSize: 'clamp(36px, 4.5vw, 56px)', color: 'var(--burgundy)',
              fontWeight: 500, lineHeight: 1.05, margin: '20px 0 28px',
            }}>
              Escribime tu<br/><span className="italic-serif" style={{ color: 'var(--gold-deep)' }}>consulta</span>.
            </h2>
            <p style={{ fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.7, marginBottom: 40 }}>
              Te respondo dentro de las 24 horas hábiles. Si tu consulta es urgente, escribime por WhatsApp.
            </p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
              {[
                { icon: 'Phone', label: 'Teléfono', value: CONTACT.phone, href: `tel:${CONTACT.phoneIntl}` },
                { icon: 'Mail', label: 'Email', value: CONTACT.email, href: `mailto:${CONTACT.email}` },
                { icon: 'Instagram', label: 'Instagram', value: '@' + CONTACT.instagram, href: CONTACT.instagramUrl },
                { icon: 'Pin', label: 'Estudio', value: CONTACT.city + ' · ' + CONTACT.hours },
              ].map(item => {
                const I = Icon[item.icon];
                return (
                  <a key={item.label} href={item.href || '#'} target={item.href?.startsWith('http') ? '_blank' : undefined} rel="noopener noreferrer" style={{
                    display: 'flex', alignItems: 'center', gap: 16, textDecoration: 'none',
                    paddingBottom: 16, borderBottom: '1px solid var(--line)',
                  }}>
                    <div style={{
                      width: 44, height: 44, borderRadius: '50%',
                      border: '1px solid var(--gold)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      color: 'var(--gold-deep)', flexShrink: 0,
                    }}>
                      <I size={18} />
                    </div>
                    <div>
                      <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-soft)' }}>{item.label}</div>
                      <div className="serif" style={{ fontSize: 19, color: 'var(--burgundy)', marginTop: 2 }}>{item.value}</div>
                    </div>
                  </a>
                );
              })}
            </div>
          </div>

          <form onSubmit={submit} style={{
            background: 'white', padding: 40,
            border: '1px solid var(--line-gold)',
            position: 'relative',
          }}>
            <h3 className="serif" style={{ fontSize: 26, color: 'var(--burgundy)', fontWeight: 500, margin: '0 0 32px' }}>
              Formulario de consulta
            </h3>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginBottom: 22 }}>
              <div>
                <div className="label">Nombre completo</div>
                <input className="input" type="text" required value={data.name} onChange={e => setData({...data, name: e.target.value})} />
              </div>
              <div>
                <div className="label">Teléfono</div>
                <input className="input" type="tel" required value={data.phone} onChange={e => setData({...data, phone: e.target.value})} />
              </div>
            </div>

            <div style={{ marginBottom: 22 }}>
              <div className="label">Email</div>
              <input className="input" type="email" required value={data.email} onChange={e => setData({...data, email: e.target.value})} />
            </div>

            <div style={{ marginBottom: 22 }}>
              <div className="label">Área de consulta</div>
              <select className="select" value={data.subject} onChange={e => setData({...data, subject: e.target.value})}>
                {SERVICES.map(s => <option key={s.id}>{s.title}</option>)}
                <option>Otra consulta</option>
              </select>
            </div>

            <div style={{ marginBottom: 32 }}>
              <div className="label">Contanos brevemente tu caso</div>
              <textarea className="textarea" rows={4} required value={data.message} onChange={e => setData({...data, message: e.target.value})} />
            </div>

            <button type="submit" className="btn btn-primary" style={{ width: '100%' }}>
              Enviar consulta
              <Icon.Arrow size={14} />
            </button>

            {sent && (
              <div style={{
                position: 'absolute', inset: 0, background: 'rgba(245,239,230,0.97)',
                display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
                padding: 40, textAlign: 'center',
              }}>
                <div style={{
                  width: 64, height: 64, borderRadius: '50%', background: 'var(--burgundy)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--gold-bright)',
                  marginBottom: 24,
                }}>
                  <Icon.Check size={28} color="var(--gold-bright)" />
                </div>
                <h3 className="serif" style={{ fontSize: 30, color: 'var(--burgundy)', fontWeight: 500, margin: 0 }}>
                  ¡Mensaje enviado!
                </h3>
                <p style={{ color: 'var(--ink-soft)', marginTop: 12, maxWidth: 340 }}>
                  Te respondo dentro de las próximas 24 horas hábiles. Gracias por confiar.
                </p>
              </div>
            )}
          </form>
        </div>
      </div>

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

const GeneralFAQ = () => {
  return (
    <section id="faq" style={{ padding: '120px 32px', background: 'var(--cream)' }}>
      <div style={{ maxWidth: 820, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <div className="gold-rule serif italic-serif" style={{ fontSize: 14, letterSpacing: '0.18em', color: 'var(--gold-deep)' }}>
            Preguntas frecuentes
          </div>
          <h2 className="serif" style={{
            fontSize: 'clamp(36px, 4.5vw, 56px)', color: 'var(--burgundy)',
            fontWeight: 500, lineHeight: 1.1, margin: '20px 0 16px',
          }}>
            Dudas <span className="italic-serif" style={{ color: 'var(--gold-deep)' }}>frecuentes</span>
          </h2>
          <p style={{ fontSize: 17, color: 'var(--ink-soft)', maxWidth: 580, margin: '0 auto' }}>
            ¿Tenés una duda legal? Acá respondo las consultas que recibo todos los días.
          </p>
        </div>
        <div>
          {FAQS_GENERAL.map((f, i) => <FAQItem key={i} q={f.q} a={f.a} defaultOpen={i === 0} />)}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Header, Hero, About, ServicesGrid, Footer, WhatsAppFAB, ContactForm, GeneralFAQ });