/* global React, ReactDOM, TweaksPanel, TweakSection, TweakRadio, useTweaks */
const { useEffect } = React;

/* ============================================================
   Tweakable defaults
   ============================================================ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "dark"
}/*EDITMODE-END*/;

/* ============================================================
   Mockup: PDV
   ============================================================ */
function PosMockup() {
  return (
    <div className="mock-pos">
      <div className="titlebar">
        <div className="dots"><span className="dot"/><span className="dot"/><span className="dot"/></div>
        <span className="label">zenkia · pdv · loja centro</span>
      </div>
      <div className="body">
        <div className="catalog">
          <div className="cat-head">
            <h4>Catálogo</h4>
            <span className="pill">42 itens</span>
          </div>
          <div className="items">
            <div className="item"><span>Café 250g</span><span className="price">R$ 28,90</span></div>
            <div className="item sel"><span>Pão artesanal</span><span className="price">R$ 14,00</span></div>
            <div className="item"><span>Queijo minas</span><span className="price">R$ 32,50</span></div>
            <div className="item"><span>Geleia 200g</span><span className="price">R$ 18,90</span></div>
            <div className="item sel"><span>Suco natural</span><span className="price">R$ 9,50</span></div>
            <div className="item"><span>Granola</span><span className="price">R$ 22,00</span></div>
          </div>
        </div>
        <div className="cart">
          <h4>Venda #2841</h4>
          <div className="cart-row">
            <div>Pão artesanal <span className="qty">×2</span></div>
            <div className="pr">R$ 28,00</div>
          </div>
          <div className="cart-row">
            <div>Suco natural <span className="qty">×1</span></div>
            <div className="pr">R$ 9,50</div>
          </div>
          <div className="cart-row">
            <div>Café 250g <span className="qty">×1</span></div>
            <div className="pr">R$ 28,90</div>
          </div>
          <div className="totals">
            <div className="tr"><span>Subtotal</span><span>R$ 66,40</span></div>
            <div className="tr"><span>Desconto fidelidade</span><span>− R$ 4,00</span></div>
            <div className="total">
              <span>Total</span>
              <span className="v">R$ 62,40</span>
            </div>
            <button className="pay-btn">
              <span>Cobrar (Pix)</span>
              <span className="price-out">R$ 62,40</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   Hero variations
   ============================================================ */
function HeroSplit() {
  return (
    <div className="hero-split">
      <div className="copy">
        <div className="eyebrow" style={{ marginBottom: 24 }}>Sistema completo para o comércio</div>
        <h1 className="h-display h1">
          PDV, gestão e atendimento com IA.
          <span className="sub">Seu balcão inteiro num só sistema.</span>
        </h1>
        <p className="lead">
          Venda no balcão, atenda no WhatsApp com IA e acompanhe tudo do celular.
          Feito pra lojas, restaurantes e pequenos comércios brasileiros que querem
          vender mais sem se perder em planilha.
        </p>
        <div className="cta-row">
          <a href="#contato" className="btn btn-primary">
            Agendar demonstração <span className="arrow">→</span>
          </a>
          <a href="#produtos" className="btn btn-ghost">Ver produtos</a>
        </div>
        <div className="hero-meta-row">
          <span><span className="ok"/> 14 dias grátis</span>
          <span>Sem cartão</span>
          <span>Suporte humano</span>
        </div>
      </div>
      <div className="stage"><PosMockup /></div>
    </div>
  );
}

function HeroEditorial() {
  return (
    <div className="hero-editorial">
      <div className="eyebrow" style={{ marginBottom: 28, justifyContent: "center" }}>
        Sistema completo para o comércio
      </div>
      <h1 className="h-display h1">
        Todo o seu balcão em <span className="muted">um só sistema. Com IA inclusa.</span>
      </h1>
      <p className="lead">
        PDV, gestão, atendimento por IA no WhatsApp e relatórios. Feito pra lojas,
        restaurantes e pequenos comércios brasileiros.
      </p>
      <div className="cta-row">
        <a href="#contato" className="btn btn-primary">
          Agendar demonstração <span className="arrow">→</span>
        </a>
        <a href="#produtos" className="btn btn-ghost">Ver produtos</a>
      </div>
      <div className="hero-meta-row" style={{ justifyContent: "center", marginBottom: 56 }}>
        <span><span className="ok"/> 14 dias grátis</span>
        <span>Sem cartão</span>
        <span>Suporte humano</span>
      </div>
      <div className="stage" style={{ maxWidth: 760, margin: "0 auto" }}>
        <PosMockup />
      </div>
    </div>
  );
}

function HeroAsym() {
  return (
    <div className="hero-asym">
      <div className="copy">
        <div className="eyebrow" style={{ marginBottom: 24 }}>Sistema completo para o comércio</div>
        <h1 className="h-display h1">
          Menos planilha.<br/>
          Mais <span className="ac">venda.</span><br/>
          Mais IA.
        </h1>
        <p className="lead">
          PDV, gestão, atendimento por IA no WhatsApp e relatórios. Feito pra lojas,
          restaurantes e pequenos comércios brasileiros.
        </p>
        <div className="cta-row">
          <a href="#contato" className="btn btn-primary">
            Agendar demonstração <span className="arrow">→</span>
          </a>
          <a href="#produtos" className="btn btn-ghost">Ver produtos</a>
        </div>
      </div>
      <div className="stage"><PosMockup /></div>
      <div className="metrics">
        <div className="metric">
          <div className="v">1<span className="unit"> sistema</span></div>
          <div className="l">PDV, gestão, IA e BI juntos</div>
        </div>
        <div className="metric">
          <div className="v">14<span className="unit"> dias</span></div>
          <div className="l">Grátis pra testar. Sem cartão.</div>
        </div>
        <div className="metric">
          <div className="v">1<span className="unit"> sem</span></div>
          <div className="l">Do contrato à primeira venda</div>
        </div>
      </div>
    </div>
  );
}

function HeroDark() {
  return (
    <div className="hero-dark">
      <div className="hero-grid" aria-hidden="true" />
      <div className="eyebrow" style={{ marginBottom: 28, justifyContent: "center" }}>
        Para comércios que querem vender sem perder o controle
      </div>
      <h1 className="h-display h1">
        Venda mais com caixa, estoque e IA trabalhando juntos.
        <span className="sub">Tudo conectado para sua equipe atender melhor e você controlar cada venda.</span>
      </h1>
      <p className="lead">
        A Zenkia une PDV, gestão, fiscal, relatórios e atendimento no WhatsApp
        para sua equipe vender melhor hoje e você enxergar o negócio em tempo real.
      </p>
      <div className="cta-row">
        <a href="#contato" className="btn btn-primary">
          Quero ver a Zenkia na minha loja <span className="arrow">→</span>
        </a>
        <a href="#produtos" className="btn btn-ghost-dark">Ver o que está incluso</a>
      </div>
      <div className="hero-meta-row" style={{ justifyContent: "center", marginBottom: 56 }}>
        <span><span className="ok" /> Demonstração com especialista</span>
        <span>Implantação assistida</span>
        <span>Suporte humano</span>
      </div>
      <div className="hero-action" aria-label="Fluxo operacional da Zenkia">
        <div className="action-rail rail-top" aria-hidden="true" />
        <div className="action-rail rail-bottom" aria-hidden="true" />
        <div className="action-node node-pdv">
          <span className="node-k">PDV</span>
          <strong>Venda #2841</strong>
          <span>Pix aprovado · R$ 62,40</span>
        </div>
        <div className="action-node node-ia">
          <span className="node-k">IA</span>
          <strong>Pedido no WhatsApp</strong>
          <span>Estoque consultado · cliente avisado</span>
        </div>
        <div className="action-console">
          <div className="console-top">
            <span>zenkia · operação ao vivo</span>
            <span className="live-dot">online</span>
          </div>
          <div className="console-metrics">
            <div>
              <span className="m-label">Hoje</span>
              <strong>R$ 8.420</strong>
              <span className="m-delta">+12,4%</span>
            </div>
            <div>
              <span className="m-label">Pedidos</span>
              <strong>184</strong>
              <span className="m-delta">32 via IA</span>
            </div>
            <div>
              <span className="m-label">Estoque</span>
              <strong>97%</strong>
              <span className="m-delta">2 alertas</span>
            </div>
          </div>
          <div className="console-feed">
            <span style={{ "--w": "86%" }}><em>PDV sincronizado</em></span>
            <span style={{ "--w": "64%" }}><em>NFC-e autorizada</em></span>
            <span style={{ "--w": "74%" }}><em>Reposição prevista</em></span>
          </div>
        </div>
        <div className="action-node node-bi">
          <span className="node-k">BI</span>
          <strong>Alerta de margem</strong>
          <span>Café 250g subiu 4,1 pp</span>
        </div>
        <div className="action-node node-fiscal">
          <span className="node-k">Fiscal</span>
          <strong>NFC-e autorizada</strong>
          <span>SEFAZ online · 2 min atrás</span>
        </div>
      </div>
      <div className="hero-logos">
        <span className="hero-logos-label">Integra com</span>
        <div className="hero-logos-list">
          <span className="hero-logo-chip">Pix</span>
          <span className="hero-logo-chip">WhatsApp Business</span>
          <span className="hero-logo-chip">iFood</span>
          <span className="hero-logo-chip">Stone</span>
          <span className="hero-logo-chip">Mercado Livre</span>
          <span className="hero-logo-chip">SEFAZ</span>
          <span className="hero-logo-chip">Santander</span>
          <span className="hero-logo-chip">+ 30 mais</span>
        </div>
      </div>
    </div>
  );
}

function Hero({ layout }) {
  if (layout === "dark") return <HeroDark />;
  if (layout === "editorial") return <HeroEditorial />;
  if (layout === "asym") return <HeroAsym />;
  return <HeroSplit />;
}

/* ============================================================
   App
   ============================================================ */
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const isDark = t.heroLayout === "dark";

  return (
    <>
      <section
        className={`hero-wrap${isDark ? " dark" : " container"}`}
        data-screen-label="01 Hero"
      >
        {isDark
          ? <div className="container"><Hero layout={t.heroLayout} /></div>
          : <Hero layout={t.heroLayout} />
        }
      </section>
      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero">
          <TweakRadio
            label="Layout"
            value={t.heroLayout}
            options={[
              { value: "dark", label: "Escuro" },
              { value: "split", label: "Split" },
              { value: "editorial", label: "Centrado" },
              { value: "asym", label: "Assimétrico" },
            ]}
            onChange={v => setTweak("heroLayout", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("hero-root")).render(<App />);