/* ===== AION Sections ===== */

const Icon = ({ name, size = 22 }) => {
  const icons = {
    whatsapp: <svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.1-.2.3-.8.9-.9 1.1-.2.2-.3.2-.6.1-.3-.1-1.2-.4-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5-.1-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5.1 4.5.7.3 1.3.5 1.7.6.7.2 1.3.2 1.8.1.6-.1 1.7-.7 2-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.4zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 5L2 22l5.2-1.4c1.4.8 3.1 1.2 4.8 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z" /></svg>,
    arrow: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6" /></svg>,
    arrowUp: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17L17 7M8 7h9v9" /></svg>,
    play: <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></svg>,
    lock: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="11" width="18" height="11" rx="2" /><path d="M7 11V7a5 5 0 0110 0v4" /></svg>,
    instagram: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="2" y="2" width="20" height="20" rx="5" /><path d="M16 11.4A4 4 0 1112.6 8 4 4 0 0116 11.4zM17.5 6.5h.01" /></svg>,
    linkedin: <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 3a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h14zM8.3 18.3v-7H6v7h2.3zM7.2 9.8a1.3 1.3 0 100-2.6 1.3 1.3 0 000 2.6zM18 18.3v-3.8c0-2-1.1-3-2.5-3-1.2 0-1.7.6-2 1.1V11.3H11s.05 1 0 7h2.5v-3.9c0-.2 0-.4.08-.6.2-.5.6-1 1.3-1 .9 0 1.3.7 1.3 1.7v3.8H18z" /></svg>,
    tiktok: <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.6 6.3a4.8 4.8 0 01-2.9-1 4.8 4.8 0 01-1.9-3.7h-3.3v13.4a2.9 2.9 0 11-2-2.8V8.8a6.2 6.2 0 102 5.2V9.3a8.1 8.1 0 004.7 1.5V7.5a4.8 4.8 0 01-.5-.5l-.1-.7z" /></svg>,
    target: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10" /><circle cx="12" cy="12" r="6" /><circle cx="12" cy="12" r="2" /></svg>,
    chart: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 3v18h18M7 14l4-4 4 4 6-6" /></svg>,
    video: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="6" width="13" height="12" rx="2" /><path d="M16 10l5-3v10l-5-3" /></svg>,
    handshake: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 17l-2 2-3-3-3 3v-5l4-4 4 4 1-1 3 3-2 2-2-2zM13 13l3-3 5 5-3 3-5-5zM8 7l3-3 5 5" /></svg>,
    menu: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="5" y="3" width="14" height="18" rx="2" /><path d="M9 7h6M9 11h6M9 15h4" /></svg>,
    message: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 11.5a8.4 8.4 0 01-9 8.4l-5 1.6 1.6-5A8.4 8.4 0 1121 11.5z" /></svg>,
    web: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="4" width="18" height="14" rx="2" /><path d="M3 9h18M8 21h8M12 18v3" /></svg>,
    user: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="8" r="4" /><path d="M4 21a8 8 0 0116 0" /></svg>,
    spark: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" /></svg>,
    growth: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 17l6-6 4 4 8-8M14 7h7v7" /></svg>
  };
  return <span className="ic" style={{ display: 'inline-flex', width: size, height: size }}>{icons[name]}</span>;
};
window.Icon = Icon;

/* === NAV === */
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const close = () => setOpen(false);
  return (
    <>
      <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
        <a href="#top" className="nav-logo"><img src="assets/aion-horizontal.png" alt="AION" /></a>
        <div className="nav-links">
          <a href="#sobre">Quem somos</a>
          <a href="#metodo">Método</a>
          <a href="#servicos">Serviços</a>
          <a href="#resultados">Resultados</a>
          <a href="#faq">FAQ</a>
        </div>
        <a href="#form" className="nav-cta nav-cta-desktop">Diagnóstico gratuito</a>
        <button className="nav-burger" onClick={() => setOpen(o => !o)} aria-label="Menu">
          <span className={open ? 'bar bar-open' : 'bar'} />
          <span className={open ? 'bar bar-open' : 'bar'} />
          <span className={open ? 'bar bar-open' : 'bar'} />
        </button>
      </nav>
      {open && (
        <div className="nav-drawer">
          <a href="#sobre" onClick={close}>Quem somos</a>
          <a href="#metodo" onClick={close}>Método</a>
          <a href="#servicos" onClick={close}>Serviços</a>
          <a href="#resultados" onClick={close}>Resultados</a>
          <a href="#faq" onClick={close}>FAQ</a>
          <a href="#form" className="nav-cta nav-cta-drawer" onClick={close}>Diagnóstico gratuito</a>
        </div>
      )}
    </>
  );
}
window.Nav = Nav;

/* === HERO === */
function Hero({ tweaks }) {
  const headlines = {
    latam: {
      h1: <>
        <span className="line lead">O marketing do seu restaurante</span>
        <span className="line heavy">feito pela maior assessoria</span>
        <span className="line heavy">de marketing de Minas Gerais.</span>
      </>,
      sub: 'Somos a engrenagem por trás dos restaurantes que mais crescem no Brasil.'
    },
    growth: {
      h1: <>
        <span className="line lead">Somos a engrenagem</span>
        <span className="line heavy">dos restaurantes que</span>
        <span className="line heavy">mais crescem no Brasil.</span>
      </>,
      sub: 'Marketing especializado em restaurantes — estruturado fase por fase, com previsibilidade.'
    },
    direct: {
      h1: <>
        <span className="line lead">Seu restaurante</span>
        <span className="line heavy">vendendo mais.</span>
        <span className="line heavy">semana após semana.</span>
      </>,
      sub: 'Assessoria especializada em alimentação. Mídia, criativos e processos — em um único time dedicado.'
    }
  };
  const h = headlines[tweaks.headlinePunch] || headlines.latam;
  return (
    <header className="hero" id="top">
      <img className="hero-logo" src="assets/aion-horizontal.png" alt="AION Assessoria" />
      <h1 className="hero-headline">{h.h1}</h1>
      <p className="hero-sub">{h.sub}</p>
      <a href="#form" className="hero-cta">
        Quero meu diagnóstico gratuito
      </a>
    </header>);

}
window.Hero = Hero;

