/* ============================================
   Components: Testimonials, Urgency, Pricing, FAQ, AboutMe, FinalCTA, Footer
   ============================================ */

/* ============ TESTIMONIALS ============ */
function Testimonials() {
  const items = [
    { src: "assets/testimonial-1.mp4", name: "Aluna A1", quote: "“Finalmente entendi por onde começar.”" },
    { src: "assets/testimonial-2.mp4", name: "Aluna A1", quote: "“Cabe no meu dia, do jeito que eu queria.”" },
    { src: "assets/testimonial-3.mp4", name: "Aluna A1", quote: "“Saí do zero em poucos meses.”" }
  ];
  const [playingIdx, setPlayingIdx] = React.useState(-1);
  const refs = React.useRef([]);

  const handlePlay = (i) => {
    refs.current.forEach((v, idx) => { if (v && idx !== i) v.pause(); });
    const v = refs.current[i];
    if (!v) return;
    if (v.paused) { v.play(); setPlayingIdx(i); }
    else { v.pause(); setPlayingIdx(-1); }
  };

  return (
    <section className="testimonials" id="depoimentos">
      <div className="container">
        <div className="testimonials__header">
          <span className="eyebrow eyebrow--center">
            <OrnamentLine/> O que dizem as alunas
          </span>
          <h2 className="testimonials__title">
            Quem já <em>começou</em>,<br/>conta como foi.
          </h2>
        </div>

        <div className="testimonials__grid">
          {items.map((t, i) => (
            <div
              key={i}
              className={`testimonial ${playingIdx === i ? "playing" : ""}`}
              onClick={() => handlePlay(i)}
            >
              <video
                ref={el => refs.current[i] = el}
                src={t.src}
                playsInline
                preload="metadata"
                onEnded={() => setPlayingIdx(-1)}
              />
              <button className="testimonial__play" aria-label="Tocar depoimento">
                <PlayIcon/>
              </button>
              <div className="testimonial__overlay">
                <div className="testimonial__name">{t.name}</div>
                <div className="testimonial__quote">{t.quote}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ URGENCY ============ */
function Urgency() {
  const targetRef = React.useRef(null);
  const [time, setTime] = React.useState({ d: 0, h: 0, m: 0, s: 0 });

  React.useEffect(() => {
    // Persist target across refreshes
    let target = parseInt(localStorage.getItem("epona_offer_end") || "0", 10);
    const now = Date.now();
    if (!target || target < now) {
      target = now + 3 * 24 * 60 * 60 * 1000; // 3 days
      localStorage.setItem("epona_offer_end", String(target));
    }
    targetRef.current = target;

    const tick = () => {
      const diff = Math.max(0, targetRef.current - Date.now());
      const d = Math.floor(diff / 86400000);
      const h = Math.floor((diff % 86400000) / 3600000);
      const m = Math.floor((diff % 3600000) / 60000);
      const s = Math.floor((diff % 60000) / 1000);
      setTime({ d, h, m, s });
    };
    tick();
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []);

  const pad = (n) => String(n).padStart(2, "0");

  return (
    <section className="urgency">
      <div className="container urgency__inner">
        <span className="urgency__label">★ Oferta por tempo limitado encerra em</span>
        <div className="urgency__timer">
          <div className="urgency__unit"><div className="num">{pad(time.d)}</div><span className="lbl">Dias</span></div>
          <span className="urgency__sep">·</span>
          <div className="urgency__unit"><div className="num">{pad(time.h)}</div><span className="lbl">Horas</span></div>
          <span className="urgency__sep">·</span>
          <div className="urgency__unit"><div className="num">{pad(time.m)}</div><span className="lbl">Min</span></div>
          <span className="urgency__sep">·</span>
          <div className="urgency__unit"><div className="num">{pad(time.s)}</div><span className="lbl">Seg</span></div>
        </div>
      </div>
    </section>
  );
}

/* ============ PRICING ============ */
function Pricing() {
  const basic = [
    "7 módulos iniciais (Capítulo I)",
    "Acesso 24 h por 1 ano",
    "Curadoria de plataformas online",
    "Ideal para testar o método com calma",
    "Suporte por e-mail"
  ];
  const full = [
    "26 módulos completos — do zero ao A1",
    "Acesso 24 h por 1 ano",
    "Curadoria completa de plataformas e sites",
    "Bônus 1: DELF A1 — guia da prova",
    "Bônus 2: Introdução ao Passé Composé",
    "Suporte direto comigo na plataforma",
    "Garantia de 7 dias — reembolso integral"
  ];
  return (
    <section className="pricing" id="planos">
      <div className="container">
        <div className="pricing__header">
          <span className="eyebrow eyebrow--center">
            <OrnamentLine/> Confira a oferta
          </span>
          <h2 className="pricing__title">
            Escolha o plano que <em>faz sentido</em><br/>para você agora.
          </h2>
          <p className="pricing__sub">
            Dois caminhos, mesmo método. Comece pelo que cabe melhor no seu momento.
          </p>
        </div>

        <div className="pricing__grid">
          {/* Basic plan */}
          <div className="plan">
            <div className="plan__eyebrow">Plano 01 · Descoberta</div>
            <div className="plan__name">Francês — <em>Descoberta do A1</em></div>
            <div className="plan__tagline">Para quem quer iniciar com calma.</div>

            <div className="plan__price">
              <span className="currency">R$</span>
              <span className="amount">67</span>
              <span className="cents">,00</span>
            </div>
            <div className="plan__installments">à vista — sem juros</div>

            <div className="plan__divider"></div>

            <ul className="plan__features">
              {basic.map((f, i) => (
                <li key={i}><CheckIcon color="#FFF197"/> {f}</li>
              ))}
            </ul>

            <a className="btn btn--ghost" href={CHECKOUT_BASIC} target="_blank" rel="noopener noreferrer">
              Começar pela Descoberta <ArrowIcon/>
            </a>
            <div className="plan__note">7 módulos · Capítulo I completo</div>
          </div>

          {/* Featured plan */}
          <div className="plan plan--featured">
            <div className="plan__eyebrow">Plano 02 · Completo</div>
            <div className="plan__name">Épona Francês — <em>A1 Completo</em></div>
            <div className="plan__tagline">26 módulos + bônus. O plano inteiro.</div>

            <div className="plan__price-strike">de R$ 226,00 por</div>
            <div className="plan__price">
              <span className="currency">R$</span>
              <span className="amount">169</span>
              <span className="cents">,00</span>
            </div>
            <div className="plan__installments">à vista ou 10x de R$ 20,31</div>

            <div className="plan__divider"></div>

            <ul className="plan__features">
              {full.map((f, i) => (
                <li key={i}><CheckIcon color="#5E3984"/> {f}</li>
              ))}
            </ul>

            <a className="btn btn--gold" href={CHECKOUT_FULL} target="_blank" rel="noopener noreferrer">
              Quero o plano completo <ArrowIcon/>
            </a>
            <div className="plan__note">Atenção: oferta por tempo limitado.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ FAQ ============ */
function FAQ() {
  const faqs = [
    {
      q: "Para quem é o Plano de Estudo Épona?",
      a: "É para quem deseja aprender francês com autonomia e praticidade — pessoas que querem ir do zero ao nível A1 completo, no próprio ritmo, sem depender de aulas presenciais."
    },
    {
      q: "Posso estudar onde e quando quiser?",
      a: "Sim. O Plano foi elaborado para você ter total autonomia. Acesse o material no horário que preferir e adapte os estudos à sua rotina."
    },
    {
      q: "Por quanto tempo terei acesso?",
      a: "Seu acesso ao Plano é de 1 ano a partir do momento da compra, e pode ser renovado se você desejar continuar."
    },
    {
      q: "Como eu acesso o Plano de Estudo?",
      a: "Logo após a compra você recebe um e-mail com o acesso à plataforma Kiwify. Após o cadastro gratuito, o acesso é liberado automaticamente."
    },
    {
      q: "O Plano oferece suporte?",
      a: "Sim. Você recebe suporte dentro da plataforma — pode escrever comentários em cada módulo ou falar comigo pelo e-mail epona.metodo@gmail.com."
    },
    {
      q: "E se eu não gostar do Plano?",
      a: "Você tem 7 dias a partir do momento da compra para pedir reembolso de 100% do valor, sem qualquer burocracia."
    },
    {
      q: "É um curso gravado?",
      a: "Não. E essa é a parte importante: é um Plano de Estudo elaborado por mim. Você não vai assistir a horas de vídeo — vai seguir uma rota organizada, módulo a módulo, usando plataformas e sites online cuidadosamente selecionados. Você estuda, não só assiste."
    }
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="faq" id="faq">
      <div className="container">
        <div className="faq__header">
          <span className="eyebrow eyebrow--center">
            <OrnamentLine/> Dúvidas frequentes
          </span>
          <h2 className="faq__title">
            Tudo o que você quer <em>saber</em>.
          </h2>
        </div>
        <div className="faq__list">
          {faqs.map((f, i) => (
            <div className={`faq-item ${open === i ? "open" : ""}`} key={i}>
              <button className="faq-item__btn" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="faq-item__icon">+</span>
              </button>
              <div className="faq-item__body">
                <div className="faq-item__body-inner">{f.a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ ABOUT ME ============ */
function AboutMe() {
  return (
    <section className="about-me" id="sobre">
      <div className="container">
        <div className="about-me__grid">
          <div className="about-me__photo-wrap">
            <div className="about-me__frame"></div>
            <div className="about-me__photo">
              <img src="assets/aude-2.jpg" alt="Aude Neuvesselle"/>
            </div>
            <div className="about-me__sig">
              <span>Bisous,</span>
              Aude N.
            </div>
          </div>

          <div>
            <span className="eyebrow ink">
              <OrnamentLine/> Sobre mim
            </span>
            <h2 className="about-me__heading">
              Aude<br/><em>Neuvesselle</em>.
            </h2>

            <p className="about-me__intro">
              Sou francesa, nasci em 1976. Moro no Brasil há mais de 20 anos
              e, há mais de 15, ajudo adolescentes e adultos brasileiros a
              aprender francês — de verdade.
            </p>

            <div className="about-me__body">
              <p>
                Ao longo desse tempo, muitas pessoas me pediram indicações
                de dicas e sites para estudar sozinhas pela internet. Foi a
                partir desses pedidos que decidi criar este plano de estudos.
              </p>
              <p>
                A ideia é simples: organizar tudo o que eu já recomendava
                informalmente em um plano <em>claro, sequencial e completo</em>,
                até o nível A1 — para que você não fique perdido entre vídeos
                soltos, apps e sites desconectados.
              </p>
            </div>

            <div className="about-me__stats">
              <div className="stat">
                <span className="stat__num">+15</span>
                <span className="stat__lbl">Anos ensinando</span>
              </div>
              <div className="stat">
                <span className="stat__num">+20</span>
                <span className="stat__lbl">Anos no Brasil</span>
              </div>
              <div className="stat">
                <span className="stat__num">A1</span>
                <span className="stat__lbl">Nível completo</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ FINAL CTA ============ */
function FinalCTA() {
  return (
    <section className="final-cta">
      <div className="final-cta__bg">À bientôt</div>
      <div className="container">
        <div className="final-cta__inner">
          <span className="eyebrow eyebrow--center">
            <OrnamentLine/> Hora de começar
          </span>
          <h2 className="final-cta__title">
            Seu francês não vai<br/>aprender <em>sozinho</em>.
          </h2>
          <p className="final-cta__sub">
            Escolha o plano, abra o primeiro módulo, e em 20 minutos
            você já está estudando — com direção, no seu tempo.
          </p>
          <div className="final-cta__btns">
            <a className="btn btn--gold" href={CHECKOUT_FULL} target="_blank" rel="noopener noreferrer">
              Quero o plano completo <ArrowIcon/>
            </a>
            <a className="btn btn--ghost" href={CHECKOUT_BASIC} target="_blank" rel="noopener noreferrer">
              Começar pela Descoberta
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ FOOTER ============ */
function Footer() {
  return (
    <footer className="footer">
      <div className="container footer__inner">
        <div className="footer__brand">
          <img src="assets/epona-logo.png" alt="Épona"/>
          <span>Épona</span>
        </div>
        <div className="footer__contact">
          <a href="mailto:epona.metodo@gmail.com">epona.metodo@gmail.com</a>
        </div>
        <div className="footer__meta">
          © {new Date().getFullYear()} Épona · Plano de Estudo de Francês A1
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Testimonials, Urgency, Pricing, FAQ, AboutMe, FinalCTA, Footer });