// Dentosul Prime — landing page
// Sections: Topbar, Hero, Marquee, Pain, Benefit, Authority, Scarcity, Form, Final CTA, Footer

const { useState, useEffect, useRef, useMemo, useCallback } = React;

const SUPABASE_URL = "https://fstxyeayeudzikylsnyt.supabase.co";
const SUPABASE_ANON_KEY = "sb_publishable_0zS_Txy77mQhNDTdq4co5A_XPtflk1e";

async function supaSubmitLead(payload) {
  const res = await fetch(`${SUPABASE_URL}/rest/v1/rpc/submit_dentosul_lead`, {
    method: 'POST',
    headers: {
      'apikey': SUPABASE_ANON_KEY,
      'Authorization': `Bearer ${SUPABASE_ANON_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(payload),
  });
  if (!res.ok) throw new Error(`Lead submit failed: ${res.status}`);
  return await res.json();
}

async function supaFetchLeadCount() {
  const res = await fetch(`${SUPABASE_URL}/rest/v1/rpc/dentosul_leads_count`, {
    method: 'POST',
    headers: {
      'apikey': SUPABASE_ANON_KEY,
      'Authorization': `Bearer ${SUPABASE_ANON_KEY}`,
      'Content-Type': 'application/json',
    },
    body: '{}',
  });
  if (!res.ok) throw new Error(`Count fetch failed: ${res.status}`);
  return await res.json();
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "gold-script",
  "ctaCopy": "Quero garantir minha vaga",
  "footerVariant": "p2a-detailed",
  "seatsTaken": 32,
  "showFloatingCta": true,
  "showCountdown": true
}/*EDITMODE-END*/;

// ─── Topbar ───────────────────────────────────────────────────────────────
function Topbar({ seatsTaken, isWaitlist }) {
  return (
    <header className="topbar">
      <div className="topbar-inner">
        <a href="#top" style={{display:'flex',alignItems:'center',gap:14,textDecoration:'none'}}>
          <img src="assets/logo-dentosul-prime.png" alt="Dentosul Prime — Clínicas Odontológicas" />
        </a>
        <div className="meta">
          <span className="pulse">
            <i style={isWaitlist ? {background:'#d4b26a',boxShadow:'0 0 12px rgba(212,178,106,.5)'} : null}></i>
            <span className="pulse-text">
              {isWaitlist ? 'Fila de espera aberta' : `${Math.max(0, 50 - seatsTaken)} vagas restantes`}
            </span>
          </span>
          <a href="#cadastro" className="btn-ghost" style={{padding:'10px 16px',fontSize:'10px'}}>
            {isWaitlist ? 'Entrar na fila' : 'Cadastrar'}
          </a>
        </div>
      </div>
    </header>
  );
}

// ─── Hero ─────────────────────────────────────────────────────────────────
function Hero({ variant, ctaCopy, seatsTaken, isWaitlist }) {
  const headlines = {
    'gold-script': (
      <>Sua harmonização <br/><span className="accent">começa</span> com clareza.</>
    ),
    'editorial': (
      <>Uma avaliação <em>séria</em><br/>antes de qualquer<br/><span className="accent">decisão estética.</span></>
    ),
    'direct': (
      <><span className="accent">Avaliação gratuita</span><br/>de harmonização facial<br/>na Dentosul Prime.</>
    ),
  };
  const waitlistHeadline = (
    <>As 50 vagas <em>desta rodada</em><br/>foram preenchidas.<br/><span className="accent">Entre na fila de espera.</span></>
  );
  const remaining = Math.max(0, 50 - seatsTaken);

  return (
    <section className="hero" id="top">
      <div className="hero-bg"></div>
      <div className="hero-grid">
        <div>
          <div style={{display:'inline-flex',alignItems:'center',gap:14,padding:'7px 14px',border:'1px solid var(--line-strong)',background:'rgba(212,178,106,.04)'}}>
            <span style={{width:6,height:6,borderRadius:'50%',background:'var(--gold-3)',boxShadow:'0 0 10px rgba(212,178,106,.6)'}}></span>
            <span className="eyebrow" style={{fontSize:'10px',letterSpacing:'.3em'}}>
              {isWaitlist ? 'Rodada esgotada · Fila de espera aberta' : 'Campanha exclusiva · Apenas 50 vagas'}
            </span>
          </div>

          <h1>{isWaitlist ? waitlistHeadline : (headlines[variant] || headlines['gold-script'])}</h1>

          <p className="lead">
            {isWaitlist ? (
              <>A campanha das <strong style={{color:'var(--gold-3)',fontWeight:500}}>50 vagas mensais</strong> já foi preenchida nesta rodada. Entre agora na <strong style={{color:'var(--gold-3)',fontWeight:500}}>fila de espera oficial</strong> e seja chamado(a) na próxima rodada — abrimos novas 50 vagas todo mês.</>
            ) : (
              <>As <strong style={{color:'var(--gold-3)',fontWeight:500}}>50 primeiras pessoas cadastradas</strong> garantem uma avaliação gratuita de harmonização facial na Dentosul Prime — uma experiência de alto padrão, com tecnologia, acolhimento e orientação profissional.</>
            )}
          </p>

          <div className="ctas">
            <a href="#cadastro" className="btn-gold">
              {isWaitlist ? 'Entrar na fila de espera' : ctaCopy} <span className="arrow">→</span>
            </a>
            <a href="#beneficio" className="btn-ghost">Como funciona</a>
          </div>

          <div className="meta-chips">
            <div className="meta-chip">
              <span>{isWaitlist ? 'Status' : 'Vagas'}</span>
              <strong>{isWaitlist ? 'Esgotadas' : `${remaining} de 50`}</strong>
            </div>
            <div className="meta-chip">
              <span>{isWaitlist ? 'Próxima rodada' : 'Investimento'}</span>
              <strong>{isWaitlist ? 'Em ~30 dias' : 'Cortesia'}</strong>
            </div>
            <div className="meta-chip"><span>Powered by</span><strong>Glow Up System</strong></div>
          </div>
        </div>

        <div className="hero-art">
          <div className="badge-prime">Prime · Experiência VIP</div>
          <div className="portrait">
            <img src="assets/hero-glowup-grid.png" alt="Análise facial Dentosul Prime — proporção, simetria, pontos de avaliação e simulação antes/depois" />
            <div className="portrait-tag">Glow Up System · Análise Facial</div>
          </div>
          <div className="counter-card">
            <div className="label">{isWaitlist ? 'Rodada esgotada' : 'Vagas garantidas'}</div>
            <div>
              <span className="num">{Math.min(seatsTaken, 50)}</span>
              <span className="of">/ 50</span>
            </div>
            <div className="bar"><i style={{width:`${Math.min(100, (seatsTaken/50)*100)}%`}}></i></div>
            <div className="sub">{isWaitlist ? 'Fila de espera aberta · Próxima rodada em ~30 dias' : 'Atualizado em tempo real'}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Marquee ──────────────────────────────────────────────────────────────
function Marquee() {
  const items = [
    "Harmonização facial",
    "Atendimento de alto padrão",
    "Avaliação personalizada",
    "Tecnologia Glow Up",
    "Resultados naturais",
    "Equipe especializada",
  ];
  const doubled = [...items, ...items, ...items, ...items];
  return (
    <div className="marquee" data-screen-label="marquee">
      <div className="marquee-track">
        {doubled.map((t,i) => <span key={i}>{t}</span>)}
      </div>
    </div>
  );
}

// ─── Pain ─────────────────────────────────────────────────────────────────
function Pain() {
  const items = [
    { n:'01', t:'A dúvida do "será que combina comigo?"', s:'Você quer mudar, mas não sabe o que faria sentido para o seu rosto.' },
    { n:'02', t:'O medo de exagerar ou ficar artificial', s:'Sem uma avaliação clara, qualquer decisão vira aposta — e o resultado pesa.' },
    { n:'03', t:'A indecisão que adia mês após mês', s:'Enquanto você posterga, a vontade continua viva e sem direção profissional.' },
  ];
  return (
    <section className="section pain" data-screen-label="pain">
      <div className="container">
        <div className="pain-grid">
          <div>
            <span className="eyebrow">A dor real</span>
            <p className="pain-quote" style={{marginTop:18}}>
              "Quero fazer harmonização facial, <span>mas trava na dúvida.</span><br/>
              No medo. Em não saber por onde começar."
            </p>
            <p style={{marginTop:24,color:'var(--fg-mute)',fontSize:16,lineHeight:1.6,maxWidth:540}}>
              Enquanto você adia, a decisão continua parada. Aqui, você encontra uma avaliação pensada para destravar isso com mais clareza e orientação profissional.
            </p>
          </div>
          <div className="pain-list">
            {items.map(it => (
              <div key={it.n} className="pain-item">
                <div className="num">{it.n}</div>
                <div className="body">
                  {it.t}
                  <small>{it.s}</small>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Benefit ──────────────────────────────────────────────────────────────
function Benefit() {
  const cards = [
    {
      step:'Etapa 01',
      h:'Análise estética personalizada',
      p:'Um olhar profissional sobre as proporções, traços e possibilidades reais para o seu rosto — sem fórmula pronta.',
    },
    {
      step:'Etapa 02',
      h:'Caminhos possíveis, não pacotes',
      p:'Você entende o que faria sentido para o seu caso específico, com clareza sobre cada possibilidade estética.',
    },
    {
      step:'Etapa 03',
      h:'Decisão sem pressão',
      p:'Sem enrolação, sem adivinhação, sem venda agressiva. Você decide com informação e tempo — quando fizer sentido.',
    },
  ];
  return (
    <section className="section benefit" id="beneficio" data-screen-label="benefit">
      <div className="container">
        <div className="sec-head">
          <span className="eyebrow">A oportunidade</span>
          <h2>Uma avaliação criada para mostrar <em>possibilidades reais</em> para o seu rosto.</h2>
          <p>Abordagem elegante, profissional e personalizada. Você entende o que faz sentido para o seu caso — antes de decidir qualquer coisa.</p>
        </div>

        <div className="benefit-grid">
          {cards.map(c => (
            <div className="benefit-card" key={c.step}>
              <span className="step">{c.step}</span>
              <h3>{c.h}</h3>
              <p>{c.p}</p>
            </div>
          ))}
        </div>

        <div className="promise-strip">
          <div className="p-item"><i></i><span>Sem pressão de venda</span></div>
          <div className="p-item"><i></i><span>Sem enrolação</span></div>
          <div className="p-item"><i></i><span>Sem adivinhação</span></div>
          <div className="p-item"><i></i><span>Atendimento de alto padrão</span></div>
        </div>
      </div>
    </section>
  );
}

// ─── Authority ────────────────────────────────────────────────────────────
function Authority() {
  return (
    <section className="section authority" data-screen-label="authority">
      <div className="container">
        <div className="auth-grid">
          <div>
            <span className="eyebrow">Autoridade</span>
            <h2 className="display" style={{fontSize:'clamp(36px,4.6vw,56px)',marginTop:18,marginBottom:24,color:'var(--paper)'}}>
              Mais do que um procedimento.<br/>
              <span className="script" style={{color:'var(--gold-3)'}}>Uma experiência de confiança.</span>
            </h2>
            <p style={{color:'var(--fg-mute)',fontSize:17,lineHeight:1.65,maxWidth:520,margin:0}}>
              A Dentosul Prime entrega uma jornada de alto padrão para quem busca mais do que estética — busca orientação clara, ambiente seguro e um cuidado que se enxerga em cada detalhe.
            </p>

            <div className="stat-grid" style={{marginTop:36}}>
              <div className="stat">
                <div className="n">+9</div>
                <div className="l">Anos de experiência</div>
              </div>
              <div className="stat">
                <div className="n">+5k</div>
                <div className="l">Pacientes atendidos</div>
              </div>
              <div className="stat">
                <div className="n">100%</div>
                <div className="l">Avaliações personalizadas</div>
              </div>
              <div className="stat">
                <div className="n">5★</div>
                <div className="l">Padrão Prime</div>
              </div>
            </div>
          </div>

          <div className="stack-card">
            <span className="pill">
              <span style={{width:5,height:5,borderRadius:'50%',background:'var(--gold-3)'}}></span>
              Ecossistema Prime
            </span>
            <h3>Tecnologia que sustenta a experiência <span className="h3-it">de ponta a ponta.</span></h3>
            <p>O <strong style={{color:'var(--gold-3)',fontWeight:500}}>Glow Up System</strong> orquestra cada etapa da sua jornada — agendamento, prontuário, avaliação e acompanhamento — com inteligência, organização e padrão de clínica premium.</p>

            <div className="partners">
              <div className="partner">
                Dentosul Prime
                <small>Clínica · Atendimento</small>
              </div>
              <div style={{width:1,height:34,background:'var(--line-strong)'}}></div>
              <div className="partner">
                Glow Up System
                <small>Tecnologia · Jornada</small>
              </div>
              <div style={{width:1,height:34,background:'var(--line-strong)'}}></div>
              <div className="partner">
                P2A TECH
                <small>Engenharia · Plataforma</small>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Specialist ───────────────────────────────────────────────────────────
function Specialist({ ctaCopy, isWaitlist }) {
  return (
    <section className="section specialist" data-screen-label="specialist">
      <div className="container">
        <div className="spec-grid">
          <div className="spec-portrait">
            <span className="corner tl"></span>
            <span className="corner tr"></span>
            <span className="corner bl"></span>
            <span className="corner br"></span>
            <div className="frame">
              <img src="assets/dra-renata.png" alt="Dra. Renata Capitão Coimbra — especialista em harmonização facial" />
            </div>
            <div className="spec-name-card">
              <div className="small">Avaliação conduzida por</div>
              <div className="name">Dra. Renata <em>Capitão Coimbra</em></div>
              <div className="small" style={{marginTop:6,letterSpacing:'.18em',display:'flex',alignItems:'center',gap:10,flexWrap:'wrap'}}>
                <span>CRO/RS · 26522</span>
                <span style={{opacity:.4}}>·</span>
                <a
                  href="https://www.instagram.com/dra.renatacapitao/"
                  target="_blank"
                  rel="noopener noreferrer"
                  style={{color:'var(--gold-3)',textDecoration:'none',letterSpacing:'.18em'}}
                >
                  @dra.renatacapitao
                </a>
              </div>
            </div>
          </div>

          <div>
            <span className="eyebrow">Avaliação com a especialista</span>
            <h2 className="display" style={{fontSize:'clamp(34px,4.6vw,54px)',marginTop:18,marginBottom:22,color:'var(--paper)'}}>
              Sua avaliação será conduzida pela{' '}
              <span className="script" style={{color:'var(--gold-3)'}}>Dra. Renata Capitão Coimbra.</span>
            </h2>
            <p style={{color:'var(--fg-mute)',fontSize:17,lineHeight:1.65,margin:'0 0 18px',maxWidth:560}}>
              Com olhar clínico, experiência em harmonização facial e foco em resultados naturais, a Dra. Renata vai analisar seu rosto de forma personalizada para identificar possibilidades que valorizem sua beleza com mais harmonia, equilíbrio e segurança.
            </p>
            <p style={{color:'var(--fg-mute)',fontSize:16,lineHeight:1.65,margin:0,maxWidth:560}}>
              Aqui, você não recebe uma avaliação genérica. Você tem uma <strong style={{color:'var(--gold-3)',fontWeight:500}}>orientação profissional</strong> pensada para mostrar o que faz sentido para o seu caso, com cuidado, precisão e uma experiência de alto padrão.
            </p>

            <div className="spec-creds">
              <div className="spec-cred">
                <div className="v">Olhar clínico</div>
                <div className="k">Análise personalizada</div>
              </div>
              <div className="spec-cred">
                <div className="v">Resultados</div>
                <div className="k">Naturais e elegantes</div>
              </div>
              <div className="spec-cred">
                <div className="v">Alto padrão</div>
                <div className="k">Cuidado e precisão</div>
              </div>
            </div>

            <a href="#cadastro" className="btn-gold">
              {isWaitlist ? 'Entrar na fila da Dra. Renata' : 'Quero minha avaliação com a Dra. Renata'} <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Scarcity ─────────────────────────────────────────────────────────────
function Scarcity({ seatsTaken, showCountdown, isWaitlist }) {
  const [time, setTime] = useState({ d:2, h:14, m:38, s:12 });
  useEffect(() => {
    const id = setInterval(() => {
      setTime(t => {
        let s = t.s - 1, m = t.m, h = t.h, d = t.d;
        if (s < 0) { s = 59; m -= 1; }
        if (m < 0) { m = 59; h -= 1; }
        if (h < 0) { h = 23; d -= 1; }
        if (d < 0) return { d:0, h:0, m:0, s:0 };
        return { d, h, m, s };
      });
    }, 1000);
    return () => clearInterval(id);
  }, []);
  const pad = n => String(n).padStart(2,'0');

  return (
    <section className="section scarcity" data-screen-label="scarcity">
      <div className="container">
        <div className="scarcity-inner">
          <div>
            <span className="eyebrow">{isWaitlist ? 'Próxima rodada' : 'Escassez real'}</span>
            <h2 style={{marginTop:18}}>
              {isWaitlist ? (
                <>Esta rodada acabou.<br/><em>A próxima abre em ~30 dias.</em></>
              ) : (
                <>Essa condição<br/><em>não vai durar.</em></>
              )}
            </h2>
            <p>
              {isWaitlist ? (
                <>A campanha abre <strong style={{color:'var(--gold-3)',fontWeight:500}}>1 vez por mês</strong>, com 50 vagas por rodada. Entre na fila de espera oficial e seja chamado(a) por ordem de inscrição na próxima abertura.</>
              ) : (
                <>Somente as <strong style={{color:'var(--gold-3)',fontWeight:500}}>50 primeiras pessoas cadastradas</strong> vão receber a avaliação gratuita. Depois que as vagas acabarem, abre a fila de espera para a rodada do mês seguinte.</>
              )}
            </p>

            {showCountdown && !isWaitlist && (
              <>
                <span className="eyebrow" style={{display:'block',marginTop:8,fontSize:'10px'}}>Encerramento em</span>
                <div className="countdown">
                  <div className="cd-cell"><div className="n">{pad(time.d)}</div><div className="l">Dias</div></div>
                  <div className="cd-cell"><div className="n">{pad(time.h)}</div><div className="l">Horas</div></div>
                  <div className="cd-cell"><div className="n">{pad(time.m)}</div><div className="l">Minutos</div></div>
                  <div className="cd-cell"><div className="n">{pad(time.s)}</div><div className="l">Segundos</div></div>
                </div>
              </>
            )}

            <a href="#cadastro" className="btn-gold">
              {isWaitlist ? 'Entrar na fila de espera' : 'Garantir minha vaga'} <span className="arrow">→</span>
            </a>
          </div>

          <div className="seats-card">
            <div className="top">
              <div className="left">{isWaitlist ? 'Rodada esgotada' : 'Mapa de vagas'}</div>
              <span className="live"><i></i>{isWaitlist ? 'Fila aberta' : 'Ao vivo'}</span>
            </div>
            <div className="seats-grid">
              {Array.from({length:50}).map((_,i) => (
                <div key={i} className={`seat ${i < Math.min(seatsTaken, 50) ? 'taken' : ''}`}></div>
              ))}
            </div>
            <div className="footer-row">
              <div>
                <div className="left-num">{isWaitlist ? '0' : Math.max(0, 50 - seatsTaken)}</div>
                <small>{isWaitlist ? 'Vagas nesta rodada' : 'Vagas restantes'}</small>
              </div>
              <div style={{textAlign:'right'}}>
                <div style={{fontFamily:'var(--serif)',fontStyle:'italic',color:'var(--fg-mute)',fontSize:18}}>
                  {isWaitlist ? '~30 dias' : 'de 50'}
                </div>
                <small>{isWaitlist ? 'Próxima rodada' : 'Total da campanha'}</small>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Form ─────────────────────────────────────────────────────────────────
const BR_STATES = [
  ['AC','Acre'],['AL','Alagoas'],['AP','Amapá'],['AM','Amazonas'],['BA','Bahia'],
  ['CE','Ceará'],['DF','Distrito Federal'],['ES','Espírito Santo'],['GO','Goiás'],
  ['MA','Maranhão'],['MT','Mato Grosso'],['MS','Mato Grosso do Sul'],['MG','Minas Gerais'],
  ['PA','Pará'],['PB','Paraíba'],['PR','Paraná'],['PE','Pernambuco'],['PI','Piauí'],
  ['RJ','Rio de Janeiro'],['RN','Rio Grande do Norte'],['RS','Rio Grande do Sul'],
  ['RO','Rondônia'],['RR','Roraima'],['SC','Santa Catarina'],['SP','São Paulo'],
  ['SE','Sergipe'],['TO','Tocantins'],
];

function maskPhoneBR(v) {
  let raw = (v||'').replace(/\D/g,'');
  // Drop the country code "55" when the user includes it (e.g. paste from
  // WhatsApp deep-link or autofill). Without this, 13-digit input gets sliced
  // to 11 and the trailing 2 digits of the real number are lost.
  if (raw.length > 11 && raw.startsWith('55')) raw = raw.slice(2);
  const d = raw.slice(0, 11);
  if (d.length === 0) return '';
  if (d.length <= 2) return `(${d}`;
  if (d.length <= 6) return `(${d.slice(0,2)}) ${d.slice(2)}`;
  if (d.length <= 10) return `(${d.slice(0,2)}) ${d.slice(2,6)}-${d.slice(6)}`;
  return `(${d.slice(0,2)}) ${d.slice(2,7)}-${d.slice(7)}`;
}
function maskName(v) {
  return (v||'').replace(/[0-9]/g,'').replace(/\s{2,}/g,' ').slice(0,80);
}
function maskCity(v) {
  return (v||'').replace(/[^a-zA-ZÀ-ÿ\s'.-]/g,'').replace(/\s{2,}/g,' ').slice(0,60);
}
function maskInstagram(v) {
  let s = (v||'').replace(/^@+/,'').replace(/[^a-zA-Z0-9._]/g,'').toLowerCase().slice(0,30);
  return s ? '@' + s : '';
}

const BR_CITIES = [
  "Porto Alegre","Canoas","Gravataí","Viamão","São Leopoldo","Novo Hamburgo","Caxias do Sul","Pelotas","Santa Maria","Cachoeirinha","Alvorada","Esteio","Sapucaia do Sul","Guaíba","Bento Gonçalves","Passo Fundo","Rio Grande","Uruguaiana","Lajeado","Santa Cruz do Sul","Erechim","Bagé","Ijuí","Santana do Livramento","Vacaria","Carazinho","Cruz Alta","São Borja","Camaquã","Torres","Capão da Canoa","Tramandaí","Osório","Taquara",
  "São Paulo","Guarulhos","Campinas","São Bernardo do Campo","Santo André","Osasco","São José dos Campos","Ribeirão Preto","Sorocaba","Santos","Mauá","São José do Rio Preto","Mogi das Cruzes","Diadema","Jundiaí","Piracicaba","Carapicuíba","Bauru","Itaquaquecetuba","São Vicente","Franca","Praia Grande","Guarujá","Limeira","Suzano","Taubaté","Sumaré",
  "Rio de Janeiro","São Gonçalo","Duque de Caxias","Nova Iguaçu","Niterói","Belford Roxo","São João de Meriti","Campos dos Goytacazes","Petrópolis","Volta Redonda","Magé","Itaboraí","Macaé","Cabo Frio","Nova Friburgo","Barra Mansa","Angra dos Reis","Teresópolis",
  "Belo Horizonte","Uberlândia","Contagem","Juiz de Fora","Betim","Montes Claros","Ribeirão das Neves","Uberaba","Sete Lagoas","Divinópolis","Ipatinga","Santa Luzia","Governador Valadares","Ibirité","Poços de Caldas","Patos de Minas","Pouso Alegre","Teófilo Otoni",
  "Salvador","Feira de Santana","Vitória da Conquista","Camaçari","Itabuna","Juazeiro","Lauro de Freitas","Ilhéus","Jequié","Teixeira de Freitas","Alagoinhas","Barreiras",
  "Curitiba","Londrina","Maringá","Ponta Grossa","Cascavel","São José dos Pinhais","Foz do Iguaçu","Colombo","Guarapuava","Paranaguá","Araucária","Toledo","Apucarana","Pinhais","Campo Largo",
  "Florianópolis","Joinville","Blumenau","São José","Chapecó","Itajaí","Criciúma","Jaraguá do Sul","Lages","Palhoça","Balneário Camboriú","Brusque","Tubarão",
  "Recife","Jaboatão dos Guararapes","Olinda","Caruaru","Petrolina","Paulista","Cabo de Santo Agostinho","Camaragibe","Garanhuns","Vitória de Santo Antão",
  "Fortaleza","Caucaia","Juazeiro do Norte","Maracanaú","Sobral","Crato","Itapipoca","Maranguape",
  "Manaus","Parintins","Itacoatiara","Manacapuru",
  "Belém","Ananindeua","Santarém","Marabá","Castanhal","Parauapebas","Abaetetuba","Cametá","Bragança",
  "Goiânia","Aparecida de Goiânia","Anápolis","Rio Verde","Luziânia","Águas Lindas de Goiás","Valparaíso de Goiás","Trindade","Formosa","Novo Gama","Itumbiara",
  "Brasília","Taguatinga","Ceilândia","Gama","Sobradinho","Planaltina","Samambaia",
  "Vitória","Vila Velha","Cariacica","Serra","Cachoeiro de Itapemirim","Linhares","São Mateus","Colatina","Guarapari",
  "Campo Grande","Dourados","Três Lagoas","Corumbá","Ponta Porã","Naviraí",
  "Cuiabá","Várzea Grande","Rondonópolis","Sinop","Tangará da Serra","Cáceres","Sorriso",
  "São Luís","Imperatriz","Caxias","Timon","Codó","Bacabal",
  "Teresina","Parnaíba","Picos","Floriano",
  "Natal","Mossoró","Parnamirim","São Gonçalo do Amarante","Caicó","Macaíba",
  "João Pessoa","Campina Grande","Santa Rita","Patos","Bayeux","Cabedelo",
  "Maceió","Arapiraca","Rio Largo","Palmeira dos Índios","Penedo",
  "Aracaju","Nossa Senhora do Socorro","Lagarto","Itabaiana","Estância",
  "Porto Velho","Ji-Paraná","Ariquemes","Vilhena","Cacoal",
  "Boa Vista","Rorainópolis",
  "Macapá","Santana","Laranjal do Jari",
  "Rio Branco","Cruzeiro do Sul","Sena Madureira",
  "Palmas","Araguaína","Gurupi","Porto Nacional",
];

function FormSection({ ctaCopy, onLeadSaved, isWaitlist }) {
  const [data, setData] = useState({ nome:'', whats:'', email:'', instagram:'', cidade:'', estado:'', interesse:'' });
  const [hp, setHp] = useState('');
  const [submitted, setSubmitted] = useState(false);
  const [submitInfo, setSubmitInfo] = useState(null);
  const [saving, setSaving] = useState(false);
  const [saveError, setSaveError] = useState(null);
  const [citySuggestions, setCitySuggestions] = useState([]);
  const [showSuggestions, setShowSuggestions] = useState(false);
  const [activeSugg, setActiveSugg] = useState(-1);
  const mountedAt = useRef(Date.now());

  const setField = (k, v) => setData(d => ({...d, [k]: v}));

  const onCityChange = (raw) => {
    const v = maskCity(raw);
    setField('cidade', v);
    if (v.length < 2) { setCitySuggestions([]); setShowSuggestions(false); return; }
    const norm = (s) => s.normalize('NFD').replace(/[\u0300-\u036f]/g,'').toLowerCase();
    const q = norm(v);
    const matches = BR_CITIES.filter(c => norm(c).includes(q)).slice(0,7);
    setCitySuggestions(matches);
    setShowSuggestions(matches.length > 0);
    setActiveSugg(-1);
  };

  const pickCity = (c) => {
    setField('cidade', c);
    setShowSuggestions(false);
    setCitySuggestions([]);
  };

  const onCityKey = (e) => {
    if (!showSuggestions || !citySuggestions.length) return;
    if (e.key === 'ArrowDown') { e.preventDefault(); setActiveSugg(i => Math.min(i+1, citySuggestions.length-1));}
    else if (e.key === 'ArrowUp') { e.preventDefault(); setActiveSugg(i => Math.max(i-1, 0));}
    else if (e.key === 'Enter' && activeSugg >= 0) { e.preventDefault(); pickCity(citySuggestions[activeSugg]);}
    else if (e.key === 'Escape') { setShowSuggestions(false);}
  };

  const submit = async (e) => {
    e.preventDefault();
    if (saving) return;

    // Anti-bot: honeypot field (humans don't see it; bots auto-fill all inputs)
    // and time-gate (real users take longer than 1.5s to fill the form).
    // Both fail silently — show the same UI as a successful submit so a bot
    // that just got rejected can't tell.
    if (hp || (Date.now() - mountedAt.current) < 1500) {
      setSubmitted(true);
      return;
    }

    setSaving(true);
    setSaveError(null);

    const interesseLabels = {
      'harmonizacao-completa': 'Harmonização facial completa',
      'contorno': 'Contorno facial e mandíbula',
      'labios': 'Lábios — definição e volume',
      'malar': 'Região malar e maçãs do rosto',
      'bigode-chines': 'Sulco nasogeniano / bigode chinês',
      'testa': 'Testa, têmporas e sobrancelhas',
      'indeciso': 'Quero entender o que faz sentido para mim',
    };

    try {
      const result = await supaSubmitLead({
        p_nome: data.nome.trim(),
        p_whatsapp: data.whats.trim(),
        p_email: data.email.trim().toLowerCase(),
        p_cidade: data.cidade.trim(),
        p_estado: data.estado || null,
        p_instagram: data.instagram.trim() || null,
        p_interesse: data.interesse || null,
        p_user_agent: typeof navigator !== 'undefined' ? navigator.userAgent : null,
        p_referrer: typeof document !== 'undefined' ? (document.referrer || null) : null,
      });
      setSubmitInfo(result);
      onLeadSaved && onLeadSaved();
    } catch (err) {
      console.error('[Dentosul Prime] Falha ao salvar lead:', err);
      setSaveError('Não conseguimos salvar seu cadastro agora. Vamos te direcionar ao WhatsApp mesmo assim.');
    } finally {
      setSaving(false);
    }

    const phone = '5551998534413';
    const msg = isWaitlist
?
`Olá, Dentosul Prime! Quero entrar na FILA DE ESPERA da avaliação gratuita de harmonização facial — para ser chamado(a) na próxima rodada mensal.

• Nome: ${data.nome}
• WhatsApp: ${data.whats}
• E-mail: ${data.email}
• Instagram: ${data.instagram || '—'}
• Cidade: ${data.cidade}
• Estado: ${data.estado}
• Interesse principal: ${interesseLabels[data.interesse] || data.interesse}

As 50 vagas desta rodada já foram preenchidas — quero garantir meu lugar na próxima.`
:
`Olá, Dentosul Prime! Quero garantir minha vaga na avaliação gratuita de harmonização facial.

• Nome: ${data.nome}
• WhatsApp: ${data.whats}
• E-mail: ${data.email}
• Instagram: ${data.instagram || '—'}
• Cidade: ${data.cidade}
• Estado: ${data.estado}
• Interesse principal: ${interesseLabels[data.interesse] || data.interesse}

Vim pela campanha das 50 vagas.`;

    const url = `https://wa.me/${phone}?text=${encodeURIComponent(msg)}`;
    window.open(url, '_blank', 'noopener,noreferrer');
    setSubmitted(true);
  };

  return (
    <section className="form-section" id="cadastro" data-screen-label="form">
      <div className="form-card">
        {!submitted ? (
          <>
            <div className="form-head">
              <span className="eyebrow">{isWaitlist ? 'Fila de espera · Próxima rodada' : 'Cadastro · Avaliação gratuita'}</span>
              <h2>
                {isWaitlist ? (
                  <>As 50 vagas desta rodada <em>foram preenchidas.</em></>
                ) : (
                  <>Preencha agora e <em>garanta sua vaga.</em></>
                )}
              </h2>
              <p>
                {isWaitlist
                  ? 'A campanha abre 1 vez por mês com 50 vagas. Preencha agora e garanta seu lugar na fila — você será chamado(a) na próxima rodada.'
                  : 'Resposta da nossa equipe em até 24 horas úteis.'}
              </p>
            </div>

            <form onSubmit={submit} noValidate>
              {/* honeypot — invisible to humans, irresistible to naive bots */}
              <div aria-hidden="true" style={{position:'absolute',left:'-9999px',top:'-9999px',width:1,height:1,overflow:'hidden'}}>
                <label htmlFor="dp_website">Website</label>
                <input
                  id="dp_website"
                  type="text"
                  name="website"
                  tabIndex={-1}
                  autoComplete="off"
                  value={hp}
                  onChange={(e)=>setHp(e.target.value)}
                />
              </div>

              <div className="field">
                <label>Nome completo <span className="req">*</span></label>
                <input
                  type="text"
                  required
                  value={data.nome}
                  onChange={(e)=>setField('nome', maskName(e.target.value))}
                  placeholder="Como podemos te chamar?"
                  autoComplete="name"
                />
              </div>

              <div className="field-row">
                <div className="field">
                  <label>WhatsApp <span className="req">*</span></label>
                  <input
                    type="tel"
                    required
                    value={data.whats}
                    onChange={(e)=>setField('whats', maskPhoneBR(e.target.value))}
                    placeholder="(00) 00000-0000"
                    inputMode="numeric"
                    autoComplete="tel"
                    pattern="\(\d{2}\)\s\d{4,5}-\d{4}"
                  />
                </div>
                <div className="field">
                  <label>Instagram</label>
                  <input
                    type="text"
                    value={data.instagram}
                    onChange={(e)=>setField('instagram', maskInstagram(e.target.value))}
                    placeholder="@seu.usuario"
                    autoComplete="off"
                    inputMode="text"
                  />
                </div>
              </div>

              <div className="field">
                <label>E-mail <span className="req">*</span></label>
                <input
                  type="email"
                  required
                  value={data.email}
                  onChange={(e)=>setField('email', e.target.value.trim().slice(0,80))}
                  placeholder="seu@melhor-email.com"
                  autoComplete="email"
                />
              </div>

              <div className="field-row" style={{gridTemplateColumns:'1fr 110px'}}>
                <div className="field" style={{position:'relative'}}>
                  <label>Cidade <span className="req">*</span></label>
                  <input
                    type="text"
                    required
                    value={data.cidade}
                    onChange={(e)=>onCityChange(e.target.value)}
                    onKeyDown={onCityKey}
                    onFocus={()=>{ if(citySuggestions.length>0) setShowSuggestions(true);}}
                    onBlur={()=>setTimeout(()=>setShowSuggestions(false), 150)}
                    placeholder="Sua cidade"
                    autoComplete="address-level2"
                    role="combobox"
                    aria-autocomplete="list"
                    aria-expanded={showSuggestions}
                  />
                  {showSuggestions && citySuggestions.length > 0 && (
                    <div className="city-suggest" role="listbox">
                      {citySuggestions.map((c,i) => (
                        <button
                          type="button"
                          key={c}
                          role="option"
                          aria-selected={i===activeSugg}
                          className={`city-opt ${i===activeSugg ? 'active' : ''}`}
                          onMouseDown={(e)=>{ e.preventDefault(); pickCity(c);}}
                          onMouseEnter={()=>setActiveSugg(i)}
                        >
                          {c}
                        </button>
                      ))}
                    </div>
                  )}
                </div>
                <div className="field">
                  <label>Estado <span className="req">*</span></label>
                  <select
                    required
                    value={data.estado}
                    onChange={(e)=>setField('estado', e.target.value)}
                  >
                    <option value="" disabled>UF</option>
                    {BR_STATES.map(([uf, name]) => (
                      <option key={uf} value={uf}>{uf}</option>
                    ))}
                  </select>
                </div>
              </div>

              <div className="field">
                <label>Principal interesse / necessidade estética <span className="req">*</span></label>
                <select required value={data.interesse} onChange={(e)=>setField('interesse', e.target.value)}>
                  <option value="" disabled>Selecione uma opção</option>
                  <option value="harmonizacao-completa">Harmonização facial completa</option>
                  <option value="contorno">Contorno facial e mandíbula</option>
                  <option value="labios">Lábios — definição e volume</option>
                  <option value="malar">Região malar e maçãs do rosto</option>
                  <option value="bigode-chines">Sulco nasogeniano / bigode chinês</option>
                  <option value="testa">Testa, têmporas e sobrancelhas</option>
                  <option value="indeciso">Quero entender o que faz sentido para mim</option>
                </select>
              </div>

              <div className="form-submit">
                <button type="submit" className="btn-gold" disabled={saving} style={saving ? {opacity:.7,cursor:'wait'} : null}>
                  {saving ? 'Enviando…' : (isWaitlist ? 'Entrar na fila de espera' : ctaCopy)} <span className="arrow">→</span>
                </button>
              </div>

              {saveError && (
                <p className="form-fine" style={{color:'#e8a07a'}}>{saveError}</p>
              )}

              <p className="form-fine">
                {isWaitlist
                  ? <>Ao enviar, você entra na <strong>fila de espera oficial</strong> e será chamado(a) na próxima rodada mensal. <strong>1 rodada por mês · 50 vagas por rodada.</strong></>
                  : <>Ao enviar, você será redirecionado(a) ao <strong>WhatsApp da Dentosul Prime</strong> com seus dados pré-preenchidos. <strong>Apenas 50 vagas.</strong></>
                }
              </p>
            </form>
          </>
        ) : (
          <div className="confirm">
            <div className="check">✓</div>
            <h3>
              {submitInfo?.is_waitlist
                ? <>Você está <em>na fila de espera.</em></>
                : <>Quase lá! <em>Finalize no WhatsApp.</em></>}
            </h3>
            <p>
              {submitInfo?.is_waitlist
                ? 'As 50 vagas desta rodada foram preenchidas. Seu cadastro entrou na fila oficial — abrimos o WhatsApp da Dentosul Prime para você confirmar e ser chamado(a) na próxima rodada mensal.'
                : 'Abrimos o WhatsApp da Dentosul Prime com seus dados. Envie a mensagem pra confirmar sua vaga — só as 50 primeiras pessoas desta rodada vão participar.'}
            </p>
            <div className="pos">
              {submitInfo
                ? (submitInfo.is_waitlist
                    ? `Fila de espera · #${submitInfo.position} · Próxima rodada em ~30 dias`
                    : `Posição na fila · #${submitInfo.position}/${submitInfo.main_total ?? 50}`)
                : (isWaitlist
                    ? 'Fila de espera · Próxima rodada em ~30 dias'
                    : 'Posição na fila · confirmando…')}
            </div>
            <div style={{marginTop:22}}>
              <a href={`https://wa.me/5551998534413?text=${encodeURIComponent(submitInfo?.is_waitlist ? 'Olá, Dentosul Prime! Quero confirmar meu lugar na fila de espera da avaliação gratuita.' : 'Olá, Dentosul Prime! Quero garantir minha vaga na avaliação gratuita.')}`} target="_blank" rel="noopener noreferrer" className="btn-ghost" style={{padding:'12px 20px'}}>
                Reabrir WhatsApp →
              </a>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

// ─── Final CTA ────────────────────────────────────────────────────────────
function FinalCta({ ctaCopy, isWaitlist }) {
  return (
    <section className="final-cta" data-screen-label="final-cta">
      <div className="container-narrow" style={{position:'relative',zIndex:2}}>
        <span className="eyebrow">{isWaitlist ? 'Próxima rodada' : 'Última chamada'}</span>
        <h2 style={{marginTop:20}}>
          {isWaitlist ? (
            <>Não fique de fora <em>do próximo mês.</em></>
          ) : (
            <>Não deixe para depois<br/>o que pode te dar <em>clareza agora.</em></>
          )}
        </h2>
        <p>
          {isWaitlist
            ? 'Garanta seu lugar na fila de espera e seja chamado(a) quando a próxima rodada de 50 vagas abrir.'
            : 'Garanta sua vaga e descubra o que faz sentido para sua harmonização facial.'}
        </p>
        <a href="#cadastro" className="btn-gold" style={{padding:'22px 36px'}}>
          {isWaitlist ? 'Entrar na fila de espera' : ctaCopy} <span className="arrow">→</span>
        </a>
      </div>
    </section>
  );
}

// ─── Footer ───────────────────────────────────────────────────────────────
function Footer({ variant }) {
  return (
    <footer className="footer" data-screen-label="footer">
      <div className="footer-grid">
        <div>
          <div className="label">Para profissionais da beleza</div>
          <h3>Quer uma <em>ferramenta assim</em> para sua clínica ou consultório?</h3>
          <p>
            Você profissional da área da beleza pode ter o mesmo padrão tecnológico por trás da sua operação. Fale com a P2A TECH e descubra como o Glow Up System pode ajudar você a vender mais, organizar melhor e entregar uma experiência de alto padrão.
          </p>
          <a href="https://www.p2atech.com.br" target="_blank" rel="noopener noreferrer" className="btn-ghost">
            Falar com a P2A TECH →
          </a>
        </div>

        {variant === 'p2a-detailed' && (
          <div className="p2a-card">
            <div className="brand">
              <div className="lockup">P2A <span>TECH</span></div>
              <div className="tag">Tecnologia · Beleza · Resultado</div>
            </div>
            <ul>
              <li>Glow Up System — jornada do paciente do agendamento ao pós</li>
              <li>Captação de leads com qualificação automática</li>
              <li>Prontuário digital, agenda inteligente e métricas</li>
              <li>Atendimento de alto padrão como diferencial competitivo</li>
            </ul>
            <a href="https://www.p2atech.com.br" target="_blank" rel="noopener noreferrer" className="btn-ghost" style={{padding:'12px 18px',fontSize:'10px'}}>
              Conhecer soluções →
            </a>
          </div>
        )}

        {variant === 'minimal' && (
          <div style={{padding:32,border:'1px solid var(--line)',background:'#0a080b'}}>
            <div style={{fontFamily:'var(--serif)',fontSize:36,color:'var(--paper)'}}>P2A <span style={{color:'var(--gold-3)',fontStyle:'italic'}}>TECH</span></div>
            <div style={{marginTop:10,fontSize:13,color:'var(--fg-mute)',lineHeight:1.6}}>Soluções de tecnologia para clínicas e profissionais da beleza que querem mais organização, vendas e entrega de alto padrão.</div>
          </div>
        )}

        {variant === 'cta-dark' && (
          <div style={{padding:36,background:'var(--gold-grad)',color:'var(--ink-0)'}}>
            <div style={{fontFamily:'var(--mono)',fontSize:10,letterSpacing:'.3em',textTransform:'uppercase'}}>P2A TECH × Glow Up System</div>
            <div style={{fontFamily:'var(--serif)',fontSize:28,lineHeight:1.15,margin:'14px 0',fontWeight:500}}>
              Leve esse padrão para sua clínica.
            </div>
            <a href="https://www.p2atech.com.br" target="_blank" rel="noopener noreferrer" style={{display:'inline-block',padding:'14px 22px',background:'var(--ink-0)',color:'var(--gold-3)',textDecoration:'none',fontSize:11,letterSpacing:'.22em',textTransform:'uppercase',fontWeight:600}}>
              Quero falar com a P2A TECH →
            </a>
          </div>
        )}
      </div>

      <div className="footer-clinic" style={{maxWidth:1180,margin:'0 auto 36px',padding:'28px',border:'1px solid var(--line)',background:'rgba(212,178,106,.03)',display:'flex',alignItems:'center',justifyContent:'space-between',gap:24,flexWrap:'wrap'}}>
        <div style={{display:'flex',alignItems:'center',gap:18,flexWrap:'wrap'}}>
          <div style={{width:42,height:42,border:'1px solid var(--line-strong)',display:'flex',alignItems:'center',justifyContent:'center',color:'var(--gold-3)',fontFamily:'var(--serif)',fontStyle:'italic',fontSize:22}}>D</div>
          <div>
            <div className="label" style={{margin:0}}>Onde nos encontrar</div>
            <div style={{fontFamily:'var(--serif)',fontSize:22,color:'var(--paper)',marginTop:4,fontWeight:500}}>
              Dentosul Prime <span style={{color:'var(--gold-3)',fontStyle:'italic'}}>· Porto Alegre / RS</span>
            </div>
          </div>
        </div>
        <a
          href="https://maps.google.com/?ftid=0x95198501ec1f9f13:0x1266eb7ec134dc19"
          target="_blank"
          rel="noopener noreferrer"
          className="btn-ghost"
          style={{padding:'12px 20px',fontSize:'10px'}}
        >
          Ver no Google Maps →
        </a>
      </div>

      <div className="footer-bottom">
        <div>© 2026 Dentosul Prime · Clínicas Odontológicas</div>
        <div className="links">
          <a href="#">Política de privacidade</a>
          <a href="#">Termos</a>
        </div>
        <div>Powered by <a href="https://www.p2atech.com.br" target="_blank" rel="noopener noreferrer" style={{color:'var(--gold-3)',textDecoration:'none',transition:'color .2s'}} onMouseEnter={e=>e.currentTarget.style.color='var(--gold-4)'} onMouseLeave={e=>e.currentTarget.style.color='var(--gold-3)'}>P2A TECH</a></div>
      </div>
    </footer>
  );
}

// ─── Floating CTA ─────────────────────────────────────────────────────────
function FloatingCta({ ctaCopy, isWaitlist }) {
  return (
    <div className="floating-cta">
      <a href="#cadastro" className="btn-gold">
        {isWaitlist ? 'Entrar na fila de espera' : ctaCopy} <span className="arrow">→</span>
      </a>
    </div>
  );
}

// ─── App ──────────────────────────────────────────────────────────────────
const SEATS_TOTAL = 50;

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

  useEffect(() => {
    if (t.showFloatingCta) document.body.classList.add('has-floating');
    else document.body.classList.remove('has-floating');
  }, [t.showFloatingCta]);

  const refreshCount = useCallback(() => {
    return supaFetchLeadCount()
      .then((count) => {
        if (typeof count === 'number' && count >= 0) {
          setTweak('seatsTaken', Math.min(count, SEATS_TOTAL));
        }
      })
      .catch((err) => console.error('[Dentosul Prime] Falha ao buscar contagem de leads:', err));
  }, [setTweak]);

  useEffect(() => {
    let cancelled = false;
    supaFetchLeadCount()
      .then((count) => {
        if (cancelled) return;
        if (typeof count === 'number' && count >= 0) {
          setTweak('seatsTaken', Math.min(count, SEATS_TOTAL));
        }
      })
      .catch((err) => console.error('[Dentosul Prime] Falha ao buscar contagem de leads:', err));
    return () => { cancelled = true; };
  }, []);

  const handleLeadSaved = useCallback(() => {
    refreshCount();
  }, [refreshCount]);

  const isWaitlist = (t.seatsTaken || 0) >= SEATS_TOTAL;

  return (
    <>
      <Topbar seatsTaken={t.seatsTaken} isWaitlist={isWaitlist} />
      <Hero variant={t.heroVariant} ctaCopy={t.ctaCopy} seatsTaken={t.seatsTaken} isWaitlist={isWaitlist} />
      <Marquee />
      <Pain />
      <Benefit />
      <Authority />
      <Specialist ctaCopy={t.ctaCopy} isWaitlist={isWaitlist} />
      <Scarcity seatsTaken={t.seatsTaken} showCountdown={t.showCountdown} isWaitlist={isWaitlist} />
      <FormSection ctaCopy={t.ctaCopy} isWaitlist={isWaitlist} onLeadSaved={handleLeadSaved} />
      <FinalCta ctaCopy={t.ctaCopy} isWaitlist={isWaitlist} />
      <Footer variant={t.footerVariant} />
      {t.showFloatingCta && <FloatingCta ctaCopy={t.ctaCopy} isWaitlist={isWaitlist} />}

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakRadio
          label="Headline"
          value={t.heroVariant}
          options={['gold-script','editorial','direct']}
          onChange={(v) => setTweak('heroVariant', v)}
        />

        <TweakSection label="CTA" />
        <TweakSelect
          label="Texto do botão"
          value={t.ctaCopy}
          options={[
            'Quero garantir minha vaga',
            'Garantir avaliação gratuita',
            'Quero minha avaliação Prime',
            'Reservar minha vaga agora',
            'Começar agora',
          ]}
          onChange={(v) => setTweak('ctaCopy', v)}
        />
        <TweakToggle
          label="CTA flutuante (mobile)"
          value={t.showFloatingCta}
          onChange={(v) => setTweak('showFloatingCta', v)}
        />

        <TweakSection label="Escassez" />
        <TweakSlider
          label="Vagas preenchidas"
          value={t.seatsTaken}
          min={0} max={49} step={1}
          onChange={(v) => setTweak('seatsTaken', v)}
        />
        <TweakToggle
          label="Mostrar countdown"
          value={t.showCountdown}
          onChange={(v) => setTweak('showCountdown', v)}
        />

        <TweakSection label="Footer" />
        <TweakRadio
          label="Estilo do bloco P2A"
          value={t.footerVariant}
          options={['p2a-detailed','minimal','cta-dark']}
          onChange={(v) => setTweak('footerVariant', v)}
        />
      </TweaksPanel>
    </>
  );
}

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