const { useState, useEffect } = React;
const { Button } = window.PepMasterDesignSystem_040f9e;

const DS = "_ds/pep-master-design-system-040f9e88-b8be-4af9-9665-7745b3156045";

let checkoutLoading = false;
async function startCheckout(e) {
  if (e) e.preventDefault();
  if (checkoutLoading) return;
  checkoutLoading = true;
  try {
    const r = await fetch("/api/checkout", { method: "POST" });
    const data = await r.json();
    if (data && data.url) {
      window.location.href = data.url;
      return;
    }
    alert("Não foi possível iniciar o checkout agora. Tente novamente em instantes.");
  } catch (err) {
    alert("Erro ao iniciar o checkout. Verifique sua conexão e tente novamente.");
  } finally {
    checkoutLoading = false;
  }
}

function Icon({ name, ...rest }) {
  return <i data-lucide={name} {...rest}></i>;
}

function CTA({ children, size = "lg" }) {
  return (
    <Button as="a" href="#checkout" onClick={startCheckout} variant="primary" size={size} block
    iconRight={<Icon name="arrow-right" />}>
      {children}
    </Button>);

}

/* ---------------- Section 1 — Hero ---------------- */
function Hero() {
  return (
    <section className="section" data-screen-label="01 Hero">
      <div className="brandbar">
        <img src="assets/logo-primary.png" alt="Pep Master Pharmaceuticals" />
      </div>
      <p className="eyebrow center">Protocolo Retratutida</p>
      <h1 className="headline center">Você está vendo todo mundo emagrecer, menos você?</h1>
      <p className="subhead center">Conheça o protocolo que explica como a retratutida pode fazer voce <strong>perder 6kgs em um mes</strong> sem <strong>perda de massa muscular</strong>.

      </p>
      <p className="subhead-tag">A evolução do Mounjaro</p>

      <div className="hero-photo">
        <img src="assets/hero-medicao.png" alt="Especialista Pep Master medindo a cintura de uma paciente" />
      </div>

      <div className="pillars">
        <div className="pillar">
          <span className="chip"><Icon name="target" /></span>
          <div className="pillar__text">
            <span className="pillar__label">O que resolve</span>
            <p>A dificuldade de emagrecer, controlar a fome e preservar a massa muscular.</p>
          </div>
        </div>
        <div className="pillar">
          <span className="chip"><Icon name="brain" /></span>
          <div className="pillar__text">
            <span className="pillar__label">Como resolve</span>
            <p>Explicando como a retratutida age no apetite, no metabolismo e na queima de gordura.</p>
          </div>
        </div>
        <div className="pillar">
          <span className="chip"><Icon name="zap" /></span>
          <div className="pillar__text">
            <span className="pillar__label">Em quanto tempo</span>
            <p>em um mes, voce perde até 6kgs sem perder massa muscular igual o mounjaro</p>
          </div>
        </div>
      </div>

      <div className="lead-card">
        Um protocolo prático para mulheres 30+ que querem entender a retratutida sem informações confusas.
      </div>

      <div className="cta-block">
        <CTA>QUERO ACESSAR AGORA</CTA>
        <p className="cta-sub">Acesso imediato • Garantia de 7 dias</p>
      </div>
    </section>);

}

