/* ============================================
   Components: Nav, Hero, VSL, PlanIntro, Method
   ============================================ */

const CHECKOUT_BASIC = "https://pay.kiwify.com.br/zVre1O5";
const CHECKOUT_FULL = "https://pay.kiwify.com.br/bzmHGc0";

/* ---- Tiny SVG icons ---- */
function CheckIcon({ color = "currentColor" }) {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
      <path d="M3 8.5L6.5 12L13 4.5" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
function ArrowIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
      <path d="M3 7H11M11 7L7.5 3.5M11 7L7.5 10.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
function PlayIcon() {
  return (
    <svg width="22" height="22" viewBox="0 0 22 22" fill="currentColor">
      <path d="M6 4L18 11L6 18V4Z"/>
    </svg>
  );
}
function OrnamentLine() {
  return (
    <svg width="48" height="8" viewBox="0 0 48 8" style={{ display: "inline-block", verticalAlign: "middle" }}>
      <path d="M0 4 H18 M30 4 H48" stroke="#FFF197" strokeWidth="1"/>
      <circle cx="24" cy="4" r="2" fill="#FFF197"/>
    </svg>
  );
}

/* ============ NAV ============ */
function Nav() {
  return (
    <nav className="nav">
      <div className="container nav__inner">
        <a href="#top" className="nav__logo">
          <img src="assets/epona-logo.png" alt="Épona"/>
          <span>Épona</span>
        </a>
        <div className="nav__links">
          <a href="#metodo">O método</a>
          <a href="#plano">O plano</a>
          <a href="#depoimentos">Depoimentos</a>
          <a href="#planos">Planos</a>
          <a href="#sobre">Sobre Aude</a>
        </div>
        <div className="nav__cta">
          <a className="btn btn--gold btn--small" href="#planos">
            Quero começar <ArrowIcon/>
          </a>
        </div>
      </div>
    </nav>
  );
}

/* ============ HERO ============ */
function Hero() {
  return (
    <header className="hero" id="top">
      <div className="hero__bg-orn">Bienvenue</div>
      <div className="container">
        <div className="hero__grid">
          <div className="hero__left">
            <div className="hero__kicker">
              <span className="dash"></span>
              <span>Plano de estudo · Francês A1</span>
            </div>

            <h1 className="hero__title">
              O <em>francês</em><br/>
              que cabe na<br/>
              sua <em>rotina</em>.
              <span className="small-line">— aprender com autonomia, do zero ao A1</span>
            </h1>

            <p className="hero__sub">
              Um plano de estudo elaborado por uma professora francesa para
              guiar você passo a passo — sem aulas gravadas genéricas,
              sem perder tempo procurando o que estudar.
            </p>

            <div className="hero__ctas">
              <a className="btn btn--gold" href="#planos">
                Ver os planos <ArrowIcon/>
              </a>
              <a className="btn btn--ghost" href="#vsl">
                Assistir a apresentação
              </a>
            </div>

            <div className="hero__trust">
              <span>26 módulos progressivos</span>
              <span className="dot"></span>
              <span>+15 anos ensinando</span>
              <span className="dot"></span>
              <span>Garantia de 7 dias</span>
            </div>
          </div>

          <div className="hero__right">
            <div className="hero__photo-frame"></div>
            <div className="hero__photo">
              <img src="assets/aude-1.jpg" alt="Aude Neuvesselle, professora francesa"/>
            </div>
            <div className="hero__photo-label">N° 01 · Bonjour</div>
            <div className="hero__photo-tag">Aude · Bordeaux ↔ Brasil</div>
          </div>
        </div>
      </div>
      <div className="hero__scroll">scroll ↓</div>
    </header>
  );
}

/* ============ VSL ============ */
function VSL() {
  const [playing, setPlaying] = React.useState(false);
  return (
    <section className="vsl" id="vsl">
      <div className="container">
        <div className="vsl__header">
          <span className="eyebrow eyebrow--center">
            <OrnamentLine/> Apresentação
          </span>
          <h2 className="vsl__title">
            Eu te explico, em <em>2 minutos</em>,<br/>
            como o plano funciona.
          </h2>
          <p className="vsl__sub">Aperte o play. Sem pressa, sem promessas vazias.</p>
        </div>

        <div className="vsl__player">
          {!playing ? (
            <div className="vsl__placeholder">
              <button className="vsl__play-btn" onClick={() => setPlaying(true)} aria-label="Play VSL">
                <PlayIcon/>
              </button>
              <div className="vsl__placeholder-label">
                ↑ Apresentação · Aude Neuvesselle · 2 min
              </div>
            </div>
          ) : (
            <video
              src="assets/vsl.mp4"
              controls autoPlay
              style={{ width: "100%", height: "100%", objectFit: "cover" }}
            />
          )}
        </div>
      </div>
    </section>
  );
}

/* ============ PLAN INTRO (cream) ============ */
function PlanIntro() {
  return (
    <section className="plan-intro section--cream" id="plano">
      <div className="container">
        <div className="plan-intro__grid">
          <div>
            <span className="eyebrow ink">
              <OrnamentLine/> O que é
            </span>
            <h2 className="plan-intro__heading">
              Não é<br/>um <em>curso</em>.<br/>É um <em>plano</em>.
            </h2>
            <div className="plan-intro__stamp">
              <span>Importante</span>
              <strong>Pensado, não gravado.</strong>
            </div>
          </div>

          <div>
            <p className="plan-intro__lead">
              O <strong>Plano de Estudo Épona</strong> é um guia
              estruturado, mês a mês, que organiza <em>o que</em>,
              <em> quando</em> e <em>como</em> você deve estudar para
              chegar ao nível A1 com confiança.
            </p>

            <div className="plan-intro__body">
              <p>
                A diferença é fundamental. Em um curso gravado tradicional,
                você assiste a aulas. Aqui, você <strong>estuda</strong> —
                usando plataformas, sites e exercícios 100% online que eu
                seleciono e organizo para você, etapa por etapa.
              </p>
              <p>
                Você não fica perdido entre vídeos no YouTube nem refém
                de horários de aula particular. O plano respeita a sua
                rotina, sua velocidade e o seu orçamento.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ METHOD (3 pilares) ============ */
function Method() {
  const pilars = [
    {
      n: "I.",
      title: "Curadoria, não gravação",
      body: "Eu seleciono as melhores plataformas e sites gratuitos da internet — reconhecidos internacionalmente — e organizo tudo em uma ordem que faz sentido para você."
    },
    {
      n: "II.",
      title: "Rota clara, etapa por etapa",
      body: "26 módulos progressivos. Cada um com objetivos claros, exercícios práticos e dicas de como estudar leitura, escrita, escuta e fala separadamente."
    },
    {
      n: "III.",
      title: "Autonomia, no seu ritmo",
      body: "Acesso 24 h. Estude quando puder — 20 minutos na hora do almoço ou 1 hora à noite. O plano se molda à sua rotina, não o contrário."
    }
  ];
  return (
    <section className="method" id="metodo">
      <div className="container">
        <div className="method__header">
          <span className="eyebrow eyebrow--center">
            <OrnamentLine/> O método
          </span>
          <h2 className="method__title">
            Três <em>pilares</em>. Um caminho.
          </h2>
        </div>
        <div className="method__grid">
          {pilars.map((p, i) => (
            <div className="method__card" key={i}>
              <div className="method__num">{p.n}</div>
              <h3>{p.title}</h3>
              <p>{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ CASES ============ */
function Cases() {
  const cases = [
    "Sua rotina é corrida e sobra pouco tempo para dedicar ao estudo.",
    "Aulas tradicionais e professores particulares estão fora do seu orçamento.",
    "Você não sabe por onde começar a estudar francês.",
    "Você se sente perdido com tantas informações soltas e incompletas na internet."
  ];
  return (
    <section className="cases">
      <div className="container">
        <div className="cases__header">
          <span className="eyebrow eyebrow--center">
            <OrnamentLine/> Pra você
          </span>
          <h2 className="cases__title">
            Você se reconhece em <em>algum</em> destes casos?
          </h2>
        </div>

        <div className="cases__grid">
          {cases.map((c, i) => (
            <div className="case-card" key={i}>
              <div className="case-card__num">0{i+1}</div>
              <div className="case-card__text">{c}</div>
            </div>
          ))}
        </div>

        <div className="cases__verdict">
          <p>Se respondeu “sim” a pelo menos um, este plano <em>foi feito para você.</em></p>
          <a href="#planos" className="btn btn--gold">
            Ver os planos <ArrowIcon/>
          </a>
        </div>
      </div>
    </section>
  );
}

/* Export to window */
Object.assign(window, { Nav, Hero, VSL, PlanIntro, Method, Cases, CheckIcon, ArrowIcon, PlayIcon, OrnamentLine, CHECKOUT_BASIC, CHECKOUT_FULL });