// Top sections: Header, Hero, Pain Points, A Virada

const Header = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const nav = [
    { label: 'Sobre',        href: '#sobre' },
    { label: 'Competências', href: '#competencias' },
    { label: 'Atuação',      href: '#atuacao' },
    { label: 'Contato',      href: '#contato' },
  ];
  return (
    <header className={`fixed top-0 inset-x-0 z-50 header-blur transition-all duration-300 ${scrolled ? 'bg-canvas/85 border-b border-line' : 'bg-transparent'}`}>
      <div className="max-w-[1240px] mx-auto px-6 md:px-10 h-[72px] md:h-[80px] flex items-center justify-between">
        <a href="#top" className="flex items-center gap-3 group">
          <span className="relative inline-flex items-center justify-center w-9 h-9 rounded-full bg-ink text-gold font-display text-base">
            M
            <span className="absolute -bottom-0.5 -right-0.5 w-2 h-2 rounded-full bg-gold"></span>
          </span>
          <div className="leading-tight">
            <div className="font-display text-[15px] font-medium tracking-tight">Michelle Eugenio</div>
            <div className="text-[10px] font-mono tracking-[0.18em] uppercase text-muted">SDR · Cloud & IA</div>
          </div>
        </a>

        <nav className="hidden md:flex items-center gap-9 text-[14px]">
          {nav.map(n => (
            <a key={n.href} href={n.href} className="nav-link text-ink/80 hover:text-ink transition-colors">
              {n.label}
            </a>
          ))}
        </nav>

        <div className="flex items-center gap-3">
          <a href="#contato" className="hidden md:inline-flex items-center gap-2 rounded-[10px] bg-ink text-white px-5 py-2.5 text-[14px] font-medium hover:bg-ink3 transition-colors">
            Fale comigo
            <span aria-hidden>→</span>
          </a>
          <button
            onClick={() => setOpen(!open)}
            className="md:hidden w-10 h-10 inline-flex items-center justify-center rounded-md border border-ink/20"
            aria-label="Abrir menu"
          >
            <span className="block w-4 h-px bg-ink mb-1.5"></span>
            <span className="block w-4 h-px bg-ink"></span>
          </button>
        </div>
      </div>
      {open && (
        <div className="md:hidden border-t border-line bg-canvas">
          <div className="px-6 py-4 flex flex-col gap-3 text-sm">
            {nav.map(n => (
              <a key={n.href} href={n.href} onClick={() => setOpen(false)} className="py-2 border-b border-line/60">{n.label}</a>
            ))}
            <a href="#contato" onClick={() => setOpen(false)} className="mt-2 inline-flex items-center justify-center rounded-[10px] bg-ink text-white px-5 py-3 font-medium">Fale comigo →</a>
          </div>
        </div>
      )}
    </header>
  );
};

