// Bottom sections: Sobre, Depoimentos, Empresa, FAQ, CTA Final, Footer

const Sobre = () => {
  const stats = [
    { num: "+10", unit: "anos",     label: "de experiência em vendas consultivas e prospecção" },
    { num: "02",  unit: "prêmios",  label: "Outstanding Performance (NuageIT) · Valores Velocidade (SoftwareOne)" },
    { num: "+05", unit: "empresas", label: "Unidas S/A · WSI · SoftwareOne · NuageIT · Maitha Tech" },
  ];
  return (
    <Section id="sobre" dark className="overflow-hidden">
      <Reveal>
        <SectionLabel num="06" label="Sobre · Michelle" light />
      </Reveal>

      <div className="mt-10 grid lg:grid-cols-12 gap-10 md:gap-16 items-start">
        {/* Photo */}
        <Reveal className="lg:col-span-5">
          <div className="relative">
            <PhotoPlaceholder
              label="RETRATO MICHELLE"
              shape="rect"
              className="aspect-[4/5] w-full max-w-[460px]"
            />
            {/* corner caption */}
            <div className="absolute -bottom-6 -right-2 md:-right-6 bg-gold text-ink px-5 py-3 rounded-[10px] shadow-lg max-w-[220px]">
              <div className="tag-num uppercase opacity-70 mb-0.5">Atualmente em</div>
              <div className="font-display text-[18px] font-medium leading-tight">Maitha Tech</div>
              <div className="text-[11px] opacity-80 mt-0.5">SDR · Cloud & IA</div>
            </div>
            {/* offset frame */}
            <div aria-hidden className="absolute -top-3 -left-3 right-6 bottom-6 border border-gold/30 -z-10 rounded-[18px]"></div>
          </div>
        </Reveal>

        {/* Bio */}
        <Reveal delay={120} className="lg:col-span-7">
          <h2 className="font-display text-[40px] md:text-[58px] leading-[1.02] tracking-[-0.02em] font-medium text-canvas">
            Especialista em <span className="gold-text">prospecção</span> que vira receita.
          </h2>
          <div className="mt-8 space-y-5 text-canvas/80 text-[16px] md:text-[17px] leading-[1.65] max-w-[640px]">
            <p>
              Há mais de uma década, ajudo empresas de tecnologia a sair do improviso comercial. Comecei vendendo no chão de fábrica do mercado e fui me especializando em geração de demanda qualificada — o que hoje move o ponteiro de quem vende Cloud, IA e modernização.
            </p>
            <p>
              Trabalho com escuta ativa, metodologias estruturadas (BANT, SPIN) e cadências multicanal que respeitam o tempo do decisor. Não acredito em volume sem direção — acredito em pipeline construído lead por lead, com o tipo de conversa que abre porta.
            </p>
            <p className="text-canvas">
              Hoje, na <span className="gold-text font-medium">Maitha Tech</span>, conecto empresas a quem realmente decide — e ajudo o mercado brasileiro a destravar projetos de transformação digital.
            </p>
          </div>

          {/* Stats */}
          <div className="mt-12 grid grid-cols-1 sm:grid-cols-3 gap-px bg-canvas/15 rounded-[14px] overflow-hidden border border-canvas/15">
            {stats.map((s, i) => (
              <div key={i} className="bg-ink p-6 md:p-7">
                <div className="flex items-baseline gap-2 mb-2">
                  <span className="font-display text-[44px] md:text-[56px] leading-none text-gold font-medium tracking-tight">{s.num}</span>
                  <span className="tag-num uppercase text-canvas/55">{s.unit}</span>
                </div>
                <p className="text-canvas/75 text-[13px] md:text-[14px] leading-[1.45]">{s.label}</p>
              </div>
            ))}
          </div>

          {/* Signature line */}
          <div className="mt-10 flex items-center gap-4 text-canvas/55">
            <span className="font-display italic text-[28px] text-gold">Michelle.</span>
            <span className="h-px flex-1 bg-canvas/15"></span>
            <span className="tag-num uppercase">SP · BR</span>
          </div>
        </Reveal>
      </div>
    </Section>
  );
};

