const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "A",
  "accent": "#00c26e",
  "showUrgency": true,
  "brand": "Benetoli",
  "whatsapp": "5541992132914",
  "whatsappDisplay": "(41) 9 9213-2914"
} /*EDITMODE-END*/;

// Build a wa.me URL with optional prefilled message
window.waLink = (number, msg) => {
  const n = String(number || '').replace(/\D/g, '');
  const base = `https://wa.me/${n}`;
  return msg ? `${base}?text=${encodeURIComponent(msg)}` : base;
};
const waLink = window.waLink;

const HEADLINES = {
  A: {
    eyebrow: "Distribuidor autorizado Empower",
    h1: <>Peças <span className="hl">originais</span> para cabeçote Raytools com certificado de fábrica</>,
    sub: "Somos distribuidores autorizados e certificados pela Empower — fabricante dos cabeçotes Raytools. Part numbers idênticos ao fabricante, garantia de compatibilidade e suporte técnico direto."
  },
  B: {
    eyebrow: "Máquina parada? Resolvemos hoje",
    h1: <>Seu cabeçote Raytools parou? <span className="hl">Peça original</span> com garantia de 1 ano, saindo hoje.</>,
    sub: "Estoque próprio em São Paulo. Envio imediato, part number conferido e suporte técnico direto com quem entende do produto. Sem retrabalho, sem surpresa."
  },
  C: {
    eyebrow: "Chega de peça paralela",
    h1: <>Chega de peça paralela queimando seu cabeçote Raytools. Aqui é <span className="hl">original</span>, certificado Empower.</>,
    sub: "Cada peça que sai daqui tem certificado de origem da fábrica e part number idêntico ao do fabricante. Quando você compra original, o cabeçote dura."
  }
};

function Topbar() {
  return (
    <div className="topbar">
      <div className="container topbar-row">
        <div className="topbar-left">
          <span className="topbar-tag"><span className="topbar-dot"></span> Distribuidor Empower Autorizado</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><Icon.Pin /> Curitiba - PR</span>
        </div>
        <div style={{ display: 'flex', gap: 18, alignItems: 'center' }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><Icon.Phone /> +55 (41) 99213-2914</span>
          <span style={{ color: 'var(--text-3)' }}>Seg–Sex · 8h–18h</span>
        </div>
      </div>
    </div>);

}

function Nav({ brand }) {
  return (
    <nav className="nav">
      <div className="container nav-row">
        <a href="#top" className="logo logo-wm">
          <img src="assets/logo-benetoli.png" alt={brand} className="logo-img" />
          <span className="logo-divider"></span>
          <img src="assets/raytools-logo.png" alt="Raytools" className="logo-partner" title="Distribuidor autorizado Raytools / Empower" />
        </a>
        <div className="nav-links">
          <a href="#produtos">Produtos</a>
          <a href="#beneficios">Por que original</a>
          <a href="#garantia">Garantia</a>
          <a href="#faq">FAQ</a>
          <a href="#orcamento">Contato</a>
        </div>
        <a href="#orcamento" className="btn btn-primary">Solicitar orçamento <Icon.Arrow /></a>
      </div>
    </nav>);

}

function Hero({ variant }) {
  const h = HEADLINES[variant] || HEADLINES.A;
  const videoRef = useRef(null);
  useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    v.muted = true;
    v.defaultMuted = true;
    const p = v.play();
    if (p && p.catch) p.catch(() => {});
  }, []);
  return (
    <section id="top" className="hero">
      <div className="container hero-grid" style={{ height: "590px" }}>
        <div>
          <h1 className="display">{h.h1}</h1>
          <p className="hero-sub">{h.sub}</p>
          <div className="hero-cta">
            <a href="#orcamento" className="btn btn-primary btn-lg">Solicitar orçamento agora <Icon.Arrow /></a>
            <a href="#produtos" className="btn btn-ghost btn-lg">Ver produtos</a>
          </div>
          <div className="hero-meta">
            <span className="hero-meta-item"><Icon.Check /> Envio imediato</span>
            <span className="hero-meta-item"><Icon.Check /> Garantia de 1 ano</span>
            <span className="hero-meta-item"><Icon.Check /> Boleto facilitado</span>
            <span className="hero-meta-item"><Icon.Check /> Part number do fabricante</span>
          </div>
        </div>
        <div className="hero-visual">
          <span className="hv-corner tl"></span><span className="hv-corner tr"></span>
          <span className="hv-corner bl"></span><span className="hv-corner br"></span>
          <span className="hv-tag">Original · Empower</span>
          <div className="hv-body hv-body-video">
            <video ref={videoRef} className="hv-video" autoPlay muted loop playsInline preload="auto" src="assets/hero-loop.mp4"></video>
          </div>
          <div className="hv-foot">
            <div><span className="lbl">Part Number</span><strong>120AG0800A</strong></div>
            <div><span className="lbl">Garantia</span><strong>12 meses</strong></div>
            <div><span className="lbl">Estoque</span><strong style={{ color: 'var(--accent)' }}>Disponível</strong></div>
          </div>
        </div>
      </div>
    </section>);

}