const Hero = () => (
  <section id="top" className="relative pt-[120px] md:pt-[150px] pb-24 md:pb-32 overflow-hidden">
    {/* decorative side rules */}
    <div aria-hidden className="absolute left-6 md:left-10 top-[100px] bottom-[60px] w-px bg-ink/10 hidden md:block"></div>
    <div aria-hidden className="absolute right-6 md:right-10 top-[100px] bottom-[60px] w-px bg-ink/10 hidden md:block"></div>
    {/* faint corner labels */}
    <div aria-hidden className="hidden md:block absolute top-[110px] left-12 font-mono text-[10px] tracking-[0.25em] uppercase text-ink/40 rotate-90 origin-top-left translate-y-32">São Paulo · BR</div>
    <div aria-hidden className="hidden md:block absolute top-[110px] right-12 font-mono text-[10px] tracking-[0.25em] uppercase text-ink/40 -rotate-90 origin-top-right translate-y-44">Est. 2014</div>

    <div className="max-w-[1100px] mx-auto px-6 md:px-10 text-center">
      {/* Badge */}
      <Reveal>
        <div className="inline-flex items-center gap-3 rounded-full border border-ink/20 bg-canvas2/60 px-4 py-2 mb-10 md:mb-14">
          <span className="w-1.5 h-1.5 rounded-full bg-gold2 animate-pulse"></span>
          <span className="tag-num uppercase text-ink/80">Especialista em Prospecção · Cloud · IA</span>
        </div>
      </Reveal>

      {/* Photo placeholder */}
      <Reveal delay={80}>
        <div className="relative inline-block mb-10 md:mb-12">
          <PhotoPlaceholder label="RETRATO · M" className="w-32 h-32 md:w-40 md:h-40" />
          {/* rotating dotted ring */}
          <svg viewBox="0 0 200 200" className="absolute inset-0 w-full h-full -m-2 pointer-events-none" style={{ width: 'calc(100% + 16px)', height: 'calc(100% + 16px)' }}>
            <defs>
              <path id="ring" d="M100,100 m-94,0 a94,94 0 1,1 188,0 a94,94 0 1,1 -188,0" />
            </defs>
            <text fill="#B89968" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="6">
              <textPath href="#ring" startOffset="0">
                MICHELLE EUGENIO MACHADO · SDR · CLOUD & IA · TRANSFORMAÇÃO DIGITAL · 
              </textPath>
            </text>
          </svg>
        </div>
      </Reveal>

      {/* Headline */}
      <Reveal delay={140}>
        <h1 className="font-display text-[44px] sm:text-[58px] md:text-[80px] lg:text-[92px] leading-[0.98] tracking-[-0.025em] font-medium text-balance">
          Conectando empresas a
          <br />
          soluções de <span className="gold-text font-display">Cloud &amp; IA</span>
          <br />
          que geram resultado.
        </h1>
      </Reveal>

      {/* Subhead */}
      <Reveal delay={220}>
        <p className="mt-8 md:mt-10 max-w-[640px] mx-auto text-[16px] md:text-[18px] leading-[1.65] text-ink/75">
          Sou <span className="text-ink font-medium">Michelle Eugenio Machado</span>, SDR com mais de 10 anos gerando demanda qualificada em vendas consultivas. Conecto empresas de tecnologia a quem realmente decide — com método, escuta ativa e cadências que constroem pipeline previsível.
        </p>
      </Reveal>

      {/* CTA */}
      <Reveal delay={300}>
        <div className="mt-12 flex flex-col sm:flex-row items-center justify-center gap-4">
          <PrimaryCTA href="#contato" size="lg">Vamos conversar</PrimaryCTA>
          <a href="#competencias" className="text-[14px] text-ink/70 hover:text-ink underline underline-offset-4 decoration-gold2 decoration-2">
            ou veja o que eu entrego
          </a>
        </div>
      </Reveal>

      {/* Trust strip */}
      <Reveal delay={420}>
        <div className="mt-20 md:mt-28">
          <div className="tag-num uppercase text-ink/50 mb-6">Trajetória em</div>
          <div className="flex flex-wrap items-center justify-center gap-x-10 gap-y-4 font-display text-[18px] md:text-[22px] text-ink/55 italic">
            <span>Unidas S/A</span>
            <span className="text-gold2">·</span>
            <span>WSI</span>
            <span className="text-gold2">·</span>
            <span>SoftwareOne</span>
            <span className="text-gold2">·</span>
            <span>NuageIT</span>
            <span className="text-gold2">·</span>
            <span>
              Maitha Tech
              <span className="text-gold2"> · atual</span>
            </span>
          </div>
        </div>
      </Reveal>
    </div>
  </section>
);

