/* New sections: AllInOne · FounderMode · EcosystemHalo · Guarantees · FAQ · FinalCTAv2 */

/* ══════════ ALL-IN-ONE / COMPARATIVO DE ECONOMIA ══════════ */
const ICON_BASE = '../../assets/integrations';
const COMPARE_ROWS = [
  { need: 'Atendimento 24/7',           icons: [['zendesk-icon','Zendesk'],['intercom-icon','Intercom'],['drift','Drift']],                                  cost: 'R$ 3.500 – R$ 6.500+' },
  { need: 'Chatbot WhatsApp com IA',    icons: [['dialogflow','Dialogflow'],['openai-icon','OpenAI'],['huggy','Huggy']],                                     cost: 'R$ 199 – R$ 990+' },
  { need: 'API oficial WhatsApp (Meta)', icons: [['twilio-icon','Twilio'],['meta-icon','Meta Cloud API']],                                                   cost: 'R$ 150 – R$ 700+', note: 'integração oficial Meta incluída' },
  { need: 'CRM e funil',                icons: [['hubspot','HubSpot'],['pipedrive','Pipedrive'],['salesforce','Salesforce']],                                 cost: 'R$ 99 – R$ 499+', note: 'incluso nos planos Pro/Enterprise' },
  { need: 'Follow-up automático',       icons: [['active-campaign-icon','ActiveCampaign'],['mailchimp-freddie','Mailchimp']],                                         cost: 'R$ 99 – R$ 800+' },
  { need: 'Agendamento automático',     icons: [['google-calendar','Google Calendar'],['google-meet','Google Meet']],                                         cost: 'R$ 49 – R$ 249+' },
  { need: 'Base de conhecimento IA',    icons: [['notion-icon','Notion'],['openai-icon','OpenAI']],                                                                cost: 'R$ 200 – R$ 800+' },
  { need: 'Relatórios em tempo real',   icons: [['microsoft-power-bi','Power BI'],['looker-icon','Looker']],                                                  cost: 'R$ 55 – R$ 400+' },
  { need: 'Transferência humana',       icons: [['huggy','Huggy'],['zendesk-icon','Zendesk']],                                                                cost: 'R$ 199 – R$ 800+', note: 'incluso nos planos avançados' },
  { need: 'Integrações / automações',   icons: [['zapier','Zapier'],['ifttt','IFTTT']],                                                                       cost: 'R$ 100 – R$ 500+', note: 'API aberta incluída' },
];

const AllInOne = () => (
  <section className="allinone" id="economy">
    <div className="container">
      <div className="allinone-head">
        <span className="pill"><Sparkle /> All-in-one</span>
        <h2>Uma operação inteira de vendas e atendimento<br/><em>em uma única plataforma</em></h2>
        <p>Em vez de pagar por várias ferramentas, contratar mais atendentes e ainda depender de processos manuais, a TechFala centraliza atendimento, CRM, agenda, follow-up e automação com IA.</p>
      </div>

      <div className="compare-card">
        <div className="compare-head">
          <div>Necessidade</div>
          <div>Alternativas</div>
          <div>Custo estimado</div>
          <div className="tf-col"><img src={(typeof window !== 'undefined' && window.__resources && window.__resources.iconSvg) || "../../assets/icon.svg"} alt="" /> Com TechFala</div>
        </div>
        {COMPARE_ROWS.map((r, i) => (
          <div className="compare-row" key={i}>
            <div className="cr-need">{r.need}</div>
            <div className="cr-common">
              <div className="cr-logos">
                {r.icons.map(([slug, label]) => (
                  <span className="cr-logo" key={slug} title={label} aria-label={label}>
                    <img src={`${ICON_BASE}/${slug}.svg`} alt={label} />
                  </span>
                ))}
              </div>
            </div>
            <div className="cr-cost">{r.cost}</div>
            <div className="cr-tf">
              <span className="cr-check">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l5 5L20 7"/></svg>
              </span>
              {r.note || 'incluso'}
            </div>
          </div>
        ))}
      </div>

      <div className="savings-strip">
        <div className="savings-col common">
          <div className="sv-lbl">Custo operacional comum</div>
          <div className="sv-val"><span className="sv-pre">R$</span>6.000 <span className="sv-to">a</span> 12.000<span className="sv-suf">+/mês</span></div>
          <div className="sv-sub">Somando ferramentas + equipe + retrabalho</div>
        </div>
        <div className="savings-vs">vs</div>
        <div className="savings-col tf">
          <div className="sv-lbl">TechFala</div>
          <div className="sv-val"><span className="sv-pre">a partir de R$</span>497<span className="sv-suf">/mês</span></div>
          <div className="sv-sub">Tudo incluso. Implementação guiada.</div>
        </div>
      </div>

      <div className="allinone-foot">
        <p className="micro">Valores estimados variam conforme equipe, ferramentas e volume de operação.</p>
        <a href="#pricing" className="btn-primary">Calcular minha economia <ArrowRight /></a>
      </div>
    </div>
  </section>
);

