// sections-top.jsx — Nav, Hero, Marquee, Intro, Pain

const Arrow = () => (
  <svg className="arrow" viewBox="0 0 16 16" fill="none">
    <path d="M3 13L13 3M13 3H5M13 3V11" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

// ---------- NAV ----------
function Nav() {
  const scrolled = useNavScroll();
  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
      <div className="container nav-inner">
        <a href="#top" className="nav-logo">
          <span className="mark">PO</span>
          Ponto Zero
        </a>
        <div className="nav-links">
          <a href="#dor">Diagnóstico</a>
          <a href="#solucao">Método</a>
          <a href="#oferta">Oferta</a>
          <a href="#faq">FAQ</a>
        </div>
        <a href="#oferta" data-checkout className="btn btn-outline" style={{padding: "11px 18px", fontSize: 13}}>
          Quero meu diagnóstico <Arrow />
        </a>
      </div>
    </nav>
  );
}

// ---------- HERO ----------
function Hero() {
  const headlineRef = useRef(null);
  useEffect(() => {
    const t = setTimeout(() => headlineRef.current?.classList.add("in"), 250);
    return () => clearTimeout(t);
  }, []);
  const subRef = useReveal();
  const ctaRef = useReveal();
  const metaRef = useReveal();

  return (
    <section className="hero" id="top" data-screen-label="01 Hero">
      <div className="hero-bg" />
      <div className="container">
        <div className="hero-inner">
          <div className="hero-meta reveal" ref={metaRef}>
            <span className="pill"><span className="dot"></span>Vagas abertas · 8 por semana</span>
            <span className="pill">Personal Chefs · 2026</span>
          </div>

          <h1 className="hero-headline" ref={headlineRef}>
            <span className="line"><span>Seu trabalho não é o problema.</span></span>
            <span className="line"><span>O que o mercado <span className="accent">vê antes</span>, sim.</span></span>
          </h1>

          <p className="hero-sub reveal" ref={subRef} style={{"--reveal-delay": "0.5s"}}>
            Uma análise do seu posicionamento, do seu perfil e da sua bio — feita por mim,
            em até <strong style={{color: "var(--text-primary)"}}>72 horas</strong>, com plano de
            ação pra aplicar no mesmo dia.
          </p>

          <div className="hero-cta reveal" ref={ctaRef} style={{"--reveal-delay": "0.65s"}}>
            <a href="#oferta" data-checkout className="btn btn-primary btn-large">
              Quero meu diagnóstico <Arrow />
            </a>
            <span className="micro">R$ 497 · garantia de 7 dias · sem reunião</span>
          </div>
        </div>
      </div>

      <div className="hero-index">PT/BR · v.01 · 2026</div>
    </section>
  );
}

// ---------- MARQUEE ----------
function Marquee() {
  const items = [
    "Diagnóstico em 72h",
    "Garantia de 7 dias",
    "Entrega no WhatsApp",
    "Bio reescrita por mim",
    "Plano de ação — 30 dias",
    "Sem reunião",
  ];
  // Duplicate for seamless loop
  const track = [...items, ...items, ...items, ...items];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {track.map((t, i) => (
          <span className="marquee-item" key={i}>
            <span className="sep"></span>
            {t}
          </span>
        ))}
      </div>
    </div>
  );
}

