// VeloFy LP — Top half: Nav, Hero, Marquee, Value Prop, Pain, Solution
const { useState, useEffect, useMemo, useRef } = React;

// ─── Icons ───────────────────────────────────────────────
const Icon = {
  Bolt: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" {...p}><path d="M13 2L4.5 13.5h7L11 22l8.5-11.5h-7L13 2z" fill="currentColor"/></svg>,
  Check: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M20 6L9 17l-5-5"/></svg>,
  X: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...p}><path d="M18 6L6 18M6 6l12 12"/></svg>,
  Plus: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...p}><path d="M12 5v14M5 12h14"/></svg>,
  Lock: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...p}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 018 0v4"/></svg>,
  Down: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" {...p}><path d="M19 9l-7 7-7-7"/></svg>,
  Server: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}><rect x="3" y="3" width="18" height="7" rx="1.5"/><rect x="3" y="14" width="18" height="7" rx="1.5"/><circle cx="7" cy="6.5" r=".8" fill="currentColor"/><circle cx="7" cy="17.5" r=".8" fill="currentColor"/></svg>,
  Money: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}><rect x="2" y="6" width="20" height="12" rx="2"/><circle cx="12" cy="12" r="3"/></svg>,
  Headset: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}><path d="M3 14v-2a9 9 0 0118 0v2"/><path d="M3 14v3a2 2 0 002 2h1v-7H5a2 2 0 00-2 2zM21 14v3a2 2 0 01-2 2h-1v-7h1a2 2 0 012 2z"/></svg>,
  Gauge: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...p}><path d="M12 14l5-5"/><circle cx="12" cy="14" r="9"/><path d="M3 14a9 9 0 0118 0"/></svg>,
  Brush: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...p}><path d="M5 16l-2 5 5-2 11-11-3-3-11 11z"/></svg>,
  Grid: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>,
  Pkg: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" {...p}><path d="M3 7l9-4 9 4-9 4-9-4z"/><path d="M3 7v10l9 4 9-4V7"/><path d="M12 11v10"/></svg>,
  Shield: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" {...p}><path d="M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6l8-4z"/><path d="M9 12l2 2 4-4"/></svg>,
  Alert: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 9v4M12 17h.01"/><path d="M10.3 3.6L1.9 18a2 2 0 001.7 3h16.8a2 2 0 001.7-3L13.7 3.6a2 2 0 00-3.4 0z"/></svg>,
  Bug: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...p}><rect x="8" y="6" width="8" height="14" rx="4"/><path d="M16 10h4M4 10h4M16 14h4M4 14h4M16 18h4M4 18h4M9 6V4l1-2M15 6V4l-1-2"/></svg>,
  Clock: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>,
  Phone: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}><rect x="6" y="2" width="12" height="20" rx="2.5"/><circle cx="12" cy="18" r="1" fill="currentColor"/></svg>,
};

// ─── Headline copy ────────────────────────────────────────
const HEADLINES = {
  A: { lead: 'Sua loja não pode', strike: 'cair', tail: 'às 22h de uma quinta.', accent: '' },
  B: { lead: 'O primeiro construtor de loja do Brasil com', accent: 'checkout próprio', tail: 'embutido.' },
  C: { lead: 'Loja profissional + checkout que converte.', accent: 'De graça,', tail: 'pra sempre.' }
};
const CTA_VARIANTS = {
  A: { label: 'Criar minha loja grátis', sub: 'Sem cartão • Sem mensalidade • Pronta em minutos' },
  B: { label: 'Quero parar de perder venda', sub: 'Loja + checkout integrados • 100% grátis' }
};

// ─── Nav ──────────────────────────────────────────────────
const Logo = () => (
  <a href="#" className="logo" aria-label="VeloFy">
    <span className="logo-mark"><img src="assets/velofy-logo.png" alt="VeloFy"/></span>
    <span>VeloFy</span>
  </a>
);

const Nav = () => (
  <nav className="nav">
    <div className="container nav-inner">
      <Logo />
      <div className="nav-links">
        <a className="nav-link" href="#solucao">Como funciona</a>
        <a className="nav-link" href="#calc">Calculadora</a>
        <a className="nav-link" href="#oferta">Preço</a>
        <a className="nav-link" href="#faq">FAQ</a>
        <a className="nav-login" href="/entrar">Entrar</a>
        <a className="nav-cta" href="/cadastro">Criar loja grátis →</a>
      </div>
    </div>
  </nav>
);

