/* global React */
const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

// ============================================================
// PRODUTOS — 3 cards (PIX, Checkout, API)
// ============================================================
function Produtos() {
  const items = [
    {
      tag: 'PIX',
      title: 'PIX em todos os formatos',
      desc: 'Cobrança estática, dinâmica, QR Code, PIX Copia e Cola e devolução automática. Liquidação em menos de 1 segundo na sua conta.',
      bullets: ['QR Code instantâneo', 'PIX Cobrança v2', 'Devolução parcial', 'Conciliação por end-to-end ID'],
      visual: 'pix',
    },
    {
      tag: 'CHECKOUT',
      title: 'Link de pagamento e checkout',
      desc: 'Página de pagamento white-label, link por WhatsApp, botão para e-commerce. Em 30 segundos seu cliente paga.',
      bullets: ['Página white-label', 'Link compartilhável', 'Plugins WooCommerce, Shopify, VTEX', 'Multi-meio: PIX, cartão, boleto'],
      visual: 'checkout',
    },
    {
      tag: 'API',
      title: 'API de pagamentos pra dev',
      desc: 'REST limpa, idempotente e documentada. SDKs em Node, Python, PHP, Go. Sandbox 1:1 com produção, webhooks com retry e assinatura.',
      bullets: ['REST + Webhooks HMAC', '6 SDKs oficiais', 'Sandbox espelho', 'Postman + OpenAPI'],
      visual: 'api',
    },
  ];

  return (
    <section className="np-produtos section-pad" id="produtos">
      <div className="wrap">
        <div className="np-produtos__head">
          <div>
            <span className="eyebrow">Produtos</span>
            <h2>Três produtos.<br/>Uma única integração.</h2>
          </div>
          <p className="np-produtos__sub">
            PIX, checkout e API conectados pela mesma plataforma e
            pelo mesmo painel. Comece por um, expanda quando quiser.
          </p>
        </div>

        <div className="np-produtos__grid">
          {items.map((it, i) => <ProductCard key={i} item={it} />)}
        </div>
      </div>
    </section>
  );
}

function ProductCard({ item }) {
  return (
    <article className="pcard">
      <div className="pcard__visual">
        {item.visual === 'pix' && <PixVisual />}
        {item.visual === 'checkout' && <CheckoutVisual />}
        {item.visual === 'api' && <ApiVisual />}
      </div>
      <div className="pcard__body">
        <span className="tag">{item.tag}</span>
        <h3>{item.title}</h3>
        <p>{item.desc}</p>
        <ul className="pcard__bullets">
          {item.bullets.map((b, i) => (
            <li key={i}><span className="pcard__bullet-dot" />{b}</li>
          ))}
        </ul>
        <a className="pcard__link" href="#">
          Conhecer <span className="arr">→</span>
        </a>
      </div>
    </article>
  );
}

function PixVisual() {
  return (
    <div className="pviz pviz--pix">
      <div className="pviz__qr"><QRCode /></div>
      <div className="pviz__ping" />
      <div className="pviz__ping pviz__ping--2" />
      <div className="pviz__amount mono">R$ 89,90</div>
      <div className="pviz__chip">
        <svg width="14" height="14" viewBox="0 0 24 24"><path d="M5 12l5 5 9-11" fill="none" stroke="white" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/></svg>
        recebido
      </div>
    </div>
  );
}

function CheckoutVisual() {
  return (
    <div className="pviz pviz--checkout">
      <div className="chk">
        <div className="chk__head">
          <span className="chk__brand">natipay/checkout</span>
          <span className="chk__lock mono">🔒 seguro</span>
        </div>
        <div className="chk__row">
          <span>Subtotal</span><span className="mono">R$ 240,00</span>
        </div>
        <div className="chk__row">
          <span>Desconto PIX</span><span className="mono" style={{color:'var(--pix-green)'}}>-R$ 24,00</span>
        </div>
        <div className="chk__row chk__row--total">
          <span>Total</span><span className="mono">R$ 216,00</span>
        </div>
        <div className="chk__methods">
          <div className="chk__method chk__method--active">PIX</div>
          <div className="chk__method">Cartão</div>
          <div className="chk__method">Boleto</div>
        </div>
        <div className="chk__pay">Pagar agora →</div>
      </div>
    </div>
  );
}