const Depoimentos = () => (
  <Section id="depoimentos">
    <div className="grid md:grid-cols-12 gap-10 items-center">
      <Reveal className="md:col-span-5">
        <SectionLabel num="07" label="Depoimentos" />
        <h2 className="mt-6 font-display text-[40px] md:text-[58px] leading-[1.02] tracking-[-0.02em] font-medium">
          Resultados <span className="gold-text">em construção</span>.
        </h2>
      </Reveal>

      <Reveal delay={120} className="md:col-span-7">
        <div className="relative rounded-[18px] border border-ink/15 bg-canvas2/40 p-10 md:p-14">
          <Icon name="quote" className="w-10 h-10 text-gold2 mb-6" />
          <p className="font-display italic text-[26px] md:text-[34px] leading-[1.2] tracking-tight text-ink/80 text-balance">
            Novos depoimentos em breve.
            <br />
            <span className="text-ink">Seja o próximo caso de sucesso.</span>
          </p>
          <div className="mt-10 flex items-center justify-between border-t border-ink/10 pt-6">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-full border-2 border-dashed border-ink/25"></div>
              <div className="w-10 h-10 rounded-full border-2 border-dashed border-ink/25 -ml-4"></div>
              <div className="w-10 h-10 rounded-full border-2 border-dashed border-ink/25 -ml-4"></div>
            </div>
            <a href="#contato" className="text-[13px] tag-num uppercase text-gold2 flex items-center gap-2 hover:text-ink">
              Quero ser o primeiro
              <Icon name="arrow" className="w-4 h-4" />
            </a>
          </div>
          {/* corner tag */}
          <div className="absolute -top-3 left-10 bg-canvas px-3 py-1 tag-num uppercase text-ink/50 border border-ink/15 rounded-full">
            slot.disponível
          </div>
        </div>
      </Reveal>
    </div>
  </Section>
);

const DadosEmpresa = () => (
  <Section id="empresa" className="bg-canvas2/40">
    <Reveal>
      <div className="text-center mb-12">
        <SectionLabel num="08" label="Dados Institucionais · PJ" />
        <h2 className="mt-6 font-display text-[36px] md:text-[52px] leading-[1.05] tracking-[-0.02em] font-medium">
          Atendimento como <span className="gold-text">Pessoa Jurídica</span>.
        </h2>
      </div>
    </Reveal>

    <Reveal delay={100}>
      <div className="max-w-[860px] mx-auto rounded-[18px] border border-ink/15 bg-white/65 p-8 md:p-12 relative">
        {/* watermark */}
        <div aria-hidden className="absolute top-6 right-6 font-mono text-[10px] tracking-[0.2em] text-ink/30 uppercase">doc.empresa.pj</div>

        <div className="grid md:grid-cols-2 gap-y-8 gap-x-12">
          <div>
            <div className="tag-num uppercase text-ink/45 mb-2">Razão Social</div>
            <div className="font-display text-[22px] md:text-[26px] leading-tight font-medium text-balance">
              Michelle Eugenio Machado LTDA
            </div>
          </div>
          <div>
            <div className="tag-num uppercase text-ink/45 mb-2">CNPJ</div>
            <div className="font-mono text-[17px] md:text-[20px] text-ink tracking-tight">
              62.271.003/0001-17
            </div>
          </div>

          <div className="md:col-span-2 h-px bg-ink/10"></div>

          <div className="md:col-span-2">
            <div className="tag-num uppercase text-ink/45 mb-2">Endereço</div>
            <div className="text-ink text-[16px] md:text-[17px] leading-[1.55]">
              R. Pais Leme, 215 · Conj. 1713 — Pinheiros
              <br />
              São Paulo / SP — CEP 05.424-150
            </div>
          </div>

          <div className="md:col-span-2 h-px bg-ink/10"></div>

          <div>
            <div className="tag-num uppercase text-ink/45 mb-2">Telefone · principal</div>
            <a href="tel:+5511961866933" className="font-mono text-[17px] md:text-[20px] text-ink hover:text-gold2 inline-flex items-center gap-2">
              (11) 96186-6933
              <Icon name="arrow" className="w-4 h-4 opacity-50" />
            </a>
          </div>
          <div>
            <div className="tag-num uppercase text-ink/45 mb-2">Telefone · alternativo</div>
            <a href="tel:+5515974011442" className="font-mono text-[17px] md:text-[20px] text-ink hover:text-gold2 inline-flex items-center gap-2">
              (15) 97401-1442
              <Icon name="arrow" className="w-4 h-4 opacity-50" />
            </a>
          </div>
        </div>

        {/* corner ticks */}
        <span className="absolute top-3 left-3 w-4 h-px bg-gold2"></span>
        <span className="absolute top-3 left-3 w-px h-4 bg-gold2"></span>
        <span className="absolute bottom-3 right-3 w-4 h-px bg-gold2"></span>
        <span className="absolute bottom-3 right-3 w-px h-4 bg-gold2"></span>
      </div>
    </Reveal>
  </Section>
);

