/* Main sections: Header, Problems, Solutions, How, Cases, Authority, CTA, Footer */
const { useEffect: useEffectM, useState: useStateM, useRef: useRefM } = React;

const WA_LINK = 'https://wa.me/5541996086083?text=Ol%C3%A1%2C%20quero%20automatizar%20meu%20atendimento!';
window.WA_LINK = WA_LINK;

/* ---------- Scroll reveal ---------- */
function useReveal() {
  useEffectM(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

/* ---------- Header ---------- */
function Header({ onWhats }) {
  const [scrolled, setScrolled] = useStateM(false);
  useEffectM(() => {
    const fn = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', fn, { passive: true });
    fn();
    return () => window.removeEventListener('scroll', fn);
  }, []);
  return (
    <header className={`hdr ${scrolled ? 'scrolled' : ''}`}>
      <div className="container hdr-row">
        <a href="#top" className="brand">
          <span className="brand-mark" style={{ width: "70px", height: "70px" }}></span>
          <span>Dominus AI</span>
        </a>
        <nav className="nav">
          <a href="#solucoes">Soluções</a>
          <a href="#como-funciona">Como funciona</a>
          <a href="#projetos">Projetos</a>
          <a href="#sobre">Sobre</a>
          <a href="#contato">Contato</a>
        </nav>
        <div className="hdr-cta">
          <a className="btn btn-ghost" href="#solucoes" style={{ height: 38, padding: '0 14px', fontSize: 13.5 }}>Entrar</a>
          <a className="btn btn-whats" href={WA_LINK} target="_blank" rel="noopener noreferrer" onClick={onWhats} style={{ height: 38, padding: '0 14px', fontSize: 13.5 }}>
            <WhatsIcon />
            Falar no WhatsApp
          </a>
        </div>
      </div>
    </header>);

}

function WhatsIcon({ size = 14, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
      <path d="M20 4A11.7 11.7 0 0 0 3.2 19l-1.2 5 5.1-1.3A11.6 11.6 0 0 0 12 24h.1A11.95 11.95 0 0 0 20 4z" stroke={color} strokeWidth="1.6" fill="none" />
      <path d="M9 8.5c.2-.5.5-.6.8-.6h.6c.2 0 .4 0 .6.5.2.6.7 2 .8 2.1.1.2.1.4 0 .6-.2.4-.5.7-.7.9-.2.2-.4.4-.2.7.4.7 1 1.4 1.7 2 .9.7 1.7 1 2 1.1.3.1.5 0 .7-.1.2-.2.7-.8.9-1 .2-.3.4-.2.7-.1.3.1 1.8.9 2 1 .3.1.4.2.5.4.1.2.1.9-.2 1.7-.3.8-1.8 1.6-2.5 1.6-.7 0-1.7.3-5.4-1.5-3.7-1.8-5.6-5.4-5.8-5.7-.2-.3-1-1.5-1-2.9 0-1.4.7-2.1 1-2.4z" fill={color} />
    </svg>);

}

/* ---------- Hero ---------- */
function Hero({ tweaks }) {
  return (
    <section style={{ position: 'relative', paddingTop: 80, paddingBottom: 100, overflow: 'hidden' }}>
      <div className="hero-bg"></div>
      <DottedSurface className="hero-dots" />
      <div className="hero-fade"></div>
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 28, marginBottom: 56 }}>
          <span className="eyebrow reveal">
            <span className="dot"></span>
            <span className="mono" style={{ fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase' }}>v.2026 · agentes de IA</span>
            <span style={{ color: 'var(--muted)' }}>para negócios locais</span>
          </span>

          <h1 className="reveal" style={{ maxWidth: 1020 }}>
            Cada mensagem{' '}
            <span style={{
              background: 'linear-gradient(90deg, #2563EB 0%, #5CE1E6 60%, #C6A15B 100%)',
              WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
              backgroundClip: 'text', color: 'transparent'
            }}>vira venda</span>. Nenhum lead morre esperando resposta.
          </h1>

          <p className="lead reveal" style={{ maxWidth: 720, textAlign: 'center' }}>
            Sistemas de IA sob medida pra sua equipe responder em segundos, fazer follow-up sozinha e focar só no cliente quente — sem aumentar o time.
          </p>

          <div className="reveal" style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center' }}>
            <a className="btn btn-primary" href={WA_LINK} target="_blank" rel="noopener noreferrer">
              Quero automatizar meu atendimento
              <ArrowIcon />
            </a>
            <a className="btn btn-secondary" href="#solucoes">Ver soluções</a>
          </div>

          <div className="reveal mono" style={{ display: 'flex', gap: 22, fontSize: 12, color: 'var(--muted)', flexWrap: 'wrap', justifyContent: 'center', paddingTop: 8 }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><CheckIcon /> Implantação em até 14 dias</span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><CheckIcon /> Sem aumentar o time</span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><CheckIcon /> Diagnóstico gratuito</span>
          </div>
        </div>

        <div className="reveal" style={{ maxWidth: 1020, margin: '0 auto' }}>
          <HeroFlow />
        </div>
      </div>
    </section>);

}

function ArrowIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
      <path d="M3 7H11M11 7L7 3M11 7L7 11" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>);

}
function CheckIcon() {
  return (
    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
      <path d="M2 6.5L4.5 9L10 3" stroke="#22c55e" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" />
    </svg>);

}

/* ---------- Logos marquee ---------- */
function LogosMarquee() {
  const items = ['Restaurante Vesta', 'Clínica Aurora', 'Studio Norte', 'Delivery Bom', 'Imobiliária Lux', 'Pet & Cia', 'Academia Pro', 'Salão Maré'];
  const row = [...items, ...items];
  return (
    <section style={{ padding: '24px 0 40px', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <div className="mono" style={{ textAlign: 'center', fontSize: 11.5, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 22 }}>
          Empresas que automatizaram com a Dominus
        </div>
        <div style={{ overflow: 'hidden', maskImage: 'linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)', WebkitMaskImage: 'linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)' }}>
          <div className="marquee">
            {row.map((n, i) =>
            <span key={i} style={{ fontSize: 18, color: 'var(--muted)', fontWeight: 500, letterSpacing: '-0.01em', whiteSpace: 'nowrap', opacity: 0.7 }}>
                {n}
              </span>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- Problems ---------- */
function Problems() {
  const items = [
  { t: 'Leads sem resposta', s: '73% dos leads no WhatsApp esperam mais de 1h pela primeira resposta — e a maioria não volta.', icon: 'leak' },
  { t: 'Atendimento desorganizado', s: 'Cada atendente perde até 2h por dia caçando informação que deveria estar num só lugar.', icon: 'clock' },
  { t: 'Falta de follow-up', s: '80% das vendas exigem 5+ contatos. Quase nenhuma equipe faz mais que 2.', icon: 'ghost' },
  { t: 'Equipe sobrecarregada', s: '30% do tempo do time vai pra tarefas repetitivas que já poderiam estar no automático.', icon: 'paper' },
  { t: 'Pedidos manuais', s: '1 em cada 12 pedidos anotados na mão sai errado. O custo do erro é sempre maior que o ticket.', icon: 'funnel' },
  { t: 'Pouca previsibilidade', s: '7 em cada 10 empresas não sabem de onde veio metade das próprias vendas.', icon: 'chart' }];

  return (
    <section className="section-pad">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot" style={{ background: '#C6A15B', boxShadow: '0 0 0 4px rgba(198,161,91,0.18)' }}></span>O problema</span>
          <h2>Seu negócio está perdendo vendas por <span className="serif" style={{ fontStyle: 'italic', fontWeight: 400 }}>falta de processo</span>.</h2>
          <p className="lead">Toda empresa recebe mensagem, lead e pedido o dia inteiro. O problema não é falta de demanda — é o que se perde no caminho.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 16 }}>
          {items.map((it, i) =>
          <div key={i} className="card reveal" style={{ padding: 24 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
                <ProblemIcon kind={it.icon} />
                <span className="mono" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>0{i + 1}</span>
              </div>
              <h3 style={{ marginBottom: 8 }}>{it.t}</h3>
              <p style={{ fontSize: 14.5, color: 'var(--muted)' }}>{it.s}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function ProblemIcon({ kind }) {
  const base = { width: 36, height: 36, borderRadius: 9, background: 'linear-gradient(180deg, #fff, #f1f5f9)', border: '1px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--blue)' };
  const paths = {
    leak: <path d="M5 8 L11 8 L11 14 L5 14 Z M11 11 L17 11 M15 9 L17 11 L15 13" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round" />,
    clock: <><circle cx="11" cy="11" r="6.5" stroke="currentColor" strokeWidth="1.4" fill="none" /><path d="M11 7 L11 11 L14 13" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" /></>,
    ghost: <path d="M5 16 V8 a6 6 0 0 1 12 0 V16 L15 14 L13 16 L11 14 L9 16 L7 14 Z" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinejoin="round" />,
    paper: <><path d="M6 4 H14 L17 7 V19 H6 Z" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinejoin="round" /><path d="M8 11 H15 M8 14 H13" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" /></>,
    funnel: <path d="M4 5 H18 L13 11 V17 L9 15 V11 Z" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinejoin="round" />,
    chart: <><path d="M4 17 H18" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" /><path d="M6 13 V17 M10 9 V17 M14 11 V17" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" /></>
  };
  return (
    <div style={base}>
      <svg width="22" height="22" viewBox="0 0 22 22">{paths[kind]}</svg>
    </div>);

}

/* ---------- Solutions ---------- */
function Solutions() {
  const items = [
  { t: 'Agentes de IA para WhatsApp', s: 'Atendimento que responde em segundos, qualifica o lead e fecha pedido — 24h, sem aumentar o time.', tags: ['WhatsApp', 'GPT-4o', 'Pix'], icon: 'wa' },
  { t: 'Bots para delivery e negócios locais', s: 'Mais pedido, menos fila no caixa: cardápio, pagamento e impressão na cozinha rodando no automático.', tags: ['Delivery', 'Cardápio', 'Impressão'], icon: 'bot' },
  { t: 'CRM e funil de vendas', s: 'Nenhum lead esquecido: pipeline, histórico do cliente e follow-up rodando num só lugar.', tags: ['CRM', 'Pipeline', 'Cadência'], icon: 'crm' },
  { t: 'Sites e landing pages', s: 'Páginas que convertem sem você ficar mexendo — plugadas direto no CRM e no WhatsApp.', tags: ['Next.js', 'Tracking', 'SEO'], icon: 'site' },
  { t: 'Automações com n8n', s: 'WhatsApp, planilhas, anúncios e sistemas internos trocando dado sozinhos. A equipe para de fazer copy-paste.', tags: ['n8n', 'Webhooks', 'API'], icon: 'flow' },
  { t: 'Dashboards e sistemas sob medida', s: 'Decisão com dado, não com achismo: pedidos, leads e operação num painel atualizado em tempo real.', tags: ['Custom', 'Realtime', 'BI'], icon: 'dash' }];

  return (
    <section id="solucoes" className="section-pad" style={{ background: 'linear-gradient(180deg, transparent, #ffffff 40%, #ffffff 60%, transparent)' }}>
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot"></span>Soluções</span>
          <h2>Soluções inteligentes para transformar atendimento <span className="serif" style={{ fontStyle: 'italic', fontWeight: 400 }}>em vendas</span>.</h2>
          <p className="lead">Da primeira mensagem ao fechamento, sistemas que organizam, automatizam e aceleram o que sua equipe já faz — sem refazer a operação inteira.</p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 16 }}>
          {items.map((it, i) =>
          <SolutionCard key={i} {...it} index={i} />
          )}
        </div>
      </div>
    </section>);

}

function SolutionCard({ t, s, tags, icon, index }) {
  return (
    <div className="card reveal sol-card" style={{ padding: 24, position: 'relative', overflow: 'hidden' }}>
      <div className="sol-glow" />
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 18 }}>
        <SolutionIcon kind={icon} />
        <span className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>0{index + 1}</span>
      </div>
      <h3 style={{ marginBottom: 8 }}>{t}</h3>
      <p style={{ fontSize: 14.5, color: 'var(--muted)', marginBottom: 16 }}>{s}</p>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
        {tags.map((tg) =>
        <span key={tg} className="mono" style={{
          fontSize: 11, padding: '3px 8px',
          background: '#F1F5F9', color: 'var(--ink-soft)',
          border: '1px solid var(--line)', borderRadius: 999
        }}>{tg}</span>
        )}
      </div>
      <style>{`
        .sol-card .sol-glow {
          position: absolute; inset: -1px -1px auto auto; width: 220px; height: 180px;
          background: radial-gradient(60% 60% at 100% 0%, rgba(37,99,235,0.10), transparent 70%);
          opacity: 0; transition: opacity .35s ease; pointer-events: none;
        }
        .sol-card:hover .sol-glow { opacity: 1; }
        .sol-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
      `}</style>
    </div>);

}

function SolutionIcon({ kind }) {
  const wrap = {
    width: 44, height: 44, borderRadius: 11,
    background: 'linear-gradient(160deg, #0B0F19, #1B2235)',
    color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
    boxShadow: '0 8px 18px -8px rgba(11,15,25,0.45), inset 0 1px 0 rgba(255,255,255,0.08)',
    position: 'relative'
  };
  const grad =
  <div style={{
    position: 'absolute', inset: 0, borderRadius: 11,
    background: 'radial-gradient(70% 70% at 0% 0%, rgba(92,225,230,0.35), transparent 60%)',
    pointerEvents: 'none'
  }} />;

  const icons = {
    wa: <path d="M4 4 L20 4 L20 17 L13 17 L8 21 L8 17 L4 17 Z M8 10 H16 M8 13 H13" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinejoin="round" strokeLinecap="round" />,
    bot: <><rect x="5" y="7" width="14" height="11" rx="3" stroke="currentColor" strokeWidth="1.4" fill="none" /><circle cx="9.5" cy="12.5" r="1" fill="currentColor" /><circle cx="14.5" cy="12.5" r="1" fill="currentColor" /><path d="M12 4 V7 M9 4 H15" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" /></>,
    crm: <><circle cx="8" cy="10" r="3" stroke="currentColor" strokeWidth="1.4" fill="none" /><path d="M3 19 a5 5 0 0 1 10 0" stroke="currentColor" strokeWidth="1.4" fill="none" /><path d="M15 6 L18 6 M15 9 L20 9 M15 12 L19 12" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" /></>,
    site: <><rect x="3" y="5" width="18" height="14" rx="2" stroke="currentColor" strokeWidth="1.4" fill="none" /><path d="M3 9 H21 M6 7 L7 7 M9 7 L10 7" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" /></>,
    flow: <><circle cx="5" cy="6" r="2" stroke="currentColor" strokeWidth="1.4" fill="none" /><circle cx="12" cy="12" r="2" stroke="currentColor" strokeWidth="1.4" fill="none" /><circle cx="5" cy="18" r="2" stroke="currentColor" strokeWidth="1.4" fill="none" /><circle cx="19" cy="12" r="2" stroke="currentColor" strokeWidth="1.4" fill="none" /><path d="M7 6 L10 12 L7 18 M14 12 L17 12" stroke="currentColor" strokeWidth="1.4" fill="none" /></>,
    dash: <><rect x="3" y="4" width="18" height="16" rx="2" stroke="currentColor" strokeWidth="1.4" fill="none" /><path d="M7 16 L7 12 M11 16 L11 9 M15 16 L15 14 M19 16 L19 7" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" /></>
  };
  return (
    <div style={wrap}>
      {grad}
      <svg width="22" height="22" viewBox="0 0 24 24" style={{ position: 'relative' }}>{icons[kind]}</svg>
    </div>);

}

window.useReveal = useReveal;
window.Header = Header;
window.Hero = Hero;
window.LogosMarquee = LogosMarquee;
window.Problems = Problems;
window.Solutions = Solutions;
window.WhatsIcon = WhatsIcon;
window.ArrowIcon = ArrowIcon;
window.CheckIcon = CheckIcon;