// pages.jsx — globals

function HomePage({ tweaks, openModal }) {
  return (
    <React.Fragment>
      <Hero headline={tweaks.heroHeadline} variant={tweaks.heroVariant} openModal={openModal} />
      <TrustBar />
      <Pillars />
      <HowItWorks />
      <StatsSection />
      <TestimonialsSection />
      <SubjectsSection />
      <FAQSection />
      <div className="wrap"><CTABand openModal={openModal} /></div>
    </React.Fragment>
  );
}

function TarifsPage({ tweaks, openModal }) {
  const plans = [
    { level: "Collège", range: "6e → 3e", price: tweaks.priceCollege, tag: "Consolider les bases, préparer le brevet", features: [
      "Cours à domicile d'1h ou 2h",
      "Suivi personnalisé hebdomadaire",
      "Matching sur-mesure",
      "Espace parent digital inclus",
    ], featured: false },
    { level: "Lycée", range: "2nde → Terminale", price: tweaks.priceLycee, tag: "Préparer le bac, viser l'excellence", features: [
      "Cours à domicile d'1h30 ou 2h",
      "Préparation bac et spécialités",
      "Matching avec un prof expert du niveau",
      "Compte-rendu après chaque cours",
    ], featured: true },
    { level: "Supérieur", range: "Prépa, Médecine, Sciences Po, Fac", price: tweaks.priceSup, tag: "Se préparer aux concours avec les meilleurs", features: [
      "Cours à domicile de 2h",
      "Prof expert du concours ciblé",
      "Méthode, annales et entraînement",
      "Disponibilité flexible",
    ], featured: false },
  ];

  return (
    <React.Fragment>
      <section className="page-hero">
        <div className="wrap">
          <Eyebrow>Tarifs</Eyebrow>
          <h1>Des tarifs transparents,<br/>sans engagement.</h1>
          <p className="lead">Pas de frais d'inscription. Pas de minimum de cours. Vous ne payez que les heures effectuées — et bénéficiez de 50% de crédit d'impôt.</p>
        </div>
      </section>

      <section className="section-sm" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div className="pricing-grid">
            {plans.map((p, i) => (
              <Reveal key={p.level} delay={i * 80}>
                <div className={`price-card ${p.featured ? "featured" : ""}`}>
                  <div className="price-level">{p.level} · {p.range}</div>
                  <h3>{p.tag}</h3>
                  <div className="price-num">{p.price}€<span className="unit">/heure</span></div>
                  <div className="price-effective">
                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M5 13l4 4 10-10"/></svg>
                    Soit <b style={{ marginLeft: 4 }}>{p.price / 2}€/h</b> après crédit d'impôt
                  </div>
                  <ul>
                    {p.features.map(f => <li key={f}>{f}</li>)}
                  </ul>
                  <button className={`btn ${p.featured ? "btn-accent" : "btn-primary"}`} onClick={openModal}>
                    Être rappelé <ArrowIcon />
                  </button>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="section-sm">
        <div className="wrap">
          <div className="tax-banner">
            <div className="tax-ic">-50%</div>
            <div>
              <h4>50% de crédit d'impôt — un cours à {tweaks.priceLycee}€ vous revient à {tweaks.priceLycee / 2}€</h4>
              <p>Agréé service à la personne. Article 199 sexdecies du CGI, plafonné à 12 000€/an. Attestation fiscale annuelle fournie.</p>
            </div>
          </div>
        </div>
      </section>

      <FAQSection items={FAQ_PRICING} title="Questions fréquentes sur les tarifs" />

      <div className="wrap"><CTABand openModal={openModal} /></div>
    </React.Fragment>
  );
}

function ProfsPage({ openModal }) {
  const process = [
    { badge: "01 Candidature",   title: "Vérification du parcours", body: "Nous confirmons que chaque candidat est bien étudiant ou diplômé d'une grande école reconnue." },
    { badge: "02 Entretien",     title: "Évaluation pédagogique",    body: "Nous testons les qualités pédagogiques, la méthodologie et le savoir-être lors d'un entretien de 45 min." },
    { badge: "03 Cours d'essai", title: "Validation sur le terrain", body: "Un premier cours supervisé est obligatoire avant toute mise en relation avec une famille." },
  ];

  return (
    <React.Fragment>
      <section className="page-hero">
        <div className="wrap">
          <Eyebrow>Nos professeurs</Eyebrow>
          <h1>Des professeurs d'exception,<br/>sélectionnés pour leur excellence.</h1>
          <p className="lead">Chaque professeur Cours Edgar est un étudiant ou diplômé d'une grande école parisienne. Nous sélectionnons <b style={{ color: "var(--navy)" }}>moins de 15%</b> des candidats.</p>
        </div>
      </section>

      <section className="section-sm">
        <div className="wrap">
          <div className="sec-head">
            <div className="left">
              <Eyebrow>Processus de sélection</Eyebrow>
              <h2>Trois étapes avant d'enseigner chez vous.</h2>
            </div>
          </div>
          <div className="process">
            {process.map((s, i) => (
              <Reveal key={s.badge} delay={i * 80}>
                <div className="process-step">
                  <div className="step-badge">{s.badge}</div>
                  <h4>{s.title}</h4>
                  <p>{s.body}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="sec-head">
            <div className="left">
              <Eyebrow>Quelques profils</Eyebrow>
              <h2>Ils enseignent avec nous.</h2>
            </div>
            <p className="lead" style={{ maxWidth: 380 }}>
              Un aperçu de nos 55 professeurs. Vous rencontrez votre prof dédié après l'appel de matching.
            </p>
          </div>
          <div className="profs-grid">
            {PROFS.map((p, i) => (
              <Reveal key={p.name} delay={i * 60}>
                <div className="prof-card">
                  <div className="prof-head">
                    <div className={`prof-avatar avatar ${p.v}`}>{p.avatar}</div>
                    <div>
                      <div className="prof-name">{p.name}</div>
                      <div className="prof-school">{p.school}</div>
                    </div>
                  </div>
                  <div className="prof-subjects">
                    {p.tags.map(t => <span key={t} className="prof-tag">{t}</span>)}
                  </div>
                  <p className="prof-bio">{p.bio}</p>
                  <div className="prof-foot">
                    <div className="prof-rating">
                      <Stars value={Math.round(parseFloat(p.rating))} />
                      <span>{p.rating}/5</span>
                    </div>
                    <div className="prof-status"><span className="dot" /> Disponible</div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <div className="wrap"><CTABand openModal={openModal} /></div>
    </React.Fragment>
  );
}

Object.assign(window, { HomePage, TarifsPage, ProfsPage });