/* global React, NavBar, Footer, KalviLogo, Illustrations, FEATURES, TESTIMONIALS, FAQ, CLIENT_LOGOS */
const { useState: useV1State, useEffect: useV1Effect, useRef: useV1Ref } = React;

/* ============================================================
   Variation 1 — VSL Editorial
   Hero compact + vidéo + CTA → Form Typeform-style → Features → Testis → FAQ → CTA
   ============================================================ */

const V1Hero = () => {
  const scrollToForm = (e) => {
    e.preventDefault();
    const el = document.getElementById("form");
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };
  return (
    <section className="section marble" style={{ paddingBottom: 100 }}>
      <div className="marble-veins"></div>
      <NavBar />
      <div style={{ position: "relative", zIndex: 2, padding: "40px 64px 0", textAlign: "center" }}>
        <div className="eyebrow"><span className="dot"></span>Guide complet de +20 pages</div>
        <h1 style={{ fontFamily: "'Instrument Serif', 'Cormorant Garamond', serif", fontSize: 84, lineHeight: 1.02, margin: "28px auto 0", maxWidth: 1060, fontWeight: 400, letterSpacing: "-0.015em" }}>
          Le guide pour scaler ton business de service à <em style={{ color: "var(--accent)", fontStyle: "italic" }}>+1M€/an de profit</em> avec une équipe d'<em style={{ fontStyle: "italic" }}>agents IA autonomes</em>.
        </h1>
        <p className="serif-italic" style={{ fontSize: 28, lineHeight: 1.35, color: "var(--ink)", maxWidth: 880, margin: "32px auto 0", fontWeight: 500 }}>
          Découvre le modèle <span style={{ color: "var(--accent)" }}>AGaaS</span> — Agentic as a Service / Software. Pour les business de service / coachs / consultants bloqués en dessous des 25k€/mois.
        </p>

        {/* Wistia VSL */}
        <div style={{ maxWidth: 880, margin: "48px auto 0", position: "relative" }}>
          <div className="card-marble" style={{ padding: 12, background: "rgba(255,255,255,0.55)" }}>
            <div style={{ borderRadius: 2, overflow: "hidden", background: "var(--ink)", boxShadow: "0 30px 70px rgba(26,22,20,0.18)" }}>
              <wistia-player media-id="mz0zj1at9a" aspect="1.7777777777777777"></wistia-player>
            </div>
          </div>
        </div>

        {/* CTA */}
        <div style={{ marginTop: 44, display: "flex", flexDirection: "column", gap: 14, alignItems: "center" }}>
          <a className="btn btn--accent" href="#form" onClick={scrollToForm} style={{ padding: "18px 32px", fontSize: 15 }}>
            Vérifier si votre maison est éligible <span className="arrow">↓</span>
          </a>
        </div>
      </div>
    </section>);

};

/* ----------- Typeform-style form ----------- */

const FORM_QUESTIONS = [
{
  n: 1,
  type: "text",
  q: "Comment s'appelle votre maison ?",
  hint: "Nom du cabinet, de l'école ou du studio.",
  placeholder: "Ex. Cabinet Brevia"
},
{
  n: 2,
  type: "choice",
  q: "Quel est votre métier principal aujourd'hui ?",
  hint: "Choisissez la catégorie qui vous ressemble le plus.",
  options: ["Conseil & expertise", "Formation & éducation", "Studio créatif / agence", "Autre"]
},
{
  n: 3,
  type: "choice",
  q: "Combien êtes-vous dans la maison ?",
  hint: "L'accompagnement Kalvi s'adresse aux structures de 5 à 250 personnes.",
  options: ["Moins de 5", "5 à 25", "25 à 100", "100 à 250", "Plus de 250"]
},
{
  n: 4,
  type: "email",
  q: "Sur quel email vous écrire ?",
  hint: "Nous répondons à toute candidature sincère en moins de 48 heures.",
  placeholder: "vous@maison.fr"
}];


