// Redesign app for Roberto Grécia — institutional classical (ES)
const { useState, useEffect } = React;

// ---------- Palettes ----------
const PALETTES = {
  greek: {
    bg: '#F7F3EC',
    bgAlt: '#EFE8DB',
    ink: '#0B2E55',
    accent: '#0D5EAF',
    accentDark: '#0A4A8C',
    gold: '#B8892B',
    goldLight: '#D4A84B',
    rule: 'rgba(11,46,85,0.18)',
    muted: '#5a5a5a',
  },
  ink: {
    bg: '#F4F2ED',
    bgAlt: '#E9E5DC',
    ink: '#1a2540',
    accent: '#22406E',
    accentDark: '#17304F',
    gold: '#A07A2A',
    goldLight: '#C69A42',
    rule: 'rgba(26,37,64,0.18)',
    muted: '#555',
  },
  night: {
    bg: '#14181F',
    bgAlt: '#1B212B',
    ink: '#F5EEDF',
    accent: '#D4A84B',
    accentDark: '#B8892B',
    gold: '#D4A84B',
    goldLight: '#E8C878',
    rule: 'rgba(245,238,223,0.14)',
    muted: '#a9a39a',
  },
};

function useTweaks() {
  const [tw, setTw] = useState(window.__getTweaks ? window.__getTweaks() : {
    palette: 'greek', serif: 'cormorant', hero: 'split', bg: 'paper'
  });
  useEffect(() => {
    const handler = (e) => setTw(e.detail);
    window.addEventListener('tweak-change', handler);
    return () => window.removeEventListener('tweak-change', handler);
  }, []);
  return tw;
}

// ---------- Components ----------

function LogoMark({ size = 48, variant = 'mark' }) {
  const src = variant === 'mark' ? '../assets/logo-mark-only.png' : '../assets/logo-mark-gold.png';
  return (
    <img src={src} alt="Roberto Grécia" width={size} height={size}
         style={{ width: size, height: size, objectFit: 'contain', display: 'block' }} />
  );
}

function FotoRoberto({ palette, ratio = '3/4' }) {
  return (
    <div className="relative w-full overflow-hidden"
         style={{ aspectRatio: ratio, background: palette.bgAlt, border: `1px solid ${palette.rule}` }}>
      <img src="../assets/roberto-perfil.png"
           alt="Dr. Roberto Grécia, abogado en Porto Velho, Brasil"
           className="w-full h-full object-cover"
           style={{ objectPosition: 'center 20%' }} />
    </div>
  );
}

function Rule({ palette, style = 'double', width = '100%' }) {
  const border = style === 'double'
    ? `3px double ${palette.rule}`
    : `1px solid ${palette.rule}`;
  return <div style={{ borderTop: border, width }} />;
}

function TopBar({ palette }) {
  return (
    <div className="w-full py-2 px-4 md:px-6 flex items-center justify-between text-[10.5px] md:text-[11px] font-mono uppercase tracking-[0.14em] md:tracking-[0.18em] gap-3"
         style={{ background: palette.ink, color: palette.bg }}>
      <span className="truncate">Asesoría jurídica brasileña · OAB/RO 7865 · Clientes extranjeros</span>
      <span className="hidden lg:inline" style={{ opacity: 0.7 }}>Representación por Poder Notarial</span>
      <span className="flex items-center gap-3 whitespace-nowrap">
        <span className="hidden sm:flex items-center gap-1.5" aria-label="Seleccionar idioma">
          <a href="../index.html" data-lang="pt" className="hover:underline" style={{ color: palette.bg, opacity: 0.7 }} aria-label="Versão em português">PT</a>
          <span style={{ opacity: 0.4 }}>·</span>
          <a href="../en/index.html" data-lang="en" className="hover:underline" style={{ color: palette.bg, opacity: 0.7 }} aria-label="English version">EN</a>
          <span style={{ opacity: 0.4 }}>·</span>
          <span style={{ color: palette.goldLight, fontWeight: 600 }} data-lang="es">ES</span>
        </span>
        <a href="tel:+5569984052552" className="hover:underline" style={{ color: palette.goldLight }}>
          +55 69 98405-2552 →
        </a>
      </span>
    </div>
  );
}