/* === MARQUEE === */
function Marquee() {
  const items = [
  <>+150 <span>CLIENTES ATIVOS</span></>,
  <>+R$50M <span>EM VENDAS GERADAS</span></>,
  <>+3 ANOS <span>DE EXPERIÊNCIA</span></>,
  <>0% <span>DE CANCELAMENTOS</span></>];

  const repeated = [...items, ...items, ...items, ...items];
  return (
    <div className="marquee-wrap">
      <div className="marquee">
        <div className="marquee-track">
          {repeated.map((it, i) => <div className="marquee-item" key={i}>{it}</div>)}
        </div>
      </div>
    </div>);

}
window.Marquee = Marquee;

/* === FORM === */
// ─────────────────────────────────────────────────────────────────────────────
// CRM Integration
// ─────────────────────────────────────────────────────────────────────────────
// 1) Substitua CRM_ENDPOINT pela URL fornecida pelo seu CRM (Lovable).
// 2) Substitua CRM_TOKEN pelo "Inbound Lead Token" que o CRM gerou pra você.
// 3) Se o Lovable pedir um header com nome específico (ex: "X-API-Key"),
//    ajuste CRM_TOKEN_HEADER abaixo. O padrão "Authorization: Bearer …" é o
//    mais comum.
//
// PAYLOAD enviado (POST · JSON):
// {
//   "event":        "diagnostico_aion",
//   "nome":         "João Silva",
//   "whatsapp":     "(11) 99999-9999",
//   "whatsapp_raw": "11999999999",
//   "cnpj":         "12.345.678/0001-90",
//   "cnpj_raw":     "12345678000190",
//   "segmento":     "Hamburgueria",
//   "faturamento":  "80 mil até 100 mil",
//   "budget":       "Sim, se o retorno justificar",
//   "url":          "https://aion.com.br/",
//   "referrer":     "https://google.com/...",
//   "user_agent":   "Mozilla/5.0...",
//   "submitted_at": "2026-05-22T14:32:10.123Z",
//   "utm": { "source", "medium", "campaign", "term", "content" }
// }
// ─────────────────────────────────────────────────────────────────────────────
const CRM_ENDPOINT     = 'https://jrzzbqwbcdyurfctbbxy.supabase.co/functions/v1/inbound-lead-aion';
const CRM_TOKEN        = 'aion_lp_eIplzlC6cgTrfIlgLqf34QzPpsUL';
const CRM_TOKEN_HEADER = 'Authorization';        // ou 'X-API-Key' / 'X-Inbound-Lead-Token'
const CRM_TOKEN_PREFIX = 'Bearer ';              // deixe '' se o header não usar prefixo

const getUTMParams = () => {
  const p = new URLSearchParams(window.location.search);
  return {
    source: p.get('utm_source'),
    medium: p.get('utm_medium'),
    campaign: p.get('utm_campaign'),
    term: p.get('utm_term'),
    content: p.get('utm_content'),
  };
};

const SEGMENTOS = [
'Pizzaria',
'Hamburgueria',
'Restaurante comida brasileira',
'Churrascaria / Steakhouse',
'Restaurante japonês',
'Restaurante massas / italiano',
'Restaurante comida árabe',
'Açaí / Sorveteria',
'Cafeteria',
'Doceria',
'Gastrobar',
'Distribuidora',
'Outros'];

const FATURAMENTOS = [
'Até 30 mil',
'30 mil até 50 mil',
'50 mil até 80 mil',
'80 mil até 100 mil',
'100 mil até 150 mil',
'150 mil até 250 mil',
'250 mil até 400 mil',
'400 mil até 600 mil',
'600 mil até 1 milhão',
'Mais de 1 milhão'];