const V1Form = () => {
  useV1Effect(() => {
    // Load Typeform embed script once
    if (!document.querySelector('script[src*="embed.typeform.com/next/embed.js"]')) {
      const s = document.createElement("script");
      s.src = "//embed.typeform.com/next/embed.js";
      s.async = true;
      document.body.appendChild(s);
    }
  }, []);

  return (
    <section className="section marble" id="form" style={{ padding: "120px 0 120px", color: "var(--ink)", position: "relative", overflow: "hidden" }}>
      <div className="marble-veins"></div>

      <div style={{ position: "relative", zIndex: 2, maxWidth: 880, margin: "0 auto", padding: "0 32px", textAlign: "center" }}>
        <div className="eyebrow">
          <span className="dot"></span>Recevoir le guide
        </div>
        <h3 className="serif" style={{ fontSize: 56, lineHeight: 1.05, fontWeight: 400, margin: "24px 0 16px", letterSpacing: "-0.02em", color: "var(--ink)" }}>
          Réserve ton Audit Offert <span className="serif-italic" style={{ color: "var(--accent)" }}></span>.
        </h3>
        <p className="serif-italic" style={{ fontSize: 22, lineHeight: 1.45, color: "var(--ink)", margin: "0 auto 48px", maxWidth: 580, fontWeight: 500 }}>
          Deux minutes pour qu'on sache à qui on parle, et le PDF arrive dans votre boîte.
        </p>

        <div
          className="tf-wrapper"
          style={{
            background: "var(--cream)",
            color: "var(--ink)",
            padding: 12,
            borderRadius: 2,
            boxShadow: "0 20px 60px rgba(26,22,20,0.08), 0 0 0 1px var(--line-soft)",
            minHeight: 520,
            overflow: "hidden"
          }}>
          
          <div data-tf-live="01KS067TRHACRDTWWA7HM0DCVK" style={{ minHeight: 500 }}></div>
        </div>
      </div>
    </section>);

};

/* ----------- Features (header centered) ----------- */

const V1Features = () =>
<section className="section" id="methode" style={{ padding: "140px 0 120px", background: "var(--cream)" }}>
    <div className="container">
      <div style={{ textAlign: "center", marginBottom: 88, maxWidth: 760, marginInline: "auto" }}>
        <div className="eyebrow"><span className="dot"></span>La méthode · §2</div>
        <h2 className="serif" style={{ fontSize: 76, lineHeight: 1.02, margin: "24px auto 0", fontWeight: 400, letterSpacing: "-0.02em" }}>
          Quatre temps <span className="serif-italic" style={{ color: "var(--accent)" }}>pour une bascule</span>.
        </h2>
        <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--ink-soft)", margin: "28px auto 0", maxWidth: 600 }}>
          Chaque pivot suit la même partition : diagnostiquer ce qui mérite d'être préservé, dessiner l'architecture du nouveau modèle, livrer un premier agent en conditions réelles, puis ouvrir la collection au marché.
        </p>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1px", background: "var(--line)", border: "1px solid var(--line)" }}>
        {FEATURES.map((f, i) => {
        const Illu = Illustrations[f.key];
        return (
          <article key={f.n} style={{ background: "var(--cream)", padding: 48, display: "flex", flexDirection: "column" }}>
              {/* meta row : number + meta on a single line */}
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", paddingBottom: 20, borderBottom: "1px solid var(--line-soft)", marginBottom: 28 }}>
                <span className="mono" style={{ fontSize: 11, color: "var(--accent)", letterSpacing: "0.22em" }}>{f.n}</span>
                <span className="eyebrow" style={{ fontSize: 10, whiteSpace: "nowrap" }}>{f.meta}</span>
              </div>

              <div style={{ display: "grid", gridTemplateColumns: "200px 1fr", gap: 36, alignItems: "center" }}>
                <div style={{ width: 200, height: 200, display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <Illu size={200} />
                </div>
                <div>
                  <h3 className="serif" style={{ fontSize: 32, fontWeight: 400, margin: "0 0 6px", letterSpacing: "-0.01em" }}>{f.title}</h3>
                  <p className="serif-italic" style={{ fontSize: 18, color: "var(--accent)", margin: "0 0 16px" }}>{f.italic}</p>
                  <p style={{ fontSize: 14, lineHeight: 1.65, color: "var(--ink-soft)", margin: 0 }}>{f.body}</p>
                </div>
              </div>
            </article>);

      })}
      </div>
    </div>
  </section>;


const V1Testimonials = () =>
<section className="section marble" id="cas" style={{ padding: "140px 0 120px" }}>
    <div className="marble-veins"></div>
    <div className="container" style={{ position: "relative", zIndex: 2 }}>
      <div style={{ textAlign: "center", marginBottom: 88 }}>
        <div className="eyebrow"><span className="dot"></span>Voix de l'atelier · §3</div>
        <h2 className="serif" style={{ fontSize: 76, lineHeight: 1.02, margin: "24px auto 0", fontWeight: 400, maxWidth: 800, letterSpacing: "-0.02em" }}>
          Ils ont fait <span className="serif-italic" style={{ color: "var(--accent)" }}>la bascule</span>.
        </h2>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 32 }}>
        {TESTIMONIALS.map((t) =>
      <figure key={t.name} className="card-marble" style={{ margin: 0, padding: 36, display: "flex", flexDirection: "column", justifyContent: "space-between", minHeight: 360 }}>
            <div>
              <span className="serif" style={{ fontSize: 64, lineHeight: 0.7, color: "var(--accent)", display: "block", marginBottom: 16 }}>“</span>
              <blockquote className="serif" style={{ fontSize: 22, lineHeight: 1.4, margin: 0, fontWeight: 400, fontStyle: "italic", color: "var(--ink)" }}>
                {t.quote}
              </blockquote>
            </div>
            <figcaption style={{ marginTop: 32, paddingTop: 20, borderTop: "1px solid var(--line)" }}>
              <div className="serif" style={{ fontSize: 18, color: "var(--ink)" }}>{t.name}</div>
              <div className="eyebrow" style={{ marginTop: 6 }}>{t.role}</div>
              <div className="eyebrow" style={{ marginTop: 4, color: "var(--ink-mute)", letterSpacing: "0.3em" }}>{t.place}</div>
            </figcaption>
          </figure>
      )}
      </div>
    </div>
  </section>;