/* ══════════ FOUNDER MODE ══════════ */
const FounderMode = () => (
  <section className="founder" id="founder">
    <div className="container founder-inner">
      <div className="founder-copy">
        <span className="pill"><Sparkle /> Founder mode</span>
        <h2>Produto + implementação:<br/>a IA entra pronta<br/>pra vender<br/><em>do seu jeito</em></h2>
        <ul className="founder-list">
          <li><span className="fk">01</span><div><strong>Não é só software.</strong> Nosso time treina a IA junto com você.</div></li>
          <li><span className="fk">02</span><div><strong>Seu negócio, sua linguagem.</strong> Tom, oferta e processo mapeados antes do go-live.</div></li>
          <li><span className="fk">03</span><div><strong>Implementação guiada.</strong> Você não fica sozinho tentando configurar.</div></li>
          <li><span className="fk">04</span><div><strong>O objetivo é receita.</strong> Transformar conversa em venda, não brincar de automação.</div></li>
        </ul>
        <p className="founder-sig">Luís Guilherme Melo · fundador da TechFala · "Mago da IA"</p>
        <div className="founder-cta">
          <a href={(typeof window !== 'undefined' && window.WPP_LINK) || "https://wa.me/5512992126931?text=Ol%C3%A1%2C%20quero%20conhecer%20a%20TechFala%20IA!"} target="_blank" rel="noopener" className="btn-primary">
            Quero meu Jarvis hoje
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"/><path d="M13 5l7 7-7 7"/></svg>
          </a>
          <span className="founder-cta-micro">Resposta direta no WhatsApp.</span>
        </div>
      </div>

      <div className="founder-video">
        <div className="fv-thumb">
          <img className="fv-bg-img" src="../../assets/founder-video.png" alt="Luís Guilherme Melo, fundador da TechFala" />
          <div className="fv-overlay" />
          <button className="fv-play" aria-label="Play">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
          </button>
          <div className="fv-caption">
            <div className="fv-cap-tag">AO VIVO · 2:47</div>
            <div className="fv-cap-txt">"A gente não vende chatbot. A gente implanta um time de IA que fecha venda."</div>
          </div>
          <div className="fv-controls">
            <span className="fv-bar"><span className="fv-prog" /></span>
            <span className="fv-time">0:12 / 2:47</span>
            <span className="fv-cc">CC</span>
          </div>
        </div>
        <div className="fv-sig">
          <div className="fv-av"><img src="../../assets/founder-avatar.png" alt="Luís Guilherme Melo" /></div>
          <div>
            <strong>Luís Guilherme Melo</strong>
            <span>Fundador · TechFala</span>
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ══════════ SANJAWORKS HALO ══════════ */
const ECOSYSTEM = [
  { name: 'Sanja Smart',  desc: 'Prontuário + gestão clínica' },
  { name: 'SanjaFree',    desc: 'Marketplace de saúde' },
  { name: 'ZOV.AI',       desc: 'IA aplicada à jornada do paciente' },
  { name: 'Doc+Tech',     desc: 'Educação para profissionais' },
  { name: 'Clube Doc',    desc: 'Rede e benefícios exclusivos' },
];

const EcosystemHalo = () => (
  <section className="halo">
    <div className="container">
      <div className="halo-head">
        <span className="pill small">Ecossistema SanjaWorks</span>
        <h3>TechFala é parte de <em>algo maior</em>.</h3>
        <p>Um ecossistema que conecta tecnologia, saúde, IA e negócios reais no mercado brasileiro.</p>
      </div>
      <div className="halo-grid">
        {ECOSYSTEM.map(e => (
          <div className="halo-card" key={e.name}>
            <div className="halo-dot" />
            <strong>{e.name}</strong>
            <span>{e.desc}</span>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ══════════ HOW IT WORKS (rich timeline with live artifacts) ══════════ */
const HOW_STEPS = [
  {
    n: '01',
    d: 'Dia 1-2',
    t: 'Treinamos sua IA',
    d2: 'Mapeamos perguntas, serviços, preços, documentos, tom de voz e regras comerciais em workshops guiados.',
    artifact: 'brain',
  },
  {
    n: '02',
    d: 'Dia 3-4',
    t: 'Conectamos seus canais',
    d2: 'Integramos WhatsApp Oficial, agenda, CRM, planilhas e todos os fluxos que sua operação já usa.',
    artifact: 'plugs',
  },
  {
    n: '03',
    d: 'Dia 5-6',
    t: 'A IA atende e qualifica',
    d2: 'Jarvis conversa 24/7, entende intenção, tira dúvidas, agenda e classifica o lead pra você.',
    artifact: 'chat',
  },
  {
    n: '04',
    d: 'Dia 7+',
    t: 'Sua equipe fecha mais',
    d2: 'Humano entra no momento certo, com contexto completo. Acompanhe tudo em tempo real.',
    artifact: 'chart',
  },
];

const HowArtifact = ({ kind }) => {
  if (kind === 'brain') return (
    <div className="how-art how-art-brain">
      <div className="ha-doc">knowledge.pdf</div>
      <div className="ha-doc">precos.xlsx</div>
      <div className="ha-doc">faq.md</div>
      <div className="ha-arrow">↓</div>
      <div className="ha-jarvis">
        <div className="ha-j-ring" />
        <span>Jarvis</span>
      </div>
    </div>
  );
  if (kind === 'plugs') return (
    <div className="how-art how-art-plugs">
      <div className="ha-bg-glow" aria-hidden="true" />
      <div className="ha-col ha-col-l">
        <div className="ha-plug" style={{ animationDelay: '0.05s' }}>WhatsApp</div>
        <div className="ha-plug" style={{ animationDelay: '0.15s' }}>Instagram</div>
        <div className="ha-plug" style={{ animationDelay: '0.25s' }}>Email</div>
      </div>
      <div className="ha-hub">
        <div className="ha-hub-core">
          <img src="../../assets/icon.svg" alt="" />
        </div>
      </div>
      <div className="ha-col ha-col-r">
        <div className="ha-plug" style={{ animationDelay: '0.1s' }}>CRM</div>
        <div className="ha-plug" style={{ animationDelay: '0.2s' }}>Agenda</div>
        <div className="ha-plug" style={{ animationDelay: '0.3s' }}>Planilhas</div>
      </div>
    </div>
  );
  if (kind === 'chat') return (
    <div className="how-art how-art-chat">
      <div className="ha-msg user">Oi, quero laser</div>
      <div className="ha-msg ai">Temos 2 horários. Qui 15h ou Sex 10h?</div>
      <div className="ha-msg user">Quinta!</div>
      <div className="ha-tag">📅 Agendado · MoFu</div>
    </div>
  );
  if (kind === 'chart') return (
    <div className="how-art how-art-chart">
      <div className="ha-metric">
        <span>Conversões</span>
        <strong>+218%</strong>
      </div>
      <svg viewBox="0 0 120 40" preserveAspectRatio="none" className="ha-spark">
        <polyline points="0,32 15,28 30,30 45,22 60,18 75,20 90,12 105,8 120,4" fill="none" stroke="currentColor" strokeWidth="2"/>
        <polyline points="0,32 15,28 30,30 45,22 60,18 75,20 90,12 105,8 120,4 120,40 0,40" fill="url(#hgrad)" opacity="0.25"/>
        <defs><linearGradient id="hgrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor="currentColor"/><stop offset="100%" stopColor="currentColor" stopOpacity="0"/></linearGradient></defs>
      </svg>
    </div>
  );
  return null;
};

const HowItWorks = () => (
  <section className="steps" id="how">
    <div className="container">
      <div className="steps-head">
        <span className="pill"><Sparkle /> Como funciona</span>
        <h2 style={{ marginTop: 20 }}>Do primeiro "oi"<br/>à venda fechada <em>em 4 passos</em></h2>
        <p>Implementação guiada. Sem dor técnica. Em operação em até 7 dias.</p>
      </div>

      <div className="how-rail">
        <div className="how-rail-line" />
        {HOW_STEPS.map((s, i) => (
          <div className={`how-row ${i % 2 ? 'rev' : ''}`} key={s.n}>
            <div className="how-copy">
              <div className="how-meta">
                <span className="how-num">{s.n}</span>
                <span className="how-day">{s.d}</span>
              </div>
              <h3>{s.t}</h3>
              <p>{s.d2}</p>
            </div>
            <div className="how-node"><span /></div>
            <div className="how-vis">
              <HowArtifact kind={s.artifact} />
            </div>
          </div>
        ))}
      </div>

      <div className="how-foot">
        <div className="how-foot-stat">
          <strong>7 dias</strong>
          <span>Go-live garantido</span>
        </div>
        <div className="how-foot-stat">
          <strong>0 linha de código</strong>
          <span>Você não configura nada</span>
        </div>
        <div className="how-foot-stat">
          <strong>1 especialista</strong>
          <span>Acompanhando tudo</span>
        </div>
      </div>
    </div>
  </section>
);

window.HowItWorks = HowItWorks;
/* Original Sections.jsx HowItWorks is overridden here */
const IcCheck = () => (<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l5 5L20 7"/></svg>);
const IcContract = () => (<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M9 13h6M9 17h4"/></svg>);
const IcCalendar30 = () => (<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M8 3v4M16 3v4M3 10h18"/><text x="12" y="18" fontSize="7" textAnchor="middle" fill="currentColor" stroke="none" fontFamily="inherit" fontWeight="bold">30</text></svg>);
const Ic7d = () => (<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>);
const IcMeta = () => (<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6z"/></svg>);
const IcHuman = () => (<svg width="18" height="18" 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 21c0-4 4-7 8-7s8 3 8 7"/></svg>);

const GUARANTEES = [
  { icon: <IcContract />,   t: 'Resultado em contrato',             d: 'Metas combinadas antes do go-live.', badge: 'Em contrato' },
  { icon: <IcCalendar30 />, t: 'Garantia de 30 dias',               d: 'Se não performar, devolvemos a mensalidade.', badge: '30 dias' },
  { icon: <Ic7d />,         t: 'Go-live em 7 dias',                 d: 'Cronograma fixo, sem surpresa.', badge: '7 dias' },
  { icon: <IcHuman />,      t: 'Especialista dedicado',             d: 'Uma pessoa por trás da sua operação.', badge: 'Humano' },
  { icon: <IcMeta />,       t: 'Tecnologia proprietária',           d: 'Plataforma própria, sem white-label de terceiro.', badge: 'TechFala' },
];

const Guarantees = () => (
  <section className="guarantees" id="guarantees">
    <div className="container">
      <div className="guar-head">
        <span className="pill"><Sparkle /> Garantias</span>
        <h2>Você não precisa<br/>apostar <em>sozinho.</em></h2>
        <p>Nós colocamos resultado, prazo e integração em contrato. Se a gente não performar, você não paga.</p>
      </div>

      <div className="guar-seal-wrap">
        <div className="guar-seal-big">
          <div className="gsb-ring" />
          <div className="gsb-ring gsb-ring-2" />
          <div className="gsb-core">
            <strong>30</strong>
            <span>dias de garantia</span>
          </div>
        </div>
        <div className="guar-seal-copy">
          <p className="gsc-kicker">Risco zero</p>
          <p className="gsc-big">Se a TechFala não performar conforme as metas do contrato nos primeiros 30 dias, <em>devolvemos 100% da mensalidade.</em></p>
          <p className="gsc-sub">Sem letra miúda, sem burocracia. Um especialista acompanha sua operação do dia 1 ao dia 30.</p>
        </div>
      </div>

      <div className="guar-grid">
        {GUARANTEES.map((g, i) => (
          <div className="guar-card" key={i}>
            <div className="guar-card-top">
              <div className="guar-ic">{g.icon}</div>
              <span className="guar-badge">{g.badge}</span>
            </div>
            <strong>{g.t}</strong>
            <span>{g.d}</span>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ══════════ FAQ ══════════ */
const FAQS = [
  {
    q: 'Meu número corre risco de ser banido?',
    a: 'Não. Trabalhamos com integração oficial da Meta (WhatsApp Business API) e com espaçamento inteligente de mensagens quando via WhatsApp Web. Não operamos disparo frio, nem mensagens idênticas em sequência, que são os gatilhos que a Meta usa pra identificar spam. Toda comunicação é autorizada, com opt-in dos contatos.',
  },
  {
    q: 'A IA vai parecer robô?',
    a: 'Não. O Jarvis é treinado com o seu tom de voz, ofertas, scripts e objeções reais. Ele entende intenção do cliente, adapta a resposta ao contexto da conversa e sabe quando enviar áudio, texto curto ou explicar com mais profundidade. Em testes-cego, 80% dos leads não percebem que estão falando com IA.',
  },
  {
    q: 'Como a IA aprende sobre o meu negócio?',
    a: 'Durante a implementação, conectamos: documentos (PDFs institucionais, manuais, FAQs), planilhas do Google Sheets (catálogo, preços, estoque), Google Docs, regras comerciais e diretrizes da sua marca. A gente mapeia perguntas frequentes, serviços, fluxos de venda e tom de voz em workshops guiados, sem você precisar configurar sozinho.',
  },
  {
    q: 'E se o cliente pedir algo que a IA não sabe responder?',
    a: 'A IA identifica quando está fora do escopo e faz handoff automático pra um humano do seu time, passando todo o contexto da conversa. Além disso, analisamos esses casos semanalmente e ampliamos a base de conhecimento, e a IA fica mais esperta a cada semana de operação.',
  },
  {
    q: 'Funciona com CRM, agenda, planilhas?',
    a: 'Sim. Integrações nativas com Google Calendar (agendamento, confirmação e lembretes), HubSpot, Pipedrive, Salesforce, Google Sheets e planilhas externas. Pra casos específicos, temos API aberta e o plano Enterprise inclui integrações customizadas com SLA dedicado.',
  },
  {
    q: 'Posso transferir pro atendimento humano a qualquer momento?',
    a: 'Sim. O Jarvis tem lógica de transferência configurável: por palavra-chave ("falar com humano"), por intenção detectada (dúvida técnica, reclamação, proposta complexa) ou manualmente pelo seu time via multiatendimento. O humano entra na conversa com o histórico completo, sem pedir o cliente pra repetir.',
  },
  {
    q: 'Quanto tempo leva pra entrar em operação?',
    a: 'Em até 7 dias. Nos dias 1-2 treinamos a IA no seu negócio. Dias 3-4 conectamos canais (WhatsApp, agenda, CRM). Dias 5-6 a IA já atende e qualifica em ambiente controlado. Dia 7 você entra em operação completa. Implementação guiada pelo nosso time, sem você configurar nada sozinho.',
  },
  {
    q: 'Preciso me comprometer com contrato longo?',
    a: 'Não. A cobrança é mensal e você cancela quando quiser. Nos planos semestral e anual oferecemos desconto (10% e 17%), mas o modelo é sempre transparente e sem fidelidade forçada. Se não funcionar pro seu negócio, você sai sem multa.',
  },
];

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="faq" id="faq">
      <div className="container-narrow">
        <div className="faq-head">
          <span className="pill"><Sparkle /> FAQ</span>
          <h2>Perguntas <em>frequentes</em></h2>
        </div>
        <div className="faq-list">
          {FAQS.map((f, i) => (
            <button key={i} className={'faq-item' + (open === i ? ' open' : '')} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="faq-q">
                <span>{f.q}</span>
                <span className="faq-chev">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6"/></svg>
                </span>
              </div>
              <div className="faq-a"><p>{f.a}</p></div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ══════════ FINAL CTA v2 ══════════ */
const FinalCTAv2 = () => (
  <section className="final-cta" id="demo">
    <div className="final-cta-arc" />
    <div className="container final-cta-inner">
      <span className="pill"><span className="dot" /> Em operação em 7 dias</span>
      <h2>Coloca o Jarvis<br/>pra <em>executar</em> hoje.</h2>
      <p>Não é chatbot. É IA que atende, vende e automatiza de verdade, com integração real ao seu CRM, ERP e fluxos.</p>
      <div className="hero-ctas center">
        <a href={(typeof window !== 'undefined' && window.WPP_LINK) || "https://wa.me/5512992126931?text=Ol%C3%A1%2C%20quero%20conhecer%20a%20TechFala%20IA!"} target="_blank" rel="noopener" className="btn-primary">Fale com o Jarvis <ArrowRight /></a>
        <a href="mailto:suporte@techfala365.com.br" className="btn-ghost">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>
          suporte@techfala365.com.br
        </a>
      </div>
      <p className="hero-micro">Implementação guiada · Tecnologia proprietária · Atuação nacional</p>
    </div>
  </section>
);

window.AllInOne = AllInOne;
window.FounderMode = FounderMode;
window.EcosystemHalo = EcosystemHalo;
window.Guarantees = Guarantees;
window.FAQ = FAQ;
window.FinalCTAv2 = FinalCTAv2;