// Platforms, Cases, Method, Form sections

const Platforms = () => {
  const platforms = [
    { name: "Google Ads", code: "G", desc: "Seja encontrado pelas pessoas que estão procurando seu produto/serviço agora." },
    { name: "Instagram Ads", code: "Ig", desc: "Apresente sua marca no feed e nos stories do canal mais ativo do seu público hoje." },
    { name: "Facebook Ads", code: "Fb", desc: "Alcance e remarketing em escala usando a base de dados mais robusta do mercado." },
    { name: "TikTok Ads", code: "Tk", desc: "Aproveite o algoritmo mais agressivo de descoberta para escalar criativos rapidamente." },
    { name: "YouTube Ads", code: "Yt", desc: "Construa autoridade e demanda com vídeo de longa duração no maior buscador depois do Google." },
    { name: "LinkedIn Ads", code: "In", desc: "Acesse decisores B2B com segmentação por cargo, empresa e setor. Ideal para alto ticket." },
  ];
  return (
    <section className="section" id="plataformas">
      <div className="container">
        <div className="card-glow">
          <div className="platforms-grid">
            <div className="platform-tiles">
              {platforms.map((p, i) => (
                <div className="platform-tile" key={i}>
                  <div className="platform-glyph">{p.code}</div>
                  <div className="name">{p.name}</div>
                </div>
              ))}
            </div>
            <div>
              <div className="eyebrow" style={{marginBottom: 14}}>// onde anunciamos</div>
              <h2 className="display">
                Use o poder da internet <em>a favor</em> do seu negócio.
              </h2>
              <p className="lede" style={{marginTop: 22}}>
                Não dependa apenas de indicações: enquanto seus concorrentes ocupam os maiores espaços online, você pode alcançar o público certo, gerar leads qualificados e crescer de forma consistente. A internet é sua vitrine mais poderosa, aproveite-a agora.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const cases = [
  {
    label: "eCommerce de moda e acessórios",
    desc: "Lorem ipsum dolor sit amet — a marca não estava alcançando o resultado desejado em Google e Meta. Após 4 meses, escalamos faturamento mantendo CPA estável.",
    metrics: [
      { label: "Conv. value / cost", value: "3.42", color: "yellow" },
      { label: "Cost / conv.", value: "R$31", color: "red" },
      { label: "Cost", value: "R$124K", color: "blue" },
      { label: "Conv. value", value: "R$426K", color: "green" },
      { label: "Conv. rate", value: "3.18%", color: "light" },
    ],
    summary: [
      { label: "Faturamento", value: "3.4x", suffix: "maior" },
      { label: "ROAS médio", value: "5.8x", suffix: "" },
      { label: "Período", value: "4 meses", suffix: "" },
    ]
  },
  {
    label: "Clínica de estética premium",
    desc: "Lorem ipsum dolor sit amet — clínica que captava leads pelo Instagram orgânico. Estruturamos funil de Meta + Google para gerar agendamentos previsíveis.",
    metrics: [
      { label: "Leads / mês", value: "412", color: "yellow" },
      { label: "Cost / lead", value: "R$28", color: "red" },
      { label: "Invest.", value: "R$11K", color: "blue" },
      { label: "Receita", value: "R$148K", color: "green" },
      { label: "Show-up", value: "62%", color: "light" },
    ],
    summary: [
      { label: "Volume de leads", value: "+486%", suffix: "" },
      { label: "Faturamento", value: "2.7x", suffix: "maior" },
      { label: "Período", value: "6 meses", suffix: "" },
    ]
  },
  {
    label: "Curso digital · alto ticket",
    desc: "Lorem ipsum dolor sit amet — infoprodutor com lançamentos esporádicos. Migramos para perpétuo com tráfego pago e BI próprio para análise de cohort.",
    metrics: [
      { label: "Vendas / mês", value: "84", color: "yellow" },
      { label: "Cost / sale", value: "R$680", color: "red" },
      { label: "Invest.", value: "R$57K", color: "blue" },
      { label: "Receita", value: "R$840K", color: "green" },
      { label: "Margem", value: "67%", color: "light" },
    ],
    summary: [
      { label: "ROAS", value: "14.7x", suffix: "" },
      { label: "Faturamento", value: "5.2x", suffix: "maior" },
      { label: "Período", value: "8 meses", suffix: "" },
    ]
  },
];

const Cases = () => {
  const [active, setActive] = React.useState(0);
  const c = cases[active];
  return (
    <section className="section" id="cases">
      <div className="container">
        <div className="case-tabs">
          {cases.map((cc, i) => (
            <button key={i} className={`case-tab ${i === active ? 'active' : ''}`} onClick={() => setActive(i)}>
              Case {String(i+1).padStart(2,'0')}
            </button>
          ))}
        </div>

        <div className="dashboard">
          <div className="case-head">
            <div className="label">{c.label}</div>
            <div className="case-icon"><IconStore/></div>
          </div>

          <div className="metric-row">
            {c.metrics.map((m, i) => (
              <div key={i} className={`metric metric-${m.color}`}>
                <div className="l">{m.label}</div>
                <div className="v">{m.value}</div>
              </div>
            ))}
            <div className="metric-icon-btn">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <rect x="3" y="3" width="7" height="9" rx="1"/>
                <rect x="14" y="3" width="7" height="5" rx="1"/>
                <rect x="14" y="12" width="7" height="9" rx="1"/>
                <rect x="3" y="16" width="7" height="5" rx="1"/>
              </svg>
              Metrics
            </div>
          </div>

          <div className="chart-row">
            <div className="chart-tile">
              <div className="l">Vendas / dia</div>
              <MiniLine color="#f0c14c" points={[3,5,4,7,6,9,11,10,13,15,14,17]}/>
            </div>
            <div className="chart-tile">
              <div className="l">Investimento</div>
              <MiniLine color="#e85a4f" points={[8,7,9,8,10,11,10,12,11,13,12,14]}/>
            </div>
            <div className="chart-tile">
              <div className="l">ROAS</div>
              <MiniLine color="#4a86e8" points={[2,3,2.5,3,4,3.5,4.5,5,5.5,5,6,5.8]}/>
            </div>
            <div className="chart-tile">
              <div className="l">Conversões</div>
              <MiniLine color="#c5f64a" points={[40,55,48,72,65,90,110,105,140,160,150,180]}/>
            </div>
          </div>

          <p className="lede" style={{marginTop: 22, fontSize: 15, maxWidth: '70ch'}}>{c.desc}</p>

          <div className="case-meta">
            {c.summary.map((s, i) => (
              <div className="case-meta-item" key={i}>
                <div className="l">{s.label}</div>
                <div className="v">{s.value} <span className="pct">{s.suffix}</span></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const Method = () => {
  const steps = [
    {
      title: "Diagnóstico Estratégico",
      body: "Analisamos seu negócio, modelo de receita, ticket médio e funil de vendas para identificar oportunidades e definir a estratégia ideal para maximizar resultados."
    },
    {
      title: "Estrutura e Setup Técnico",
      body: "Configuramos pixels, tags, conversões, integrações de CRM e dashboards. Com essa base sólida, cada otimização se torna precisa e assertiva."
    },
    {
      title: "Criativos e Ofertas",
      body: "Desenvolvemos hipóteses de criativos testáveis e estruturamos ofertas irresistíveis que realmente convertem, alinhadas ao seu público e objetivos."
    },
    {
      title: "Tráfego com Gestão Diária",
      body: "Gerenciamos e otimizamos suas campanhas todos os dias úteis, seguindo playbooks específicos para cada plataforma e nicho de mercado."
    },
    {
      title: "Relatórios e Escala",
      body: "Apresentamos reuniões quinzenais com dados claros, próximos passos estratégicos e cenários de escalabilidade validados para o crescimento do seu negócio."
    },
  ];
  return (
    <section className="section" id="metodo">
      <div className="container">
        <div className="method-grid">
          <div>
            <div className="eyebrow" style={{marginBottom: 14}}>// como trabalhamos</div>
            <h2 className="display">
              O método <em>TargetPro</em> de trazer resultados <span className="hl">previsíveis</span>.
            </h2>
            <p className="lede" style={{marginTop: 22}}>
              Desde 2020, transformamos anúncios em resultados reais para negócios locais. Nossa equipe, formada por especialistas em Publicidade, Design e Marketing, vai além de simplesmente "rodar anúncios": oferecemos consultoria estratégica para agências de Sorocaba e região, construindo verdadeiras máquinas de aquisição de clientes que geram crescimento consistente e mensurável.
            </p>
            <div className="cta-row" style={{marginTop: 28}}>
              <a className="btn btn-ghost" href="#contato">
                Ver na prática <IconArrow size={16}/>
              </a>
            </div>
          </div>
          <div className="method-steps">
            {steps.map((s, i) => (
              <div className="method-step" key={i}>
                <h4>
                  <span className="num">0{i+1} /</span>
                  {s.title}
                </h4>
                <p>{s.body}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Platforms, Cases, Method });

const Clients = () => {
  const logos = [
    { name: "Odonto Company", file: "logos/odonto-company.png" },
    { name: "Localiza", file: "logos/localiza.png" },
    { name: "Mercadão dos Óculos", file: "logos/mercadao-oculos.png" },
    { name: "Touro", file: "logos/touro.png" },
    { name: "Penalty", file: "logos/penalty.png" },
    { name: "UNISO", file: "logos/uniso.png", scale: 1.1 },
    { name: "Fenix Medical", file: "logos/fenix-medical.png" },
    { name: "IMPLA Odontologia", file: "logos/impla.png", scale: 0.78 },
    { name: "Yees inc", file: "logos/yees.png" },
    { name: "Lavor", file: "logos/lavor.png", scale: 1.25 },
  ];
  return (
    <section className="clients" id="clientes">
      <div className="container">
        <div className="section-head" style={{marginBottom: 40}}>
          <div className="eyebrow">// resultados reais</div>
          <h2 className="display" style={{maxWidth: '20ch'}}>
            Anuncie com a gente somente se você quiser <em>atingir o potencial máximo</em>.
          </h2>
        </div>
        <div className="clients-head">
          <div className="clients-eyebrow">// quem confia no nosso trabalho</div>
          <h3>Marcas que já <em>cresceram</em> com a TargetPro.</h3>
        </div>
      </div>
      <div className="logo-marquee">
        <div className="logo-marquee-track">
          {[...logos, ...logos].map((l, i) => (
            <div className="logo-item" key={i} style={l.scale ? {transform: `scale(${l.scale})`} : null}>
              <img src={l.file} alt={l.name} loading="lazy"/>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Clients = Clients;

const Services = () => {
  const services = [
    "Gestão completa de Redes Sociais",
    "Cronograma de Conteúdo",
    "Redação",
    "Design",
    "Criação de Posts",
    "Criação de Sites e Landing Pages",
    "Disparos de WhatsApp e Email Marketing",
    "Ferramentas de Automação",
    "Edição de Vídeo",
  ];
  return (
    <section className="section services-section" id="servicos">
      <div className="container">
        <div className="services-head">
          <div className="services-head-left">
            <div className="eyebrow" style={{marginBottom: 14}}>// serviços complementares</div>
            <h2 className="display">
              Serviços que podem ser <em>contratados junto</em> à gestão de tráfego.
            </h2>
          </div>
          <div className="services-head-right">
            <p className="lede">
              Para quem precisa de uma estrutura completa, montamos um pacote sob medida combinando a gestão de tráfego com os serviços abaixo, sem ter que contratar uma agência diferente para cada entrega.
            </p>
          </div>
        </div>

        <div className="services-grid">
          {services.map((s, i) => (
            <div className="service-tile" key={i}>
              <div className="service-num">+ {String(i+1).padStart(2,'0')}</div>
              <div className="service-name">{s}</div>
              <div className="service-arrow">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M7 17L17 7M9 7h8v8"/>
                </svg>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Services = Services;