/* ---------------- Section 2 — Por que retratutida ---------------- */
function WhyReta() {
  const receptors = [
  { c: "r1", k: "GLP-1", t: "Ajuda no controle do apetite." },
  { c: "r2", k: "GIP", t: "Atua na resposta metabólica." },
  { c: "r3", k: "Glucagon", t: "Pode aumentar o gasto energético." }];

  const rows = [
  ["3 receptores", "2 receptores"],
  ["GLP-1 + GIP + glucagon", "GLP-1 + GIP"],
  ["Atua no apetite e no gasto energético", "Atua principalmente no apetite e metabolismo"]];

  return (
    <section className="section" data-screen-label="02 Por que retratutida">
      <p className="eyebrow center">Mecanismo triplo</p>
      <h2 className="headline center">Um mecanismo diferente</h2>

      <div className="receptors">
        {receptors.map((r) =>
        <div className="receptor" key={r.k}>
            <span className={`dot ${r.c}`}>{r.k.split("-")[0].slice(0, 3).toUpperCase()}</span>
            <div>
              <h3>{r.k}</h3>
              <p>{r.t}</p>
            </div>
          </div>
        )}
      </div>

      <div className="highlight">
        <p>Você come menos e seu organismo pode gastar mais</p>
      </div>

      <div className="compare">
        <div className="compare__head">
          <div className="a">Retratutida</div>
          <div className="b">Mounjaro</div>
        </div>
        {rows.map((row, i) =>
        <div className="compare__row" key={i}>
            <div><Icon name="check" className="ok" />{row[0]}</div>
            <div><Icon name="minus" className="mid" />{row[1]}</div>
          </div>
        )}
      </div>

      <p className="diff-line">O diferencial está no mecanismo triplo.</p>

      <div className="note center" style={{ marginBottom: 24, display: "flex", gap: 8, justifyContent: "center", alignItems: "center" }}>
        <Icon name="info" style={{ width: 16, height: 16 }} />
        Resultados e tolerância variam de pessoa para pessoa.
      </div>

      <CTA>QUERO ENTENDER O PROTOCOLO</CTA>
    </section>);

}