const maskCNPJ = (v) => {
  const d = v.replace(/\D/g, '').slice(0, 14);
  if (d.length <= 2) return d;
  if (d.length <= 5) return `${d.slice(0, 2)}.${d.slice(2)}`;
  if (d.length <= 8) return `${d.slice(0, 2)}.${d.slice(2, 5)}.${d.slice(5)}`;
  if (d.length <= 12) return `${d.slice(0, 2)}.${d.slice(2, 5)}.${d.slice(5, 8)}/${d.slice(8)}`;
  return `${d.slice(0, 2)}.${d.slice(2, 5)}.${d.slice(5, 8)}/${d.slice(8, 12)}-${d.slice(12)}`;
};
// fmt: '#' = digit slot, other chars = literal separators
const fmtPhone = (raw, fmt) => {
  if (!fmt) return raw.replace(/\D/g, '');
  const digits = raw.replace(/\D/g, '');
  const max = (fmt.match(/#/g) || []).length;
  const d = digits.slice(0, max);
  if (!d.length) return '';
  let out = ''; let di = 0;
  for (let i = 0; i < fmt.length; i++) {
    if (fmt[i] === '#') {
      if (di >= d.length) break;
      out += d[di++];
    } else {
      if (di < d.length) out += fmt[i];
    }
  }
  return out;
};
const phonePlaceholder = (fmt) => fmt ? fmt.replace(/#/g, '0') : 'Número de telefone';

const COUNTRIES = [
  { code: 'BR', dial: '+55',  flag: '🇧🇷', name: 'Brasil',           fmt: '(##) #####-####' },
  { code: 'AF', dial: '+93',  flag: '🇦🇫', name: 'Afeganistão',      fmt: '### ### ####' },
  { code: 'ZA', dial: '+27',  flag: '🇿🇦', name: 'África do Sul',    fmt: '## ### ####' },
  { code: 'AL', dial: '+355', flag: '🇦🇱', name: 'Albânia',           fmt: '### ### ###' },
  { code: 'DE', dial: '+49',  flag: '🇩🇪', name: 'Alemanha',          fmt: '#### ########' },
  { code: 'DZ', dial: '+213', flag: '🇩🇿', name: 'Argélia',           fmt: '### ### ####' },
  { code: 'AR', dial: '+54',  flag: '🇦🇷', name: 'Argentina',         fmt: '(###) ###-####' },
  { code: 'SA', dial: '+966', flag: '🇸🇦', name: 'Arábia Saudita',    fmt: '## ### ####' },
  { code: 'AU', dial: '+61',  flag: '🇦🇺', name: 'Austrália',         fmt: '#### ### ###' },
  { code: 'AT', dial: '+43',  flag: '🇦🇹', name: 'Áustria',           fmt: '#### ######' },
  { code: 'BE', dial: '+32',  flag: '🇧🇪', name: 'Bélgica',           fmt: '### ## ## ##' },
  { code: 'BO', dial: '+591', flag: '🇧🇴', name: 'Bolívia',           fmt: '# ### ####' },
  { code: 'CA', dial: '+1',   flag: '🇨🇦', name: 'Canadá',            fmt: '(###) ###-####' },
  { code: 'CL', dial: '+56',  flag: '🇨🇱', name: 'Chile',             fmt: '# #### ####' },
  { code: 'CN', dial: '+86',  flag: '🇨🇳', name: 'China',             fmt: '### #### ####' },
  { code: 'CO', dial: '+57',  flag: '🇨🇴', name: 'Colômbia',          fmt: '### ### ####' },
  { code: 'KR', dial: '+82',  flag: '🇰🇷', name: 'Coreia do Sul',     fmt: '##-####-####' },
  { code: 'CR', dial: '+506', flag: '🇨🇷', name: 'Costa Rica',        fmt: '####-####' },
  { code: 'CU', dial: '+53',  flag: '🇨🇺', name: 'Cuba',              fmt: '# ### ####' },
  { code: 'DK', dial: '+45',  flag: '🇩🇰', name: 'Dinamarca',         fmt: '## ## ## ##' },
  { code: 'AE', dial: '+971', flag: '🇦🇪', name: 'Emirados Árabes',   fmt: '## ### ####' },
  { code: 'EC', dial: '+593', flag: '🇪🇨', name: 'Equador',           fmt: '## ### ####' },
  { code: 'SV', dial: '+503', flag: '🇸🇻', name: 'El Salvador',       fmt: '####-####' },
  { code: 'ES', dial: '+34',  flag: '🇪🇸', name: 'Espanha',           fmt: '### ### ###' },
  { code: 'US', dial: '+1',   flag: '🇺🇸', name: 'Estados Unidos',    fmt: '(###) ###-####' },
  { code: 'EG', dial: '+20',  flag: '🇪🇬', name: 'Egito',             fmt: '### #### ####' },
  { code: 'FI', dial: '+358', flag: '🇫🇮', name: 'Finlândia',         fmt: '## ### ####' },
  { code: 'FR', dial: '+33',  flag: '🇫🇷', name: 'França',            fmt: '## ## ## ## ##' },
  { code: 'GR', dial: '+30',  flag: '🇬🇷', name: 'Grécia',            fmt: '### ### ####' },
  { code: 'GT', dial: '+502', flag: '🇬🇹', name: 'Guatemala',         fmt: '####-####' },
  { code: 'HT', dial: '+509', flag: '🇭🇹', name: 'Haiti',             fmt: '##-##-####' },
  { code: 'NL', dial: '+31',  flag: '🇳🇱', name: 'Holanda',           fmt: '## ### ####' },
  { code: 'HN', dial: '+504', flag: '🇭🇳', name: 'Honduras',          fmt: '####-####' },
  { code: 'HU', dial: '+36',  flag: '🇭🇺', name: 'Hungria',           fmt: '## ### ####' },
  { code: 'IN', dial: '+91',  flag: '🇮🇳', name: 'Índia',             fmt: '##### #####' },
  { code: 'ID', dial: '+62',  flag: '🇮🇩', name: 'Indonésia',         fmt: '###-####-####' },
  { code: 'GB', dial: '+44',  flag: '🇬🇧', name: 'Inglaterra',        fmt: '##### ######' },
  { code: 'IQ', dial: '+964', flag: '🇮🇶', name: 'Iraque',            fmt: '### ### ####' },
  { code: 'IR', dial: '+98',  flag: '🇮🇷', name: 'Irã',               fmt: '### ### ####' },
  { code: 'IE', dial: '+353', flag: '🇮🇪', name: 'Irlanda',           fmt: '## ### ####' },
  { code: 'IL', dial: '+972', flag: '🇮🇱', name: 'Israel',            fmt: '##-###-####' },
  { code: 'IT', dial: '+39',  flag: '🇮🇹', name: 'Itália',            fmt: '### ### ####' },
  { code: 'JP', dial: '+81',  flag: '🇯🇵', name: 'Japão',             fmt: '###-####-####' },
  { code: 'LB', dial: '+961', flag: '🇱🇧', name: 'Líbano',            fmt: '## ### ###' },
  { code: 'MA', dial: '+212', flag: '🇲🇦', name: 'Marrocos',          fmt: '###-######' },
  { code: 'MX', dial: '+52',  flag: '🇲🇽', name: 'México',            fmt: '(##) ####-####' },
  { code: 'MZ', dial: '+258', flag: '🇲🇿', name: 'Moçambique',        fmt: '## ### ####' },
  { code: 'NG', dial: '+234', flag: '🇳🇬', name: 'Nigéria',           fmt: '### ### ####' },
  { code: 'NO', dial: '+47',  flag: '🇳🇴', name: 'Noruega',           fmt: '### ## ###' },
  { code: 'NZ', dial: '+64',  flag: '🇳🇿', name: 'Nova Zelândia',     fmt: '##-###-####' },
  { code: 'PA', dial: '+507', flag: '🇵🇦', name: 'Panamá',            fmt: '####-####' },
  { code: 'PY', dial: '+595', flag: '🇵🇾', name: 'Paraguai',          fmt: '### ### ###' },
  { code: 'PE', dial: '+51',  flag: '🇵🇪', name: 'Peru',              fmt: '### ### ###' },
  { code: 'PL', dial: '+48',  flag: '🇵🇱', name: 'Polônia',           fmt: '### ### ###' },
  { code: 'PT', dial: '+351', flag: '🇵🇹', name: 'Portugal',          fmt: '### ### ###' },
  { code: 'DO', dial: '+1809',flag: '🇩🇴', name: 'Rep. Dominicana',   fmt: '(###) ###-####' },
  { code: 'RO', dial: '+40',  flag: '🇷🇴', name: 'Romênia',           fmt: '### ### ###' },
  { code: 'RU', dial: '+7',   flag: '🇷🇺', name: 'Rússia',            fmt: '(###) ###-##-##' },
  { code: 'SE', dial: '+46',  flag: '🇸🇪', name: 'Suécia',            fmt: '##-### ## ##' },
  { code: 'CH', dial: '+41',  flag: '🇨🇭', name: 'Suíça',             fmt: '## ### ## ##' },
  { code: 'TH', dial: '+66',  flag: '🇹🇭', name: 'Tailândia',         fmt: '##-###-####' },
  { code: 'TN', dial: '+216', flag: '🇹🇳', name: 'Tunísia',           fmt: '## ### ###' },
  { code: 'TR', dial: '+90',  flag: '🇹🇷', name: 'Turquia',           fmt: '### ### ####' },
  { code: 'UA', dial: '+380', flag: '🇺🇦', name: 'Ucrânia',           fmt: '## ### ####' },
  { code: 'UY', dial: '+598', flag: '🇺🇾', name: 'Uruguai',           fmt: '# ### ## ##' },
  { code: 'VE', dial: '+58',  flag: '🇻🇪', name: 'Venezuela',         fmt: '###-###-####' },
  { code: 'VN', dial: '+84',  flag: '🇻🇳', name: 'Vietnã',            fmt: '### ### ####' },
];

function CountrySelect({ value, onChange }) {
  const [open, setOpen] = React.useState(false);
  const [search, setSearch] = React.useState('');
  const ref = React.useRef(null);
  const inputRef = React.useRef(null);
  const selected = COUNTRIES.find(c => c.dial === value) || COUNTRIES[0];
  const q = search.trim().toLowerCase();
  const filtered = q
    ? COUNTRIES.filter(c => c.name.toLowerCase().includes(q) || c.dial.includes(q))
    : COUNTRIES;

  React.useEffect(() => {
    if (!open) { setSearch(''); return; }
    const close = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', close);
    setTimeout(() => inputRef.current?.focus(), 30);
    return () => document.removeEventListener('mousedown', close);
  }, [open]);

  return (
    <div className="country-select" ref={ref}>
      <button type="button" className="country-trigger" onClick={() => setOpen(o => !o)}>
        <span>{selected.flag}</span>
        <span>{selected.dial}</span>
        <svg viewBox="0 0 10 6" width="10" height="6" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M1 1l4 4 4-4"/></svg>
      </button>
      {open && (
        <div className="country-dropdown">
          <div className="country-search">
            <input
              ref={inputRef}
              type="text"
              placeholder="Buscar país ou código..."
              value={search}
              onChange={e => setSearch(e.target.value)}
            />
          </div>
          <div className="country-list">
            {filtered.length === 0
              ? <p className="country-empty">Nenhum país encontrado</p>
              : filtered.map(c => (
                <button key={c.code} type="button"
                  className={`country-option${c.dial === value ? ' active' : ''}`}
                  onClick={() => { onChange(c.dial); setOpen(false); }}>
                  <span>{c.flag}</span>
                  <span>{c.name}</span>
                  <span className="country-dial">{c.dial}</span>
                </button>
              ))
            }
          </div>
        </div>
      )}
    </div>
  );
}

const maskPhone = (v) => {
  const d = v.replace(/\D/g, '').slice(0, 11);
  if (d.length <= 2) return d ? `(${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)}`;
};

/* Custom select that matches the dark form theme */
function CSelect({ value, onChange, options, placeholder, id, name }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!open) return;
    const onDoc = (e) => {if (ref.current && !ref.current.contains(e.target)) setOpen(false);};
    const onKey = (e) => {if (e.key === 'Escape') setOpen(false);};
    document.addEventListener('mousedown', onDoc);
    document.addEventListener('keydown', onKey);
    return () => {
      document.removeEventListener('mousedown', onDoc);
      document.removeEventListener('keydown', onKey);
    };
  }, [open]);
  return (
    <div className="cselect" ref={ref}>
      <button
        type="button"
        id={id}
        className={`cselect-trigger ${open ? 'open' : ''} ${value ? '' : 'placeholder'}`}
        onClick={() => setOpen(!open)}>
        {value || placeholder}
      </button>
      {name && <input type="hidden" name={name} value={value || ''} />}
      {open &&
      <div className="cselect-menu" role="listbox">
          {options.map((opt) =>
        <div
          key={opt}
          className={`cselect-option ${opt === value ? 'selected' : ''}`}
          role="option"
          aria-selected={opt === value}
          onClick={() => {onChange(opt);setOpen(false);}}>
          
              {opt}
            </div>
        )}
        </div>
      }
    </div>);

}