const FAQItem = ({ q, a, n }) => (
  <details className="group border-b border-ink/15 py-6 md:py-7">
    <summary className="flex items-start gap-6 md:gap-10">
      <span className="tag-num uppercase text-gold2 pt-2 shrink-0 w-8">{n}</span>
      <span className="flex-1 font-display text-[20px] md:text-[26px] font-medium leading-tight tracking-tight text-balance pr-4">
        {q}
      </span>
      <span className="faq-icon shrink-0 mt-1 w-9 h-9 rounded-full border border-ink/25 flex items-center justify-center transition-transform duration-300 text-ink/70">
        <Icon name="plus" className="w-4 h-4" />
      </span>
    </summary>
    <div className="pl-[68px] md:pl-[88px] pr-12 mt-4 text-ink/75 text-[15px] md:text-[16px] leading-[1.65] max-w-[760px]">
      {a}
    </div>
  </details>
);

const FAQ = () => {
  const faqs = [
    {
      q: "Qual o modelo de trabalho?",
      a: "Atuo via PJ, em projetos contínuos de geração de demanda B2B. A relação é construída com escopo claro, metas combinadas e revisões periódicas — sem black box e sem promessa milagrosa.",
    },
    {
      q: "Atende qual região?",
      a: "Base em São Paulo (Pinheiros), atendimento remoto pra todo o Brasil. Para projetos internacionais (LATAM, EUA), conversamos sobre fuso e idioma do mercado-alvo.",
    },
    {
      q: "Como funciona o primeiro contato?",
      a: "Um call de 30 minutos pra entender produto, ICP, ciclo de venda atual e onde tá travando. Saio dessa conversa com um diagnóstico inicial — sem cobrar e sem compromisso.",
    },
    {
      q: "Trabalha com qual porte de empresa?",
      a: "Foco em empresas B2B de tecnologia, de mid-market a enterprise, que já têm produto validado e querem estruturar ou escalar a operação de SDR. Startups em estágio muito inicial nem sempre são o melhor fit.",
    },
    {
      q: "Qual o foco de atuação hoje?",
      a: "Cloud, Inteligência Artificial, automação de processos e modernização tecnológica. Conheço o vocabulário desse mercado e o tipo de dor que abre portas em conta enterprise.",
    },
    {
      q: "Como é feita a qualificação dos leads?",
      a: "Combinação de BANT (Budget, Authority, Need, Timeline) com SPIN para discovery. Cada lead que chega no closer já tem dor confirmada, decisor identificado e fit técnico validado.",
    },
  ];
  return (
    <Section id="faq">
      <div className="grid md:grid-cols-12 gap-10 md:gap-16">
        <Reveal className="md:col-span-4">
          <SectionLabel num="09" label="Perguntas Frequentes" />
          <h2 className="mt-6 font-display text-[40px] md:text-[58px] leading-[0.98] tracking-[-0.02em] font-medium">
            Tira a <span className="gold-text">dúvida</span>.
          </h2>
          <p className="mt-6 text-ink/65 text-[15px] md:text-[16px] leading-relaxed max-w-[340px]">
            Se ficou alguma pergunta de fora, manda direto no WhatsApp. A resposta sai mais rápido que e-mail.
          </p>
          <a href="#contato" className="mt-8 inline-flex items-center gap-2 text-[13px] tag-num uppercase text-gold2 hover:text-ink">
            Perguntar direto
            <Icon name="arrow" className="w-4 h-4" />
          </a>
        </Reveal>

        <div className="md:col-span-8">
          <Reveal>
            <div className="border-t border-ink/15">
              {faqs.map((f, i) => (
                <FAQItem key={i} q={f.q} a={f.a} n={String(i + 1).padStart(2, '0')} />
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </Section>
  );
};

const CTAFinal = () => (
  <Section id="contato" dark className="overflow-hidden">
    {/* Big decorative type behind */}
    <div aria-hidden className="absolute inset-x-0 top-1/2 -translate-y-1/2 text-center pointer-events-none">
      <div className="font-display italic text-[18vw] leading-none text-gold/5 select-none whitespace-nowrap">
        pipeline
      </div>
    </div>

    <div className="relative text-center max-w-[1000px] mx-auto">
      <Reveal>
        <SectionLabel num="10" label="Próximo Passo" light />
      </Reveal>
      <Reveal delay={100}>
        <h2 className="mt-8 font-display text-[44px] sm:text-[64px] md:text-[88px] lg:text-[104px] leading-[0.98] tracking-[-0.025em] font-medium text-canvas text-balance">
          Pronto pra encher
          <br />
          seu <span className="gold-text">pipeline</span> de
          <br />
          oportunidades reais?
        </h2>
      </Reveal>

      <Reveal delay={200}>
        <p className="mt-8 md:mt-10 max-w-[560px] mx-auto text-canvas/70 text-[16px] md:text-[18px] leading-[1.6]">
          30 minutos de call. Saio dessa conversa com um diagnóstico do seu funil. Sem cobrança, sem compromisso, sem pitch enlatado.
        </p>
      </Reveal>

      <Reveal delay={300}>
        <div className="mt-12 md:mt-16 flex flex-col items-center gap-8">
          <a
            href="https://wa.me/5511961866933"
            target="_blank"
            rel="noopener"
            className="inline-flex items-center gap-4 rounded-[14px] bg-gold text-white px-10 py-7 md:px-14 md:py-8 text-[20px] md:text-[28px] font-display font-medium tracking-tight hover:bg-gold2 transition-colors shadow-2xl shadow-black/30"
          >
            Fale comigo agora
            <span className="inline-flex items-center justify-center w-10 h-10 md:w-12 md:h-12 rounded-full text-white">
              <Icon name="whatsapp" className="w-6 h-6 md:w-7 md:h-7" />
            </span>
          </a>

          <div className="flex items-center gap-6 md:gap-8 mt-4">
            <a
              href="https://wa.me/5511961866933"
              target="_blank"
              rel="noopener"
              className="group flex items-center gap-3 text-canvas/80 hover:text-gold transition-colors"
            >
              <span className="inline-flex w-11 h-11 items-center justify-center rounded-full border border-canvas/25 group-hover:border-gold transition-colors">
                <Icon name="whatsapp" className="w-5 h-5" />
              </span>
              <span className="text-[14px] tag-num uppercase">WhatsApp</span>
            </a>
            <span className="w-px h-8 bg-canvas/15"></span>
            <a
              href="https://www.linkedin.com/in/michelleeugeniomachado/"
              target="_blank"
              rel="noopener"
              className="group flex items-center gap-3 text-canvas/80 hover:text-gold transition-colors"
            >
              <span className="inline-flex w-11 h-11 items-center justify-center rounded-full border border-canvas/25 group-hover:border-gold transition-colors">
                <Icon name="linkedin" className="w-5 h-5" />
              </span>
              <span className="text-[14px] tag-num uppercase">LinkedIn</span>
            </a>
          </div>
        </div>
      </Reveal>
    </div>
  </Section>
);

const Footer = () => (
  <footer className="bg-ink text-canvas/70 border-t border-canvas/10">
    <div className="max-w-[1240px] mx-auto px-6 md:px-10 py-12 md:py-16">
      <div className="grid md:grid-cols-12 gap-8 items-start">
        <div className="md:col-span-5">
          <div className="flex items-center gap-3">
            <span className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-gold text-ink font-display">M</span>
            <div>
              <div className="font-display text-canvas text-[18px] font-medium">Michelle Eugenio Machado</div>
              <div className="tag-num uppercase text-canvas/50 mt-0.5">SDR · Cloud & IA · Transformação Digital</div>
            </div>
          </div>
          <p className="mt-6 max-w-[380px] text-[14px] leading-[1.6] text-canvas/55">
            Conectando empresas a soluções de Cloud e Inteligência Artificial que geram resultado.
          </p>
        </div>

        <div className="md:col-span-3">
          <div className="tag-num uppercase text-gold/70 mb-3">Navegar</div>
          <ul className="space-y-2 text-[14px]">
            <li><a href="#sobre" className="hover:text-gold">Sobre</a></li>
            <li><a href="#competencias" className="hover:text-gold">Competências</a></li>
            <li><a href="#atuacao" className="hover:text-gold">Atuação</a></li>
            <li><a href="#faq" className="hover:text-gold">FAQ</a></li>
            <li><a href="#contato" className="hover:text-gold">Contato</a></li>
          </ul>
        </div>

        <div className="md:col-span-4">
          <div className="tag-num uppercase text-gold/70 mb-3">Contato</div>
          <ul className="space-y-2 text-[14px] font-mono">
            <li><a href="tel:+5511961866933" className="hover:text-gold">(11) 96186-6933</a></li>
            <li><a href="tel:+5515974011442" className="hover:text-gold">(15) 97401-1442</a></li>
            <li className="text-canvas/50 text-[13px] mt-3 leading-[1.5]">
              R. Pais Leme, 215 — Conj. 1713
              <br />
              Pinheiros, São Paulo/SP
            </li>
          </ul>
        </div>
      </div>

      <div className="mt-12 pt-6 border-t border-canvas/10 flex flex-col md:flex-row items-start md:items-center justify-between gap-4 text-[12px] text-canvas/50">
        <div>
          © {new Date().getFullYear()} Michelle Eugenio Machado LTDA · CNPJ 62.271.003/0001-17
        </div>
        <div className="tag-num uppercase">Feito com Café &amp; Code ☕</div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Sobre, Depoimentos, DadosEmpresa, FAQ, CTAFinal, Footer });