/* global React */
// Sections — LGPD/Security / FAQ / Final CTA / Footer

const { useState: useStateF } = React;

/* ───────────────────── LGPD / SEGURANÇA ───────────────────── */
function Security() {
  useReveal();
  const items = [
    {
      icon: 'M12 2L3 7v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-9-5z',
      title: '3 opt-ins separados',
      body: 'Transacional, SMS-marketing e Email-marketing são opt-ins independentes. Cliente decide canal por canal.',
    },
    {
      icon: 'M21 8v13H3V8 M1 3h22v5H1z M10 12h4',
      title: 'Export completo dos seus dados',
      body: 'Em 1 clique você exporta clientes, comandas, agendamentos, assinaturas e financeiro. CSV de tudo. Seus dados são seus.',
    },
    {
      icon: 'M9 12l2 2 4-4 M21 12c0 5-3.5 9-9 9s-9-4-9-9 3.5-9 9-9c2.7 0 5.1 1.1 6.8 2.9',
      title: 'DPA assinável digitalmente',
      body: 'Acordo de Processamento de Dados disponível no portal, assinado eletronicamente. Audit log universal por padrão.',
    },
    {
      icon: 'M21 2l-2 2 M15 4l4 4 M14 9l-3 3 M5 21l3-3 5-5 M4 21l5-1',
      title: 'Pedido de exclusão self-service',
      body: 'Cliente pede exclusão pelo portal sem precisar ligar pra recepção. Atende o "direito ao esquecimento" da LGPD.',
    },
  ];
  return (
    <section id="security" className="sec">
      <div className="container">
        <div className="sec-shell reveal">
          <div className="sec-side">
            <div className="sec-badge">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                <path d="M12 2L3 7v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-9-5z"/>
                <path d="M9 12l2 2 4-4" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </div>
            <span className="eyebrow">Segurança · LGPD</span>
            <h2>Seus dados, seus clientes. Sem letra miúda.</h2>
            <p className="sec-lede">Conformidade com a LGPD desde o dia um, não como afterthought. Audit log universal, criptografia em trânsito e em repouso, backup diário.</p>
            <div className="sec-stack">
              <span className="sec-stack-pill">SOC 2 (em andamento)</span>
              <span className="sec-stack-pill">LGPD</span>
              <span className="sec-stack-pill">TLS 1.3</span>
              <span className="sec-stack-pill">Backup 24/7</span>
            </div>
          </div>
          <div className="sec-grid">
            {items.map((it, i) => (
              <div key={i} className="sec-card">
                <div className="sec-card-icon">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                    <path d={it.icon}/>
                  </svg>
                </div>
                <h4>{it.title}</h4>
                <p>{it.body}</p>
              </div>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        .sec-shell {
          background: var(--bg-card);
          border: 1px solid var(--line-soft);
          border-radius: var(--r-xl);
          padding: 56px;
          display: grid;
          grid-template-columns: 1fr 1.3fr;
          gap: 56px;
          align-items: start;
          position: relative;
          overflow: hidden;
        }
        .sec-shell::before {
          content:""; position: absolute; left: 0; top: 0; bottom: 0;
          width: 4px; background: linear-gradient(180deg, var(--accent), transparent);
        }
        .sec-badge {
          width: 56px; height: 56px;
          background: rgba(255,65,3,.1);
          border: 1px solid rgba(255,65,3,.3);
          color: var(--accent);
          border-radius: 14px;
          padding: 12px;
          margin-bottom: 22px;
        }
        .sec-badge svg { width: 100%; height: 100%; }
        .sec-side h2 { margin-top: 18px; font-size: clamp(28px, 3vw, 40px); }
        .sec-lede { margin-top: 16px; max-width: 360px; }
        .sec-stack { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 6px; }
        .sec-stack-pill {
          font-family: var(--font-mono);
          font-size: 11px;
          padding: 5px 10px;
          background: var(--bg-elev);
          border: 1px solid var(--line);
          border-radius: 6px;
          color: var(--ink-soft);
        }

        .sec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .sec-card {
          background: var(--bg-soft);
          border: 1px solid var(--line-soft);
          border-radius: 14px;
          padding: 22px;
          transition: border-color .2s ease;
        }
        .sec-card:hover { border-color: rgba(255,65,3,.3); }
        .sec-card-icon { width: 32px; height: 32px; color: var(--accent); margin-bottom: 12px; }
        .sec-card h4 { font-size: 15px; line-height: 1.25; }
        .sec-card p { margin-top: 8px; font-size: 13px; line-height: 1.5; }

        @media (max-width: 980px) {
          .sec-shell { grid-template-columns: 1fr; padding: 32px; gap: 32px; }
          .sec-grid { grid-template-columns: 1fr; }
        }
      `}</style>
    </section>
  );
}

/* ───────────────────── FAQ ───────────────────── */
function FAQ() {
  useReveal();
  const [open, setOpen] = useStateF(0);
  const faqs = [
    {
      q: 'Preciso desinstalar o AppBarber/Trinks pra testar?',
      a: 'Não. Suba seu CSV no Gorilla e opere em paralelo por 90 dias. Se gostar, migra de vez. Se não, deleta sem custo.',
    },
    {
      q: 'Como funciona a importação?',
      a: 'Você exporta CSV/XLS do AppBarber ou Trinks (botão padrão deles). Sobe no /onboarding/migrar. Gorilla detecta colunas, dedupa clientes por (nome + telefone) e cria histórico em background. Você acompanha a barra de progresso.',
    },
    {
      q: 'Meu Vindi atual continua funcionando?',
      a: 'Sim. Gorilla é cliente API da Vindi — você mantém sua conta, suas régua de cobrança Vindi, seus boletos emitidos. Gorilla só adiciona a camada de gestão local (pote, reconciliação, lifecycle).',
    },
    {
      q: 'Tem multi-loja?',
      a: 'Sim, no plano Rede. Cada unidade tem caixa próprio, comissão própria, mas dono vê consolidado.',
    },
    {
      q: 'Cliente final precisa baixar app?',
      a: 'Não. Portal Cliente é PWA — abre no navegador e o próprio Safari/Chrome sugere instalar como app na 2ª visita.',
    },
    {
      q: 'Como funciona o Recovery?',
      a: 'Você configura uma régua (ex: D+3 envia WhatsApp; D+7 SMS; D+14 email + ligação). Sistema dispara automaticamente. Cliente que paga sai da régua. Cliente que ignora vira lead pra Recovery Manual (recepção liga).',
    },
    {
      q: 'A IA Assistente cobra à parte?',
      a: 'Beta gratuita até GA. Após GA, R$ 99/mês add-on (incluso no plano Rede).',
    },
    {
      q: 'Tem NFC-e e NFS-e?',
      a: 'Sim, nativo. Comanda gera NFC-e na finalização, serviço gera NFS-e configurável.',
    },
    {
      q: 'Tem LGPD?',
      a: '3 opt-ins separados por canal (transacional / SMS-marketing / Email-marketing), exportação de dados via portal, pedido de exclusão de conta self-service, DPA assinável digitalmente.',
    },
    {
      q: 'Se eu cancelar, levo meus dados?',
      a: 'Sim. Export completo em CSV de tudo (clientes, comandas, agendamentos, assinaturas, financeiro) com 1 clique. Seus dados são seus.',
    },
  ];
  return (
    <section id="faq" className="faq">
      <div className="container faq-inner">
        <div className="faq-side reveal">
          <span className="eyebrow">FAQ</span>
          <h2>Dúvidas que aparecem<br/>antes da assinatura.</h2>
          <p className="faq-lede">Não achou sua dúvida? Manda no WhatsApp — a gente responde em até 1h, das 8h às 22h.</p>
          <a className="btn btn-ghost" href="#whatsapp">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M17.6 6.3A8 8 0 0 0 4 14a8 8 0 0 0 1.2 4.3L4 22l3.8-1.2A8 8 0 0 0 12 22a8 8 0 0 0 5.6-13.7zM12 20.5a6.5 6.5 0 0 1-3.4-1l-.2-.1-2.4.8.8-2.3-.2-.3a6.5 6.5 0 1 1 5.4 2.9zm3.5-4.9-1.1-.5-.2.1c-.4.5-.7.8-1 .8h-.2c-.5-.2-1.5-.7-2.7-1.9-1-.9-1.6-2-1.8-2.4 0-.3.1-.4.3-.6l.4-.4c.1-.1.2-.2.2-.4l.1-.2c0-.1 0-.3-.1-.5l-.5-1.2c-.2-.5-.4-.4-.5-.4h-.5c-.2 0-.4.1-.7.3-.2.3-.9.9-.9 2.2 0 1.3.9 2.6 1.1 2.8.1.2 1.7 2.6 4.2 3.7l1.4.5c.6.2 1.2.2 1.6.1.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.1-1.2-.1-.1-.2-.2-.4-.3z"/></svg>
            Falar no WhatsApp
          </a>
        </div>

        <div className="faq-list reveal">
          {faqs.map((f, i) => (
            <button
              key={i}
              className={"faq-item " + (open === i ? 'is-open' : '')}
              onClick={() => setOpen(open === i ? -1 : i)}
              aria-expanded={open === i}
            >
              <div className="faq-q">
                <span className="faq-q-n">{String(i+1).padStart(2,'0')}</span>
                <span className="faq-q-t">{f.q}</span>
                <span className="faq-q-icon" aria-hidden="true">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    {open === i ? <line x1="5" y1="12" x2="19" y2="12"/> : <>
                      <line x1="12" y1="5" x2="12" y2="19"/>
                      <line x1="5" y1="12" x2="19" y2="12"/>
                    </>}
                  </svg>
                </span>
              </div>
              <div className="faq-a-wrap"><div className="faq-a">{f.a}</div></div>
            </button>
          ))}
        </div>
      </div>

      <style>{`
        .faq-inner {
          display: grid;
          grid-template-columns: 380px 1fr;
          gap: 56px;
          align-items: start;
        }
        .faq-side { position: sticky; top: 100px; }
        .faq-side h2 { margin-top: 18px; }
        .faq-lede { margin-top: 16px; }
        .faq-side .btn { margin-top: 24px; }

        .faq-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line-soft); }
        .faq-item {
          width: 100%;
          background: transparent; border: 0; border-bottom: 1px solid var(--line-soft);
          padding: 0;
          text-align: left;
          color: var(--ink);
          cursor: pointer;
          font-family: inherit;
          transition: background .2s ease;
        }
        .faq-item:hover { background: var(--bg-card); }
        .faq-item.is-open { background: var(--bg-card); }
        .faq-q {
          display: grid;
          grid-template-columns: auto 1fr auto;
          gap: 16px;
          align-items: center;
          padding: 22px 24px;
        }
        .faq-q-n {
          font-family: var(--font-mono);
          font-size: 11px;
          color: var(--ink-mute);
          letter-spacing: .1em;
        }
        .faq-q-t {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: 18px;
          letter-spacing: -0.01em;
          line-height: 1.3;
        }
        .faq-item.is-open .faq-q-t { color: var(--accent); }
        .faq-q-icon {
          width: 32px; height: 32px;
          border-radius: 50%;
          background: var(--bg-soft);
          border: 1px solid var(--line);
          color: var(--ink-soft);
          display:flex; align-items:center; justify-content:center;
          transition: transform .25s ease, background .2s ease, color .2s ease;
        }
        .faq-item.is-open .faq-q-icon {
          background: var(--accent); color: #fff; border-color: var(--accent);
        }
        .faq-a-wrap {
          display: grid;
          grid-template-rows: 0fr;
          transition: grid-template-rows .35s cubic-bezier(.2,.7,.2,1);
        }
        .faq-item.is-open .faq-a-wrap { grid-template-rows: 1fr; }
        .faq-a {
          overflow: hidden;
          padding: 0 24px 0 64px;
          color: var(--ink-soft);
          font-size: 15px;
          line-height: 1.55;
        }
        .faq-item.is-open .faq-a { padding-bottom: 24px; }

        @media (max-width: 880px) {
          .faq-inner { grid-template-columns: 1fr; }
          .faq-side { position: static; }
        }
      `}</style>
    </section>
  );
}

/* ───────────────────── CTA FINAL ───────────────────── */
function FinalCTA() {
  useReveal();
  return (
    <section className="fcta">
      <div className="container fcta-inner reveal">
        <img src="/landing-original/assets/brand-head-transparent.png" alt="" className="fcta-mascot" />
        <div className="fcta-grid">
          <span className="hero-grid" />
        </div>
        <span className="eyebrow">Pronto pra trocar?</span>
        <h2 className="fcta-h">
          90 dias grátis. Sem cartão. Migração em 1 clique.
        </h2>
        <p className="fcta-sub">Você assina depois — quando o Gorilla já estiver pagando seu plano sozinho.</p>
        <div className="fcta-ctas">
          <a className="btn btn-primary btn-lg" href="#trial">
            Comece grátis 90 dias
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
          </a>
          <a className="btn btn-ghost btn-lg" href="#demo">Falar com vendas</a>
        </div>
      </div>

      <style>{`
        .fcta { position: relative; overflow: hidden; padding: 140px 0; }
        .fcta-inner {
          position: relative;
          text-align: center;
          z-index: 1;
        }
        .fcta-mascot {
          position: absolute;
          right: 50%; top: 50%;
          transform: translate(50%,-50%);
          width: min(70vw, 700px);
          opacity: 0.06;
          z-index: -1;
          filter: grayscale(1) contrast(1.3);
        }
        .fcta-grid { position: absolute; inset: 0; z-index: -1; }

        .fcta-h {
          margin-top: 18px;
          font-size: clamp(40px, 5.5vw, 80px);
          font-weight: 800;
          line-height: .98;
          letter-spacing: -0.035em;
          max-width: 18ch;
          margin-left: auto; margin-right: auto;
        }
        .fcta-sub {
          margin-top: 22px;
          font-size: 18px;
          color: var(--ink-soft);
          max-width: 540px;
          margin-left: auto; margin-right: auto;
        }
        .fcta-ctas { margin-top: 36px; display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
      `}</style>
    </section>
  );
}

/* ───────────────────── FOOTER ───────────────────── */
function Footer() {
  return (
    <footer className="ftr">
      <div className="container">
        <div className="ftr-grid">
          <div className="ftr-brand">
            <a href="#top" className="ftr-logo">
              <img src="/landing-original/assets/brand-head-transparent.png" alt="Gorilla Barber" />
              <span className="nav-wordmark">
                <span className="nav-wm1">GORILLA</span><span className="nav-wm2">BARBER</span>
              </span>
            </a>
            <p className="ftr-tag">O SaaS que paga sua barbearia.</p>
            <div className="ftr-contact">
              <a href="https://gorilla.app"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M2 12h20 M12 2a15 15 0 0 1 4 10 15 15 0 0 1-4 10 15 15 0 0 1-4-10 15 15 0 0 1 4-10"/></svg>gorilla.app</a>
              <a href="mailto:contato@gorilla.app"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>contato@gorilla.app</a>
              <a href="https://wa.me"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M17.6 6.3A8 8 0 0 0 4 14a8 8 0 0 0 1.2 4.3L4 22l3.8-1.2A8 8 0 0 0 12 22a8 8 0 0 0 5.6-13.7z"/></svg>+55 11 9XXXX-XXXX</a>
              <div className="ftr-loc"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>São Paulo · Brasil</div>
            </div>
          </div>

          <div className="ftr-col">
            <h5>Produto</h5>
            <a href="#features">Features</a>
            <a href="#how">Como funciona</a>
            <a href="#pricing">Preços</a>
            <a href="#compare">Comparativo</a>
            <a href="#demo">Demo</a>
          </div>

          <div className="ftr-col">
            <h5>Empresa</h5>
            <a href="#sobre">Sobre</a>
            <a href="#blog">Blog</a>
            <a href="#carreiras">Carreiras</a>
            <a href="#imprensa">Imprensa</a>
            <a href="#parceiros">Parceiros</a>
          </div>

          <div className="ftr-col">
            <h5>Recursos</h5>
            <a href="#docs">Documentação</a>
            <a href="#api">API</a>
            <a href="#status">Status <span className="ftr-status">● operacional</span></a>
            <a href="#changelog">Changelog</a>
            <a href="#help">Central de Ajuda</a>
          </div>

          <div className="ftr-col">
            <h5>Legal</h5>
            <a href="#termos">Termos de Uso</a>
            <a href="#privacidade">Política de Privacidade</a>
            <a href="#dpa">DPA</a>
            <a href="#cookies">Cookies</a>
            <a href="#lgpd">LGPD</a>
          </div>
        </div>

        <div className="ftr-bottom">
          <span className="mono">© 2026 Gorilla Barber.</span>
          <span className="mono ftr-bottom-i">Feito por quem entende de barbearia.</span>
        </div>
      </div>

      <style>{`
        .ftr {
          padding: 80px 0 40px;
          border-top: 1px solid var(--line-soft);
          background: linear-gradient(180deg, transparent, rgba(255,65,3,.03));
          position: relative;
        }
        .ftr-grid {
          display: grid;
          grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
          gap: 40px;
          padding-bottom: 64px;
          border-bottom: 1px solid var(--line-soft);
        }
        .ftr-logo { display: flex; align-items: center; gap: 10px; }
        .ftr-logo img { width: 44px; height: 44px; }
        .ftr-tag {
          margin-top: 16px;
          font-size: 14px;
          max-width: 280px;
          color: var(--ink-soft);
        }
        .ftr-contact { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
        .ftr-contact a, .ftr-loc {
          display: inline-flex; align-items: center; gap: 8px;
          font-size: 13px;
          color: var(--ink-soft);
          transition: color .15s;
        }
        .ftr-contact a:hover { color: var(--accent); }

        .ftr-col h5 {
          font-family: var(--font-mono);
          font-size: 11px;
          font-weight: 600;
          color: var(--ink);
          text-transform: uppercase;
          letter-spacing: .14em;
          margin-bottom: 18px;
        }
        .ftr-col { display: flex; flex-direction: column; gap: 11px; }
        .ftr-col a {
          font-size: 13.5px;
          color: var(--ink-soft);
          transition: color .15s;
          display:flex; align-items:center; gap: 8px;
        }
        .ftr-col a:hover { color: var(--ink); }
        .ftr-status {
          font-family: var(--font-mono); font-size: 10px;
          color: #4ade80;
        }

        .ftr-bottom {
          margin-top: 28px;
          display: flex; justify-content: space-between;
          font-size: 12px;
          color: var(--ink-mute);
        }

        @media (max-width: 980px) {
          .ftr-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
        }
        @media (max-width: 540px) {
          .ftr-grid { grid-template-columns: 1fr; }
          .ftr-bottom { flex-direction: column; gap: 6px; }
        }
      `}</style>
    </footer>
  );
}

Object.assign(window, { Security, FAQ, FinalCTA, Footer });