// ─── Hero ─────────────────────────────────────────────────
const HeroTitle = ({ variant }) => {
  if (variant === 'A') return (
    <h1 className="hero-title">
      Sua loja não pode <span className="strike">cair</span> às 22h de uma quinta.
    </h1>
  );
  if (variant === 'B') return (
    <h1 className="hero-title">
      O primeiro construtor de loja do Brasil com <span className="accent">checkout próprio</span> embutido.
    </h1>
  );
  return (
    <h1 className="hero-title">
      Loja profissional + checkout que converte. <span className="accent">De graça,</span> pra sempre.
    </h1>
  );
};

const HeroSub = ({ variant }) => {
  const subs = {
    A: 'Construtor de loja com checkout integrado, feito no Brasil pra quem escala em tráfego pago. Carrega rápido, não cai, e o checkout que mais converte já vem dentro. Zero mensalidade.',
    B: 'Construtor + checkout na mesma plataforma, mantidos pelo mesmo time. Sem gambiarra entre 3 fornecedores. Sem mensalidade em dólar. Sem app de checkout terceirizado mordendo sua margem.',
    C: 'Construtor de loja profissional, checkout integrado de alta conversão, suporte em português, infra brasileira. Zero mensalidade — a gente ganha quando você vende.'
  };
  return <p className="hero-sub">{subs[variant]}</p>;
};

const HeroWindow = () => (
  <div className="hero-window">
    <div className="hw-bar">
      <div className="hw-dots"><span/><span/><span/></div>
      <div className="hw-url"><Icon.Lock className="lock" style={{width:12,height:12}}/> sualoja.com.br/checkout</div>
      <div style={{width:48}}/>
    </div>
    <div className="hw-body">
      {/* Store side */}
      <div className="hw-store">
        <div className="hw-store-nav">
          <div className="hw-store-brand">Sua Loja</div>
          <div className="hw-store-cart">🛒 1 item · R$ 197,00</div>
        </div>
        <div className="hw-product">
          <div className="hw-product-img" aria-label="product"/>
          <div>
            <h3>Produto Hero · Kit Premium</h3>
            <div className="hw-stars">★★★★★ <span style={{color:'var(--fg-3)', fontSize:11, marginLeft:4, fontFamily:'var(--mono)'}}>4.9 (812 reviews)</span></div>
            <div className="hw-price">
              <span className="old">R$ 297</span>
              R$ 197
              <span className="save">-34%</span>
            </div>
            <div style={{fontSize:13, color:'var(--fg-3)'}}>Em até 12x de R$ 19,57 sem juros</div>
            <button className="hw-buy">Comprar agora →</button>
            <div className="hw-trust">
              <span>🔒 SSL</span><span>📦 Frete grátis</span><span>↩ 7 dias</span>
            </div>
          </div>
        </div>
      </div>
      {/* Checkout side */}
      <div className="hw-checkout">
        <div className="hw-checkout-badge">⚡ Checkout Velory</div>
        <h4>Checkout — passo 3 de 3</h4>
        <div className="hw-step done"><span className="ico">✓</span><span>Identificação · ana@email.com</span></div>
        <div className="hw-step done"><span className="ico">✓</span><span>Entrega · CEP 04538-132</span></div>
        <div className="hw-step active"><span className="ico">3</span><span>Pagamento</span></div>
        <div className="hw-pay-methods">
          <div className="hw-pay sel">PIX</div>
          <div className="hw-pay">Cartão</div>
          <div className="hw-pay">Boleto</div>
        </div>
        <input className="hw-input" placeholder="Confirme seu nome completo" defaultValue="Ana C. Ribeiro"/>
        <input className="hw-input" placeholder="CPF" defaultValue="•••.•••.•••-42"/>
        <div className="hw-summary"><span>Total</span><span className="total">R$ 197,00</span></div>
        <button className="hw-pay-cta">Pagar com PIX agora</button>
        <div className="hw-conv-tag">↑ 23% de conversão vs checkout externo</div>
      </div>
    </div>
  </div>
);

const Hero = ({ headline, cta }) => {
  const ctaCfg = CTA_VARIANTS[cta];
  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="hero-grid-bg"/>
      <div className="hero-glow"/>
      <div className="container hero-inner">
        <span className="hero-tag">
          <span className="pill">NOVO</span>
          Powered by Velory Pagamentos
        </span>
        <HeroTitle variant={headline} />
        <HeroSub variant={headline} />
        <div className="hero-cta-row">
          <a href="/cadastro" className="btn btn-primary btn-xl">
            🚀 {ctaCfg.label}
          </a>
          <a href="#solucao" className="btn btn-ghost btn-xl">Ver como funciona</a>
        </div>
        <div className="hero-meta">
          <span><Icon.Check style={{color:'var(--money)'}}/> Sem cartão de crédito</span>
          <span><Icon.Check style={{color:'var(--money)'}}/> Sem mensalidade</span>
          <span><Icon.Check style={{color:'var(--money)'}}/> Pronta em minutos</span>
        </div>
        <HeroWindow/>
      </div>
    </section>
  );
};