function Nav({ palette, serifFamily }) {
  const items = [
    { label: 'Sobre', href: '../sobre.html', external: true },
    { label: 'Áreas', href: '#atuacao' },
    { label: 'Casos', href: '#casos' },
    { label: 'Preguntas', href: '#faq' },
    { label: 'Contacto', href: '#contato' },
  ];
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className="rg-nav-wrap w-full px-6 md:px-12 py-5 relative"
         data-scrolled={scrolled ? 'true' : 'false'}
         style={{
           background: scrolled ? `${palette.bg}EE` : palette.bg,
           borderBottom: `1px solid ${scrolled ? palette.rule : 'transparent'}`,
         }}>
      <div className="flex items-center justify-between">
        <a href="#top" className="flex items-center gap-3 min-w-0" aria-label="Roberto Grécia — inicio">
          <LogoMark size={54} variant="mark" />
          <div className="leading-tight min-w-0">
            <p className="font-serif text-[20px] md:text-[22px] tracking-tight truncate" style={{ color: palette.ink, fontFamily: serifFamily }}>
              Roberto Grécia
            </p>
            <p className="font-mono text-[9.5px] uppercase tracking-[0.22em] truncate" style={{ color: palette.muted }}>
              Abogados &amp; Asesoría
            </p>
          </div>
        </a>
        <div className="hidden md:flex items-center gap-6 lg:gap-8">
          {items.map((it) => (
            <a key={it.label} href={it.href}
               className="font-sans text-[12px] uppercase tracking-[0.18em] hover:underline underline-offset-4"
               style={{ color: palette.ink, textDecorationColor: palette.gold }}>
              {it.label}
            </a>
          ))}
          <a href="https://api.whatsapp.com/send?phone=5569984052552&text=Hola%2C%20Dr.%20Roberto."
             target="_blank" rel="noopener noreferrer"
             className="font-sans text-[12px] uppercase tracking-[0.18em] px-4 py-2.5"
             style={{ background: '#25D366', color: '#fff', letterSpacing: '0.16em' }}>
            WhatsApp →
          </a>
        </div>
        <button
          className="md:hidden flex flex-col items-end gap-1.5 p-2 -mr-2"
          aria-label="Abrir menú"
          aria-expanded={open}
          onClick={() => setOpen(o => !o)}>
          <span style={{ width: 24, height: 1.5, background: palette.ink, transform: open ? 'rotate(45deg) translate(5px, 5px)' : 'none', transition: 'transform .25s' }} />
          <span style={{ width: 18, height: 1.5, background: palette.ink, opacity: open ? 0 : 1, transition: 'opacity .2s' }} />
          <span style={{ width: 24, height: 1.5, background: palette.ink, transform: open ? 'rotate(-45deg) translate(5px, -5px)' : 'none', transition: 'transform .25s' }} />
        </button>
      </div>

      {open && (
        <div className="md:hidden absolute left-0 right-0 top-full z-50 px-6 py-6 space-y-1"
             style={{ background: palette.bg, borderBottom: `1px solid ${palette.rule}`, boxShadow: '0 18px 32px -18px rgba(0,0,0,0.18)' }}>
          {items.map((it) => (
            <a key={it.label} href={it.href}
               onClick={() => setOpen(false)}
               className="block py-3 font-serif text-[20px] border-b"
               style={{ color: palette.ink, fontFamily: serifFamily, borderColor: palette.rule }}>
              {it.label}
            </a>
          ))}
          <a href="https://api.whatsapp.com/send?phone=5569984052552&text=Hola%2C%20Dr.%20Roberto."
             target="_blank" rel="noopener noreferrer"
             onClick={() => setOpen(false)}
             className="block text-center mt-6 py-4 font-sans text-[13px] uppercase tracking-[0.2em]"
             style={{ background: '#25D366', color: '#fff' }}>
            WhatsApp →
          </a>
        </div>
      )}
    </nav>
  );
}

// ---------- HERO VARIANTS ----------

