// Mid sections: Competências, Áreas de Atuação, Perfil Ideal / Não Ideal

const Competencias = () => {
  const items = [
    {
      n: "01",
      icon: "target",
      title: "Prospecção Estratégica",
      desc: "Outbound, inbound e eventos com domínio de LinkedIn, Sales Navigator, Lusha e CRM. A primeira porta é sempre aberta com método.",
      tools: ["LinkedIn", "Sales Navigator", "Lusha", "CRM"],
    },
    {
      n: "02",
      icon: "filter",
      title: "Qualificação de Leads",
      desc: "Abordagem baseada em escuta ativa e metodologias BANT e SPIN. Só chega na agenda do closer quem tem dor, orçamento e poder de decisão.",
      tools: ["BANT", "SPIN", "Discovery", "ICP fit"],
    },
    {
      n: "03",
      icon: "broadcast",
      title: "Geração de Demanda Multicanal",
      desc: "Cadências personalizadas via e-mail, cold call e WhatsApp. Histórias que conectam com o contexto real de cada decisor.",
      tools: ["E-mail", "Cold call", "WhatsApp", "Social"],
    },
  ];
  return (
    <Section id="competencias">
      <Reveal>
        <div className="md:flex md:items-end md:justify-between gap-10 mb-14 md:mb-20">
          <div>
            <SectionLabel num="03" label="Competências Principais" />
            <h2 className="mt-6 font-display text-[40px] md:text-[68px] leading-[0.98] tracking-[-0.02em] font-medium">
              O que <span className="gold-text">eu entrego</span>.
            </h2>
          </div>
          <p className="mt-6 md:mt-0 max-w-[400px] text-ink/65 text-[15px] md:text-[16px] leading-relaxed shrink-0">
            Três frentes — uma só engrenagem. É assim que pipeline de verdade se constrói.
          </p>
        </div>
      </Reveal>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-5 md:gap-6">
        {items.map((it, i) => (
          <Reveal key={it.n} delay={i * 120}>
            <article className="group relative h-full rounded-[16px] border border-line bg-white/40 hover:border-ink hover-lift p-8 md:p-10 flex flex-col">
              {/* top: number + icon */}
              <div className="flex items-start justify-between mb-12">
                <span className="tag-num uppercase text-ink/40">{it.n} / 03</span>
                <div className="w-14 h-14 rounded-full bg-ink text-gold flex items-center justify-center group-hover:rotate-3 transition-transform">
                  <Icon name={it.icon} className="w-6 h-6" />
                </div>
              </div>

              <h3 className="font-display text-[26px] md:text-[30px] leading-[1.05] tracking-tight font-medium text-balance mb-4">
                {it.title}
              </h3>
              <p className="text-ink/75 text-[15px] md:text-[16px] leading-[1.55] mb-8">
                {it.desc}
              </p>

              <div className="mt-auto pt-6 border-t border-line">
                <div className="tag-num uppercase text-ink/45 mb-3">Stack</div>
                <div className="flex flex-wrap gap-1.5">
                  {it.tools.map(t => (
                    <span key={t} className="text-[12px] font-mono tracking-tight px-2.5 py-1 rounded-full border border-ink/15 text-ink/75 bg-canvas">
                      {t}
                    </span>
                  ))}
                </div>
              </div>
            </article>
          </Reveal>
        ))}
      </div>

      {/* Marquee strip below */}
      <Reveal>
        <div className="mt-20 md:mt-28 relative overflow-hidden border-y border-line py-6">
          <div className="flex marquee-track gap-12 whitespace-nowrap font-display text-[22px] md:text-[28px] italic text-ink/35">
            {[
              "Prospecção estratégica", "Qualificação cirúrgica", "Demanda previsível",
              "Cloud & IA", "Vendas consultivas", "Social selling", "BANT", "SPIN",
              "Cadências multicanal", "Pipeline saudável",
            ].concat([
              "Prospecção estratégica", "Qualificação cirúrgica", "Demanda previsível",
              "Cloud & IA", "Vendas consultivas", "Social selling", "BANT", "SPIN",
              "Cadências multicanal", "Pipeline saudável",
            ]).map((w, i) => (
              <span key={i} className="flex items-center gap-12">
                {w}
                <span className="text-gold2 not-italic font-sans text-xl">✦</span>
              </span>
            ))}
          </div>
        </div>
      </Reveal>
    </Section>
  );
};