// ─── Marquee ──────────────────────────────────────────────
const Marquee = () => {
  const items = [
    'Velocidade real', 'Infra brasileira', 'Checkout integrado',
    'Zero mensalidade', 'Suporte em PT-BR', 'Calibrado pro tráfego pago',
    'PIX • Cartão • Boleto', '1-clique de instalação'
  ];
  const row = [...items, ...items, ...items];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {row.map((t,i) => (
          <span key={i}><Icon.Bolt style={{width:11,height:11,color:'var(--accent)'}}/> {t}<span className="sep" style={{marginLeft:48}}>///</span></span>
        ))}
      </div>
    </div>
  );
};

// ─── Value Prop / Receipt ────────────────────────────────
const ValueProp = () => (
  <section className="pv" data-screen-label="02 Proposta">
    <div className="container">
      <div className="pv-grid">
        <div>
          <span className="section-tag"><span className="num">01 //</span> A conta da escala</span>
          <h2 className="section-h">A conta de toda escala é a <em style={{fontStyle:'italic', color:'var(--accent)'}}>mesma</em>.</h2>
          <p className="section-sub" style={{marginBottom:24}}>
            Você gasta R$ 50 mil em ads no mês, paga mensalidade em dólar, paga checkout externo que come 2% por venda — e ainda assim a loja cai numa madrugada de pico.
          </p>
          <p className="section-sub" style={{color:'var(--fg-2)'}}>
            A VeloFy nasceu pra acabar com essa engenharia frágil. Construtor + checkout próprio na <strong style={{color:'var(--fg)'}}>mesma infra</strong>, no mesmo painel, mantida pela mesma empresa.
          </p>
          <p className="section-sub" style={{marginTop:24, color:'var(--fg-3)'}}>
            Sem gambiarra entre 3 fornecedores gringos. Sem mensalidade. Sem checkout terceirizado mordendo sua margem.
          </p>
        </div>
        <div className="pv-receipt" aria-label="Recibo: o que você paga hoje">
          <h4>// Sua conta de hoje · R$ 50k em ads/mês</h4>
          <div className="pv-line"><span>Shopify Advanced (USD 399)</span><span className="neg">R$ 2.156,00</span></div>
          <div className="pv-line"><span>Checkout terceirizado (2% de R$ 50k)</span><span className="neg">R$ 1.000,00</span></div>
          <div className="pv-line"><span>App de upsell + order bump</span><span className="neg">R$ 297,00</span></div>
          <div className="pv-line"><span>App de tema customizado</span><span className="neg">R$ 197,00</span></div>
          <div className="pv-line"><span>Domínio + SSL + CDN extra</span><span className="neg">R$ 150,00</span></div>
          <div className="pv-line"><span>1h de loja caída no pico (média)</span><span className="neg">R$ 2.083,00</span></div>
          <div className="pv-total"><span>Vazamento mensal</span><span className="neg">R$ 5.883,00</span></div>
          <div className="pv-stamp">PREJUÍZO</div>
        </div>
      </div>
    </div>
  </section>
);

// ─── Pain ────────────────────────────────────────────────
const PAINS = [
  { ico: <Icon.Server/>, title: 'Loja fora do ar no pico', body: 'Horário de maior CTR, criativo viralizando, e o sistema cai. R$ 2k de ads queimados em 1 hora.' },
  { ico: <Icon.Money/>, title: 'Mensalidade em dólar subindo', body: 'O câmbio sobe, sua mensalidade sobe, e se você não pagar a loja trava no meio da campanha.' },
  { ico: <Icon.Bug/>, title: '2% por venda pro checkout externo', body: 'R$ 100k faturado, R$ 2 mil escorrendo pra app de checkout — sem você ver nada a mais por isso.' },
  { ico: <Icon.Headset/>, title: 'Suporte gringo em 48h', body: 'Você abre ticket em inglês, recebe script genérico dois dias depois — quando a venda já foi.' },
  { ico: <Icon.Gauge/>, title: 'Loja lenta no celular', body: '3s a mais de carregamento e o ROAS do seu criativo bom desaba. Mas o tema gringo é "moderno".' },
  { ico: <Icon.Clock/>, title: 'Checkout cai sozinho', body: 'Você acorda, abre o painel, e descobre que ficou 4 horas sem vender — ninguém te avisou.' },
];

