// sections-mid.jsx — Solution, Benefits, Offer, Proof

// ---------- SOLUTION ----------
function Solution() {
  const ref = useStaggerReveal(".stagger");
  const portraitRef = useReveal();
  return (
    <section className="section-pad solution" id="solucao" data-screen-label="04 Solução">
      <div className="container">
        <div className="solution-grid" ref={ref}>

          <div className="solution-portrait reveal" ref={portraitRef}>
            <div className="portrait-frame">
              <img src="marcus-portrait.jpg" alt="Marcus Ribeiro" />
              <div className="overlay" />
              <div className="label">
                <span>Marcus Ribeiro</span>
                <span>SP · 2026</span>
              </div>
            </div>
            <div className="portrait-stats">
              <div className="portrait-stat">
                <div className="num">07</div>
                <div className="label">Anos em cozinha profissional</div>
              </div>
              <div className="portrait-stat">
                <div className="num">72h</div>
                <div className="label">Entrega no WhatsApp</div>
              </div>
            </div>
            <blockquote className="portrait-quote">
              <span className="mark">"</span>
              Branding feito por quem <em>viveu a cozinha</em><br/>
              para quem <em>vive a cozinha.</em>
            </blockquote>
          </div>

          <div className="solution-body">
            <span className="kicker stagger reveal">Mecanismo</span>
            <h2 className="section-title stagger reveal">
              Eu fui chef por <em>7 anos.</em> Isso muda tudo.
            </h2>
            <p className="stagger reveal">
              O Ponto Zero usa um método que construí a partir da minha vivência de 7 anos
              em cozinha profissional — e que tem uma vantagem que poucos estrategistas
              conseguem entregar.
            </p>
            <p className="stagger reveal">
              Cozinha profissional, rotina de serviço, conversa de preço com cliente difícil,
              sensação de ver o trabalho subvalorizado. <strong>Tudo que você vive, eu vivi antes.</strong>
            </p>
            <div className="highlight stagger reveal">
              Eu não estou olhando de fora achando que entendo.<br/>
              Eu vivi por dentro — e sei onde o problema costuma estar antes mesmo de você descrever.
            </div>
            <p className="stagger reveal">
              Você preenche um formulário estratégico, eu analiso, e em até 72 horas você recebe
              um pacote de entregáveis que já muda como você se apresenta.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- BENEFITS ----------
const benefits = [
  { n: "01", title: "Por que o cliente certo não está chegando", text: "E onde exatamente está o ruído no seu perfil." },
  { n: "02", title: "O que o mercado pensa sobre você", text: "Antes mesmo da conversa de preço começar." },
  { n: "03", title: "O que mudar no Instagram", text: "Pra parar de atrair curioso e começar a atrair comprador." },
  { n: "04", title: "O que fazer essa semana", text: "E o que exige reconstrução mais profunda." },
  { n: "05", title: "Sua bio reescrita por mim", text: "Linha por linha justificada. Pronta pra aplicar no mesmo dia." },
  { n: "06", title: "Por onde começar depois", text: "Se decidir levar o projeto mais fundo." },
];

function Benefits() {
  const headRef = useStaggerReveal(".stagger");
  const gridRef = useStaggerReveal(".stagger-item");
  return (
    <section className="section-pad" data-screen-label="05 Benefícios">
      <div className="container">
        <div className="benefits-header" ref={headRef}>
          <span className="kicker stagger reveal">O que você leva</span>
          <h2 className="section-title stagger reveal">
            Você termina o<br/>Ponto Zero <em>sabendo.</em>
          </h2>
          <p className="section-lede stagger reveal">
            Seis respostas concretas — não teoria, não "vai depender", não "talvez".
            Tudo aplicável no mesmo dia que você receber.
          </p>
        </div>

        <div className="benefits-grid" ref={gridRef}>
          {benefits.map((b) => (
            <article className="benefit stagger-item reveal" key={b.n}>
              <div className="benefit-num">{b.n} / 06</div>
              <h3 className="benefit-title">{b.title}</h3>
              <p className="benefit-text">{b.text}</p>
            </article>
          ))}
        </div>

        <div className="reveal" ref={useReveal()} style={{marginTop: 56, display: "flex", justifyContent: "center"}}>
          <a href="#oferta" data-checkout className="btn btn-primary btn-large">
            Quero meu diagnóstico <Arrow />
          </a>
        </div>
      </div>
    </section>
  );
}

// ---------- OFFER ----------
const offerItems = [
  { ix: "01", title: "Diagnóstico completo em PDF", desc: "O que o mercado provavelmente enxerga sobre você hoje, e o que está causando isso.", value: "R$ 997,00" },
  { ix: "02", title: "Plano de ação dos próximos 30 dias", desc: "Prioridades, ordem de execução, o que não fazer agora.", value: "R$ 597,00" },
  { ix: "03", title: "Análise detalhada do perfil no Instagram", desc: "Cada ponto avaliado com o porquê de cada ajuste.", value: "R$ 350,00" },
  { ix: "04", title: "Sua bio reescrita por mim", desc: "Linha por linha justificada — pronta pra aplicar no mesmo dia.", value: "R$ 350,00" },
  { ix: "05", title: "Entrega direta no WhatsApp", desc: "Sem plataforma complicada. Sem login.", value: "Incluso" },
  { ix: "06", title: "Sessão de dúvidas pós-entrega", desc: "Reunião de 30-40 min + acompanhamento de 30 dias para aplicações.", value: "R$ 997,00" },
];

function Offer() {
  const headRef = useStaggerReveal(".stagger");
  const listRef = useStaggerReveal(".stagger-item");
  const cardRef = useReveal();

  // Counter for price
  const [trigger, setTrigger] = useState(false);
  const trigRef = useRef(null);
  useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { setTrigger(true); io.disconnect(); } });
    }, { threshold: 0.3 });
    if (trigRef.current) io.observe(trigRef.current);
    return () => io.disconnect();
  }, []);
  const price = useCounter(497, 1800, trigger);

  return (
    <section className="section-pad offer" id="oferta" data-screen-label="06 Oferta">
      <div className="container">
        <div className="benefits-header" ref={headRef}>
          <span className="kicker stagger reveal">A oferta</span>
          <h2 className="section-title stagger reveal">
            Ponto Zero.<br/><em>Onde o rebranding</em> começa.
          </h2>
          <p className="section-lede stagger reveal">
            Seis entregáveis, feitos por mim, sobre o seu caso específico.
            Tudo aplicável no dia que você receber.
          </p>
        </div>

        <div className="offer-grid">
          <div>
            <div className="offer-list" ref={listRef}>
              {offerItems.map((o) => (
                <div className="offer-line stagger-item reveal" key={o.ix}>
                  <span className="ix">{o.ix}</span>
                  <div>
                    <div className="title">{o.title}</div>
                    <div className="desc">{o.desc}</div>
                  </div>
                  <span className="value">{o.value}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="price-card reveal" ref={(el) => { cardRef.current = el; trigRef.current = el; }}>
            <span className="kicker">Acesso Ponto Zero</span>
            <h3>Ponto Zero</h3>
            <div className="tagline">Onde o rebranding começa.</div>

            <div className="price-stack">
              <span>Stack total</span>
              <span className="val">R$ 3.291,00</span>
            </div>

            <div className="price-main">
              <span className="curr">R$</span>
              <span className="num">{price}</span>
            </div>
            <div className="price-installments">
              ou em até <strong style={{color: "var(--text-primary)"}}>12× de R$ 50,50</strong> no cartão
            </div>

            <div className="price-badges">
              <span className="price-badge">7 dias garantia</span>
              <span className="price-badge">72h entrega</span>
              <span className="price-badge">12× sem juros*</span>
            </div>

            <a href="#" data-checkout className="btn btn-primary btn-large price-cta">
              Quero meu diagnóstico <Arrow />
            </a>

            <p className="price-micro">
              "Um cliente fechado no preço certo — paga esse investimento várias vezes."
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- PROOF ----------
function Proof() {
  const ref = useStaggerReveal(".stagger");
  return (
    <section className="section-pad" id="prova" data-screen-label="07 Prova">
      <div className="container">
        <div className="proof-grid" ref={ref}>
          <div className="proof-bio">
            <span className="kicker stagger reveal">Quem te recebe</span>
            <h2 className="section-title stagger reveal">
              Marcus<br/>Ribeiro.
            </h2>
            <div className="stat stagger reveal">
              <span className="num">07</span>
              <span className="label">anos como chef profissional antes da estratégia</span>
            </div>
            <p className="stagger reveal">
              Foram 7 anos cozinhando profissionalmente antes de migrar para a estratégia.
              Isso muda a forma como eu leio o seu caso, porque meu olhar parte da vivência
              real da cozinha.
            </p>
            <p className="stagger reveal">
              Não olho de fora tentando entender. <strong>Eu vivi por dentro</strong> — e sei onde
              o problema costuma estar antes mesmo de você descrever.
            </p>
          </div>

          <div className="testimonial-card stagger reveal">
            <div className="quote-mark">"</div>
            <div className="testimonial-name">Nícollas Evangelista · Personal Chef</div>
            <div className="testimonial-fragments">
              <span className="frag">foda!!!!</span>
              <span className="frag">MANO</span>
              <span className="frag">surreal em que isso…</span>
              <span className="frag">impecável</span>
              <span className="frag muted">"conseguiu colocar tudo aqui… dentro de um documento"</span>
              <span className="frag muted">"você me surpreendeu.. simplesmente…."</span>
            </div>
            <div className="testimonial-pull">
              "Cara, assim, sua estratégia de marca completa precisa no mínimo ser 10K,
              você entrega muito, é surreal."
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- NICOLLAS GALLERY (scroll-driven horizontal) ----------
const nicollasImages = [
  { src: "nicollas-07.jpg", label: "Lifestyle · mesa montada", w: 480, h: 810 },
  { src: "nicollas-10.jpg", label: "Cardápio · sistema visual", w: 480, h: 810 },
  { src: "nicollas-08.jpg", label: "Lifestyle · jantar autoral", w: 480, h: 810 },
  { src: "nicollas-01.jpg", label: "Bolachas · brindes", w: 1440, h: 823 },
  { src: "nicollas-11.jpg", label: "Cardápio · acabamento", w: 480, h: 810 },
  { src: "nicollas-12.jpg", label: "Cardápio · proposta de marca", w: 480, h: 810 },
  { src: "nicollas-09.jpg", label: "Lifestyle · ambiente", w: 480, h: 810 },
  { src: "nicollas-05.jpg", label: "Cartão de visita", w: 1440, h: 823 },
  { src: "nicollas-02.jpg", label: "Dolma de chef", w: 480, h: 810 },
  { src: "nicollas-03.jpg", label: "Avental bordado", w: 480, h: 810 },
  { src: "nicollas-04.jpg", label: "Avental · aplicação", w: 480, h: 810 },
  { src: "nicollas-06.jpg", label: "Proposta comercial", w: 1440, h: 823 },
];

function NicollasGallery() {
  const wrapperRef = useRef(null);
  const trackRef = useRef(null);
  const progressRef = useRef(null);
  const headRef = useStaggerReveal(".stagger");

  useEffect(() => {
    const update = () => {
      const wrapper = wrapperRef.current;
      const track = trackRef.current;
      if (!wrapper || !track) return;
      const rect = wrapper.getBoundingClientRect();
      const scrollable = wrapper.offsetHeight - window.innerHeight;
      if (scrollable <= 0) return;
      const progress = Math.max(0, Math.min(1, -rect.top / scrollable));
      const padX = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--pad-x")) || 64;
      const maxX = Math.max(0, track.scrollWidth - window.innerWidth + padX * 2);
      track.style.transform = `translate3d(${(-progress * maxX).toFixed(2)}px, 0, 0)`;
      if (progressRef.current) progressRef.current.style.transform = `scaleX(${progress})`;
    };
    window.addEventListener("scroll", update, { passive: true });
    window.addEventListener("resize", update);
    update();
    return () => {
      window.removeEventListener("scroll", update);
      window.removeEventListener("resize", update);
    };
  }, []);

  return (
    <section ref={wrapperRef} className="nicollas-gallery" data-screen-label="07b Caso Nicollas">
      <div className="nicollas-stage">
        <div className="container nicollas-header" ref={headRef}>
          <span className="kicker stagger reveal">Caso · rebranding completo</span>
          <h3 className="stagger reveal">
            Projeto <em>Nícollas Evangelista.</em>
          </h3>
          <p className="stagger reveal">
            O autor do depoimento acima recebeu o rebranding completo da minha mão.
            Mesmo olhar estratégico que sustenta o Ponto Zero — executado a fundo.
          </p>
        </div>

        <div className="nicollas-track-wrap">
          <div className="nicollas-track" ref={trackRef}>
            {nicollasImages.map((img, i) => (
              <figure key={i} className="nicollas-slide" style={{aspectRatio: `${img.w} / ${img.h}`}}>
                <img src={img.src} alt={img.label} loading="lazy" />
                <figcaption>
                  <span className="ix">{String(i+1).padStart(2,"0")} / {String(nicollasImages.length).padStart(2,"0")}</span>
                  <span className="lbl">{img.label}</span>
                </figcaption>
              </figure>
            ))}
          </div>
        </div>

        <div className="container nicollas-foot">
          <div className="nicollas-progress">
            <div className="nicollas-progress-bar" ref={progressRef} />
          </div>
          <span className="nicollas-foot-label">Role para avançar</span>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Solution, Benefits, Offer, Proof, NicollasGallery });