// Redesign app for Roberto Grécia — institutional classical
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' }) {
  // Real brand mark: the Greek-meander medallion with RG monogram
  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, advogado em Porto Velho"
           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">OAB/RO 7865 · Porto Velho</span>
      <span className="hidden lg:inline" style={{ opacity: 0.7 }}>Atendimento Presencial &amp; Online</span>
      <span className="flex items-center gap-3 whitespace-nowrap">
        <span className="hidden sm:flex items-center gap-1.5" aria-label="Selecionar idioma">
          <span style={{ color: palette.goldLight, fontWeight: 600 }} data-lang="pt">PT</span>
          <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>
          <a href="es/index.html" data-lang="es" className="hover:underline" style={{ color: palette.bg, opacity: 0.7 }} aria-label="Versión en español">ES</a>
        </span>
        <a href="tel:+5569984052552" className="hover:underline" style={{ color: palette.goldLight }}>
          (69) 9 8405-2552 →
        </a>
      </span>
    </div>
  );
}

function Nav({ palette, serifFamily }) {
  const items = [
    { label: 'Sobre', href: 'sobre.html', external: true },
    { label: 'Atuação', href: '#atuacao' },
    { label: 'Casos', href: '#casos' },
    { label: 'FAQ', href: '#faq' },
    { label: 'Contato', 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 — início">
          <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 }}>
              Advocacia &amp; Consultoria
            </p>
          </div>
        </a>
        {/* Desktop menu */}
        <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=Ol%C3%A1%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>
        {/* Mobile trigger */}
        <button
          className="md:hidden flex flex-col items-end gap-1.5 p-2 -mr-2"
          aria-label="Abrir menu"
          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>

      {/* Mobile panel */}
      {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=Ol%C3%A1%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' }}>
            Falar no 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 · 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: 'Defesa jurídica', after: 'br' },
                { text: 'contra o abuso', after: 'br', style: { fontStyle: 'italic', color: palette.goldLight, fontWeight: 600 } },
                { text: 'de bancos e contratos.' },
              ]}
            />
          </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 }}>
                Atuação especializada em <span style={{ color: palette.ink, fontWeight: 600 }}>contratos bancários</span>,
                revisão de cláusulas abusivas e <span style={{ color: palette.ink, fontWeight: 600 }}>execução de dívidas</span>.
                Em Porto Velho e em todo o Brasil — presencial e online.
              </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=Ol%C3%A1%2C%20Dr.%20Roberto.%20Vim%20pelo%20site%20e%20gostaria%20de%20uma%20avalia%C3%A7%C3%A3o%20inicial."
               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>
              Falar no WhatsApp agora
            </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 }}>
              Ver áreas de atuação →
            </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 }}>
                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 }}>
          Advocacia &amp; Consultoria Jurídica · 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 }}>
          Direito <span style={{ fontStyle: 'italic', color: palette.accent }}>contratual,</span><br/>
          bancário e <span style={{ fontStyle: 'italic', color: palette.accent }}>cível.</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 }}>
          Uma defesa técnica, discreta e orientada a resultados — para quem precisa
          proteger patrimônio, contratos e nome.
        </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 }}>
            Falar com o advogado →
          </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 · Escritório de advocacia · Porto Velho
        </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'
        }}>
          Quando um contrato bancário
          se torna um problema — ou quando a execução
          de uma dívida chega à sua porta — você precisa
          de alguém que <span style={{ fontStyle: 'italic', color: palette.accent }}>conheça o 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 }}>
              Revisão de contratos bancários e 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 }}>
              Defesa e ajuizamento em execuções de dívida
            </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 }}>
              Direito civil em geral &amp; consultoria 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 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 — Quem atende você
          </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 }}>o escritório.</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 }}>
              “Por trás de cada processo há uma vida, um negócio ou um patrimônio a proteger.
              Meu trabalho é fazer com que o direito responda a isso — sem
              promessa vazia, sem jargão desnecessário.”
            </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>
              Atuamos desde a <span style={{ color: palette.ink, fontWeight: 600 }}>análise preventiva</span> de
              contratos e cláusulas até a defesa combativa em ações de execução, revisionais
              e consumo bancário. Trabalhamos para pessoas físicas e empresas de diferentes portes.
            </p>
            <p>
              A postura é <span style={{ color: palette.ink, fontWeight: 600 }}>técnica, discreta e sem
              achismos</span>: análise documental séria, estratégia antes do processo e comunicação
              clara com o cliente em cada etapa.
            </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: 'Registro', k: 'OAB/RO 7865', t: 'Regularidade profissional' },
              { n: 'Sede', k: 'Porto Velho', t: 'Rondônia · Brasil' },
              { n: 'Alcance', k: 'Nacional', t: 'Atendimento online' },
              { n: 'Clientes', k: 'PF & PJ', t: 'Pessoa física e empresas' },
            ].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 bancários',
    lead: 'Revisão de empréstimos, financiamentos, crédito consignado e cartão.',
    body: 'Identificação de cláusulas abusivas, juros capitalizados indevidamente, tarifas ilegais e pleito de revisão judicial ou extrajudicial.',
  },
  {
    n: '02',
    titulo: 'Revisão contratual',
    lead: 'Análise técnica de contratos civis, comerciais e de prestação de serviços.',
    body: 'Reescrita, negociação e ajuizamento quando necessário — para equilibrar a relação e proteger o cliente antes do problema escalar.',
  },
  {
    n: '03',
    titulo: 'Execução de dívidas',
    lead: 'Cobrança judicial de créditos — e defesa contra execuções indevidas.',
    body: 'Atuação dos dois lados da mesa: credores que precisam executar títulos e devedores que precisam contestar penhoras ou negociar.',
  },
  {
    n: '04',
    titulo: 'Direito civil geral',
    lead: 'Família, sucessões, responsabilidade civil, consumidor.',
    body: 'Causas cíveis com análise documental cuidadosa e estratégia construída caso a caso, sem fórmulas prontas.',
  },
  {
    n: '05',
    titulo: 'Fraudes bancárias',
    lead: 'Pix indevido, empréstimo fraudulento, golpe aplicado em sua conta.',
    body: 'Reparação financeira e responsabilização da instituição quando há falha na segurança ou no dever de cuidado.',
  },
  {
    n: '06',
    titulo: 'Consultoria preventiva',
    lead: 'Para empresas e profissionais que querem se antecipar ao conflito.',
    body: 'Diagnósticos de risco contratual, pareceres e acompanhamento recorrente — o custo da prevenção é menor do que o do litígio.',
  },
];

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 atuação
          </p>
          <h2 className="font-serif" style={{
            fontFamily: serifFamily, color: palette.ink,
            fontSize: 'clamp(32px, 3.6vw, 48px)', fontWeight: 500, lineHeight: 1.05
          }}>
            O que fazemos <span style={{ fontStyle: 'italic', color: palette.accent }}>concretamente</span>.
          </h2>
        </div>
        <p className="font-sans text-[14px] max-w-sm" style={{ color: palette.muted }}>
          Seis frentes, com destaque para o que mais procuram o escritório:
          contratos, bancos e cível.
        </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 — Credibilidade
          </p>
          <h2 className="font-serif" style={{
            fontFamily: serifFamily, color: palette.bg,
            fontSize: 'clamp(32px, 3.6vw, 48px)', fontWeight: 500, lineHeight: 1.05
          }}>
            Confiança <span style={{ fontStyle: 'italic', color: palette.goldLight }}>construída</span><br/> no dia a dia.
          </h2>
          <p className="font-sans text-[14px] leading-[1.7] mt-8" style={{ color: 'rgba(255,255,255,0.7)' }}>
            Ética profissional nos impede de expor detalhes de clientes e processos.
            Mas o que pode ser dito publicamente, dizemos com orgulho.
          </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}` }}>
              Avaliações no 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 profissional. Atencioso, técnico e resolveu meu problema com o banco em poucos meses.”
              </blockquote>
            </div>
            <figcaption className="mt-6 font-mono text-[10px] uppercase tracking-[0.22em]"
                        style={{ color: 'rgba(255,255,255,0.55)' }}>
              Cliente via 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 }}>
                Princípio
              </p>
              <blockquote className="font-serif italic text-[20px] leading-[1.45]"
                          style={{ fontFamily: serifFamily, color: palette.bg }}>
                “Dura lex, sed lex. A lei é dura, mas é a lei — e é trabalho do advogado
                garantir que ela seja aplicada com rigor e humanidade.”
              </blockquote>
            </div>
            <figcaption className="mt-6 font-mono text-[10px] uppercase tracking-[0.22em]"
                        style={{ color: 'rgba(255,255,255,0.55)' }}>
              Escritório 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: 'Foco no cliente', count: true, to: 100, suffix: '%' },
              { k: 'Porto Velho', t: 'Rondônia · Brasil' },
              { k: 'Online', t: 'Atendimento em todo o país' },
            ].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 — Contato
          </p>
          <h2 className="font-serif" style={{
            fontFamily: serifFamily, color: palette.ink,
            fontSize: 'clamp(32px, 3.6vw, 52px)', fontWeight: 500, lineHeight: 1
          }}>
            Converse<br/>
            <span style={{ fontStyle: 'italic', color: palette.accent }}>direto</span> com o advogado.
          </h2>
          <p className="font-sans text-[15px] leading-[1.7] mt-6 max-w-md" style={{ color: palette.muted }}>
            Respostas em dia útil. Atendimento presencial em Porto Velho e por videoconferência
            para clientes de todo o Brasil.
          </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 }}>
                Telefone
              </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 }}>
                E-mail
              </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 }}>
                Endereço
              </p>
              <p className="font-serif text-[18px]" style={{ fontFamily: serifFamily, color: palette.ink }}>
                Porto Velho · RO
              </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 }}>
                Registro
              </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 direto
            </p>
            <h3 className="font-serif text-[36px] md:text-[46px] leading-[1.05] mt-4 mb-6"
                style={{ fontFamily: serifFamily, fontWeight: 500 }}>
              WhatsApp é o caminho <span style={{ fontStyle: 'italic', color: palette.goldLight }}>mais rápido.</span>
            </h3>
            <p className="font-sans text-[15px] leading-[1.7] max-w-lg" style={{ color: 'rgba(255,255,255,0.75)' }}>
              Conte em poucas linhas o que está acontecendo. Vou ler pessoalmente e
              responder com clareza sobre os caminhos possíveis e os honorários devidos.
            </p>

            <a href="https://api.whatsapp.com/send?phone=5569984052552&text=Ol%C3%A1%2C%20Dr.%20Roberto.%20Vim%20pelo%20site%20e%20gostaria%20de%20uma%20avalia%C3%A7%C3%A3o%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 agora
            </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 }}>
                  Horário
                </p>
                <p className="font-serif text-[17px] mt-2" style={{ fontFamily: serifFamily }}>
                  Seg. a Sex.<br/>
                  08h às 18h
                </p>
              </div>
              <div>
                <p className="font-mono text-[10px] uppercase tracking-[0.22em]" style={{ color: palette.goldLight }}>
                  Urgências
                </p>
                <p className="font-serif text-[17px] mt-2" style={{ fontFamily: serifFamily }}>
                  Envie mensagem — reviso fora do horário
                </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]">Advocacia &amp; Consultoria</p>
          </div>
        </div>
        <div>
          <p className="font-mono text-[10px] uppercase tracking-[0.22em] mb-3" style={{ color: palette.goldLight }}>
            Institucional
          </p>
          <ul className="space-y-2">
            <li><a href="sobre.html" className="hover:text-white">Sobre o Dr. Roberto</a></li>
            <li><a href="#atuacao" className="hover:text-white">Áreas de atuação</a></li>
            <li><a href="#contato" className="hover:text-white">Contato</a></li>
            <li><a href="#" className="hover:text-white">Política de privacidade</a></li>
          </ul>
        </div>
        <div>
          <p className="font-mono text-[10px] uppercase tracking-[0.22em] mb-3" style={{ color: palette.goldLight }}>
            Contato
          </p>
          <ul className="space-y-2">
            <li>(69) 9 8405-2552</li>
            <li>contato@robertogrecia.com</li>
            <li>Porto Velho · RO · Brasil</li>
            <li>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 Roberto Grécia Advocacia. Todos os direitos reservados.</p>
        <p className="max-w-md text-right">
          A publicidade na advocacia é meramente informativa, conforme normas da OAB.
          Este site não constitui consultoria jurídica e não prometemos 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;

  // Background override
  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} />
    </div>
  );
}

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