const Pain = () => (
  <section data-screen-label="03 Dor">
    <div className="container">
      <span className="section-tag"><span className="num">02 //</span> Se você escala em tráfego pago</span>
      <h2 className="section-h">Provavelmente já passou por isso.</h2>
      <div className="pain-grid">
        {PAINS.map((p,i) => (
          <div key={i} className="pain-card">
            <div className="icon">{p.ico}</div>
            <h3>{p.title}</h3>
            <p>{p.body}</p>
          </div>
        ))}
      </div>
      <div className="pain-callout">
        Você não tá construindo um negócio. Tá administrando uma <span style={{color:'var(--accent)'}}>corrente de pontos de falha</span> que alguém te vende.
      </div>
    </div>
  </section>
);

// ─── Solution ─────────────────────────────────────────────
const Solution = () => (
  <section id="solucao" className="sol" data-screen-label="04 Solução">
    <div className="container">
      <span className="section-tag"><span className="num">03 //</span> Apresentação da solução</span>
      <h2 className="section-h">Construtor + checkout, <span style={{color:'var(--accent)', fontStyle:'italic'}}>na mesma plataforma</span>, mantidos pelo mesmo time.</h2>
      <p className="section-sub">
        Não é Shopify com plugin parafusado. Não é Cartpanda atrás de Shopify atrás de app de tema atrás de domínio em outro lugar. É uma plataforma só — do mesmo time que mantém a Velory Pagamentos, gateway que já roda milhões em GMV no mercado brasileiro de resposta direta.
      </p>

      <div className="sol-arch">
        <div className="sol-side bad">
          <h4>// Como é hoje</h4>
          <div className="arch-stack">
            <div className="arch-node"><span className="dot"/> Plataforma de loja (USD)</div>
            <div className="arch-arrow">↓ chamada API</div>
            <div className="arch-node"><span className="dot"/> App de tema customizado</div>
            <div className="arch-arrow">↓ chamada API</div>
            <div className="arch-node"><span className="dot"/> App de checkout terceirizado</div>
            <div className="arch-arrow">↓ chamada API</div>
            <div className="arch-node"><span className="dot"/> Gateway de pagamento</div>
            <div className="arch-arrow">↓ chamada API</div>
            <div className="arch-node"><span className="dot"/> Antifraude separado</div>
          </div>
          <div className="arch-fail">⚠ 5 fornecedores · 4 SLAs diferentes · 1 ponto de falha em cada salto</div>
        </div>
        <div className="sol-side good">
          <h4>// Como vira na VeloFy</h4>
          <div className="arch-stack">
            <div className="arch-node"><span className="dot ok"/> Construtor de loja</div>
            <div className="arch-node"><span className="dot ok"/> Tema otimizado pra DR</div>
            <div className="arch-node"><span className="dot ok"/> Checkout integrado nativo</div>
            <div className="arch-node"><span className="dot ok"/> Gateway Velory</div>
            <div className="arch-node"><span className="dot ok"/> Antifraude do mesmo time</div>
          </div>
          <div className="arch-mono">
            <div className="label">Resultado</div>
            <div className="title">1 plataforma · 1 SLA · 1 painel</div>
            <div className="sub">Cai junto ou fica em pé junto — e a gente fica em pé.</div>
          </div>
        </div>
      </div>

      <div className="sol-three">
        <div className="sol-stat">
          <div className="num">0ms</div>
          <div className="title">Velocidade real</div>
          <div className="desc">Sem chamada de API entre 3 sistemas no momento do "Comprar".</div>
        </div>
        <div className="sol-stat">
          <div className="num">1 SLA</div>
          <div className="title">Estabilidade</div>
          <div className="desc">Uma equipe, uma infra. Quando seu checkout e sua loja moram debaixo do mesmo teto, tudo é mais simples.</div>
        </div>
        <div className="sol-stat">
          <div className="num">+%</div>
          <div className="title">Conversão maior</div>
          <div className="desc">Checkout calibrado pro tráfego pago brasileiro — não pro shopper americano.</div>
        </div>
      </div>
    </div>
  </section>
);

window.VFTop = { Nav, Hero, Marquee, ValueProp, Pain, Solution, Icon, HEADLINES, CTA_VARIANTS };