function FormSection() {
  const [form, setForm] = React.useState({
    nome: '', whatsapp: '', cnpj: '', segmento: '', faturamento: '', budget: ''
  });
  const [countryCode, setCountryCode] = React.useState('+55');
  const setCountry = (dial) => { setCountryCode(dial); update('whatsapp', ''); };
  const [sent, setSent] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState('');
  const [tsToken, setTsToken] = React.useState('');
  const turnstileRef = React.useRef(null);
  const tsWidgetId = React.useRef(null);

  React.useEffect(() => {
    const render = () => {
      if (!window.turnstile || !turnstileRef.current || tsWidgetId.current !== null) return;
      tsWidgetId.current = window.turnstile.render(turnstileRef.current, {
        sitekey: '0x4AAAAAADXgikTAEBbIuZ4V',
        size: 'invisible',
        callback: (token) => setTsToken(token),
        'expired-callback': () => setTsToken(''),
        'error-callback': () => setTsToken(''),
      });
    };
    render();
    const id = window.setInterval(render, 300);
    return () => {
      window.clearInterval(id);
      if (tsWidgetId.current !== null && window.turnstile) {
        window.turnstile.remove(tsWidgetId.current);
        tsWidgetId.current = null;
      }
    };
  }, []);

  const update = (k, v) => setForm((f) => ({ ...f, [k]: v }));
  const submit = async (e) => {
    e.preventDefault();
    setError('');
    if (!form.nome || !form.whatsapp || !form.segmento || !form.faturamento || !form.cnpj || !form.budget) {
      setError('Por favor, preencha todos os campos obrigatórios.');
      return;
    }
    if (!tsToken) {
      setError('Complete a verificação de segurança antes de enviar.');
      return;
    }

    const payload = {
      event: 'diagnostico_aion',
      nome: form.nome,
      whatsapp: `${countryCode} ${form.whatsapp}`,
      whatsapp_raw: `${countryCode.replace('+', '')}${form.whatsapp.replace(/\D/g, '')}`,
      cnpj: form.cnpj,
      cnpj_raw: form.cnpj.replace(/\D/g, ''),
      segmento: form.segmento,
      faturamento: form.faturamento,
      budget: form.budget,
      url: window.location.href,
      referrer: document.referrer || null,
      user_agent: navigator.userAgent,
      submitted_at: new Date().toISOString(),
      utm: getUTMParams(),
      turnstile_token: tsToken,
    };

    setSubmitting(true);
    try {
      const headers = { 'Content-Type': 'application/json' };
      if (CRM_TOKEN && !CRM_TOKEN.startsWith('COLE_')) {
        headers[CRM_TOKEN_HEADER] = `${CRM_TOKEN_PREFIX}${CRM_TOKEN}`;
      }
      const res = await fetch(CRM_ENDPOINT, {
        method: 'POST',
        headers,
        body: JSON.stringify(payload),
      });
      if (!res.ok) throw new Error(`HTTP ${res.status}`);

      // Meta Pixel — disparar evento Lead
      if (typeof window.fbq === 'function') {
        window.fbq('track', 'Lead', {
          content_name: 'Diagnóstico AION',
          value: 4000,
          currency: 'BRL',
        });
      }

      // Pequeno delay para o pixel disparar antes do redirect
      setTimeout(() => { window.location.href = 'obrigado.html'; }, 400);
    } catch (err) {
      console.error('[AION CRM] Falha ao enviar lead:', err);
      setError('Não foi possível enviar agora. Tente novamente em instantes.');
    } finally {
      setSubmitting(false);
    }
  };
  // Progressive disclosure
  const showCNPJ = !!form.faturamento;
  const cnpjComplete = form.cnpj.replace(/\D/g, '').length === 14;
  const showBudget = showCNPJ && cnpjComplete;

  const budgetOptions = [
  'Sim, se o retorno justificar',
  'Ainda não estou no momento',
  'Depende do que está incluído'];

  return (
    <section className="form-section" id="form">
      <div className="wrap">
        <div className="form-grid">
          <form className="form-card" onSubmit={submit}>
            <h3>Diagnóstico gratuito para o seu negócio</h3>
            <p className="muted">Nossa equipe analisa seu perfil e entra em contato pelo WhatsApp.</p>

            <div className="field">
              <label htmlFor="lead-nome">Nome completo <span className="req">*</span></label>
              <input
                id="lead-nome" name="nome" type="text" placeholder="Seu nome" required
                autoComplete="name"
                value={form.nome} onChange={(e) => update('nome', e.target.value)} />
              
            </div>

            <div className="field">
              <label htmlFor="lead-whatsapp">WhatsApp <span className="req">*</span></label>
              <div className="phone-wrap">
                <CountrySelect value={countryCode} onChange={setCountry} />
                <input
                  id="lead-whatsapp" name="whatsapp" type="tel"
                  placeholder={phonePlaceholder((COUNTRIES.find(c => c.dial === countryCode) || COUNTRIES[0]).fmt)}
                  required inputMode="tel" autoComplete="tel"
                  value={form.whatsapp}
                  onChange={(e) => {
                    const country = COUNTRIES.find(c => c.dial === countryCode) || COUNTRIES[0];
                    update('whatsapp', fmtPhone(e.target.value, country.fmt));
                  }} />
              </div>
              
            </div>

            <div className="field">
              <label htmlFor="lead-segmento">Segmento <span className="req">*</span></label>
              <CSelect
                id="lead-segmento" name="segmento"
                value={form.segmento}
                onChange={(v) => update('segmento', v)}
                options={SEGMENTOS}
                placeholder="Selecione seu segmento" />
              
            </div>

            <div className="field">
              <label htmlFor="lead-faturamento">Faturamento mensal <span className="req">*</span></label>
              <CSelect
                id="lead-faturamento" name="faturamento"
                value={form.faturamento}
                onChange={(v) => update('faturamento', v)}
                options={FATURAMENTOS}
                placeholder="Selecione a faixa" />
              
            </div>

            {showCNPJ &&
            <div className="field reveal" key="cnpj-field">
                <label htmlFor="lead-cnpj">CNPJ <span className="req">*</span></label>
                <input
                id="lead-cnpj" name="cnpj" type="text" placeholder="00.000.000/0000-00" required inputMode="numeric"
                value={form.cnpj} onChange={(e) => update('cnpj', maskCNPJ(e.target.value))}
                autoFocus />
              
              </div>
            }

            {showBudget &&
            <div className="field reveal budget-field" key="budget-field">
                <label>Você investiria R$4.000/mês para crescer as vendas do seu negócio? <span className="req">*</span></label>
                <div className="radio-stack" id="lead-budget" role="radiogroup">
                  {budgetOptions.map((opt, i) =>
                <label key={opt} htmlFor={`lead-budget-${i}`} className={`radio-row ${form.budget === opt ? 'on' : ''}`}>
                      <input
                    id={`lead-budget-${i}`} name="budget"
                    type="radio" value={opt} required
                    checked={form.budget === opt}
                    onChange={(e) => update('budget', e.target.value)} />
                  
                      <span className="radio-dot"></span>
                      <span>{opt}</span>
                    </label>
                )}
                </div>
              </div>
            }

            {error && <div className="form-error" role="alert">{error}</div>}

            <div ref={turnstileRef} style={{ position: 'absolute', visibility: 'hidden', width: 0, height: 0, overflow: 'hidden' }} />

            <button type="submit" className={`form-submit ${sent ? 'sent' : ''}`} disabled={submitting || sent}>
              {sent
                ? <>✓ Recebido. Em breve falamos.</>
                : submitting
                  ? <>Enviando...</>
                  : <>Receber mais informações <Icon name="arrow" size={18} /></>
              }
            </button>
            <p className="form-foot"><Icon name="lock" size={12} /> Seus dados estão protegidos conforme a LGPD.</p>
          </form>

          <div className="form-urgency-col">
            <h2 className="form-urgency">
              Não saia agora!<br />
              Faltam <strong>poucos<br />segundos</strong> para<br />
              seu restaurante <strong>mudar.</strong>
            </h2>
            <div className="form-steps">
              <div className="form-step">
                <div className="form-step-num">1</div>
                <div>
                  <h4>Complete o formulário</h4>
                  <p>Forneça suas informações no formulário ao lado. Garantimos a segurança total de seus dados. Serão usados apenas para contato.</p>
                </div>
              </div>
              <div className="form-step">
                <div className="form-step-num">2</div>
                <div>
                  <h4>Receba contato pelo WhatsApp</h4>
                  <p>Em um prazo de até 5 minutos em horário comercial, um dos nossos especialistas entrará em contato diretamente para agendar a reunião mais importante com você.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}
window.FormSection = FormSection;

/* === TESTIMONIALS === */
function Testimonials() {
  const videos = [
    'https://www.youtube.com/embed/HT5SA4Hny_Q',
    'https://www.youtube.com/embed/G0mJ_KIVSIA',
  ];

  return (
    <section className="testimonials">
      <div className="wrap">
        <div className="test-head">
          <span className="eyebrow">+150 RESTAURANTES COM RESULTADOS</span>
          <h2 className="section-title">Isso é <em>AION</em>.</h2>
        </div>
        <div className="test-grid">
          {videos.map((src, i) =>
            <div className="test-card test-card-video" key={i}>
              <iframe
                src={src}
                title={`Depoimento ${i + 1}`}
                frameBorder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', borderRadius: 'inherit' }}
              />
            </div>
          )}
        </div>
      </div>
    </section>);

}
window.Testimonials = Testimonials;

/* === ABOUT === */
function About() {
  return (
    <section className="about" id="sobre">
      <div className="wrap">
        <div className="about-grid">
          <div className="polaroids">
            <div className="polaroid polaroid-1">
              <div className="polaroid-img">
                <img src="assets/equipe.png" alt="Time AION" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
              </div>
              <div className="polaroid-label">TIME AION</div>
            </div>
            <div className="polaroid polaroid-2">
              <div className="polaroid-img">
                <img src="assets/escritorio.png" alt="Escritório AION" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
              </div>
              <div className="polaroid-label">ESCRITÓRIO</div>
            </div>
            <div className="polaroid polaroid-3">
              <div className="polaroid-img">
                <img src="assets/nossa-cultura.png" alt="Nossa Cultura" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
              </div>
              <div className="polaroid-label">NOSSA CULTURA</div>
            </div>
          </div>
          <div>
            <span className="eyebrow">Quem somos</span>
            <h2 className="section-title" style={{ marginTop: 16 }}>
              Especialistas em marketing gastronômico — <em>parceiros do seu sucesso.</em>
            </h2>
            <p className="section-sub">
              Na AION não somos só uma agência. Somos a assessoria de marketing especializada
              em restaurantes que estrutura crescimento <strong style={{ color: '#0a0a0a' }}>fase por fase</strong>,
              de acordo com o nível atual do seu negócio.
            </p>
            <p className="section-sub" style={{ marginTop: 14 }}>
              Atendemos restaurantes, pizzarias, hamburguerias, açaís, cafeterias, docerias,
              gastrobars, deliveries e distribuidoras. Se o seu negócio vende comida, a AION
              entende o seu mercado.
            </p>
            <div className="about-stats">
              <div className="stat-card">
                <div className="stat-num">+150</div>
                <div className="stat-label">Restaurantes e negócios de alimentação atendidos</div>
              </div>
              <div className="stat-card">
                <div className="stat-num">3+</div>
                <div className="stat-label">Anos de operação ininterrupta</div>
              </div>
              <div className="stat-card">
                <div className="stat-num">0%</div>
                <div className="stat-label">Cancelamentos por insatisfação</div>
              </div>
              <div className="stat-card">
                <div className="stat-num">7</div>
                <div className="stat-label">Soluções especializadas em alimentação</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}
window.About = About;

/* === METHOD === */
function Method() {
  return (
    <section className="method" id="metodo">
      <div className="wrap">
        <span className="eyebrow" style={{ justifyContent: 'center' }}>O Método AION</span>
        <h2 className="section-title" style={{ marginTop: 16, textAlign: 'center', marginLeft: 'auto', marginRight: 'auto', maxWidth: '24ch' }}>
          Um programa de aceleração contínuo para que seu restaurante <em>nunca pare de vender.</em>
        </h2>
        <p className="section-sub" style={{ textAlign: 'center', maxWidth: '68ch', marginLeft: 'auto', marginRight: 'auto', marginTop: 20, marginBottom: 25 }}>
          O Método AION estrutura o crescimento fase por fase. Você não paga por serviço
          que ainda não precisa — primeiro organizamos a base, depois aceleramos.
        </p>
        <div className="method-viz">
          <div className="method-rings">
            <div className="method-ring r1"></div>
            <div className="method-ring r2"></div>
            <div className="method-ring r3"></div>
            <div className="method-glow"></div>
            <img className="method-mark" src="assets/aion-icon.png" alt="AION" />
          </div>
          <div className="method-tag mt-1"><span className="mt-num">01</span>Atração</div>
          <div className="method-tag mt-2"><span className="mt-num">02</span>Engajamento</div>
          <div className="method-tag mt-3"><span className="mt-num">03</span>Aquisição</div>
          <div className="method-tag mt-4"><span className="mt-num">04</span>Monetização</div>
          <div className="method-tag mt-5"><span className="mt-num">05</span>Retenção</div>
        </div>
      </div>
    </section>);

}
window.Method = Method;

/* === ROI CHART (animated) === */
function RoiVisual() {
  const containerRef = React.useRef(null);
  const lineRef      = React.useRef(null);
  const numRef       = React.useRef(null);

  React.useEffect(() => {
    const line = lineRef.current;
    const container = containerRef.current;
    if (!line || !container) return;

    const len = line.getTotalLength();
    line.style.strokeDasharray = len;
    line.style.strokeDashoffset = len;

    const obs = new IntersectionObserver(([entry]) => {
      if (!entry.isIntersecting) return;
      obs.disconnect();

      // Draw line
      requestAnimationFrame(() => {
        line.style.transition = 'stroke-dashoffset 1.5s cubic-bezier(0.16, 1, 0.3, 1)';
        line.style.strokeDashoffset = 0;
      });

      // Fade in area + dots
      container.classList.add('chart-live');

      // Count up 84×
      const el = numRef.current;
      if (!el) return;
      const dur = 1500;
      const t0 = performance.now();
      const tick = now => {
        const p = Math.min((now - t0) / dur, 1);
        const ease = 1 - Math.pow(1 - p, 3);
        el.textContent = Math.round(ease * 84) + '×';
        if (p < 1) requestAnimationFrame(tick);
      };
      requestAnimationFrame(tick);
    }, { threshold: 0.35 });

    obs.observe(container);
    return () => obs.disconnect();
  }, []);

  return (
    <div className="svc-visual-inner" ref={containerRef}>
      <div className="svc-visual-tag">Case real · Hamburgueria</div>
      <div className="svc-visual-hero">
        <span className="svc-visual-hero-num" ref={numRef}>0×</span>
        <span className="svc-visual-hero-label">ROI da<br />campanha</span>
      </div>
      <div className="svc-chart">
        <svg viewBox="0 0 320 140" preserveAspectRatio="none" className="svc-chart-svg">
          <defs>
            <linearGradient id="roiArea" x1="0%" y1="0%" x2="0%" y2="100%">
              <stop offset="0%" stopColor="#ffc000" stopOpacity="0.45"/>
              <stop offset="100%" stopColor="#ffc000" stopOpacity="0"/>
            </linearGradient>
            <linearGradient id="roiLine" x1="0%" y1="0%" x2="100%" y2="0%">
              <stop offset="0%" stopColor="#ffaa00"/>
              <stop offset="100%" stopColor="#ffd633"/>
            </linearGradient>
          </defs>
          <line x1="0" y1="35" x2="320" y2="35" stroke="rgba(255,255,255,0.04)" strokeDasharray="2 4"/>
          <line x1="0" y1="70" x2="320" y2="70" stroke="rgba(255,255,255,0.04)" strokeDasharray="2 4"/>
          <line x1="0" y1="105" x2="320" y2="105" stroke="rgba(255,255,255,0.04)" strokeDasharray="2 4"/>
          <path className="chart-area" d="M 0 122 C 30 120, 60 116, 90 108 S 150 90, 180 72 S 240 38, 296 16 L 296 140 L 0 140 Z" fill="url(#roiArea)"/>
          <path ref={lineRef} d="M 0 122 C 30 120, 60 116, 90 108 S 150 90, 180 72 S 240 38, 296 16" fill="none" stroke="url(#roiLine)" strokeWidth="2.5" strokeLinecap="round"/>
          <circle className="chart-dot-outer" cx="296" cy="16" r="9" fill="#ffc000"/>
          <circle className="chart-dot-inner" cx="296" cy="16" r="4.5" fill="#ffd633" stroke="#0a0a0a" strokeWidth="1.5"/>
        </svg>
        <div className="svc-chart-axis">
          <span>Dia 1</span>
          <span>Dia 15</span>
          <span>Dia 30</span>
        </div>
      </div>
      <div className="svc-flow">
        <div className="svc-flow-cell">
          <span className="svc-flow-label">Investido</span>
          <strong className="svc-flow-val">R$1.200</strong>
        </div>
        <div className="svc-flow-arrow"><Icon name="arrow" size={16} /></div>
        <div className="svc-flow-cell hi">
          <span className="svc-flow-label">Faturado</span>
          <strong className="svc-flow-val">R$101k</strong>
        </div>
      </div>
    </div>
  );
}
window.RoiVisual = RoiVisual;

/* === SERVICES === */
function Services() {
  const services = [
  { num: '02', icon: 'video', title: 'Vídeos e Criativos', desc: 'Conteúdo feito para vender pedidos — não para enfeitar feed. Produção completa, da pauta à entrega.' },
  { num: '03', icon: 'handshake', title: 'Soluções Comerciais', desc: 'SDR e closers treinados para o seu negócio. Scripts e processos para aumentar pedidos, reservas e conversão.' },
  { num: '04', icon: 'menu', title: 'Cardápio Digital', desc: 'Estruturado para converter visita em pedido. Layout e itens organizados para aumentar ticket médio.' },
  { num: '05', icon: 'message', title: 'Disparo Inteligente', desc: 'Campanhas automáticas no WhatsApp do seu cliente. Reativação, promoções e novidades no momento certo.' },
  { num: '06', icon: 'web', title: 'Sites e Landing Pages', desc: 'Página construída para capturar e converter. Integração com WhatsApp, cardápio e redes sociais.' },
  { num: '07', icon: 'chart', title: 'Acompanhamento', desc: 'Relatório e reunião semanal com gestor dedicado. Você sabe exatamente o que funciona toda semana.' }];

  return (
    <section className="services" id="servicos">
      <div className="wrap">
        <div className="services-head" style={{ textAlign: "left" }}>
          <span className="eyebrow" style={{ textAlign: "center" }}>Serviços</span>
          <h2 className="section-title">A AION Assessoria estrutura o marketing do seu restaurante <em>com base na sua necessidade.</em></h2>
        </div>
        <div className="services-grid">
          <div className="svc-card featured">
            <div className="svc-body">
              <div className="svc-head">
                <div className="svc-icon"><Icon name="target" /></div>
                <span className="svc-tag">Carro-chefe</span>
              </div>
              <h4>Mídia Paga<br />especializada em alimentação.</h4>
              <p>Gestão de anúncios no Instagram, Facebook e iFood. Campanhas feitas para
              quem já tem fome de comprar — não para impressionar. Otimizamos diariamente
              com base no que está vendendo, não no que está bonito.</p>
              <div className="svc-bullets">
                <span>Meta Ads</span>
                <span>iFood Ads</span>
                <span>Google Ads</span>
                <span>Otimização diária</span>
              </div>            </div>
            <div className="svc-visual">
              <RoiVisual />
            </div>
          </div>

          {services.map((s) =>
          <div className="svc-card" key={s.num}>
              <div className="svc-head">
                <div className="svc-icon"><Icon name={s.icon} /></div>
              </div>
              <h4>{s.title}</h4>
              <p>{s.desc}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}
window.Services = Services;

/* === RESULTS === */
function Results() {
  return (
    <section className="results" id="resultados">
      <div className="wrap">
        <span className="eyebrow">Resultados</span>
        <h2 className="section-title" style={{ marginTop: 16, maxWidth: '20ch' }}>
          O que acontece quando restaurante encontra <em>estratégia.</em>
        </h2>
        <div className="results-grid">
          <div className="result-card">
            <span className="result-tag">Caso #01 — Mídia Paga</span>
            <div className="result-big">R$101.000</div>
            <p>R$1.200 investidos em tráfego pago no Instagram e Meta. R$101 mil faturados no mês. O negócio saiu de R$300k para R$500k de faturamento mensal.</p>
            <div className="result-meta">
              <div>ROAS<strong>84x</strong></div>
              <div>Período<strong>30 dias</strong></div>
              <div>Segmento<strong>Distribuidora</strong></div>
            </div>
          </div>
          <div className="result-card">
            <span className="result-tag">Caso #02 — Estrutura completa</span>
            <div className="result-big">R$40k no 1º mês</div>
            <p>Entrou faturando R$20k. Dois sócios, sem equipe, sem previsibilidade. No primeiro mês com a AION: dobrou o faturamento, contratou equipe e estabilizou o caixa.</p>
            <div className="result-meta">
              <div>Crescimento<strong>2x em 30d</strong></div>
              <div>Período<strong>1º mês</strong></div>
              <div>Segmento<strong>Hamburgueria</strong></div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}
window.Results = Results;

/* === TEAM === */
function Team() {
  const roles = [
  { icon: 'target', title: 'Gestor Dedicado', desc: 'Um responsável exclusivo pelo seu negócio com reunião toda semana.' },
  { icon: 'spark', title: 'Especialista em Tráfego', desc: 'Campanhas otimizadas continuamente com base em dados reais.' },
  { icon: 'video', title: 'Designer e Videomaker', desc: 'Criativos testados e validados no setor de alimentação.' },
  { icon: 'growth', title: 'Estrategista de Crescimento', desc: 'Planejamento por fases para escalar com previsibilidade.' }];

  return (
    <section className="team">
      <div className="wrap">
        <div className="team-head">
          <span className="eyebrow">Estrutura</span>
          <h2 className="section-title">Receba um <em>time exclusivo</em>.</h2>
          <p className="section-sub">
            Você não precisa contratar, treinar, gerenciar ou pagar encargos. A AION coloca
            um time especializado trabalhando pelo crescimento do seu restaurante enquanto
            você foca na operação.
          </p>
        </div>
        <div className="team-grid">
          {roles.map((r, i) =>
          <div className="team-card" key={i}>
              <div className="team-icon"><Icon name={r.icon} /></div>
              <h4>{r.title}</h4>
              <p>{r.desc}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}
window.Team = Team;

/* === FAQ === */
function FAQ() {
  const [open, setOpen] = React.useState(0);
  const items = [
  { q: 'O que exatamente a AION faz?', a: 'Somos uma assessoria de marketing especializada em alimentação. Cuidamos de mídia paga, criativos, vendas, cardápio digital, WhatsApp, sites e acompanhamento estratégico — tudo integrado, com um gestor dedicado e equipe especializada no setor.' },
  { q: 'Em quanto tempo vou ver resultado?', a: 'Os primeiros movimentos aparecem em 30 dias — geralmente em pedidos novos e ticket médio. A estabilidade e a previsibilidade vêm do 3º mês em diante, quando as fases do método já estão rodando integradas.' },
  { q: 'Vocês atendem qualquer tipo de restaurante?', a: 'Atendemos restaurantes, pizzarias, hamburguerias, açaís, cafeterias, docerias, gastrobars, deliveries e distribuidoras. Se o seu negócio vende comida, conhecemos o seu mercado.' },
  { q: 'Já contratei agência antes e não funcionou.', a: 'A maioria dos nossos clientes vem dessa experiência. A diferença é o foco: só trabalhamos com alimentação, com método validado em mais de 150 negócios. Você vê o que está funcionando toda semana, sem terceirizar a estratégia.' },
  { q: 'Não sei se tenho budget para isso.', a: 'O diagnóstico é gratuito e serve exatamente para isso. Mapeamos a fase do seu restaurante e propomos só o que faz sentido agora. Você não paga por serviço que ainda não precisa.' },
  { q: 'Como funciona o acompanhamento?', a: 'Reunião semanal com seu gestor dedicado, relatório com os números do período e ajustes em conjunto. Você sabe exatamente o que está funcionando, o que precisa mudar e o que vem na próxima semana.' },
  { q: 'O que acontece depois que eu preencho o formulário?', a: 'Em até 5 minutos no horário comercial, um especialista entra em contato pelo WhatsApp. Marcamos uma conversa de diagnóstico, sem custo e sem compromisso, para entender seu cenário.' }];

  return (
    <section className="faq" id="faq">
      <div className="wrap">
        <div className="faq-grid">
          <div className="faq-intro">
            <span className="eyebrow">FAQ</span>
            <h2 className="section-title" style={{ marginTop: 16 }}>Perguntas <em>frequentes.</em></h2>
            <p>Está com a mesma dúvida sobre a AION? Talvez ela esteja aqui.</p>
          </div>
          <div className="faq-list">
            {items.map((it, i) =>
            <div className={`faq-item ${open === i ? 'open' : ''}`} key={i} onClick={() => setOpen(open === i ? -1 : i)}>
                <div className="faq-q">
                  <span>{it.q}</span>
                  <span className="faq-toggle">+</span>
                </div>
                <div className="faq-a">{it.a}</div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}
window.FAQ = FAQ;

/* === FINAL CTA === */
function FinalCTA() {
  return (
    <section className="final-cta">
      <div className="wrap">
        <h2 className="final-cta-head">
          Seu restaurante tem um <em>teto.</em><br />A questão é <em>qual.</em>
        </h2>
        <p className="final-cta-sub">
          A questão é se esse teto é o potencial real do seu restaurante — ou o limite
          da sua estratégia atual. O diagnóstico é gratuito. É onde tudo começa.
        </p>
        <a href="#form" className="final-cta-btn">
          Quero meu diagnóstico gratuito <Icon name="arrow" size={18} />
        </a>
        <div className="final-cta-foot">Sem compromisso · Respondemos em até 5 min no horário comercial</div>
      </div>
    </section>);

}
window.FinalCTA = FinalCTA;

/* === FOOTER === */
function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div className="foot-row">
          <div className="foot-logo"><img src="assets/aion-horizontal.png" alt="AION" /></div>
          <a className="foot-social" href="https://instagram.com/aionassessoria" target="_blank" rel="noopener" aria-label="Instagram @aionassessoria">
            <Icon name="instagram" size={18} />
          </a>
        </div>
        <div className="foot-meta">
          <div>© 2026 AION Assessoria de Marketing para Restaurantes</div>
          <div>CNPJ: 56.010.540/0001-00</div>
        </div>
      </div>
    </footer>);

}
window.Footer = Footer;