function ApiVisual() {
  return (
    <div className="pviz pviz--api">
      <pre className="codey">
{`POST /v1/pix/cobranca
{
  "valor": 12740,
  "vencimento": "2026-05-20",
  "devedor": {
    "cpf": "***.***.***-00",
    "nome": "Cliente"
  }
}`}
      </pre>
      <div className="codey__badge mono">200 OK · 84ms</div>
    </div>
  );
}

// ============================================================
// SEGMENTOS — Para quem é
// ============================================================
function Segmentos() {
  const segs = [
    { icon: 'pos', title: 'Frente de caixa', desc: 'PDV físico com integração ao seu ERP e impressora.' },
    { icon: 'totem', title: 'Totens self-checkout', desc: 'Pagamento autônomo em farmácia, posto, padaria, food court.' },
    { icon: 'cart', title: 'E-commerce', desc: 'Plugins prontos pra Shopify, WooCommerce, VTEX, Magento.' },
    { icon: 'food', title: 'Food service', desc: 'Comanda eletrônica, mesa, delivery e QR Code na mesa.' },
    { icon: 'truck', title: 'Logística & delivery', desc: 'Cobrança na entrega, split pra motorista e marketplace.' },
    { icon: 'shop', title: 'Pequenos varejistas', desc: 'Maquininha + app, sem mensalidade e com PIX grátis.' },
  ];

  return (
    <section className="np-segmentos section-pad" id="segmentos">
      <div className="wrap">
        <div className="np-segmentos__head">
          <span className="eyebrow">Para quem é</span>
          <h2>Construído pra quem<br/>recebe na ponta.</h2>
        </div>
        <div className="np-segmentos__grid">
          {segs.map((s, i) => (
            <article key={i} className="seg">
              <div className="seg__icon"><SegIcon name={s.icon} /></div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
              <span className="seg__arr">→</span>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function SegIcon({ name }) {
  const s = { width: 28, height: 28, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
  if (name === 'pos') return <svg {...s}><rect x="3" y="6" width="18" height="12" rx="2"/><path d="M7 10h10M7 14h6"/><circle cx="17" cy="14" r="1.2" fill="currentColor"/></svg>;
  if (name === 'totem') return <svg {...s}><rect x="6" y="2" width="12" height="16" rx="2"/><path d="M10 18v3M14 18v3M8 21h8"/><rect x="9" y="6" width="6" height="6" rx="1"/></svg>;
  if (name === 'cart') return <svg {...s}><path d="M3 4h2l2.4 11.3a2 2 0 0 0 2 1.7h7.2a2 2 0 0 0 2-1.6L20 8H6"/><circle cx="10" cy="20" r="1.3"/><circle cx="17" cy="20" r="1.3"/></svg>;
  if (name === 'food') return <svg {...s}><path d="M4 4v6a3 3 0 0 0 3 3h0v8M7 4v6M15 4c-1 2-1 4 0 6 1 1 3 1 3 0V4M18 13v8"/></svg>;
  if (name === 'truck') return <svg {...s}><rect x="2" y="7" width="11" height="9" rx="1"/><path d="M13 10h4l3 3v3h-7z"/><circle cx="7" cy="18" r="1.5"/><circle cx="17" cy="18" r="1.5"/></svg>;
  if (name === 'shop') return <svg {...s}><path d="M3 8l1-4h16l1 4M3 8v12h18V8M3 8h18M9 12h6"/></svg>;
  return null;
}

// ============================================================
// API SECTION — code + features
// ============================================================
function ApiSection() {
  const [lang, setLang] = useStateS('node');
  const samples = {
    node: `// Cobrança PIX em 3 linhas
import { Natipay } from '@natipay/sdk';
const np = new Natipay(process.env.NATIPAY_KEY);

const cobranca = await np.pix.criar({
  valor: 12740,                  // em centavos
  expiracao: 1800,               // 30 min
  descricao: 'Pedido #84921',
  webhook: 'https://loja.com/np',
});

console.log(cobranca.qr_code);   // base64
console.log(cobranca.copia_cola); // string`,
    python: `# Cobrança PIX em 3 linhas
from natipay import Natipay
np = Natipay(api_key=os.environ['NATIPAY_KEY'])

cobranca = np.pix.criar(
    valor=12740,
    expiracao=1800,
    descricao='Pedido #84921',
    webhook='https://loja.com/np',
)

print(cobranca.qr_code)
print(cobranca.copia_cola)`,
    curl: `# Cobrança PIX
curl -X POST https://api.natipay.com.br/v1/pix \\
  -H "Authorization: Bearer $NATIPAY_KEY" \\
  -H "Content-Type: application/json" \\
  -d '{
    "valor": 12740,
    "expiracao": 1800,
    "descricao": "Pedido #84921",
    "webhook": "https://loja.com/np"
  }'`,
  };

  return (
    <section className="np-api section-pad" id="api">
      <div className="wrap np-api__inner">
        <div className="np-api__left">
          <span className="eyebrow on-dark">Integrações & API</span>
          <h2>Em produção<br/>em <span className="np-api__hl">uma tarde.</span></h2>
          <p>
            REST limpa, documentação navegável, sandbox 1:1 com produção.
            Webhooks com retry exponencial e assinatura HMAC. Idempotência
            por header, paginação cursor, errors padronizados.
          </p>
          <div className="np-api__feats">
            <ApiFeat icon="◇" title="SDKs oficiais" desc="Node, Python, PHP, Go, Ruby, .NET" />
            <ApiFeat icon="↻" title="Webhooks confiáveis" desc="Retry exponencial até 24h, HMAC-SHA256" />
            <ApiFeat icon="◎" title="Sandbox espelho" desc="Mesmos endpoints, mesmos códigos de erro" />
            <ApiFeat icon="≡" title="Logs e tracing" desc="Request ID, replay, e auditoria de 90 dias" />
          </div>
          <a className="btn btn-blue" href="#">
            Abrir documentação <span className="arr">→</span>
          </a>
        </div>

        <div className="np-api__right">
          <div className="codeblock">
            <div className="codeblock__head">
              <div className="codeblock__tabs">
                {['node','python','curl'].map(l => (
                  <button
                    key={l}
                    className={`codeblock__tab ${lang === l ? 'is-active' : ''}`}
                    onClick={() => setLang(l)}
                  >
                    {l === 'node' ? 'Node.js' : l === 'python' ? 'Python' : 'cURL'}
                  </button>
                ))}
              </div>
              <span className="codeblock__lights">
                <span/><span/><span/>
              </span>
            </div>
            <pre className="codeblock__code">{samples[lang]}</pre>
            <div className="codeblock__foot mono">
              <span>↳ pix.cobranca.created</span>
              <span>·</span>
              <span style={{color:'var(--pix-green)'}}>200 OK</span>
              <span>·</span>
              <span>84ms</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ApiFeat({ icon, title, desc }) {
  return (
    <div className="api-feat">
      <span className="api-feat__icon mono">{icon}</span>
      <div>
        <div className="api-feat__title">{title}</div>
        <div className="api-feat__desc">{desc}</div>
      </div>
    </div>
  );
}

// ============================================================
// SEGURANÇA
// ============================================================
function Seguranca() {
  const certs = [
    { title: 'PCI DSS', sub: 'Level 1', desc: 'Auditado anualmente para processamento de cartões.' },
    { title: 'BACEN', sub: 'Instituição de Pagamento', desc: 'Autorizada pelo Banco Central do Brasil.' },
    { title: 'ISO 27001', sub: 'Gestão de Segurança', desc: 'Sistema de gestão de segurança da informação.' },
    { title: 'LGPD', sub: 'Compliance total', desc: 'DPO, mapeamento, retenção e direitos do titular.' },
  ];

  return (
    <section className="np-seg section-pad" id="seguranca">
      <div className="wrap">
        <div className="np-seg__head">
          <span className="eyebrow">Segurança</span>
          <h2>Dinheiro é coisa séria.<br/>Tratamos como tal.</h2>
          <p className="np-seg__sub">
            Criptografia ponta a ponta, antifraude em todas as transações,
            monitoramento 24/7 e certificações que a sua área de compliance
            precisa pra dormir tranquila.
          </p>
        </div>

        <div className="np-seg__grid">
          {certs.map((c, i) => (
            <div key={i} className="cert">
              <div className="cert__shield">
                <ShieldIcon />
              </div>
              <div className="cert__title">{c.title}</div>
              <div className="cert__sub mono">{c.sub}</div>
              <div className="cert__desc">{c.desc}</div>
            </div>
          ))}
        </div>

        <div className="np-seg__bar">
          <div className="np-seg__bar-item">
            <div className="np-seg__bar-num mono">256-bit</div>
            <div className="np-seg__bar-lbl">criptografia AES em repouso e TLS 1.3 em trânsito</div>
          </div>
          <div className="np-seg__bar-item">
            <div className="np-seg__bar-num mono">99,99%</div>
            <div className="np-seg__bar-lbl">SLA de disponibilidade da API</div>
          </div>
          <div className="np-seg__bar-item">
            <div className="np-seg__bar-num mono">24/7</div>
            <div className="np-seg__bar-lbl">monitoramento antifraude e operação NOC</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ShieldIcon() {
  return (
    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round">
      <path d="M12 2 L4 5v6c0 5 3.5 9 8 11 4.5-2 8-6 8-11V5z"/>
      <path d="M8 12l3 3 5-6" strokeLinecap="round"/>
    </svg>
  );
}

// ============================================================
// CTA Banner
// ============================================================
function CtaBanner() {
  return (
    <section className="np-cta section-pad">
      <div className="wrap">
        <div className="np-cta__card">
          <div className="np-cta__deco">
            <div className="np-cta__qr"><QRCode /></div>
          </div>
          <div className="np-cta__text">
            <span className="eyebrow on-dark">Começar agora</span>
            <h2>Sua primeira cobrança<br/>em 5 minutos.</h2>
            <p>Sem mensalidade, sem fidelidade. Pague apenas pelo que usar.</p>
            <div className="np-cta__btns">
              <a className="btn btn-blue" href="#">Criar conta grátis <span className="arr">→</span></a>
              <a className="btn btn-ghost-light" href="#">Falar com vendas</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FOOTER
// ============================================================
function Footer() {
  const cols = [
    {
      title: 'Produtos',
      links: ['PIX', 'Checkout', 'Link de pagamento', 'API', 'Maquininha', 'Totem self-checkout'],
    },
    {
      title: 'Soluções',
      links: ['E-commerce', 'Frente de caixa', 'Food service', 'Marketplaces', 'Logística', 'Assinaturas'],
    },
    {
      title: 'Desenvolvedores',
      links: ['Documentação', 'Status', 'Changelog', 'SDKs', 'Postman', 'GitHub'],
    },
    {
      title: 'Empresa',
      links: ['Sobre', 'Carreiras', 'Imprensa', 'Tarifas', 'Segurança', 'Contato'],
    },
  ];

  return (
    <footer className="np-footer">
      <div className="wrap">
        <div className="np-footer__top">
          <div className="np-footer__brand">
            <img src="assets/natipay-logo.png" alt="Natipay" />
            <p>
              Infraestrutura de pagamentos PIX, checkout e API.<br/>
              Pra empresas que recebem na ponta.
            </p>
            <div className="np-footer__social">
              <a href="#" aria-label="LinkedIn">in</a>
              <a href="#" aria-label="GitHub">gh</a>
              <a href="#" aria-label="Instagram">ig</a>
              <a href="#" aria-label="X">x</a>
            </div>
          </div>
          {cols.map((c, i) => (
            <div key={i} className="np-footer__col">
              <h4>{c.title}</h4>
              <ul>
                {c.links.map((l, j) => <li key={j}><a href="#">{l}</a></li>)}
              </ul>
            </div>
          ))}
        </div>

        <div className="np-footer__bottom">
          <div className="mono">© 2026 Natipay Tecnologia e Pagamentos · CNPJ 00.000.000/0001-00</div>
          <div className="np-footer__legal">
            <a href="#">Termos</a>
            <a href="#">Privacidade</a>
            <a href="#">Cookies</a>
            <a href="#">LGPD</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Produtos, Segmentos, ApiSection, Seguranca, CtaBanner, Footer
});