/* ---------------- Expert / Equipe ---------------- */
function Expert() {
  return (
    <section className="section" data-screen-label="Expert">
      <p className="eyebrow center">Quem desenvolveu</p>
      <h2 className="headline center">Feito por quem entende do assunto</h2>

      <div className="expert-card">
        <div className="expert-card__photo">
          <img src="assets/dra-karina-perfil.png" alt="Dra. Karina Fonseca" />
          <span className="expert-card__badge"><Icon name="badge-check" />Especialista responsável</span>
        </div>
        <div className="expert-card__body">
          <h3 className="expert-card__name">Dra. Karina Fonseca</h3>
          <p className="expert-card__role">Saúde metabólica · Pep Master Pharmaceuticals</p>
          <p className="expert-card__text">
            Protocolo construído com base científica e organizado para mulheres 30+ que querem entender a retratutida com clareza, segurança e foco em preservar a massa muscular.
          </p>
        </div>
      </div>

      <div className="team">
        <div className="team__photo">
          <img src="assets/equipe-pep-master.png" alt="Equipe Pep Master" />
        </div>
        <div className="team__cap">
          <span className="ico"><Icon name="users" /></span>
          <div>
            <b>Equipe multidisciplinar</b>
            <span>Acompanhamento e atualização contínua do conteúdo.</span>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------------- Section 3 — O que você recebe ---------------- */
function Deliverables() {
  const cards = [
  { icon: "book-open", title: "Guia Retratutida", list: ["O que é", "Como funciona", "Diferença para Mounjaro"] },
  { icon: "line-chart", title: "Guia de acompanhamento", list: ["Peso e medidas", "Fome", "Energia", "Evolução semanal"] },
  { icon: "shield-check", title: "Guia de procedência", list: ["Certificado de pureza", "Número do lote", "Fabricante", "Armazenamento"] },
  { icon: "salad", title: "Guia de alimentação", list: ["Dieta funcional", "Proteína", "Hidratação", "Preservação muscular"] },
  { icon: "building-2", title: "Guia de fornecedores", note: "Indicamos fornecedores confiáveis, com certificação de pureza e procedência comprovada." },
  { icon: "users", title: "Grupo exclusivo", list: ["Conteúdos", "Atualizações", "Comunidade no WhatsApp"] }];

  const trackRef = React.useRef(null);

  const scrollByCard = (dir) => {
    const track = trackRef.current;
    if (!track) return;
    const card = track.querySelector(".deliv");
    const step = card ? card.offsetWidth + 14 : 280;
    track.scrollBy({ left: dir * step, behavior: "smooth" });
  };

  return (
    <section className="section" data-screen-label="03 O que você recebe">
      <p className="eyebrow center">Entregáveis</p>
      <h2 className="headline center">Tudo organizado em um só lugar</h2>

      <div className="carousel">
        <div className="carousel__track" ref={trackRef}>
          {cards.map((it) =>
          <div className="deliv" key={it.title}>
              <div className="deliv__top">
                <span className="deliv__icon"><Icon name={it.icon} /></span>
                <h3>{it.title}</h3>
              </div>
              {it.note ?
            <p className="deliv__note">{it.note}</p> :

            <ul>
                  {it.list.map((li) =>
              <li key={li}><Icon name="check" />{li}</li>
              )}
                </ul>
            }
            </div>
          )}
        </div>

        <div className="carousel__nav">
          <button className="carousel__btn" aria-label="Anterior" onClick={() => scrollByCard(-1)}>
            <Icon name="chevron-left" />
          </button>
          <span className="carousel__hint"><Icon name="move-horizontal" />Arraste para o lado</span>
          <button className="carousel__btn" aria-label="Próximo" onClick={() => scrollByCard(1)}>
            <Icon name="chevron-right" />
          </button>
        </div>
      </div>

      <div className="bonus">
        <span className="bonus__tag">Bônus</span>
        <ul>
          <li><Icon name="gift" />Dieta funcional</li>
          <li><Icon name="gift" />Guia de outros peptídeos</li>
          <li><Icon name="gift" />Checklist de massa muscular</li>
          <li><Icon name="message-circle" />Grupo exclusivo no WhatsApp</li>
        </ul>
      </div>

      <div className="mt-s">
        <CTA>QUERO RECEBER TUDO</CTA>
      </div>
    </section>);

}

/* ---------------- Social proof — depoimentos ---------------- */
function Stars({ n = 5 }) {
  return (
    <span className="stars" aria-label={`${n} de 5 estrelas`}>
      {Array.from({ length: n }).map((_, i) => <Icon name="star" key={i} />)}
    </span>
  );
}

function SocialProof() {
  const prints = [
    { src: "assets/prova-1.png", name: "Lucas", cap: "2kg perdidos e mais disposição" },
    { src: "assets/prova-2.png", name: "Giovanna", cap: "1 mês e 2 dias · quase 6kg" },
    { src: "assets/prova-3.png", name: "Bruna", cap: "Menos fome e nenhum enjoo" },
    { src: "assets/prova-4.png", name: "Mari Carla", cap: "1kg em 5 dias" },
    { src: "assets/prova-5.png", name: "Fernanda Rocha", cap: "5,8kg no primeiro mês" },
  ];
  const trackRef = React.useRef(null);

  const scrollByCard = (dir) => {
    const track = trackRef.current;
    if (!track) return;
    const card = track.querySelector(".proof");
    const step = card ? card.offsetWidth + 14 : 280;
    const maxScroll = track.scrollWidth - track.clientWidth;
    let target = track.scrollLeft + dir * step;
    if (dir > 0 && track.scrollLeft >= maxScroll - 8) target = 0;          // fim → volta ao primeiro
    else if (dir < 0 && track.scrollLeft <= 8) target = maxScroll;          // início → vai ao último
    track.scrollTo({ left: target, behavior: "smooth" });
  };

  React.useEffect(() => {
    const track = trackRef.current;
    if (!track) return;
    let paused = false;
    const onEnter = () => { paused = true; };
    const onLeave = () => { paused = false; };
    track.addEventListener("pointerdown", onEnter);
    track.addEventListener("pointerup", onLeave);
    track.addEventListener("mouseenter", onEnter);
    track.addEventListener("mouseleave", onLeave);
    const id = setInterval(() => { if (!paused) scrollByCard(1); }, 4500);
    return () => {
      clearInterval(id);
      track.removeEventListener("pointerdown", onEnter);
      track.removeEventListener("pointerup", onLeave);
      track.removeEventListener("mouseenter", onEnter);
      track.removeEventListener("mouseleave", onLeave);
    };
  }, []);

  return (
    <section className="section" data-screen-label="Provas sociais">
      <p className="eyebrow center">Provas reais</p>
      <h2 className="headline center">O que elas estão dizendo</h2>

      <div className="rating-summary">
        <Stars n={5} />
        <div>
          <b>4,9 / 5</b>
          <span>centenas de mulheres 30+ já seguem o protocolo</span>
        </div>
      </div>

      <div className="carousel">
        <div className="carousel__track" ref={trackRef}>
          {prints.map((p) => (
            <figure className="proof" key={p.name}>
              <div className="proof__img">
                <img src={p.src} alt={`Conversa de ${p.name}`} loading="lazy" />
              </div>
              <figcaption className="proof__cap">
                <span className="proof__tag"><Icon name="badge-check" />Relato real</span>
                <b>{p.cap}</b>
              </figcaption>
            </figure>
          ))}
        </div>
        <div className="carousel__nav">
          <button className="carousel__btn" aria-label="Anterior" onClick={() => scrollByCard(-1)}>
            <Icon name="chevron-left" />
          </button>
          <span className="carousel__hint"><Icon name="move-horizontal" />Arraste para o lado</span>
          <button className="carousel__btn" aria-label="Próximo" onClick={() => scrollByCard(1)}>
            <Icon name="chevron-right" />
          </button>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Section 4 — Oferta, garantia, FAQ ---------------- */
function Offer() {
  const stack = [
  "Protocolo Retratutida",
  "Comparativo com Mounjaro",
  "Guia de alimentação",
  "Guia de procedência",
  "Guia de armazenamento",
  "Diário de acompanhamento",
  "Conteúdos bônus",
  "Grupo de WhatsApp"];

  const faqs = [
  { q: "O medicamento está incluso?", a: "Não. O produto é um protocolo digital educacional." },
  { q: "Retratutida é igual ao Mounjaro?", a: "Não. A retratutida atua em três receptores, enquanto o Mounjaro atua em dois." },
  { q: "O protocolo informa a quantidade que devo utilizar?", a: "O protocolo explica os fatores que precisam ser avaliados. Decisões individuais devem considerar histórico, objetivo e acompanhamento adequado." },
  { q: "O protocolo inclui dieta?", a: "Sim. Você receberá um guia alimentar para potencializar o processo e ajudar na preservação muscular." },
  { q: "Existe garantia?", a: "Sim. Você terá sete dias para solicitar o reembolso." }];

  const [open, setOpen] = useState(0);

  return (
    <section className="section" data-screen-label="04 Oferta e FAQ">
      <p className="eyebrow center">Oferta completa</p>
      <h2 className="headline center">Comece agora</h2>

      <div className="stack">
        <ul>
          {stack.map((s) =>
          <li key={s}><Icon name="check-circle-2" />{s}</li>
          )}
        </ul>
      </div>

      <div className="cta-block" style={{ marginBottom: 12 }}>
        <CTA>QUERO ACESSAR O PROTOCOLO</CTA>
        <p className="cta-sub">Compra única • Acesso imediato • Garantia de 7 dias</p>
      </div>

      {/* Garantia */}
      <div className="guarantee">
        <div className="seal">
          <div>
            <b>7</b>
            <span>dias de garantia</span>
          </div>
        </div>
        <h3>7 dias de garantia</h3>
        <p>Acesse o conteúdo e veja se ele faz sentido para você. Caso não goste, solicite o reembolso dentro de sete dias, sem precisar dar explicações.</p>
      </div>

      {/* FAQ */}
      <div className="faq">
        {faqs.map((f, i) =>
        <div className={`faq__item ${open === i ? "open" : ""}`} key={i}>
            <button className="faq__q" onClick={() => setOpen(open === i ? -1 : i)}>
              {f.q}
              <Icon name="chevron-down" />
            </button>
            <div className="faq__a"><div>{f.a}</div></div>
          </div>
        )}
      </div>

      <div className="finalcta">
        <h2 className="headline">Seu próximo passo começa aqui</h2>
        <CTA>QUERO COMEÇAR AGORA</CTA>
      </div>
    </section>);

}

function MobileCTA() {
  return (
    <div className="mobile-cta mobile-cta--noprice">
      <Button as="a" href="#checkout" onClick={startCheckout} variant="primary" size="md">
        QUERO ACESSAR AGORA
      </Button>
    </div>);

}

function Footer() {
  return (
    <footer className="site-footer">
      <img className="site-footer__logo" src="assets/logo-symbol-transparent.png" alt="Pep Master Pharmaceuticals" />
      <p className="site-footer__url">www.pep-master.com</p>
      <p className="site-footer__rights">© {new Date().getFullYear()} Pep Master Pharmaceuticals · Todos os direitos reservados.</p>
    </footer>);

}

function App() {
  useEffect(() => {
    if (window.lucide) window.lucide.createIcons();
  });
  return (
    <React.Fragment>
      <div className="lp">
        <Hero />
        <WhyReta />
        <Expert />
        <Deliverables />
        <SocialProof />
        <Offer />
        <Footer />
      </div>
      <MobileCTA />
    </React.Fragment>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);