/* global React, Button, Eyebrow, Chip, HeroDashboard, FlowDiagram, EDVADiagram, MiniFunnel */

/* =====================================================
   Digital Valor — Home sections
   ===================================================== */

function SectionHero({ onCta, onMethod }) {
  return (
    <section id="top" className="hero" data-screen-label="Hero">
      <div className="tech-grid" />
      <div className="glow-purple" />
      <div className="bg-diagonal" />
      <div className="container hero-grid">
        <div className="hero-copy">
          <Chip>Aquisição e Vendas Previsíveis</Chip>
          <h1 className="h-display rise">
            Marketing sozinho não sustenta crescimento.<br />
            Sua empresa precisa de um <span className="green">sistema previsível</span> de aquisição e vendas.
          </h1>
          <p className="subhead">
            A Digital Valor ajuda empresas com operação ativa a gerar oportunidades, organizar o funil comercial e transformar interesse em venda com método, dados e acompanhamento contínuo.
          </p>
          <p className="support">
            Para empresas que querem parar de depender de ações soltas, indicações ou campanhas pontuais para crescer.
          </p>
          <div className="ctas">
            <Button variant="primary" onClick={onCta}>Solicitar Diagnóstico</Button>
            <Button variant="secondary" onClick={onMethod}>Conhecer o Método EDVA</Button>
          </div>
        </div>
        <div className="rise delay-2">
          <HeroDashboard />
        </div>
      </div>
    </section>
  );
}

function SectionTese() {
  return (
    <section id="tese" className="section" data-screen-label="Tese">
      <div className="container">
        <div className="section-head">
          <div>
            <Eyebrow>A tese da Digital Valor</Eyebrow>
            <h2 className="h-section" style={{ marginTop: 20 }}>
              O problema não é só atrair interessados.<br />
              É <span className="green">transformar interesse em venda</span>.
            </h2>
          </div>
          <p className="lede">
            Muitas empresas investem em anúncios, posts, landing pages e automações acreditando que isso, sozinho, vai resolver o crescimento. Na prática, o cenário é diferente.
          </p>
        </div>

        <div className="grid grid-2" style={{ gap: 24 }}>
          <div>
            <p className="body" style={{ fontSize: 16, color: "var(--fg-2)", lineHeight: 1.7 }}>
              O lead chega.<br />
              Chama no WhatsApp.<br />
              Pede informação.<br />
              Conversa com a equipe.<br />
              <span className="mute">E muitas vezes simplesmente desaparece.</span>
            </p>
          </div>
          <div>
            <p className="body" style={{ fontSize: 16, color: "var(--fg-2)", lineHeight: 1.7 }}>
              Não porque não havia interesse.<br />
              Mas porque não existia uma <span className="green">estrutura clara</span> para transformar esse interesse em venda.
            </p>
          </div>
        </div>

        <FlowDiagram />

        <div className="tese-quote">
          <span className="line">Sem estrutura, marketing vira esforço.</span>
          <span className="line">Com estrutura, aquisição e vendas viram <span className="green">sistema</span>.</span>
        </div>
      </div>
    </section>
  );
}

function SectionProblema() {
  const cards = [
    {
      n: "01",
      t: "Leads que não avançam",
      d: "A empresa gera interessados, mas muitos contatos se perdem por falta de acompanhamento, cadência ou clareza no atendimento.",
    },
    {
      n: "02",
      t: "WhatsApp desorganizado",
      d: "O atendimento depende da memória da equipe, da disponibilidade do momento e de processos pouco claros.",
    },
    {
      n: "03",
      t: "Campanhas sem leitura comercial",
      d: "Os anúncios até geram demanda, mas ninguém sabe exatamente onde o funil trava ou por que as oportunidades não viram vendas.",
    },
    {
      n: "04",
      t: "Crescimento imprevisível",
      d: "A empresa tem meses bons e ruins, mas não consegue entender com clareza o que precisa ajustar para crescer com consistência.",
    },
  ];
  return (
    <section id="problema" className="section" data-screen-label="Problema">
      <div className="container">
        <div className="section-head">
          <div>
            <Eyebrow purple>O cenário comum</Eyebrow>
            <h2 className="h-section" style={{ marginTop: 20 }}>
              Quando marketing e vendas funcionam separados,<br />
              o crescimento fica <span className="purple">instável</span>.
            </h2>
          </div>
          <p className="lede mute" style={{ fontSize: 15 }}>
            Padrões que se repetem em empresas que dependem do digital para crescer, mas ainda não estruturaram o sistema.
          </p>
        </div>

        <div className="grid grid-4">
          {cards.map((c) => (
            <div className="card card-hover problem-card" key={c.n}>
              <div className="num">{c.n}</div>
              <h3 className="h-card">{c.t}</h3>
              <p className="body">{c.d}</p>
            </div>
          ))}
        </div>

        <div className="closing-banner">
          <h3 className="h-section" style={{ fontSize: "clamp(24px, 2.8vw, 36px)" }}>
            Não é falta de marketing.<br />
            É falta de um <span className="green">sistema previsível</span> de aquisição e vendas.
          </h3>
        </div>
      </div>
    </section>
  );
}