const Atuacao = () => {
  const areas = [
    { n: "01", icon: "target",    title: "Prospecção de Leads",         desc: "Identificação e qualificação de oportunidades via outbound, inbound e eventos.",                 highlight: true },
    { n: "02", icon: "filter",    title: "Vendas Consultivas",          desc: "Abordagem estratégica com escuta ativa e metodologias BANT e SPIN.",                            highlight: true },
    { n: "03", icon: "cloud",     title: "Cloud & Inteligência Artificial", desc: "Conexão de desafios empresariais a soluções de automação e modernização tecnológica.", highlight: true },
    { n: "04", icon: "broadcast", title: "Geração de Demanda",          desc: "Cadências multicanal personalizadas via e-mail, cold call e WhatsApp.",                          highlight: false },
    { n: "05", icon: "map",       title: "Mapeamento de Stakeholders",  desc: "Identificação de decisores em ciclos de venda complexos e organogramas técnicos.",              highlight: false },
    { n: "06", icon: "network",   title: "Social Selling",              desc: "Construção de autoridade e relacionamentos via LinkedIn e Sales Navigator.",                    highlight: false },
  ];
  return (
    <Section id="atuacao" className="bg-canvas2/40">
      <Reveal>
        <div className="md:flex md:items-end md:justify-between gap-10 mb-14 md:mb-20">
          <div>
            <SectionLabel num="04" label="Áreas de Atuação" />
            <h2 className="mt-6 font-display text-[40px] md:text-[68px] leading-[0.98] tracking-[-0.02em] font-medium">
              Como <span className="gold-text">eu atuo</span>.
            </h2>
          </div>
          <div className="mt-6 md:mt-0 flex items-center gap-2 text-[12px] tag-num uppercase text-ink/50">
            <span className="inline-block w-2 h-2 rounded-full bg-gold2"></span>
            <span>Áreas com maior impacto destacadas</span>
          </div>
        </div>
      </Reveal>

      <div className="border-t border-ink/15">
        {areas.map((a, i) => (
          <Reveal key={a.n} delay={i * 60}>
            <div className="group grid grid-cols-12 gap-4 md:gap-8 items-start border-b border-ink/15 py-8 md:py-10 transition-colors hover:bg-canvas2/60">
              <div className="col-span-2 md:col-span-1 flex items-start">
                <span className={`tag-num uppercase ${a.highlight ? 'text-gold2' : 'text-ink/45'}`}>{a.n}</span>
              </div>
              <div className="col-span-2 md:col-span-1 flex items-start">
                <div className={`w-10 h-10 md:w-11 md:h-11 rounded-full flex items-center justify-center ${a.highlight ? 'border border-gold2 text-gold2' : 'border border-ink/25 text-ink/70 group-hover:border-ink/40'}`}>
                  <Icon name={a.icon} className="w-5 h-5" />
                </div>
              </div>
              <div className="col-span-8 md:col-span-7">
                <div className="flex items-center gap-3 flex-wrap mb-1.5">
                  <h3 className="font-display text-[24px] md:text-[32px] font-medium leading-tight tracking-tight">
                    {a.title}
                  </h3>
                  {a.highlight && (
                    <span className="tag-num uppercase px-2 py-0.5 rounded-full border border-gold2 text-gold2">
                      Foco
                    </span>
                  )}
                </div>
                <p className={`text-[15px] md:text-[16px] leading-[1.55] max-w-[640px] ${a.highlight ? 'text-ink/75' : 'text-ink/70'}`}>
                  {a.desc}
                </p>
              </div>
              <div className="hidden md:flex col-span-3 items-center justify-end pt-3">
                <span className={`tag-num uppercase flex items-center gap-2 ${a.highlight ? 'text-gold2' : 'text-ink/35'}`}>
                  <span className="opacity-0 group-hover:opacity-100 transition-opacity">
                    {a.highlight ? 'Foco principal' : 'Saiba mais'}
                  </span>
                  <Icon name="arrow" className="w-4 h-4 transition-transform group-hover:translate-x-1" />
                </span>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
};

const PerfilIdeal = () => {
  const ideal = [
    "Vendem soluções de Cloud, IA ou tecnologia",
    "Precisam de pipeline qualificado e previsível",
    "Querem estruturar ou escalar a prospecção",
    "Valorizam processo comercial e metodologia",
    "Buscam resultados consistentes, não atalhos",
  ];
  const notIdeal = [
    "Quer resultado sem investir em processo",
    "Não tem produto ou serviço validado",
    "Espera milagre sem alinhar expectativas",
    "Não valoriza prospecção como motor de vendas",
  ];
  return (
    <Section id="perfil">
      <Reveal>
        <SectionLabel num="05" label="Fit · Para quem é · Para quem não é" />
        <h2 className="mt-6 font-display text-[40px] md:text-[64px] leading-[1.02] tracking-[-0.02em] font-medium max-w-[820px]">
          Vamos ser <span className="gold-text">honestos</span> sobre o fit.
        </h2>
        <p className="mt-5 max-w-[600px] text-ink/65 text-[15px] md:text-[16px] leading-relaxed">
          Resultado bom começa com expectativa alinhada. Se você se vê aqui, a gente conversa. Se você não se vê — sem ressentimento.
        </p>
      </Reveal>

      <div className="mt-14 md:mt-20 grid md:grid-cols-2 gap-5 md:gap-6">
        {/* Ideal */}
        <Reveal>
          <div className="h-full rounded-[16px] border border-ink/20 bg-canvas2/50 p-8 md:p-12 relative">
            <div className="absolute top-6 right-6 tag-num uppercase text-gold2">match.yes</div>
            <div className="flex items-center gap-3 mb-3">
              <span className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-ink text-gold">
                <Icon name="check" className="w-5 h-5" />
              </span>
              <span className="tag-num uppercase text-ink/50">Trabalho com empresas que</span>
            </div>
            <h3 className="font-display text-[28px] md:text-[36px] leading-tight font-medium mb-8 tracking-tight">
              Estão prontas pra construir prospecção como ativo.
            </h3>
            <ul className="space-y-1">
              {ideal.map((t, i) => (
                <li key={i} className="flex items-start gap-4 py-3 border-t border-ink/10 first:border-t-0">
                  <span className="shrink-0 font-mono text-[11px] text-gold2 tracking-[0.18em] uppercase pt-1.5">{String(i + 1).padStart(2, '0')}</span>
                  <span className="text-ink text-[16px] md:text-[17px] leading-[1.45]">{t}</span>
                </li>
              ))}
            </ul>
          </div>
        </Reveal>

        {/* Not Ideal */}
        <Reveal delay={120}>
          <div className="h-full rounded-[16px] border border-ink/10 bg-transparent p-8 md:p-12 relative">
            <div className="absolute top-6 right-6 tag-num uppercase text-ink/35">match.no</div>
            <div className="flex items-center gap-3 mb-3">
              <span className="inline-flex items-center justify-center w-10 h-10 rounded-full border border-ink/25 text-ink/55">
                <Icon name="x" className="w-5 h-5" />
              </span>
              <span className="tag-num uppercase text-ink/40">Não é pra você se</span>
            </div>
            <h3 className="font-display text-[28px] md:text-[36px] leading-tight font-medium mb-8 tracking-tight text-ink/55 italic">
              Procura milagre — não método.
            </h3>
            <ul className="space-y-1">
              {notIdeal.map((t, i) => (
                <li key={i} className="flex items-start gap-4 py-3 border-t border-ink/8 first:border-t-0">
                  <span className="shrink-0 font-mono text-[11px] text-ink/35 tracking-[0.18em] uppercase pt-1.5">{String(i + 1).padStart(2, '0')}</span>
                  <span className="text-ink/55 text-[16px] md:text-[17px] leading-[1.45] line-through decoration-ink/20 decoration-1">{t}</span>
                </li>
              ))}
            </ul>
          </div>
        </Reveal>
      </div>
    </Section>
  );
};

Object.assign(window, { Competencias, Atuacao, PerfilIdeal });