function HeroSplit({ palette, serifFamily }) {
  const photoRef = useReveal({ threshold: 0.2 });
  return (
    <section id="top" className="px-6 md:px-12 pt-12 pb-20 overflow-hidden relative"
             style={{ background: palette.bg }}>
      <MeanderPattern color={palette.gold} opacity={0.05} />
      <div className="relative grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-16 items-center">
        <div className="lg:col-span-7">
          <Reveal variant="fade" delay={0}>
            <p className="font-mono text-[10px] uppercase tracking-[0.3em] mb-8"
               style={{ color: palette.gold }}>
              Est. Porto Velho · Colegiado OAB/RO 7865
            </p>
          </Reveal>
          <h1 className="font-serif leading-[0.95] tracking-tight mb-6"
              style={{ fontFamily: serifFamily, color: palette.ink, fontSize: 'clamp(44px, 6vw, 82px)', fontWeight: 500 }}>
            <RevealWords
              delay={120}
              stagger={70}
              text={[
                { text: 'Sus asuntos', after: 'br' },
                { text: 'legales en Brasil,', after: 'br', style: { fontStyle: 'italic', color: palette.goldLight, fontWeight: 600 } },
                { text: 'gestionados desde el extranjero.' },
              ]}
            />
          </h1>
          <div className="max-w-xl mt-8">
            <DrawRule color={palette.rule} width="60px" height={1} delay={400} />
            <Reveal variant="up" delay={500}>
              <p className="font-sans text-[16px] leading-[1.65] mt-6" style={{ color: palette.muted }}>
                Asesoría jurídica brasileña para personas y empresas extranjeras — <span style={{ color: palette.ink, fontWeight: 600 }}>contratos internacionales y arbitraje</span>,
                <span style={{ color: palette.ink, fontWeight: 600 }}> sucesiones e inventarios transfronterizos</span>, divorcios internacionales, ejecución de pensiones alimenticias y
                cobro de deudas en Brasil. Usted no necesita viajar — lo representamos mediante <span style={{ color: palette.ink, fontWeight: 600 }}>Poder Notarial</span>.
              </p>
            </Reveal>
          </div>
          <Reveal variant="up" delay={700} className="mt-10 flex flex-wrap gap-4 items-center">
            <a href="https://api.whatsapp.com/send?phone=5569984052552&text=Hola%20Dr.%20Roberto%2C%20encontr%C3%A9%20su%20sitio%20web.%20Tengo%20un%20asunto%20legal%20en%20Brasil%20y%20me%20gustar%C3%ADa%20conversar."
               target="_blank" rel="noopener noreferrer"
               className="rg-cta inline-flex items-center gap-3 px-7 py-4 font-sans text-[13px] uppercase tracking-[0.2em]"
               style={{ background: '#25D366', color: '#fff' }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <path d="M17.5 14.4c-.3-.1-1.7-.9-2-1s-.5-.1-.7.2-.8 1-.9 1.2-.3.2-.6.1c-.3-.2-1.2-.5-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5s.2-.3.3-.5 0-.4 0-.5-.7-1.6-.9-2.2c-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1.1 1.1-1.1 2.6 0 1.5 1.1 3 1.3 3.2s2.2 3.3 5.3 4.7c.7.3 1.3.5 1.8.6.8.2 1.4.2 2 .1.6-.1 1.7-.7 2-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.5-.2zM12 2C6.5 2 2 6.5 2 12c0 1.9.5 3.6 1.4 5.2L2 22l4.9-1.3c1.5.8 3.3 1.3 5.1 1.3 5.5 0 10-4.5 10-10S17.5 2 12 2z"/>
              </svg>
              Consulta inicial gratuita
            </a>
            <a href="#atuacao" className="font-sans text-[13px] uppercase tracking-[0.2em] underline-offset-8 hover:underline"
               style={{ color: palette.ink, textDecorationColor: palette.gold }}>
              Cómo ayudamos a extranjeros →
            </a>
          </Reveal>
        </div>

        <div className="lg:col-span-5">
          <div ref={photoRef} className="rg-photo-frame relative">
            <div className="rg-frame-border" style={{ borderColor: palette.gold }} />
            <div className="rg-photo-inner">
              <FotoRoberto palette={palette} ratio="4/5" />
            </div>
            <Reveal variant="up" delay={800}
                    className="absolute -bottom-6 left-6 right-12 px-6 py-4 flex items-center justify-between"
                    style={{ background: palette.ink, color: palette.bg }}>
              <p className="font-serif text-[18px] italic" style={{ fontFamily: serifFamily }}>
                Dr. Roberto Grécia
              </p>
              <p className="font-mono text-[10px] uppercase tracking-[0.18em]" style={{ color: palette.goldLight }}>
                Colegiado OAB/RO 7865
              </p>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroEditorial({ palette, serifFamily }) {
  return (
    <section id="top" className="px-6 md:px-12 pt-16 pb-24 relative overflow-hidden" style={{ background: palette.bg }}>
      <div className="absolute inset-x-0 top-0 h-1" style={{ background: palette.accent }} />
      <div className="max-w-5xl mx-auto text-center">
        <p className="font-mono text-[10px] uppercase tracking-[0.32em] mb-10" style={{ color: palette.gold }}>
          Abogados y Asesoría Legal · Colegiado OAB/RO 7865
        </p>
        <h1 className="font-serif leading-[0.92] tracking-tight"
            style={{ fontFamily: serifFamily, color: palette.ink, fontSize: 'clamp(52px, 8vw, 120px)', fontWeight: 500 }}>
          <span style={{ fontStyle: 'italic', color: palette.accent }}>Contratos,</span><br/>
          banca y derecho <span style={{ fontStyle: 'italic', color: palette.accent }}>civil</span>.
        </h1>
        <div className="mt-10 mb-10 mx-auto" style={{ width: 80, borderTop: `2px solid ${palette.gold}` }} />
        <p className="font-serif italic text-[20px] md:text-[24px] max-w-2xl mx-auto leading-[1.5]"
           style={{ color: palette.muted, fontFamily: serifFamily }}>
          Defensa técnica, discreta y orientada a resultados — para quien necesita
          proteger patrimonio, contratos y reputación.
        </p>
        <div className="mt-12 flex flex-wrap justify-center gap-4">
          <a href="#whatsapp" className="inline-flex items-center gap-3 px-8 py-4 font-sans text-[13px] uppercase tracking-[0.2em]"
             style={{ background: palette.ink, color: palette.bg }}>
            Hablar con el abogado →
          </a>
        </div>
      </div>
    </section>
  );
}

function HeroQuiet({ palette, serifFamily }) {
  return (
    <section id="top" className="px-6 md:px-12 pt-20 pb-24 overflow-hidden" style={{ background: palette.bg }}>
      <div className="max-w-4xl">
        <p className="font-mono text-[10px] uppercase tracking-[0.3em] mb-10" style={{ color: palette.gold }}>
          № 01 · Despacho de abogados · Porto Velho, Brasil
        </p>
        <h1 className="font-serif" style={{
          fontFamily: serifFamily, color: palette.ink,
          fontSize: 'clamp(36px, 4.8vw, 64px)', fontWeight: 400, lineHeight: 1.1, letterSpacing: '-0.01em'
        }}>
          Cuando un contrato bancario se vuelve
          un problema — o cuando una ejecución de
          deuda llega a su puerta — usted necesita a
          alguien que <span style={{ fontStyle: 'italic', color: palette.accent }}>conozca el terreno</span>.
        </h1>
        <div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8 pt-8"
             style={{ borderTop: `1px solid ${palette.rule}` }}>
          <div>
            <p className="font-mono text-[10px] uppercase tracking-[0.22em] mb-2" style={{ color: palette.gold }}>01</p>
            <p className="font-serif text-[18px] leading-snug" style={{ color: palette.ink, fontFamily: serifFamily }}>
              Revisión de contratos bancarios y cláusulas abusivas
            </p>
          </div>
          <div>
            <p className="font-mono text-[10px] uppercase tracking-[0.22em] mb-2" style={{ color: palette.gold }}>02</p>
            <p className="font-serif text-[18px] leading-snug" style={{ color: palette.ink, fontFamily: serifFamily }}>
              Defensa y promoción en acciones de ejecución
            </p>
          </div>
          <div>
            <p className="font-mono text-[10px] uppercase tracking-[0.22em] mb-2" style={{ color: palette.gold }}>03</p>
            <p className="font-serif text-[18px] leading-snug" style={{ color: palette.ink, fontFamily: serifFamily }}>
              Derecho civil general y asesoría preventiva
            </p>
          </div>
        </div>
        <div className="mt-12 flex flex-wrap gap-4">
          <a href="#whatsapp" className="inline-flex items-center gap-3 px-7 py-3.5 font-sans text-[12px] uppercase tracking-[0.2em]"
             style={{ background: palette.accent, color: '#fff' }}>
            Agendar una consulta →
          </a>
        </div>
      </div>
    </section>
  );
}

// ---------- SOBRE ----------

function Sobre({ palette, serifFamily }) {
  return (
    <section id="sobre" className="px-6 md:px-12 py-24" style={{ background: palette.bgAlt }}>
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
        <Reveal variant="left" className="lg:col-span-4 lg:sticky lg:top-8">
          <p className="font-mono text-[10px] uppercase tracking-[0.3em] mb-4" style={{ color: palette.gold }}>
            № 01 — Con quién trabaja
          </p>
          <h2 className="font-serif" style={{
            fontFamily: serifFamily, color: palette.ink,
            fontSize: 'clamp(32px, 3.6vw, 48px)', fontWeight: 500, lineHeight: 1.05
          }}>
            Sobre <span style={{ fontStyle: 'italic', color: palette.accent }}>Roberto Grécia.</span>
          </h2>
          <DrawRule color={palette.gold} width="60px" height={2} delay={200} style={{ marginTop: 24 }} />
        </Reveal>

        <div className="lg:col-span-8">
          <Reveal variant="up" delay={100}>
            <p className="font-serif text-[22px] md:text-[26px] leading-[1.4] mb-8"
               style={{ fontFamily: serifFamily, color: palette.ink, fontWeight: 400 }}>
              “Mis clientes están distribuidos por Europa, América del Norte y Asia. Tienen una cosa en común:
              intereses jurídicos en Brasil y la necesidad de alguien de confianza que los defienda —
              sin tener que viajar para cada audiencia.”
            </p>
            <p className="font-mono text-[10px] uppercase tracking-[0.22em] mb-10" style={{ color: palette.muted }}>
              — Dr. Roberto Grécia
            </p>
          </Reveal>

          <Reveal variant="up" delay={200}
                  className="grid grid-cols-1 md:grid-cols-2 gap-8 text-[15px] leading-[1.7]"
                  style={{ color: palette.muted }}>
            <p>
              Represento a clientes extranjeros en <span style={{ color: palette.ink, fontWeight: 600 }}>contratos
              internacionales y arbitraje</span>, sucesiones transfronterizas, divorcios internacionales,
              ejecución de pensiones alimenticias y cobro de deudas en Brasil. Comunicación en <span style={{ color: palette.ink, fontWeight: 600 }}>español,
              inglés y portugués</span>.
            </p>
            <p>
              La mayoría de mis clientes extranjeros <span style={{ color: palette.ink, fontWeight: 600 }}>nunca
              necesita venir a Brasil</span>. Un Poder Notarial apostillado me autoriza a
              actuar en su nombre — audiencias, recolección de documentos, bancos y registros.
            </p>
          </Reveal>

          <div className="mt-14 grid grid-cols-2 md:grid-cols-4 gap-6 pt-8"
               style={{ borderTop: `1px solid ${palette.rule}` }}>
            {[
              { n: 'Colegiado', k: 'OAB/RO 7865', t: 'Vigente' },
              { n: 'Idiomas', k: 'ES · EN · PT', t: 'Comunicación directa' },
              { n: 'Representación', k: 'Poder Notarial', t: 'Sin viajar a Brasil' },
              { n: 'Alcance', k: 'Tribunales brasileños', t: 'Desde cualquier país' },
            ].map((s, i) => (
              <Reveal variant="up" delay={300 + i * 90} key={i}>
                <p className="font-mono text-[10px] uppercase tracking-[0.22em]" style={{ color: palette.gold }}>
                  {s.n}
                </p>
                <p className="font-serif text-[22px] leading-tight mt-2"
                   style={{ fontFamily: serifFamily, color: palette.ink, fontWeight: 500 }}>
                  {s.k}
                </p>
                <p className="font-sans text-[11px] mt-1" style={{ color: palette.muted }}>
                  {s.t}
                </p>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- ATUAÇÃO ----------

const AREAS = [
  {
    n: '01',
    titulo: 'Contratos internacionales',
    lead: 'Redacción, revisión y resolución de disputas en acuerdos transfronterizos.',
    body: 'Distribución, suministro, joint ventures, M&A, transferencia de tecnología y servicios sujetos al derecho brasileño — atención a ley aplicable, foro, moneda y tributación.',
  },
  {
    n: '02',
    titulo: 'Arbitraje',
    lead: 'Cláusulas arbitrales, arbitraje institucional y ad-hoc, ejecución de laudos.',
    body: 'Redacción y litigio de cláusulas arbitrales; representación en CAM-CCBC, ICC y procedimientos ad-hoc; ejecución de laudos extranjeros en Brasil bajo la Convención de Nueva York.',
  },
  {
    n: '03',
    titulo: 'Sucesiones e inventarios',
    lead: 'Herencia transfronteriza, inventario y transferencia de bienes en Brasil.',
    body: 'Herederos extranjeros con inmuebles, cuentas bancarias o participación empresarial en Brasil. Manejamos el inventario, documentos apostillados y registro de testamentos extranjeros.',
  },
  {
    n: '04',
    titulo: 'Divorcio internacional',
    lead: 'Divorcios con cónyuge brasileño o bienes en Brasil.',
    body: 'Reconocimiento de sentencias de divorcio extranjeras, división de bienes en Brasil, capitulaciones matrimoniales (pacto antenupcial) y homologación por el Superior Tribunal de Justiça (STJ).',
  },
  {
    n: '05',
    titulo: 'Pensión alimenticia',
    lead: 'Ejecución internacional de órdenes de alimentos y manutención.',
    body: 'Ejecución de órdenes extranjeras de pensión alimenticia contra deudores en Brasil; cobro transfronterizo vía Convención de La Haya sobre Cobro Internacional de Alimentos.',
  },
  {
    n: '06',
    titulo: 'Cobranzas en Brasil',
    lead: 'Cobro de deudas adeudadas por empresas o personas brasileñas.',
    body: 'Negociación extrajudicial, cobro judicial (execução), ejecución de pagarés, facturas y sentencias extranjeras — representando a acreedores en el extranjero.',
  },
];

function Atuacao({ palette, serifFamily }) {
  return (
    <section id="atuacao" className="px-6 md:px-12 py-24" style={{ background: palette.bg }}>
      <Reveal variant="up" className="flex flex-wrap items-end justify-between gap-6 mb-14">
        <div>
          <p className="font-mono text-[10px] uppercase tracking-[0.3em] mb-4" style={{ color: palette.gold }}>
            № 02 — Áreas de práctica
          </p>
          <h2 className="font-serif" style={{
            fontFamily: serifFamily, color: palette.ink,
            fontSize: 'clamp(32px, 3.6vw, 48px)', fontWeight: 500, lineHeight: 1.05
          }}>
            Lo que hacemos <span style={{ fontStyle: 'italic', color: palette.accent }}>en la práctica</span>.
          </h2>
        </div>
        <p className="font-sans text-[14px] max-w-sm" style={{ color: palette.muted }}>
          Los asuntos más frecuentes que los clientes extranjeros traen al despacho — desde
          contratos hasta procedimientos transfronterizos de familia y sucesiones.
        </p>
      </Reveal>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
           style={{ borderTop: `1px solid ${palette.rule}`, borderLeft: `1px solid ${palette.rule}` }}>
        {AREAS.map((a, i) => {
          const ref = useReveal({ threshold: 0.1 });
          return (
            <article key={a.n}
                     ref={ref}
                     className="rg-card rg-reveal rg-reveal--up p-8 min-h-[280px] flex flex-col"
                     style={{ borderRight: `1px solid ${palette.rule}`, borderBottom: `1px solid ${palette.rule}`, transitionDelay: `${i * 80}ms` }}>
              <span className="rg-card-ghost" style={{ color: palette.accent }}>{a.n}</span>
              <div className="flex items-baseline justify-between mb-6">
                <span className="font-mono text-[10px] uppercase tracking-[0.28em]" style={{ color: palette.gold }}>
                  {a.n}
                </span>
                <span className="font-mono text-[10px]" style={{ color: palette.muted }}>
                  —
                </span>
              </div>
              <h3 className="font-serif text-[26px] leading-tight mb-3"
                  style={{ fontFamily: serifFamily, color: palette.ink, fontWeight: 500 }}>
                {a.titulo}
              </h3>
              <p className="font-serif italic text-[15px] leading-snug mb-4"
                 style={{ fontFamily: serifFamily, color: palette.accent }}>
                {a.lead}
              </p>
              <p className="font-sans text-[13.5px] leading-[1.6] mt-auto" style={{ color: palette.muted }}>
                {a.body}
              </p>
            </article>
          );
        })}
      </div>
    </section>
  );
}

// ---------- CASOS / CREDIBILIDADE ----------

function Credibilidade({ palette, serifFamily }) {
  return (
    <section id="casos" className="px-6 md:px-12 py-24" style={{ background: palette.ink, color: palette.bg }}>
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
        <Reveal variant="left" className="lg:col-span-5">
          <p className="font-mono text-[10px] uppercase tracking-[0.3em] mb-4" style={{ color: palette.goldLight }}>
            № 03 — Credibilidad
          </p>
          <h2 className="font-serif" style={{
            fontFamily: serifFamily, color: palette.bg,
            fontSize: 'clamp(32px, 3.6vw, 48px)', fontWeight: 500, lineHeight: 1.05
          }}>
            Confianza <span style={{ fontStyle: 'italic', color: palette.goldLight }}>construida</span><br/> día a día.
          </h2>
          <p className="font-sans text-[14px] leading-[1.7] mt-8" style={{ color: 'rgba(255,255,255,0.7)' }}>
            La ética profesional nos impide divulgar detalles de clientes o de procesos.
            Pero lo que sí podemos decir públicamente, lo decimos con orgullo.
          </p>
          <div className="mt-10 flex gap-6">
            <a href="https://www.google.com/search?q=roberto+grecia+advogado+porto+velho"
               target="_blank" rel="noopener noreferrer"
               className="inline-flex items-center gap-3 font-sans text-[12px] uppercase tracking-[0.2em] pb-2"
               style={{ color: palette.goldLight, borderBottom: `1px solid ${palette.goldLight}` }}>
              Reseñas en Google →
            </a>
          </div>
        </Reveal>

        <div className="lg:col-span-7 grid grid-cols-1 md:grid-cols-2 gap-6">
          <Reveal variant="up" delay={120} as="figure" className="p-8 flex flex-col justify-between"
                  style={{ background: 'rgba(255,255,255,0.04)', border: `1px solid rgba(255,255,255,0.08)` }}>
            <div>
              <div className="flex gap-1 mb-5" style={{ color: palette.goldLight }}>
                {[1,2,3,4,5].map(i => (
                  <svg key={i} width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                    <path d="M12 2l3.1 6.3 7 1-5 4.9 1.1 6.8L12 17.8 5.8 21l1.1-6.8-5-4.9 7-1z"/>
                  </svg>
                ))}
              </div>
              <blockquote className="font-serif italic text-[20px] leading-[1.45]"
                          style={{ fontFamily: serifFamily, color: palette.bg }}>
                “Excelente profesional. Atento, técnico y resolvió mi situación con el banco en pocos meses.”
              </blockquote>
            </div>
            <figcaption className="mt-6 font-mono text-[10px] uppercase tracking-[0.22em]"
                        style={{ color: 'rgba(255,255,255,0.55)' }}>
              Reseña en Google · Porto Velho / RO
            </figcaption>
          </Reveal>

          <Reveal variant="up" delay={240} as="figure" className="p-8 flex flex-col justify-between"
                  style={{ background: 'rgba(255,255,255,0.04)', border: `1px solid rgba(255,255,255,0.08)` }}>
            <div>
              <p className="font-mono text-[10px] uppercase tracking-[0.22em] mb-5" style={{ color: palette.goldLight }}>
                Principio
              </p>
              <blockquote className="font-serif italic text-[20px] leading-[1.45]"
                          style={{ fontFamily: serifFamily, color: palette.bg }}>
                “Dura lex, sed lex. La ley es dura, pero es la ley — y el deber del abogado
                es lograr que se aplique con rigor y humanidad.”
              </blockquote>
            </div>
            <figcaption className="mt-6 font-mono text-[10px] uppercase tracking-[0.22em]"
                        style={{ color: 'rgba(255,255,255,0.55)' }}>
              Despacho Roberto Grécia
            </figcaption>
          </Reveal>

          <Reveal variant="up" delay={360} className="md:col-span-2 grid grid-cols-3 divide-x"
               style={{ background: 'rgba(255,255,255,0.04)', border: `1px solid rgba(255,255,255,0.08)`, borderColor: 'rgba(255,255,255,0.08)' }}>
            {[
              { k: '100%', t: 'Enfoque en el cliente', count: true, to: 100, suffix: '%' },
              { k: 'Porto Velho', t: 'Rondônia · Brasil' },
              { k: 'En línea', t: 'Consultas mundiales' },
            ].map((s, i) => (
              <div key={i} className="p-6 text-center" style={{ borderColor: 'rgba(255,255,255,0.08)' }}>
                <p className="font-serif leading-[1.05]"
                   style={{ fontFamily: serifFamily, color: palette.goldLight, fontWeight: 500, fontSize: s.k.length > 5 ? '20px' : '28px' }}>
                  {s.count
                    ? <CountUp to={s.to} suffix={s.suffix} duration={1600} />
                    : s.k}
                </p>
                <p className="font-mono text-[10px] uppercase tracking-[0.2em] mt-2"
                   style={{ color: 'rgba(255,255,255,0.6)' }}>
                  {s.t}
                </p>
              </div>
            ))}
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ---------- CONTATO ----------

function Contato({ palette, serifFamily }) {
  return (
    <section id="contato" className="px-6 md:px-12 py-24" style={{ background: palette.bgAlt }}>
      <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
        <div className="lg:col-span-5">
          <p className="font-mono text-[10px] uppercase tracking-[0.3em] mb-4" style={{ color: palette.gold }}>
            № 04 — Contacto
          </p>
          <h2 className="font-serif" style={{
            fontFamily: serifFamily, color: palette.ink,
            fontSize: 'clamp(32px, 3.6vw, 52px)', fontWeight: 500, lineHeight: 1
          }}>
            Hable<br/>
            <span style={{ fontStyle: 'italic', color: palette.accent }}>directamente</span> con el abogado.
          </h2>
          <p className="font-sans text-[15px] leading-[1.7] mt-6 max-w-md" style={{ color: palette.muted }}>
            Respondemos en hasta un día hábil. Reuniones por video en cualquier zona horaria —
            sin necesidad de viajar a Brasil. Comunicación en español, inglés o portugués.
          </p>

          <div className="mt-10 space-y-6">
            <div className="flex gap-4 items-baseline pb-5" style={{ borderBottom: `1px solid ${palette.rule}` }}>
              <p className="font-mono text-[10px] uppercase tracking-[0.22em] w-24" style={{ color: palette.gold }}>
                Teléfono
              </p>
              <a href="tel:+5569984052552" className="font-serif text-[22px]"
                 style={{ fontFamily: serifFamily, color: palette.ink }}>
                (69) 9 8405-2552
              </a>
            </div>
            <div className="flex gap-4 items-baseline pb-5" style={{ borderBottom: `1px solid ${palette.rule}` }}>
              <p className="font-mono text-[10px] uppercase tracking-[0.22em] w-24" style={{ color: palette.gold }}>
                Correo
              </p>
              <a href="mailto:contato@robertogrecia.com" className="font-serif text-[18px]"
                 style={{ fontFamily: serifFamily, color: palette.ink }}>
                contato@robertogrecia.com
              </a>
            </div>
            <div className="flex gap-4 items-baseline pb-5" style={{ borderBottom: `1px solid ${palette.rule}` }}>
              <p className="font-mono text-[10px] uppercase tracking-[0.22em] w-24" style={{ color: palette.gold }}>
                Dirección
              </p>
              <p className="font-serif text-[18px]" style={{ fontFamily: serifFamily, color: palette.ink }}>
                Porto Velho, Brasil
              </p>
            </div>
            <div className="flex gap-4 items-baseline">
              <p className="font-mono text-[10px] uppercase tracking-[0.22em] w-24" style={{ color: palette.gold }}>
                Colegiado
              </p>
              <p className="font-serif text-[18px]" style={{ fontFamily: serifFamily, color: palette.ink }}>
                OAB/RO 7865
              </p>
            </div>
          </div>
        </div>

        <Reveal variant="right" className="lg:col-span-7 relative" id="whatsapp">
          <div className="relative p-10 md:p-14"
               style={{ background: palette.ink, color: palette.bg }}>
            <div className="absolute inset-3 pointer-events-none" style={{ border: `1px solid ${palette.goldLight}`, opacity: 0.3 }} />
            <p className="font-mono text-[10px] uppercase tracking-[0.3em]" style={{ color: palette.goldLight }}>
              Canal directo
            </p>
            <h3 className="font-serif text-[36px] md:text-[46px] leading-[1.05] mt-4 mb-6"
                style={{ fontFamily: serifFamily, fontWeight: 500 }}>
              WhatsApp es la vía <span style={{ fontStyle: 'italic', color: palette.goldLight }}>más rápida</span>.
            </h3>
            <p className="font-sans text-[15px] leading-[1.7] max-w-lg" style={{ color: 'rgba(255,255,255,0.75)' }}>
              Cuénteme en pocas líneas en qué puedo ayudarle en Brasil — un contrato, una herencia,
              un divorcio, una deuda. Leo cada mensaje personalmente y respondo con claridad sobre
              el camino legal y los honorarios aplicables.
            </p>

            <a href="https://api.whatsapp.com/send?phone=5569984052552&text=Hola%2C%20Dr.%20Roberto.%20Vi%20su%20sitio%20y%20me%20gustar%C3%ADa%20una%20evaluaci%C3%B3n%20inicial." target="_blank" rel="noopener noreferrer"
               className="inline-flex items-center gap-4 mt-10 px-8 py-5 font-sans uppercase tracking-[0.16em] text-[13px] pulse-ring"
               style={{ background: palette.goldLight, color: palette.ink }}>
              <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <path d="M17.5 14.4c-.3-.1-1.7-.9-2-1s-.5-.1-.7.2-.8 1-.9 1.2-.3.2-.6.1c-.3-.2-1.2-.5-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5s.2-.3.3-.5 0-.4 0-.5-.7-1.6-.9-2.2c-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1.1 1.1-1.1 2.6 0 1.5 1.1 3 1.3 3.2s2.2 3.3 5.3 4.7c.7.3 1.3.5 1.8.6.8.2 1.4.2 2 .1.6-.1 1.7-.7 2-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.5-.2zM12 2C6.5 2 2 6.5 2 12c0 1.9.5 3.6 1.4 5.2L2 22l4.9-1.3c1.5.8 3.3 1.3 5.1 1.3 5.5 0 10-4.5 10-10S17.5 2 12 2z"/>
              </svg>
              Abrir WhatsApp ahora
            </a>

            <div className="grid grid-cols-2 gap-6 mt-12 pt-8"
                 style={{ borderTop: '1px solid rgba(255,255,255,0.12)' }}>
              <div>
                <p className="font-mono text-[10px] uppercase tracking-[0.22em]" style={{ color: palette.goldLight }}>
                  Horario
                </p>
                <p className="font-serif text-[17px] mt-2" style={{ fontFamily: serifFamily }}>
                  Lun — Vie<br/>
                  8h a 18h (BRT)
                </p>
              </div>
              <div>
                <p className="font-mono text-[10px] uppercase tracking-[0.22em]" style={{ color: palette.goldLight }}>
                  Urgente
                </p>
                <p className="font-serif text-[17px] mt-2" style={{ fontFamily: serifFamily }}>
                  Envíe un mensaje — reviso fuera del horario
                </p>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ---------- FOOTER ----------

function Footer({ palette, serifFamily }) {
  return (
    <footer className="px-6 md:px-12 py-12 font-sans text-[12px]" style={{ background: palette.ink, color: 'rgba(255,255,255,0.7)' }}>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-8 pb-10"
           style={{ borderBottom: '1px solid rgba(255,255,255,0.12)' }}>
        <div className="flex items-center gap-4">
          <LogoMark size={48} variant="mark" />
          <div>
            <p className="font-serif text-[20px]" style={{ fontFamily: serifFamily, color: palette.bg }}>
              Roberto Grécia
            </p>
            <p className="font-mono text-[10px] uppercase tracking-[0.22em]">Abogados &amp; Asesoría</p>
          </div>
        </div>
        <div>
          <p className="font-mono text-[10px] uppercase tracking-[0.22em] mb-3" style={{ color: palette.goldLight }}>
            Despacho
          </p>
          <ul className="space-y-2">
            <li><a href="../sobre.html" className="hover:text-white">Sobre el Dr. Roberto</a></li>
            <li><a href="#atuacao" className="hover:text-white">Áreas de práctica</a></li>
            <li><a href="#contato" className="hover:text-white">Contacto</a></li>
            <li><a href="#" className="hover:text-white">Política de privacidad</a></li>
          </ul>
        </div>
        <div>
          <p className="font-mono text-[10px] uppercase tracking-[0.22em] mb-3" style={{ color: palette.goldLight }}>
            Contacto
          </p>
          <ul className="space-y-2">
            <li>(69) 9 8405-2552</li>
            <li>contato@robertogrecia.com</li>
            <li>Porto Velho, Rondônia · Brasil</li>
            <li>Colegiado OAB/RO 7865</li>
          </ul>
        </div>
      </div>
      <div className="pt-6 flex flex-col md:flex-row justify-between gap-4 text-[11px]" style={{ color: 'rgba(255,255,255,0.5)' }}>
        <p>© 2026 Despacho Jurídico Roberto Grécia. Todos los derechos reservados.</p>
        <p className="max-w-md text-right">
          Publicidad de abogado bajo las normas de la Colegiación de Abogados Brasileña (OAB). Este sitio web es informativo únicamente y no constituye asesoría legal ni garantiza resultados.
        </p>
      </div>
    </footer>
  );
}

// ---------- APP ----------

function App() {
  const tw = useTweaks();
  const palette = PALETTES[tw.palette] || PALETTES.greek;
  const serifFamilies = {
    cormorant: '"Cormorant Garamond", Georgia, serif',
    fraunces:  '"Fraunces", Georgia, serif',
    dm:        '"DM Serif Display", Georgia, serif',
    lora:      '"Lora", Georgia, serif',
    spectral:  '"Spectral", Georgia, serif',
    instrument: '"Instrument Serif", Georgia, serif',
  };
  const serifFamily = serifFamilies[tw.serif] || serifFamilies.fraunces;

  const paletteWithBg = (() => {
    if (tw.bg === 'white') return { ...palette, bg: '#ffffff', bgAlt: '#f6f4ee' };
    if (tw.bg === 'ink')   return { ...palette, bg: palette.ink, bgAlt: palette.accentDark, ink: palette.bg, muted: 'rgba(255,255,255,0.7)', rule: 'rgba(255,255,255,0.15)' };
    return palette;
  })();

  const HeroComp = { split: HeroSplit, editorial: HeroEditorial, quiet: HeroQuiet }[tw.hero] || HeroSplit;

  return (
    <div className="rg-page-in" style={{
      background: paletteWithBg.bg,
      color: paletteWithBg.ink,
      '--rg-gold': paletteWithBg.gold,
      '--rg-gold-light': paletteWithBg.goldLight,
    }}>
      <TopBar palette={paletteWithBg} />
      <Nav palette={paletteWithBg} serifFamily={serifFamily} />
      <HeroComp palette={paletteWithBg} serifFamily={serifFamily} />
      <Sobre palette={paletteWithBg} serifFamily={serifFamily} />
      <Atuacao palette={paletteWithBg} serifFamily={serifFamily} />
      <ComoFunciona palette={paletteWithBg} serifFamily={serifFamily} />
      <Credibilidade palette={paletteWithBg} serifFamily={serifFamily} />
      <FAQ palette={paletteWithBg} serifFamily={serifFamily} />
      <Contato palette={paletteWithBg} serifFamily={serifFamily} />
      <Footer palette={paletteWithBg} serifFamily={serifFamily} />
      <WhatsAppFloat palette={paletteWithBg} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('redesign-root')).render(<App />);