function SectionMetodo({ onMethod }) {
  return (
    <section id="metodo" className="section" data-screen-label="Método EDVA" style={{ background: "linear-gradient(180deg, var(--dv-black) 0%, #08080a 50%, var(--dv-black) 100%)" }}>
      <div className="container">
        <div className="section-head">
          <div>
            <Eyebrow>Método EDVA</Eyebrow>
            <h2 className="h-section" style={{ marginTop: 20 }}>
              A estrutura por trás da<br />
              <span className="green">aquisição e vendas previsíveis</span>.
            </h2>
          </div>
          <div>
            <p className="lede">
              O Método EDVA é a forma como a Digital Valor organiza marketing, atendimento, comercial e dados em um sistema integrado de crescimento.
            </p>
            <p className="lede" style={{ marginTop: 14, color: "var(--fg-3)", fontSize: 15 }}>
              Ele conecta estrutura, geração de demanda, conversão comercial e melhoria contínua para que a empresa pare de depender de ações soltas.
            </p>
          </div>
        </div>

        <EDVADiagram />

        <div style={{ marginTop: 40, display: "flex", justifyContent: "center" }}>
          <Button variant="secondary" onClick={onMethod}>Conhecer o Método EDVA</Button>
        </div>
      </div>
    </section>
  );
}