function Stats() {
  const items = [
  { n: "+100", l: "Clientes ativos" },
  { n: "100%", l: "Part numbers de fábrica" },
  { n: "1 ano", l: "Garantia em todas peças" },
  { n: "24h", l: "Envio quando em estoque" }];

  return (
    <section className="stats">
      <div className="container stats-grid">
        {items.map((s, i) =>
        <div key={i}>
            <div className="stat-num">{s.n}</div>
            <div className="stat-lbl">{s.l}</div>
          </div>
        )}
      </div>
    </section>);

}

function Ticker() {
  const items = ["Bicos", "Lentes", "Conjunto montado", "Cabeçote completo", "Servo driver", "Servo motor", "Sensores capacitivos", "Anéis cerâmicos", "TRA", "FERRAMENTAS"];
  return (
    <div className="ticker">
      <div style={{ display: 'flex', gap: 14, animation: 'tick 35s linear infinite' }}>
        {[...items, ...items, ...items].map((t, i) =>
        <span key={i}><span className="dot"></span>{t}</span>
        )}
      </div>
      <style>{`@keyframes tick{to{transform:translateX(-33.33%)}}`}</style>
    </div>);

}

function Pain() {
  const items = [
  { n: "01", t: 'Comprou peça "compatível" e ela não encaixou no cabeçote Raytools.' },
  { n: "02", t: "A máquina ficou parada dias esperando retrabalho ou nova peça." },
  { n: "03", t: "A peça paralela durou semanas — a original duraria meses ou anos." },
  { n: "04", t: "O fornecedor sumiu depois da venda — sem suporte, sem garantia." }];

  return (
    <section className="sec pain">
      <div className="container">
        <div className="sec-head">
          <div className="eyebrow">// A dor que se repete</div>
          <h2>A gente conversa com gerentes e técnicos de manutenção todo dia. E a história se repete muito mais do que deveria.</h2>
          <p>Você sabe o que dói de verdade no chão de fábrica: a máquina parou e cada hora sem produção é prejuízo contado. A primeira reação é buscar a peça mais barata que aparece — e duas semanas depois, o cabeçote Raytools vai junto.</p>
        </div>
        <div className="pain-grid">
          {items.map((it, i) =>
          <div key={i} className="pain-cell">
              <span className="pain-num">{it.n}</span>
              <p>{it.t}</p>
            </div>
          )}
        </div>
        <div className="pain-tail">
          <p><strong style={{ color: 'var(--accent)' }}>Você já passou por algum disso?</strong> Se sim, você sabe o quanto custa escolher errado na hora de comprar peça para o seu cabeçote.</p>
          <a href="#orcamento" className="btn btn-primary">Quero peça original <Icon.Arrow /></a>
        </div>
      </div>
    </section>);

}

