/* Sections part 2: HowItWorks, Cases, Authority, CTA, Footer, Integrations wrapper */

function Integrations() {
  return (
    <section className="dark-section section-pad" style={{ borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <div className="section-head reveal" style={{ marginBottom: 24 }}>
          <span className="eyebrow dark"><span className="dot" style={{ background: '#5CE1E6', boxShadow: '0 0 0 4px rgba(92,225,230,0.18)' }}></span>Integrações</span>
          <h2 style={{ color: '#fff' }}>Conectamos as ferramentas que sua empresa <span className="serif" style={{ fontStyle: 'italic', fontWeight: 400, background: 'linear-gradient(90deg, #5CE1E6, #C6A15B)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>já usa</span>.</h2>
          <p className="lead" style={{ color: 'var(--dark-muted)' }}>Seu WhatsApp, Instagram, planilhas, CRM, anúncios e sistemas internos trocando informação sozinhos. A operação para de depender de copy-paste.</p>
          <div className="mono" style={{ fontSize: 11, color: 'rgba(255,255,255,0.45)', letterSpacing: '0.08em', textTransform: 'uppercase', marginTop: 8 }}>
            Clique em um nó para ver detalhes da integração
          </div>
        </div>
        <div className="reveal">
          <IntegrationMap />
        </div>
      </div>
    </section>
  );
}

/* ---------- How it works ---------- */
function HowItWorks() {
  const steps = [
    { n: '01', t: 'Diagnóstico da operação', s: 'Mapeamos onde sua empresa perde tempo, lead ou dinheiro hoje.' },
    { n: '02', t: 'Mapeamento dos gargalos', s: 'Listamos os pontos com retorno mais rápido de automatizar primeiro.' },
    { n: '03', t: 'Criação da solução', s: 'Bot, CRM, dashboard ou automação sob medida pra sua operação.' },
    { n: '04', t: 'Testes reais', s: 'Validamos com clientes e pedidos de verdade antes de soltar.' },
    { n: '05', t: 'Implantação', s: 'Sobe em produção, equipe treinada, sistema operando no dia seguinte.' },
    { n: '06', t: 'Ajustes e evolução', s: 'Acompanhamos métricas e evoluímos o sistema mês a mês.' }
  ];
  return (
    <section id="como-funciona" className="section-pad">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot"></span>Processo</span>
          <h2>Do diagnóstico à automação <span className="serif" style={{ fontStyle: 'italic', fontWeight: 400 }}>funcionando</span>.</h2>
          <p className="lead">Antes de qualquer linha de código, entendemos como sua empresa atende, vende e opera hoje. Depois sobe a solução certa pro problema certo.</p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 0, border: '1px solid var(--line)', borderRadius: 18, overflow: 'hidden', background: '#fff' }}>
          {steps.map((s, i) => (
            <div key={i} className="reveal" style={{
              padding: 28,
              borderRight: '1px solid var(--line)',
              borderBottom: '1px solid var(--line)',
              position: 'relative',
              minHeight: 200,
              background: 'linear-gradient(180deg, #fff, #fbfcfe)'
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 28 }}>
                <span className="mono" style={{ fontSize: 12, fontWeight: 500, color: 'var(--blue)', letterSpacing: '0.08em' }}>{s.n}</span>
                <StepGlyph i={i} />
              </div>
              <h3 style={{ fontSize: 17, marginBottom: 8 }}>{s.t}</h3>
              <p style={{ fontSize: 14, color: 'var(--muted)' }}>{s.s}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function StepGlyph({ i }) {
  // small minimal SVG glyphs per step
  const wrap = { width: 28, height: 28, borderRadius: 8, background: '#F1F5F9', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ink-soft)' };
  const glyphs = [
    <path d="M5 7 L9 11 L15 4" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round" />, // diagnose
    <><circle cx="5" cy="5" r="2" stroke="currentColor" strokeWidth="1.4" fill="none" /><circle cx="13" cy="13" r="2" stroke="currentColor" strokeWidth="1.4" fill="none" /><path d="M7 5 L13 5 L13 13" stroke="currentColor" strokeWidth="1.4" fill="none" /></>, // map
    <><rect x="3" y="3" width="12" height="12" rx="2" stroke="currentColor" strokeWidth="1.4" fill="none" /><path d="M7 9 L9 11 L11 9" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round" /></>, // build
    <><path d="M3 9 H15" stroke="currentColor" strokeWidth="1.4" /><circle cx="6" cy="9" r="2" fill="currentColor" /></>, // tests
    <path d="M3 14 L9 4 L15 14 Z" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinejoin="round" />, // launch
    <><circle cx="9" cy="9" r="6" stroke="currentColor" strokeWidth="1.4" fill="none" /><path d="M9 5 V9 L12 11" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" /></>
  ];
  return <div style={wrap}><svg width="18" height="18" viewBox="0 0 18 18">{glyphs[i]}</svg></div>;
}

/* ---------- Cases ---------- */
function Cases() {
  const items = [
    {
      t: 'Bot para redes sociais e delivery',
      kpi: '+38% pedidos',
      cat: 'Restaurante',
      s: 'WhatsApp, Instagram e cardápio num só fluxo — pedido cai direto na cozinha.',
      bg: 'linear-gradient(135deg, #0B0F19 0%, #1a2348 50%, #2563EB 100%)',
      glyph: 'wa'
    },
    {
      t: 'Automação de follow-up',
      kpi: '+27% recompra',
      cat: 'E-commerce',
      s: 'Mensagens automáticas resgatam o cliente antes do concorrente chamar.',
      bg: 'linear-gradient(135deg, #050816 0%, #0F1525 60%, #5CE1E6 130%)',
      glyph: 'flow_followup'
    },
    {
      t: 'CRM para clínicas odontológicas',
      kpi: '3,2× retenção',
      cat: 'Saúde',
      s: 'Pacientes com histórico, lembrete de retorno e equipe sabendo o que falar.',
      bg: 'linear-gradient(135deg, #f6f8fd 0%, #e3eafc 60%, #c9d6f5 100%)',
      light: true,
      glyph: 'crm'
    },
    {
      t: 'Landing page com automação',
      kpi: '4,1× CVR',
      cat: 'Imobiliária',
      s: 'Página captura o lead, manda pro CRM e avisa o corretor em segundos.',
      bg: 'linear-gradient(135deg, #fffaf0 0%, #f5e6c2 50%, #C6A15B 130%)',
      light: true,
      glyph: 'land'
    },
    {
      t: 'Dashboard operacional',
      kpi: 'Tempo real',
      cat: 'Operação',
      s: 'Pedidos, leads e status num só painel — a equipe age antes do problema aparecer.',
      bg: 'linear-gradient(135deg, #0B0F19 0%, #1B2235 60%, #C6A15B 130%)',
      glyph: 'dash_scroll'
    }
  ];
  return (
    <section id="projetos" 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>Projetos</span>
          <h2>Projetos criados para <span className="serif" style={{ fontStyle: 'italic', fontWeight: 400 }}>negócios reais</span>.</h2>
          <p className="lead">Soluções feitas pra resolver problema de empresa que vive de cliente — não demo bonito de portfólio.</p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 16 }}>
          <CaseCard span={7} {...items[0]} />
          <CaseCard span={5} {...items[1]} />
          <CaseCard span={4} {...items[2]} />
          <CaseCard span={4} {...items[3]} />
          <CaseCard span={4} {...items[4]} />
        </div>
      </div>
    </section>
  );
}

function CaseCard({ span, t, kpi, cat, s, bg, light, glyph }) {
  return (
    <div className="card reveal case-card" style={{
      gridColumn: `span ${span}`,
      padding: 0,
      minHeight: 320,
      overflow: 'hidden',
      position: 'relative',
      display: 'flex', flexDirection: 'column'
    }}>
      {/* gradient hero panel */}
      <div style={{
        flex: 1,
        background: bg,
        position: 'relative',
        padding: 24,
        display: 'flex', alignItems: 'flex-end',
        color: light ? 'var(--ink)' : '#fff',
        overflow: 'hidden',
        minHeight: 240
      }}>
        <CaseDecor light={light} />
        <CaseScene kind={glyph} light={light} />
        <div style={{
          position: 'absolute', top: 16, right: 16,
          padding: '5px 10px',
          background: light ? 'rgba(11,15,25,0.06)' : 'rgba(255,255,255,0.10)',
          color: light ? 'var(--ink)' : '#fff',
          border: '1px solid ' + (light ? 'rgba(11,15,25,0.08)' : 'rgba(255,255,255,0.16)'),
          borderRadius: 999,
          fontSize: 11.5, fontWeight: 600, letterSpacing: '-0.005em',
          fontFamily: 'Geist Mono, monospace'
        }}>{kpi}</div>
        <div style={{
          position: 'absolute', top: 16, left: 16,
          fontSize: 11, fontFamily: 'Geist Mono, monospace',
          color: light ? 'var(--ink-soft)' : 'rgba(255,255,255,0.7)',
          letterSpacing: '0.08em', textTransform: 'uppercase'
        }}>{cat}</div>
      </div>
      <div style={{ padding: '20px 22px 22px' }}>
        <h3 style={{ fontSize: 17, marginBottom: 6 }}>{t}</h3>
        <p style={{ fontSize: 13.5, color: 'var(--muted)' }}>{s}</p>
      </div>
    </div>
  );
}

function CaseDecor({ light }) {
  const c = light ? 'rgba(11,15,25,0.08)' : 'rgba(255,255,255,0.10)';
  return (
    <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none' }} preserveAspectRatio="none" viewBox="0 0 100 100">
      <defs>
        <pattern id="dotp" x="0" y="0" width="6" height="6" patternUnits="userSpaceOnUse">
          <circle cx="1" cy="1" r="0.5" fill={c} />
        </pattern>
      </defs>
      <rect width="100" height="100" fill="url(#dotp)" />
    </svg>
  );
}

function CaseGlyph({ kind, light }) {
  const size = 56;
  const fg = light ? 'rgba(11,15,25,0.16)' : 'rgba(255,255,255,0.22)';
  const fg2 = light ? 'rgba(11,15,25,0.4)' : 'rgba(255,255,255,0.6)';
  if (kind === 'wa') return (
    <svg width={size} height={size} viewBox="0 0 56 56" fill="none">
      <rect x="6" y="6" width="34" height="34" rx="8" fill={fg} />
      <path d="M14 14 H32 V28 H24 L20 32 V28 H14 Z" stroke={fg2} strokeWidth="1.6" fill="none" />
      <circle cx="44" cy="44" r="8" fill={fg2} />
      <path d="M40 44 L43 47 L48 41" stroke={light ? '#fff' : '#0B0F19'} strokeWidth="1.6" fill="none" strokeLinecap="round" />
    </svg>
  );
  if (kind === 'print') return (
    <svg width={size} height={size} viewBox="0 0 56 56" fill="none">
      <rect x="10" y="20" width="36" height="22" rx="3" stroke={fg2} strokeWidth="1.6" fill={fg} />
      <rect x="16" y="10" width="24" height="12" rx="2" stroke={fg2} strokeWidth="1.6" fill="none" />
      <rect x="16" y="32" width="24" height="14" rx="2" fill={fg2} />
      <circle cx="40" cy="26" r="1.5" fill={fg2} />
    </svg>
  );
  if (kind === 'crm') return (
    <svg width={size} height={size} viewBox="0 0 56 56" fill="none">
      <rect x="8" y="12" width="40" height="6" rx="3" fill={fg} />
      <rect x="8" y="24" width="30" height="6" rx="3" fill={fg} />
      <rect x="8" y="36" width="22" height="6" rx="3" fill={fg2} />
    </svg>
  );
  if (kind === 'land') return (
    <svg width={size} height={size} viewBox="0 0 56 56" fill="none">
      <rect x="8" y="10" width="40" height="30" rx="3" stroke={fg2} strokeWidth="1.6" fill={fg} />
      <path d="M14 18 H30 M14 24 H38 M14 30 H26" stroke={fg2} strokeWidth="1.6" strokeLinecap="round" />
      <rect x="32" y="42" width="14" height="6" rx="3" fill={fg2} />
    </svg>
  );
  if (kind === 'flow') return (
    <svg width={size} height={size} viewBox="0 0 56 56" fill="none">
      <circle cx="12" cy="14" r="4" fill={fg} />
      <circle cx="28" cy="28" r="4" fill={fg2} />
      <circle cx="12" cy="42" r="4" fill={fg} />
      <circle cx="44" cy="28" r="4" fill={fg} />
      <path d="M16 16 L24 26 M16 40 L24 30 M32 28 L40 28" stroke={fg2} strokeWidth="1.6" />
    </svg>
  );
  return null;
}

/* ---------- Authority / Sobre ---------- */
function Authority() {
  return (
    <section id="sobre" className="section-pad" style={{ background: '#fff', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="container" style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 60, alignItems: 'center' }}>
        <div className="reveal">
          <span className="eyebrow" style={{ marginBottom: 22 }}><span className="dot"></span>Sobre</span>
          <h2 style={{ marginTop: 22, marginBottom: 22 }}>
            Não é sobre usar IA.<br />
            É sobre <span className="serif" style={{ fontStyle: 'italic', fontWeight: 400 }}>aplicar IA</span> onde dá dinheiro.
          </h2>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--ink-soft)', marginBottom: 24, maxWidth: 560 }}>
            A Dominus combina automação, sistemas e IA pra resolver o que custa dinheiro de verdade: atendimento lento, lead esquecido, pedido errado e operação no manual.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a className="btn btn-primary" href={WA_LINK} target="_blank" rel="noopener noreferrer">Quero o diagnóstico gratuito<ArrowIcon /></a>
            <a className="btn btn-secondary" href="#projetos">Ver projetos</a>
          </div>
        </div>

        <div className="reveal" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
          <StatTile big="14d" label="Dias até o primeiro resultado no ar" />
          <StatTile big="60+" label="Empresas com sistema rodando" />
          <StatTile big="3,2×" label="De retorno médio no primeiro semestre" gold />
          <StatTile big="24/7" label="Atendimento ativo sem aumentar o time" />
        </div>
      </div>
    </section>
  );
}

function StatTile({ big, label, gold }) {
  return (
    <div style={{
      border: '1px solid var(--line)',
      borderRadius: 14,
      padding: 22,
      background: 'linear-gradient(180deg, #fff, #fbfcfe)',
      position: 'relative',
      overflow: 'hidden'
    }}>
      {gold && (
        <div style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(80% 80% at 100% 0%, rgba(198,161,91,0.10), transparent 60%)',
          pointerEvents: 'none'
        }} />
      )}
      <div style={{
        fontSize: 42, fontWeight: 600, letterSpacing: '-0.035em',
        background: gold ? 'linear-gradient(135deg, #C6A15B, #8a6c2c)' : 'linear-gradient(135deg, #0B0F19, #334155)',
        WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
        backgroundClip: 'text', marginBottom: 6, position: 'relative'
      }}>{big}</div>
      <div style={{ fontSize: 13, color: 'var(--muted)', lineHeight: 1.35, position: 'relative' }}>{label}</div>
    </div>
  );
}

/* ---------- CTA ---------- */
function FinalCTA() {
  return (
    <section id="contato" className="dark-section section-pad">
      <div className="container" style={{ position: 'relative', zIndex: 2, textAlign: 'center' }}>
        <div className="reveal" style={{ maxWidth: 760, margin: '0 auto', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 24 }}>
          <span className="eyebrow dark"><span className="dot"></span>Próximo passo</span>
          <h2 style={{ color: '#fff' }}>
            Quer colocar a IA para <span className="serif" style={{ fontStyle: 'italic', fontWeight: 400, background: 'linear-gradient(90deg, #5CE1E6, #C6A15B)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>trabalhar</span> no seu negócio?
          </h2>
          <p style={{ fontSize: 18, color: 'var(--dark-muted)', maxWidth: 580 }}>
            Em 30 minutos, mapeamos onde sua empresa pode automatizar primeiro. Sem custo, sem compromisso — você decide se faz sentido.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center' }}>
            <a className="btn btn-whats" href={WA_LINK} target="_blank" rel="noopener noreferrer" style={{ background: '#22c55e', height: 50, padding: '0 22px', fontSize: 15 }}>
              <WhatsIcon size={16} color="#fff" />
              Falar no WhatsApp
            </a>
            <a className="btn btn-light" href="#solucoes" style={{ height: 50, padding: '0 22px', fontSize: 15 }}>
              Ver soluções
            </a>
          </div>

          <div className="mono" style={{ display: 'flex', gap: 24, fontSize: 12, color: 'var(--dark-muted)', flexWrap: 'wrap', justifyContent: 'center', marginTop: 12 }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><span style={{ width: 6, height: 6, borderRadius: 99, background: '#22c55e' }} />Resposta em ≤ 2h úteis</span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><span style={{ width: 6, height: 6, borderRadius: 99, background: '#5CE1E6' }} />Diagnóstico gratuito</span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><span style={{ width: 6, height: 6, borderRadius: 99, background: '#C6A15B' }} />Sem fidelidade</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer className="footer">
      <div className="container footer-row">
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <span className="brand-mark" style={{ width: 22, height: 22 }} />
          <span style={{ fontWeight: 600 }}>Dominus AI</span>
          <span style={{ color: 'var(--muted)', fontSize: 13 }}>· IA para negócios que vendem</span>
        </div>
        <div style={{ display: 'flex', gap: 20, fontSize: 13.5, color: 'var(--muted)' }}>
          <a href="#solucoes" style={{ color: 'inherit', textDecoration: 'none' }}>Soluções</a>
          <a href="#como-funciona" style={{ color: 'inherit', textDecoration: 'none' }}>Processo</a>
          <a href="#projetos" style={{ color: 'inherit', textDecoration: 'none' }}>Projetos</a>
          <a href="#contato" style={{ color: 'inherit', textDecoration: 'none' }}>Contato</a>
        </div>
        <p>© 2026 Dominus AI · Feito sob medida</p>
      </div>
    </footer>
  );
}

/* ---------- Dark section wrapper ---------- */
function DarkSection() {
  return (
    <section className="dark-section section-pad">
      <div className="container">
        <div className="section-head reveal" style={{ marginBottom: 44 }}>
          <span className="eyebrow dark"><span className="dot"></span>Central de comando</span>
          <h2>Sua operação conectada em <span className="serif" style={{ fontStyle: 'italic', fontWeight: 400, background: 'linear-gradient(90deg, #5CE1E6, #C6A15B)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>tempo real</span>.</h2>
          <p className="lead" style={{ color: 'var(--dark-muted)' }}>
            Cada conversa, lead, pedido e alerta num só painel — atualizado no segundo em que acontece, antes da venda virar oportunidade perdida.
          </p>
        </div>
        <div className="reveal">
          <DarkDashboard />
        </div>
      </div>
    </section>
  );
}

window.Integrations = Integrations;
window.HowItWorks = HowItWorks;
window.Cases = Cases;
window.Authority = Authority;
window.FinalCTA = FinalCTA;
window.Footer = Footer;
window.DarkSection = DarkSection;