function SectionSolucoes() {
  const items = [
    { n: 1, t: "Gestão de Tráfego Estratégica", d: "Campanhas no Meta Ads e Google Ads com foco em geração de oportunidades comerciais." },
    { n: 2, t: "Criativos e Conteúdo de Conversão", d: "Artes, anúncios e conteúdos pensados para atrair, educar e gerar ação." },
    { n: 3, t: "Landing Pages e Funis", d: "Páginas e jornadas criadas para transformar visitantes em oportunidades." },
    { n: 4, t: "WhatsApp, CRM e Automação Comercial", d: "Organização do atendimento para reduzir perda de leads e melhorar acompanhamento." },
    { n: 5, t: "Análise de Dados e Otimização", d: "Leitura constante dos números para melhorar campanhas, conversão e tomada de decisão." },
    { n: 6, t: "Acompanhamento Estratégico", d: "Rotina de análise, direcionamento e ajustes para manter o crescimento sob controle." },
  ];
  return (
    <section id="solucoes" className="section" data-screen-label="Soluções">
      <div className="container">
        <div className="section-head">
          <div>
            <Eyebrow>Soluções conectadas</Eyebrow>
            <h2 className="h-section" style={{ marginTop: 20 }}>
              Soluções conectadas para gerar<br />
              <span className="green">crescimento com controle</span>.
            </h2>
          </div>
          <p className="lede">
            A Digital Valor não entrega serviços soltos. Cada frente de trabalho existe para fortalecer o sistema de aquisição e vendas da empresa.
          </p>
        </div>

        <div className="grid grid-3">
          {items.map((it) => (
            <div className="card card-hover solution-card" key={it.n}>
              <div className="num">{it.n}</div>
              <h3 className="h-card">{it.t}</h3>
              <p className="body">{it.d}</p>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 40, display: "flex", justifyContent: "center" }}>
          <Button variant="secondary" href="solucoes.html">Ver soluções</Button>
        </div>
      </div>
    </section>
  );
}

function SegmentIcon({ name }) {
  const c = { width: 22, height: 22, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "fitness": return <svg {...c}><path d="M6 7v10M3 9v6M18 7v10M21 9v6M6 12h12" /></svg>;
    case "imovel":  return <svg {...c}><path d="M3 11l9-7 9 7M5 10v10h14V10" /></svg>;
    case "comercio":return <svg {...c}><path d="M3 7h18l-2 5H5L3 7zM5 12v7h14v-7M9 19v-4h6v4" /></svg>;
    case "clinica": return <svg {...c}><path d="M12 4v16M4 12h16" /></svg>;
    case "servico": return <svg {...c}><path d="M14.7 6.3l3 3-9 9H5.7v-3l9-9zM13 8l3 3" /></svg>;
    case "b2b":     return <svg {...c}><path d="M3 21V9l5-4 5 4v12M13 21V13l4-3 4 3v8M3 21h18M7 13h2M7 17h2M16 17h2M16 14h2" /></svg>;
    default: return null;
  }
}

function SectionSegmentos() {
  const segs = [
    { icon: "fitness",  tag: "Aquisição de alunos", t: "Academias e Fitness",
      d: "Para academias, studios e negócios fitness que desejam estruturar aquisição previsível de alunos.",
      cta: "Ver solução para academias" },
    { icon: "imovel",   tag: "Lead qualificado", t: "Mercado Imobiliário",
      d: "Para imobiliárias, corretores estruturados, loteadoras e empreendimentos que precisam gerar e converter oportunidades qualificadas.",
      cta: "Ver solução para imobiliário" },
    { icon: "comercio", tag: "Operação local", t: "Comércios Locais Estruturados",
      d: "Para empresas locais que já possuem operação ativa e querem crescer sem depender apenas de indicação.",
      cta: "Ver solução para comércio local" },
    { icon: "clinica",  tag: "Pacientes e clientes", t: "Clínicas e Estética",
      d: "Para negócios que precisam organizar geração de demanda, atendimento e conversão de pacientes/clientes.",
      cta: "Ver solução para clínicas" },
    { icon: "servico",  tag: "Serviço sob demanda", t: "Prestadores de Serviço",
      d: "Para empresas que vendem serviços e precisam transformar interesse em oportunidades comerciais reais.",
      cta: "Ver solução para serviços" },
    { icon: "b2b",      tag: "Venda consultiva", t: "B2B e Venda Consultiva",
      d: "Para negócios com venda mais longa, que precisam de funil, acompanhamento e previsibilidade comercial.",
      cta: "Ver solução B2B" },
  ];
  return (
    <section id="segmentos" className="section" data-screen-label="Segmentos">
      <div className="container">
        <div className="section-head">
          <div>
            <Eyebrow>Segmentos atendidos</Eyebrow>
            <h2 className="h-section" style={{ marginTop: 20 }}>
              Atuamos com empresas que dependem de<br />
              <span className="green">aquisição constante</span> para crescer.
            </h2>
          </div>
          <p className="lede">
            A Digital Valor atende negócios com operação ativa, capacidade de atendimento e necessidade de gerar oportunidades com mais previsibilidade.
          </p>
        </div>

        <div className="grid grid-3">
          {segs.map((s) => (
            <div className="card card-hover segment-card" key={s.t}>
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <span className="icon"><SegmentIcon name={s.icon} /></span>
                <span className="tag">{s.tag}</span>
              </div>
              <h3 className="h-card">{s.t}</h3>
              <p className="body">{s.d}</p>
              <a className="link" href="segmentos.html">{s.cta} <span aria-hidden="true">→</span></a>
            </div>
          ))}
        </div>

        <div className="filter-strip">
          <span className="pill">Filtro de fit</span>
          <span>
            Essa solução <span style={{ color: "var(--fg-1)" }}>não é indicada</span> para empresas sem operação mínima, sem capacidade de atendimento ou que buscam apenas ações pontuais.
          </span>
        </div>
      </div>
    </section>
  );
}

function SectionDiagnostico({ onCta }) {
  return (
    <section id="diagnostico" className="section" data-screen-label="Diagnóstico" style={{ background: "linear-gradient(180deg, var(--dv-black) 0%, #08080a 100%)" }}>
      <div className="container">
        <div className="diag-wrap">
          <div>
            <Eyebrow>Diagnóstico estratégico</Eyebrow>
            <h2 className="h-section" style={{ marginTop: 20 }}>
              Antes de vender qualquer solução,<br />
              analisamos onde sua empresa está<br />
              <span className="green">perdendo oportunidades</span>.
            </h2>
            <p className="lede" style={{ marginTop: 20 }}>
              O Diagnóstico de Aquisição e Vendas Previsíveis é uma análise estratégica do seu cenário atual.
            </p>
            <p className="body" style={{ marginTop: 14, fontSize: 16, color: "var(--fg-2)" }}>
              Nele, entendemos como sua empresa gera oportunidades hoje, onde o funil perde vendas e quais ajustes podem criar mais previsibilidade no crescimento.
            </p>

            <div className="dv-h4" style={{ marginTop: 32, fontFamily: "var(--font-display)", fontSize: 12, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--dv-green)", fontWeight: 700 }}>
              No diagnóstico, analisamos
            </div>
            <ul className="diag-list">
              <li>Como sua empresa gera oportunidades hoje</li>
              <li>Como os leads são atendidos</li>
              <li>Onde o funil está perdendo conversão</li>
              <li>Quais canais têm maior potencial</li>
              <li>Quais ajustes podem gerar mais previsibilidade</li>
            </ul>

            <div style={{ marginTop: 32 }}>
              <Button variant="primary" onClick={onCta}>Solicitar Diagnóstico de Aquisição e Vendas Previsíveis</Button>
            </div>
          </div>

          <MiniFunnel />
        </div>
      </div>
    </section>
  );
}

function SectionSobre() {
  return (
    <section id="sobre" className="section" data-screen-label="Sobre">
      <div className="container">
        <div className="sobre-grid">
          <div>
            <Eyebrow>Sobre a Digital Valor</Eyebrow>
            <h2 className="h-section" style={{ marginTop: 20 }}>
              Uma agência com <span className="green">visão de crescimento</span>,<br />
              não de tarefa.
            </h2>
            <p className="lede" style={{ marginTop: 20 }}>
              A Digital Valor nasceu para ajudar empresas a transformar o digital em um canal real de crescimento.
            </p>
            <p className="body" style={{ marginTop: 14, fontSize: 16, color: "var(--fg-2)" }}>
              Nosso trabalho não é apenas subir campanhas, criar posts ou configurar ferramentas. Nosso trabalho é entender o negócio, organizar a aquisição, acompanhar o funil e melhorar os pontos que influenciam diretamente a venda.
            </p>
            <p className="body" style={{ marginTop: 14, fontSize: 16, color: "var(--fg-2)" }}>
              Atuamos com método, proximidade e visão comercial para empresas que querem crescer com mais controle.
            </p>
            <div style={{ marginTop: 32 }}>
              <Button variant="secondary" href="sobre.html">Conhecer a Digital Valor</Button>
            </div>
          </div>

          <div className="sobre-panel">
            <div className="eyebrow">Nosso jeito de operar</div>
            <div className="sobre-stat">
              <div className="lab">Método</div>
              <div className="val">Aquisição organizada em E, D, V, A — sem etapas soltas.</div>
            </div>
            <div className="sobre-stat">
              <div className="lab">Proximidade</div>
              <div className="val">Acompanhamento estratégico contínuo, não somente operacional.</div>
            </div>
            <div className="sobre-stat">
              <div className="lab">Visão comercial</div>
              <div className="val">Leitura do funil de ponta a ponta, do anúncio ao fechamento.</div>
            </div>
            <div className="sobre-stat">
              <div className="lab">Decisão por dados</div>
              <div className="val">Indicadores que mostram onde ajustar para crescer com controle.</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function SectionCTAFinal({ onCta, onMethod }) {
  return (
    <section id="cta" className="cta-final" data-screen-label="CTA Final">
      <div className="bg-diagonal" />
      <div className="container">
        <Chip>Próximo passo</Chip>
        <h2 className="h-section" style={{ marginTop: 20, fontSize: "clamp(32px, 4.8vw, 64px)" }}>
          Sua empresa sabe exatamente onde<br />
          está <span className="green">perdendo vendas</span> hoje?
        </h2>
        <p className="lede" style={{ margin: "24px auto 0", textAlign: "left", maxWidth: 680 }}>
          Se a resposta não for clara, existe espaço para organizar melhor aquisição, atendimento e conversão. Solicite um Diagnóstico de Aquisição e Vendas Previsíveis e entenda quais ajustes podem tornar o crescimento da sua empresa mais controlado.
        </p>
        <div className="ctas">
          <Button variant="primary" onClick={onCta}>Solicitar Diagnóstico</Button>
          <Button variant="ghost" onClick={onMethod}>Conhecer o Método EDVA</Button>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  SectionHero, SectionTese, SectionProblema, SectionMetodo,
  SectionSolucoes, SectionSegmentos, SectionDiagnostico,
  SectionSobre, SectionCTAFinal, SegmentIcon,
});