const PainPoints = () => {
  const pains = [
    "Seu pipeline vive vazio e as metas nunca fecham.",
    "Prospecção sem método — dispara e-mails genéricos e torce pra alguém responder.",
    "Leads entram no funil mas nunca avançam pra reunião.",
    "Não sabe quem é o decisor e perde tempo com quem não compra.",
    "Quer migrar pra Cloud ou adotar IA, mas não sabe por onde começar a conversa com o mercado.",
    "Time comercial sobrecarregado e sem processo estruturado de qualificação.",
  ];
  return (
    <Section id="dores">
      <Reveal>
        <SectionLabel num="01" label="O Diagnóstico" />
        <h2 className="mt-6 font-display text-[40px] md:text-[64px] leading-[1.02] tracking-[-0.02em] font-medium max-w-[820px]">
          Sua empresa <span className="gold-text">enfrenta</span> isso?
        </h2>
        <p className="mt-5 max-w-[560px] text-ink/65 text-[15px] md:text-[16px] leading-relaxed">
          Se você reconheceu o seu time em mais de duas dessas dores, a conversa precisa começar antes do contrato — precisa começar pela prospecção.
        </p>
      </Reveal>

      <div className="mt-14 md:mt-20 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-line rounded-[14px] overflow-hidden border border-line">
        {pains.map((p, i) => (
          <Reveal key={i} delay={i * 60}>
            <div className="group relative bg-canvas hover:bg-canvas2 transition-colors h-full p-8 md:p-10 flex flex-col">
              <div className="flex items-start justify-between mb-6">
                <span className="font-display text-[44px] md:text-[56px] leading-none text-gold2 font-medium">
                  {String(i + 1).padStart(2, '0')}
                </span>
                <span className="tag-num uppercase text-ink/35 mt-3">dor</span>
              </div>
              <p className="text-ink text-[17px] md:text-[18px] leading-[1.45] font-medium text-balance">
                {p}
              </p>
              <div className="mt-auto pt-8 flex items-center gap-2 text-gold2 opacity-0 group-hover:opacity-100 transition-opacity text-[12px] tag-num uppercase">
                <span>Resolvo isso</span>
                <Icon name="arrow" className="w-4 h-4" />
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
};

const AVirada = () => {
  const pillars = [
    {
      tag: "i.",
      icon: "method",
      title: "Método",
      sub: "Prospecção estruturada com processos e ferramentas que funcionam — não improvisação.",
      detail: "BANT · SPIN · cadências multicanal · Sales Navigator · Lusha · CRM",
    },
    {
      tag: "ii.",
      icon: "precision",
      title: "Precisão",
      sub: "Qualificação cirúrgica pra só chegar lead certo na mesa do closer.",
      detail: "ICP nítido · escuta ativa · mapeamento de stakeholders · sem atalhos",
    },
    {
      tag: "iii.",
      icon: "result",
      title: "Resultado",
      sub: "Pipeline previsível e demanda constante que move o ponteiro.",
      detail: "Funil saudável · reuniões qualificadas · ciclo curto · receita real",
    },
  ];
  return (
    <Section id="virada" dark className="overflow-hidden">
      <div className="grid lg:grid-cols-12 gap-10 lg:gap-16">
        <Reveal className="lg:col-span-5">
          <SectionLabel num="02" label="A Virada" light />
          <h2 className="mt-6 font-display text-[40px] md:text-[58px] leading-[1.02] tracking-[-0.02em] font-medium text-canvas">
            Pare de improvisar.
            <br />
            <span className="gold-text">Comece</span> a escalar
            <br />
            com estratégia.
          </h2>
          <p className="mt-6 max-w-[440px] text-canvas/70 text-[15px] md:text-[16px] leading-relaxed">
            Vendas consultivas não são sobre volume. São sobre conversar com quem decide, no momento certo, com a história certa. É isso que eu construo pra você.
          </p>
        </Reveal>

        <div className="lg:col-span-7 grid grid-cols-1 gap-6">
          {pillars.map((p, i) => (
            <Reveal key={p.title} delay={i * 100}>
              <div className="group relative rounded-[14px] border border-canvas/15 bg-ink2/40 hover:border-gold/60 transition-colors p-7 md:p-9 flex gap-6 hover-lift">
                <div className="shrink-0">
                  <div className="w-14 h-14 rounded-full border border-gold/40 flex items-center justify-center text-gold">
                    <Icon name={p.icon} className="w-6 h-6" />
                  </div>
                </div>
                <div className="flex-1">
                  <div className="flex items-baseline gap-3 mb-2">
                    <span className="font-mono text-[12px] text-gold/70 tracking-widest">{p.tag}</span>
                    <h3 className="font-display text-[28px] md:text-[34px] font-medium text-canvas leading-none">{p.title}</h3>
                  </div>
                  <p className="text-canvas/80 text-[16px] leading-[1.5] max-w-[520px]">{p.sub}</p>
                  <div className="mt-4 pt-4 border-t border-canvas/10 font-mono text-[11px] tracking-[0.1em] uppercase text-gold/70">
                    {p.detail}
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </Section>
  );
};

Object.assign(window, { Header, Hero, PainPoints, AVirada });