// sections-top.jsx — Header, Hero, ValueProp, Pain, Solution

const WHATSAPP_URL = "https://wa.me/5541987845964?text=Ol%C3%A1%2C%20quero%20entender%20o%20risco%20da%20minha%20empresa%20com%20a%20NR-1";

const ArrowIcon = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
    <line x1="5" y1="12" x2="19" y2="12" />
    <polyline points="13 6 19 12 13 18" />
  </svg>
);

const WhatsAppIcon = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.82 11.82 0 0 0-3.48-8.413Z"/>
  </svg>
);

const LOGO_DARK_SRC = (typeof window !== 'undefined' && window.__resources && window.__resources.logoDark) || "assets/logo-dark.png";

const Header = () => (
  <header className="lp-header">
    <div className="lp-header__inner">
      <a className="lp-header__logo" href="#top" aria-label="De Paiva Advocacia">
        <img src={LOGO_DARK_SRC} alt="De Paiva Advocacia" />
      </a>
      <a className="lp-header__cta" href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer">
        <span className="dot" />
        <span className="label-long">Fale conosco —</span>
        <span>WhatsApp</span>
      </a>
    </div>
  </header>
);

const Hero = ({ isLight }) => (
  <section id="top" className={`hero ${isLight ? 'is-light' : ''}`}>
    <div className="hero__bg" />
    <div className="hero__overlay" />
    <div className="hero__noise" />
    <div className="hero__inner container">
      <div className="hero__chip">
        <span className="hero__chip-tag">NR-1</span>
        <span>Em vigor desde Maio de 2026</span>
      </div>
      <h1 className="hero__title">
        Sua empresa pode ser multada em{' '}
        <span className="accent-money">R$&nbsp;20.000</span>{' '}
        em uma única visita do Ministério do Trabalho —{' '}
        <span style={{ opacity: 0.78 }}>e você provavelmente não sabe por quê.</span>
      </h1>
      <p className="hero__subtitle">
        Adequação à NR-1 não é burocracia. É proteção financeira. A De Paiva Advocacia garante que você não vai descobrir isso pela primeira vez dentro de uma autuação.
      </p>
      <div className="hero__cta-row">
        <a className="btn-cta btn-cta-lg" href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer">
          Quero entender o risco da minha empresa
          <span className="arrow"><ArrowIcon size={18} /></span>
        </a>
      </div>
      <div className="hero__meta">
        <span><span className="bullet" />Consultoria sem compromisso</span>
        <span><span className="bullet" />Resposta em até 24h</span>
        <span><span className="bullet" />Atendimento personalizado</span>
      </div>
    </div>
  </section>
);

const ValueProp = () => (
  <section className="section value-prop reveal">
    <div className="container">
      <p className="eyebrow-lg on-dark"><span className="gold-rule" style={{ display: 'inline-block', verticalAlign: 'middle', margin: '0 12px 4px 0' }} />Onde começa o prejuízo silencioso</p>
      <div className="value-prop__grid" style={{ marginTop: 48 }}>
        <div className="value-prop__lead">
          <p>Você não acordou hoje pensando em NR-1.</p>
          <p style={{ opacity: 0.72 }}>Nenhum empresário acorda.</p>
        </div>
        <div className="value-prop__body">
          <p>
            Você pensa em faturamento, equipe, cliente, entrega. A operação. O que move o negócio.
          </p>
          <p>
            O problema é que o auditor do Ministério do Trabalho não liga para isso. Ele aparece, abre o checklist e começa a contar os itens descumpridos — <strong>um por um, cada um com um valor de multa</strong>.
          </p>
          <p>
            É aqui que começa o prejuízo silencioso: não por má-fé, mas por desconhecimento de uma norma que mudou e que a maioria das empresas ainda não adequou.
          </p>
          <p>
            A De Paiva Advocacia foi criada para proteger empresas exatamente desse tipo de risco. Assessoramos do diagnóstico à conformidade completa — <strong>antes que o auditor chegue</strong>.
          </p>
        </div>
      </div>
    </div>
  </section>
);