// ---------- INTRO / ABERTURA ----------
function Intro() {
  const ref = useStaggerReveal(".stagger");
  return (
    <section className="section-pad intro" data-screen-label="02 Abertura">
      <div className="container">
        <div className="intro-grid" ref={ref}>
          <div className="intro-head">
            <span className="kicker stagger reveal">Abertura</span>
            <h2 className="section-title stagger reveal">
              O Ponto Zero é o <em>diagnóstico</em> dessa etapa invisível.
            </h2>
            <p className="quote stagger reveal" style={{color: "var(--text-secondary)"}}>
              "O problema não está dentro da cozinha."
            </p>
          </div>
          <div className="intro-body">
            <p className="stagger reveal">
              Se você é personal chef, essa cena provavelmente já aconteceu:
              o orçamento foi. O cliente sumiu. Aquele que fechou da primeira vez não voltou.
              E você ficou se perguntando por que chefs com menos técnica estão com agenda cheia
              enquanto você ainda depende de indicação pra pagar o mês.
            </p>
            <p className="stagger reveal">
              Quando alguém pesquisa seu nome, visita seu perfil, lê como você se apresenta —
              <strong> essa pessoa já está decidindo quanto o seu trabalho vale</strong>.
              Antes de provar qualquer coisa.
            </p>
            <div className="stagger reveal" style={{marginTop: 36}}>
              <a href="#oferta" data-checkout className="btn btn-primary">
                Quero meu diagnóstico <Arrow />
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- PAIN / DOR ----------
const pains = [
  { n: "01", tag: "Silêncio do cliente", title: "O orçamento foi. O cliente sumiu.",
    text: "Você mandou orçamento pra cliente interessado que sumiu sem dar satisfação. Isso não é falta de interesse — é o que acontece quando o valor percebido antes da conversa não sustenta o preço que você pede.",
    insight: "O ruído está antes do orçamento chegar" },
  { n: "02", tag: "Pressão de preço", title: "Desconto que você não devia dar.",
    text: "Quando a comunicação não posiciona o valor com clareza, o cliente usa o preço como única referência — e negocia pra baixo automaticamente. Quem tem autoridade não negocia no preço.",
    insight: "Autoridade elimina a negociação de preço" },
  { n: "03", tag: "Mercado injusto?", title: "Menos técnica, mais dinheiro.",
    text: "O mercado não paga pela técnica que acontece dentro da cozinha. Paga pela percepção que acontece antes dela. Comunicação mais clara vence técnica invisível.",
    insight: "Percepção de valor supera capacidade técnica" },
  { n: "04", tag: "Canal único", title: "O perfil não atrai sozinho.",
    text: "Indicação é ótima — mas é passiva e imprevisível. Um perfil bem posicionado trabalha enquanto você cozinha, traz o cliente certo sem depender de quem te conhece.",
    insight: "Perfil posicionado é canal ativo de aquisição" },
  { n: "05", tag: "Subvalorização", title: "Trabalho bom. Preço que não reflete.",
    text: "A qualidade do prato não chega na cabeça do cliente antes da conversa. O que chega é o que ele vê, lê e percebe no seu perfil — e isso é o que define o teto do que ele aceita pagar.",
    insight: "O preço é negociado antes da primeira conversa" },
  { n: "06", tag: "Conteúdo sem conversão", title: "Apareceu. Postou. Não fechou.",
    text: "Conteúdo sem posicionamento atrai o público errado. Você não precisa postar mais. Precisa que o que você já posta chegue no cliente certo, comunicando o valor certo.",
    insight: "Volume sem posicionamento traz volume errado" },
];

function Pain() {
  const headRef = useStaggerReveal(".stagger");
  const listRef = useStaggerReveal(".stagger-item");
  return (
    <section className="section-pad pain" id="dor" data-screen-label="03 Dor">
      <div className="container">
        <div className="pain-header" ref={headRef}>
          <span className="kicker stagger reveal">A dor real</span>
          <h2 className="section-title stagger reveal">
            Não é falta <em>de talento.</em>
          </h2>
          <p className="section-lede stagger reveal">
            Seis padrões que aparecem no mercado de personal chef — e o que cada um revela
            sobre o que o cliente está enxergando antes mesmo de abrir conversa.
          </p>
        </div>

        <div className="pain-list" ref={listRef}>
          {pains.map((p) => (
            <article className="pain-item stagger-item reveal" key={p.n}>
              <div className="pain-num">
                <strong>{p.n}</strong>
                problema
              </div>
              <div className="pain-tag">{p.tag}</div>
              <div className="pain-content">
                <h3 className="pain-title">{p.title}</h3>
                <p className="pain-text">{p.text}</p>
              </div>
              <div className="pain-insight">{p.insight}</div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Marquee, Intro, Pain, Arrow });