const V1FAQ = () =>
<section className="section" style={{ padding: "140px 0 120px", background: "var(--cream)" }}>
    <div className="container">
      <div style={{ textAlign: "center", marginBottom: 64, maxWidth: 760, marginInline: "auto" }}>
        <div className="eyebrow"><span className="dot"></span>Questions · §4</div>
        <h2 className="serif" style={{ fontSize: 72, lineHeight: 1.02, margin: "24px auto 0", fontWeight: 400, letterSpacing: "-0.02em" }}>
          Ce qu'il faut <span className="serif-italic" style={{ color: "var(--accent)" }}>savoir</span>.
        </h2>
        <p style={{ fontSize: 15, lineHeight: 1.65, color: "var(--ink-soft)", margin: "24px auto 0", maxWidth: 520 }}>
          Sinon, écrivez à <a className="ulink" href="mailto:atelier@kalvi.studio">atelier@kalvi.studio</a>. Nous répondons à toutes les questions sincères en moins de 48 heures.
        </p>
      </div>
      <div style={{ maxWidth: 880, margin: "0 auto" }}>
        {FAQ.map((item, i) =>
      <details key={item.q} className="faq-item" {...i === 0 ? { open: true } : {}}>
            <summary>
              <span className="q">{item.q}</span>
              <span className="plus"></span>
            </summary>
            <div className="a">{item.a}</div>
          </details>
      )}
      </div>
    </div>
  </section>;


const V1CTA = () => {
  const scrollToForm = (e) => {
    e.preventDefault();
    const el = document.getElementById("form");
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };
  return (
    <section className="section" id="contact" style={{ padding: "120px 64px", background: "var(--ink)", color: "var(--cream)", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", top: -100, right: -100, width: 400, height: 400, borderRadius: "50%", background: "var(--accent)", opacity: 0.25, filter: "blur(80px)" }}></div>
      <div className="container" style={{ position: "relative", textAlign: "center" }}>
        <div className="eyebrow" style={{ color: "rgba(250,246,239,0.6)" }}><span className="dot"></span>Prochaine cohorte · automne 2026</div>
        <h2 className="serif" style={{ fontSize: 96, lineHeight: 1, margin: "32px auto 0", fontWeight: 400, maxWidth: 900, letterSpacing: "-0.02em" }}>
          Six places <span className="serif-italic" style={{ color: "var(--accent-2)" }}>par saison</span>.<br />Pas une de plus.
        </h2>
        <p style={{ fontSize: 17, lineHeight: 1.6, color: "rgba(250,246,239,0.7)", maxWidth: 540, margin: "32px auto 0" }}>
          Le diagnostic préliminaire est offert. Trente minutes pour comprendre si votre maison est prête à basculer.
        </p>
        <div style={{ marginTop: 44, display: "flex", justifyContent: "center", gap: 14 }}>
          <a className="btn btn--accent" href="#form" onClick={scrollToForm}>Réserver le diagnostic <span className="arrow">↑</span></a>
          <a className="btn btn--ghost" style={{ borderColor: "rgba(250,246,239,0.3)", color: "var(--cream)" }}>Recevoir le rapport 2026</a>
        </div>
      </div>
    </section>);

};

const Variation1 = () =>
<div style={{ background: "var(--bg)", color: "var(--ink)", overflow: "hidden" }}>
    <V1Hero />
    <V1Form />
    <Footer />
  </div>;


window.Variation1 = Variation1;