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

/* ============================================================
   Tweakable defaults
   ============================================================ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "split"
}/*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 em PT-BR</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 em PT-BR</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 Hero({ layout }) {
  if (layout === "editorial") return <HeroEditorial />;
  if (layout === "asym") return <HeroAsym />;
  return <HeroSplit />;
}

/* ============================================================
   App
   ============================================================ */
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  return (
    <>
      <section className="hero-wrap container" data-screen-label="01 Hero">
        <Hero layout={t.heroLayout} />
      </section>
      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero">
          <TweakRadio
            label="Layout"
            value={t.heroLayout}
            options={[
              { 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 />);