const PAIN_ITEMS = [
  "Você nunca ouviu falar em \u201Cmapeamento de riscos psicossociais\u201D — e não sabe se isso te afeta.",
  "Tem um departamento de RH, mas ninguém ali sabe o que é o PGR atualizado.",
  "Acredita que sua empresa é pequena demais para ser fiscalizada.",
  "Já tem advogado, mas ele não é especialista em direito do trabalho preventivo.",
  "Acha que compliance trabalhista é coisa de empresa grande.",
];

const Pain = () => (
  <section className="section pain reveal">
    <div className="container">
      <div className="pain__header">
        <p className="eyebrow-lg">Identificação da dor</p>
        <h2 className="display-2" style={{ marginTop: 16 }}>
          Sua empresa se enquadra em algum desses cenários?
        </h2>
      </div>
      <ul className="pain__list">
        {PAIN_ITEMS.map((text, i) => (
          <li key={i} className="pain__item">
            <span className="pain__check" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                <polyline points="20 6 9 17 4 12" />
              </svg>
            </span>
            <span>{text}</span>
          </li>
        ))}
      </ul>
      <div className="pain__conclusion">
        <span className="icon-warn" aria-hidden="true">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#BE9D7C" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
            <line x1="12" y1="9" x2="12" y2="13"/>
            <line x1="12" y1="17" x2="12.01" y2="17"/>
          </svg>
        </span>
        <p>
          Se você marcou ao menos um, <strong>sua empresa está em risco real de autuação.</strong> E o pior: a fiscalização do Ministério do Trabalho não avisa com antecedência.
        </p>
      </div>
    </div>
  </section>
);

const Solution = () => (
  <section className="section solution reveal">
    <div className="solution__bg-photo" aria-hidden="true" />
    <div className="container">
      <div className="solution__inner">
        <p className="eyebrow-lg on-dark">A solução</p>
        <h2 className="display-2" style={{ marginTop: 16 }}>
          A NR-1 foi atualizada. Agora, <span className="accent">toda empresa</span> precisa identificar, avaliar e gerenciar os riscos ocupacionais.
        </h2>
        <p style={{ marginTop: 32 }}>
          Independente do porte. Isso inclui riscos físicos, ergonômicos e — agora de forma explícita — <strong style={{ color: 'var(--gold-light)' }}>riscos psicossociais</strong>: pressão excessiva, assédio, sobrecarga, clima organizacional.
        </p>
        <div className="solution__highlight">
          O que muda na prática: não basta ter um documento. É preciso ter o <em>processo</em> correto — documentado e auditável.
        </div>
        <p>
          A De Paiva Advocacia entrega exatamente isso: fazemos o <strong style={{ color: 'var(--gold-light)' }}>Gerenciamento de Riscos Ocupacionais (GRO)</strong> e elaboramos o <strong style={{ color: 'var(--gold-light)' }}>Programa de Gerenciamento de Riscos (PGR)</strong> da sua empresa — os dois instrumentos exigidos pela NR-1 — com a segurança jurídica de quem entende o que o auditor vai procurar.
        </p>
        <p>
          Não terceirizamos para uma consultoria de segurança do trabalho. Fazemos com você, dentro da sua realidade operacional, com linguagem que a sua equipe entende.
        </p>
        <div className="solution__tags">
          <span className="solution__tag"><span className="dot" />Diagnóstico</span>
          <span className="solution__tag"><span className="dot" />GRO</span>
          <span className="solution__tag"><span className="dot" />PGR</span>
          <span className="solution__tag"><span className="dot" />Riscos psicossociais</span>
          <span className="solution__tag"><span className="dot" />Treinamento presencial</span>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { Header, Hero, ValueProp, Pain, Solution, WHATSAPP_URL, ArrowIcon, WhatsAppIcon });