function Solution() {
  const points = [
  { n: "01", h: "Part number idêntico", p: "Cada peça que sai daqui tem part number idêntico ao praticado pela fábrica Empower." },
  { n: "02", h: "Certificado verificável", p: "Cada peça tem certificado de origem que você pode verificar antes mesmo de comprar." },
  { n: "03", h: "1 ano de garantia real", p: "Não é promessa de balcão. Se der defeito dentro do prazo, a gente resolve — sem letra miúda." },
  { n: "04", h: "Como identificar original", p: "Temos vídeos mostrando exatamente como reconhecer uma peça original Raytools versus uma paralela." }];

  return (
    <section className="sec">
      <div className="container sol-grid">
        <div>
          <div className="eyebrow">// A solução</div>
          <h2 className="display" style={{ fontSize: 'clamp(28px,3.5vw,44px)', marginTop: 14, lineHeight: 1.05 }}>O problema não é o preço da peça original. É não saber onde encontrar a peça certa, com procedência real.</h2>
          <p style={{ color: 'var(--text-2)', fontSize: 16, lineHeight: 1.55, marginTop: 18 }}>Somos distribuidores oficiais certificados pela <strong style={{ color: 'var(--text)' }}>Empower</strong> — o fabricante dos cabeçotes Raytools, os mais utilizados em máquinas de corte laser no Brasil pelo seu custo-benefício.</p>
          <p style={{ color: 'var(--text-2)', fontSize: 14, lineHeight: 1.55, marginTop: 16, fontStyle: 'italic' }}>Quem trabalha sério, comprova.</p>
        </div>
        <div className="sol-points">
          {points.map((it, i) =>
          <div key={i} className="sol-point">
              <span className="sp-num">{it.n}</span>
              <p><strong>{it.h}.</strong> {it.p}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function Benefits() {
  const items = [
  { ico: Icon.Shield, t: "Cabeçote operando sem surpresa", p: "Peça com certificado Empower significa compatibilidade garantida com o Raytools. Sem risco de dano por incompatibilidade." },
  { ico: Icon.Clock, t: "1 ano de garantia real", p: "Se der problema, a gente resolve. Não some depois da venda. Garantia de fábrica, registrada." },
  { ico: Icon.Truck, t: "Envio imediato", p: "Quando tem em estoque, você não para a linha esperando semanas. Pediu pela manhã, sai no mesmo dia." },
  { ico: Icon.Tag, t: "Part number idêntico", p: "Zero dúvida sobre qual peça é a certa para o seu cabeçote Raytools. Conferimos antes de despachar." },
  { ico: Icon.Card, t: "Pagamento facilitado", p: "Boleto bancário sem complicação burocrática para liberar a compra. Faturamos para pessoa jurídica." },
  { ico: Icon.Headset, t: "Suporte técnico direto", p: "Você fala com quem entende do produto — não com atendente de script. Dúvida antes da compra? A gente ajuda." },
  { ico: Icon.Coin, t: "Economia a longo prazo", p: "Peça original dura até 10x mais que paralela. O barato sai caro — e você já sabe disso." }];

  return (
    <section id="beneficios" className="sec" style={{ background: 'var(--bg-2)', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }}>
      <div className="container">
        <div className="sec-head">
          <div className="eyebrow">// Por que comprar com a gente</div>
          <h2>Sete razões pelas quais comprar original com distribuidor certificado <span style={{ color: 'var(--accent)' }}>sempre sai mais barato</span>.</h2>
        </div>
        <div className="ben-grid">
          {items.map((b, i) => {
            const I = b.ico;
            return (
              <div key={i} className="ben">
                <div className="ben-icon"><I /></div>
                <h3>{b.t}</h3>
                <p>{b.p}</p>
              </div>);

          })}
        </div>
      </div>
    </section>);

}

function Offer() {
  return (
    <section id="produtos" className="sec offer">
      <div className="container">
        <div className="sec-head">
          <div className="eyebrow">// O que você leva</div>
          <h2>Linha completa de peças originais Empower para todos os modelos de cabeçote Raytools.</h2>
          <p>De bico a cabeçote completo. Todas as peças com certificado de fábrica, part number conferido e 1 ano de garantia.</p>
        </div>
        <div className="offer-grid">
          <div className="offer-card">
            <h3>Linha de peças</h3>
            <ul className="offer-list">
              {[
              ["Bicos (todos os modelos)", "Cortes finos a chapa pesada"],
              ["Lentes de foco e colimação", "Sílica fundida, tratamento anti-reflexivo"],
              ["Conjuntos montados", "Pronto para instalação"],
              ["Cabeçote completo Raytools", "BM110, BM111, BM06K, BS06K"],
              ["Servo driver e servo motor", "Reposição e upgrade"],
              ["Sensores capacitivos", "Fotoelétricos, 90 graus e engate rápido"]].
              map((x, i) =>
              <li key={i}>
                  <span className="li-check"><Icon.CheckFill /></span>
                  <div><strong>{x[0]}</strong><span>{x[1]}</span></div>
                </li>
              )}
            </ul>
            <div className="offer-stock">
              <div>Estoque próprio<b>Envio imediato</b></div>
              <div>Sob encomenda<b>Prazo de 15 dias</b></div>
              <div>Pagamento<b>Boleto facilitado</b></div>
            </div>
          </div>
          <div className="offer-card featured">
            <h3>Todo pedido vem com</h3>
            <ul className="offer-list">
              {[
              ["Certificado de origem Empower", "Procedência verificável, sem achismo"],
              ["Part number idêntico ao fabricante", "Conferimos antes de despachar"],
              ["1 ano de garantia real", "Se der defeito, a gente resolve"],
              ["Suporte técnico direto", "Fala com quem entende do Raytools"],
              ["Vídeos de identificação", "Aprenda a nunca mais ser enganado"],
              ["Nota fiscal para faturamento", "Pessoa jurídica, sem complicação"]].
              map((x, i) =>
              <li key={i}>
                  <span className="li-check"><Icon.CheckFill /></span>
                  <div><strong>{x[0]}</strong><span>{x[1]}</span></div>
                </li>
              )}
            </ul>
            <a href="#orcamento" className="btn btn-primary btn-block btn-lg" style={{ marginTop: 'auto' }}>Quero minha peça original hoje <Icon.Arrow /></a>
          </div>
        </div>
      </div>
    </section>);

}

function Proof() {
  return (
    <section className="sec proof">
      <div className="container proof-grid">
        <div className="proof-head">
          <div className="eyebrow">// Prova com documento</div>
          <h2>Você não precisa acreditar na nossa palavra.</h2>
          <p>Esta é uma <strong style={{ color: 'var(--text)' }}>fatura comercial oficial da Empower/Raytools</strong> emitida diretamente para a Benetoli — mesma documentação que sai da fábrica em Shanghai, com part numbers, valores em USD e códigos HS de cada peça.</p>
          <p>Quando você compra com a gente, recebe a peça com esse rastro de origem. Quem trabalha sério, comprova.</p>
          <ul className="proof-checks">
            <li><Icon.Check s={16} /> Fatura comercial direto do fabricante</li>
            <li><Icon.Check s={16} /> Part numbers conferíveis no site oficial Raytools</li>
            <li><Icon.Check s={16} /> Certificado de origem enviado a cada pedido</li>
            <li><Icon.Check s={16} /> Vídeo da operação no topo desta página</li>
          </ul>
          <a href="#orcamento" className="btn btn-primary" style={{ marginTop: 28 }}>Solicitar orçamento com certificado <Icon.Arrow /></a>
        </div>
        <div className="proof-invoice">
          <img src="assets/invoice-header.png" alt="Fatura comercial Empower/Raytools para Benetoli" className="proof-invoice-img" />
          <div className="proof-invoice-cap">FATURA COMERCIAL · EMPOWER TECHNOLOGIES (SHANGHAI) → BENETOLI</div>
        </div>
      </div>
    </section>);

}

function Testimonials() {
  const t = [
  { n: "Marcos R.", r: "Gerente de Manutenção · Metalúrgica · Diadema/SP", q: "Comprei o bico e o conjunto pela manhã, chegou no dia seguinte. Encaixou perfeito, sem retrabalho. A máquina voltou a operar no mesmo turno.", i: "MR" },
  { n: "Carlos S.", r: "Sócio · Indústria de corte · Joinville/SC", q: "Antes eu comprava paralela e queimava cabeçote a cada 4 meses. Mudei para original aqui, faz mais de um ano que não tenho um problema sequer. Conta sozinho.", i: "CS" },
  { n: "Eduardo P.", r: "Manutenção mecânica · Caxias do Sul/RS", q: "O atendimento é direto, fala com quem entende. Tirei dúvida do part number por WhatsApp, mandaram o certificado antes da compra. Confiança total.", i: "EP" }];

  return (
    <section className="sec">
      <div className="container">
        <div className="sec-head">
          <div className="eyebrow">// O que dizem nossos clientes</div>
          <h2>Quem comprou voltou — e mandou o engenheiro do lado pedir também.</h2>
        </div>
        <div className="tst-grid">
          {t.map((x, i) =>
          <div key={i} className="tst">
              <p className="tst-quote">{x.q}</p>
              <div className="tst-meta">
                <div className="tst-avatar">{x.i}</div>
                <div>
                  <p className="tst-name">{x.n}</p>
                  <p className="tst-role">{x.r}</p>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function Guarantee({ showUrgency }) {
  return (
    <section id="garantia" className="sec gar">
      <div className="container">
        <div className="gar-grid">
          <div className="gar-seal">
            <div className="gar-seal-inner">
              <div className="big">1<span style={{ fontSize: 18, verticalAlign: 'top', marginLeft: 4 }}>ANO</span></div>
              <div className="small">GARANTIA · EMPOWER</div>
            </div>
          </div>
          <div>
            <div className="eyebrow">// Garantia</div>
            <h2>Garantia de 1 ano. Sem letra miúda, sem sumiço, sem "lê o contrato".</h2>
            <p>Todas as nossas peças têm <strong>1 ano de garantia com certificado da fábrica Empower</strong> para cabeçotes Raytools. Se apresentar defeito dentro do prazo, a gente assume.</p>
            <p>Você compra com segurança — ou seu dinheiro volta.</p>
            {showUrgency &&
            <div className="urg">
                <div className="urg-tag">⚠ Estoque limitado para envio imediato</div>
                <p>Peças em estoque saem no mesmo dia do pedido. Itens sob encomenda têm prazo de 21 dias. Se sua máquina está parada agora — solicite o orçamento antes que o item saia do estoque.</p>
              </div>
            }
          </div>
        </div>
      </div>
    </section>);

}

function FAQ() {
  const items = [
  { q: "Vocês atendem cabeçotes Raytools de qualquer marca de máquina?", a: "Sim. O cabeçote Raytools é fabricado pela Empower e instalado em máquinas de diversas marcas. Não importa a marca da sua máquina — se o cabeçote é Raytools, temos as peças certas para ele." },
  { q: "Como comprovar que a peça é original?", a: "Cada peça vem com certificado de origem da fábrica Empower. Todos os part numbers são idênticos aos praticados pelo fabricante. Temos também vídeos mostrando como identificar originalidade — disponíveis antes mesmo da compra." },
  { q: "Qual o prazo de entrega?", a: "Peças em estoque: envio imediato. Peças sob encomenda: 21 dias corridos. O prazo é confirmado antes do fechamento do pedido." },
  { q: "Como funciona o pagamento?", a: "Boleto bancário facilitado. Faturamos para pessoa jurídica. Entre em contato para conversar sobre outras condições." },
  { q: "E se a peça chegar com defeito ou não servir no cabeçote?", a: "1 ano de garantia cobre defeito de fabricação. Garantimos compatibilidade quando o part number do seu cabeçote Raytools é confirmado no pedido. Se der problema, resolvemos sem burocracia." },
  { q: "Tem suporte técnico?", a: "Sim. Você fala diretamente com quem conhece o cabeçote Raytools — não com atendente de script. Dúvida sobre qual peça comprar? A gente ajuda antes da compra." },
  { q: "Vocês vendem só para empresas?", a: "Atendemos principalmente indústrias, gráficas e prestadores de serviço de manutenção com máquinas de corte laser. Entre em contato e vemos a melhor forma de atender você." }];

  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="sec" style={{ background: 'var(--bg-2)', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }}>
      <div className="container" style={{ maxWidth: 900 }}>
        <div className="sec-head" style={{ textAlign: 'center', margin: '0 auto 50px' }}>
          <div className="eyebrow">// Perguntas frequentes</div>
          <h2>Antes mesmo de você perguntar.</h2>
        </div>
        <div className="faq-list">
          {items.map((it, i) =>
          <div key={i} className={"faq-item" + (open === i ? " open" : "")}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="ico"><Icon.Plus /></span>
              </button>
              <div className="faq-a"><div className="faq-a-inner">{it.a}</div></div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function QuoteForm({ whatsapp, whatsappDisplay }) {
  const [submitted, setSubmitted] = useState(false);
  const formRef = useRef(null);
  const submit = (e) => {
    e.preventDefault();
    // Build a clean WhatsApp message from the form fields
    const f = formRef.current;
    if (f) {
      const fd = new FormData(f);
      const lines = [
        '*Orçamento solicitado pelo site*',
        '',
        `*Nome:* ${fd.get('nome') || ''}`,
        `*Empresa:* ${fd.get('empresa') || ''}`,
        `*WhatsApp:* ${fd.get('whatsapp') || ''}`,
        `*E-mail:* ${fd.get('email') || ''}`,
        `*Modelo cabeçote:* ${fd.get('modelo') || ''}`,
        '',
        '*Pedido:*',
        `${fd.get('pedido') || ''}`,
      ].join('\n');
      window.open(waLink(whatsapp, lines), '_blank', 'noopener');
    }
    setSubmitted(true);
  };
  return (
    <section id="orcamento" className="sec quote">
      <div className="container quote-grid">
        <div>
          <div className="eyebrow">// CTA final</div>
          <h2>Seu cabeçote Raytools merece peça com procedência real.</h2>
          <p className="lead">Não o risco de uma paralela que parece barata hoje e cobra caro amanhã — no cabeçote danificado, na produção parada, no cliente perdido.</p>
          <ul className="quote-bullets">
            {["Resposta em até 5 minutos", "Orçamento com part number do fabricante", "Certificado de origem enviado por e-mail", "Frete cotado por região"].map((b, i) =>
            <li key={i}><Icon.Check s={18} /> {b}</li>
            )}
          </ul>
          <div style={{ marginTop: 32, padding: '18px 22px', background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 10, display: 'flex', gap: 16, alignItems: 'center' }}>
            <div style={{ width: 42, height: 42, background: '#25D366', borderRadius: '50%', display: 'grid', placeItems: 'center', color: '#072', flex: 'none' }}><Icon.WhatsApp s={22} /></div>
            <div>
              <div style={{ fontWeight: 600, fontSize: 14 }}>Prefere WhatsApp?</div>
              <a href={waLink(whatsapp)} target="_blank" rel="noopener" style={{ color: 'var(--accent)', fontSize: 13, fontFamily: 'var(--font-mono)' }}>{whatsappDisplay} — clique para chamar</a>
            </div>
          </div>
        </div>
        <div className="quote-card">
          {!submitted ?
          <form ref={formRef} onSubmit={submit}>
              <h3>Solicitar orçamento</h3>
              <p className="sub">Responda em 1 minuto. Retornamos com o orçamento, certificado e prazo.</p>
              <div className="row-2">
                <div className="field">
                  <label>Nome <span className="req">*</span></label>
                  <input name="nome" required placeholder="Seu nome completo" />
                </div>
                <div className="field">
                  <label>Empresa <span className="req">*</span></label>
                  <input name="empresa" required placeholder="Razão social" />
                </div>
              </div>
              <div className="row-2">
                <div className="field">
                  <label>WhatsApp <span className="req">*</span></label>
                  <input name="whatsapp" required placeholder="(11) 9 0000-0000" />
                </div>
                <div className="field">
                  <label>E-mail corporativo</label>
                  <input name="email" type="email" placeholder="voce@empresa.com.br" />
                </div>
              </div>
              <div className="field">
                <label>Modelo do cabeçote Raytools</label>
                <select name="modelo" defaultValue="">
                  <option value="" disabled>Selecione o modelo</option>
                  <option>BT240 / BT240S</option>
                  <option>BT430 / BT430E</option>
                  <option>BM109 / BM110</option>
                  <option>BM114 / BM115</option>
                  <option>BS06K / BS08K</option>
                  <option>Outro / não tenho certeza</option>
                </select>
              </div>
              <div className="field">
                <label>O que você precisa? <span className="req">*</span></label>
                <textarea name="pedido" required placeholder="Ex: 3 bicos 1.5mm, 1 lente de foco 125mm, part number XX-YY se você já tem"></textarea>
              </div>
              <button type="submit" className="btn btn-primary btn-block btn-lg" style={{ marginTop: 6 }}>
                Enviar pedido pelo WhatsApp <Icon.WhatsApp s={16} />
              </button>
              <p className="form-note">ABRE NO SEU WHATSAPP · SEM SPAM · DADOS PROTEGIDOS</p>
            </form> :

          <div className="success show">
              <div className="success-icon"><Icon.WhatsApp s={28} /></div>
              <h3>Pedido enviado!</h3>
              <p>Abrimos o WhatsApp com seu pedido já escrito. É só enviar a mensagem — a equipe responde em até 5 minutos.</p>
              <button onClick={() => setSubmitted(false)} className="btn btn-ghost" style={{ marginTop: 20 }}>Enviar outro pedido</button>
            </div>
          }
        </div>
      </div>
    </section>);

}

function Footer({ brand, whatsapp, whatsappDisplay }) {
  return (
    <footer>
      <div className="container">
        <div className="ft-grid">
          <div className="ft-col">
            <div className="logo logo-wm" style={{ marginBottom: 18 }}>
              <img src="assets/logo-benetoli-white.png" alt={brand} className="logo-img" />
            </div>
            <p style={{ maxWidth: 320, fontSize: 13.5 }}>Distribuidor autorizado certificado pela Empower para peças originais de cabeçote Raytools no Brasil. Suporte técnico direto, garantia real, part number de fábrica.</p>
          </div>
          <div className="ft-col">
            <h4>Produtos</h4>
            <a href="#produtos">Bicos</a>
            <a href="#produtos">Lentes</a>
            <a href="#produtos">Conjunto montado</a>
            <a href="#produtos">Cabeçote completo</a>
            <a href="#produtos">Servo / sensor</a>
          </div>
          <div className="ft-col">
            <h4>Empresa</h4>
            <a href="#beneficios">Por que original</a>
            <a href="#garantia">Garantia</a>
            <a href="#faq">FAQ</a>
            <a href="#orcamento">Contato</a>
          </div>
          <div className="ft-col">
            <h4>Contato</h4>
            <a href={waLink(whatsapp)} target="_blank" rel="noopener"><Icon.WhatsApp s={14} /> {whatsappDisplay}</a>
            <a href={waLink(whatsapp, 'Olá! Gostaria de um orçamento.')} target="_blank" rel="noopener">WhatsApp comercial</a>
            <a href="mailto:lucas@benetolirepresentacoes.com.br">lucas@benetolirepresentacoes.com.br</a>
            <p style={{ fontSize: 13 }}>Curitiba · PR<br />Seg–Sex · 8h às 18h</p>
          </div>
        </div>
        <div className="ft-bottom">
          <div>© 2026 {brand}. CNPJ 54.501.338/0001-56 · Todos os direitos reservados.</div>
          <div className="ft-cert">DISTRIBUIDOR AUTORIZADO EMPOWER · RAYTOOLS</div>
        </div>
      </div>
    </footer>);

}

function WhatsFloat({ whatsapp }) {
  return (
    <a href={waLink(whatsapp, 'Olá! Vim pelo site da Benetoli e gostaria de um orçamento de peças Raytools.')} target="_blank" rel="noopener" className="whats" aria-label="Falar no WhatsApp">
      <Icon.WhatsApp />
    </a>);

}

function Tweaks() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  // Apply accent live
  useEffect(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
    // derive related vars
    const darker = t.accent === '#00c26e' ? '#00a85d' : t.accent === '#ff7a3c' ? '#e0651e' : '#e6a900';
    document.documentElement.style.setProperty('--accent-2', darker);
  }, [t.accent]);

  return (
    <>
      <Topbar whatsapp={t.whatsapp} whatsappDisplay={t.whatsappDisplay} />
      <Nav brand={t.brand} />
      <Hero variant={t.headline} />
      <Ticker />
      <Stats />
      <Pain />
      <Solution />
      <Benefits />
      <Offer />
      <Proof />
      <Testimonials />
      <Guarantee showUrgency={t.showUrgency} />
      <FAQ />
      <QuoteForm whatsapp={t.whatsapp} whatsappDisplay={t.whatsappDisplay} />
      <Footer brand={t.brand} whatsapp={t.whatsapp} whatsappDisplay={t.whatsappDisplay} />
      <WhatsFloat whatsapp={t.whatsapp} />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Headline (A/B/C)" />
        <TweakRadio label="Variação" value={t.headline} onChange={(v) => setTweak('headline', v)} options={[
        { value: 'A', label: 'Autoridade' },
        { value: 'B', label: 'Urgência' },
        { value: 'C', label: 'Paralela' }]
        } />
        <TweakSection label="Aparência" />
        <TweakColor label="Acento" value={t.accent} onChange={(v) => setTweak('accent', v)} options={['#00c26e', '#ff7a3c', '#f5b800', '#3aa0ff']} />
        <TweakToggle label="Mostrar aviso de estoque" value={t.showUrgency} onChange={(v) => setTweak('showUrgency', v)} />
        <TweakSection label="WhatsApp comercial" />
        <TweakText label="Número (DDI+DDD)" value={t.whatsapp} onChange={(v) => setTweak('whatsapp', v.replace(/\D/g, ''))} placeholder="5541999999999" />
        <TweakText label="Exibição" value={t.whatsappDisplay} onChange={(v) => setTweak('whatsappDisplay', v)} placeholder="(41) 9 9999-9999" />
        <TweakSection label="Marca" />
        <TweakText label="Nome" value={t.brand} onChange={(v) => setTweak('brand', v)} placeholder="Nome da marca" />
      </TweaksPanel>
    </>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<Tweaks />);