Étape 1 / 4

Raconte-nous ton app en une phrase.

setVal(e.target.value)}
        onKeyDown={onKey}
        rows={3}
      />
      <div className="describe-actions">
        <button className="btn-primary" disabled={!valid} onClick={submit}>
          Continuer <Icon.Arrow />
        </button>
      </div>
    </div>
  );
}

// ============ HERO ============
function Hero({ onCTA, onSubmitDesc, price, variant }) {
  return (
    <section className="hero">
      <div className="wrap">
        <div className="hero-grid">
          <div>
            <h1 className="h1">{variant.h1}</h1>
            <p className="hero-sub">{variant.sub(price)}</p>
            <div className="hero-cta-row">
              <button className="btn-primary big" onClick={onCTA}>
                Démarrer l'étape d'après <Icon.Arrow />
              </button>
              <a className="btn-secondary" href="#how">
                Comprendre comment ça marche
              </a>
            </div>
          </div>
          <div style={{ position: 'relative' }}>
            <DescribeCard onSubmit={onSubmitDesc} />
          </div>
        </div>
        <div className="reassurance-inner">
          <div className="hero-rating-top">
            <Stars n={5} size={14} />
            <span className="hero-rating-text"><strong>4,9 / 5</strong> · Basé sur 247 avis vérifiés</span>
          </div>
          <div className="hero-trust hero-trust-top">
            <div className="item"><Icon.Check /><span>Sans abonnement</span></div>
            <div className="item"><Icon.Check /><span>Première analyse gratuite</span></div>
            <div className="item"><Icon.Check /><span>Paiement unique</span></div>
            <div className="item"><Icon.Flag /><span><strong>Accompagnement français</strong></span></div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ SECTION CTA (reusable, sits at the end of each section) ============
function SectionCTA({ onCTA, label = "Démarrer l'étape d'après", note = "Première analyse gratuite. Pas de carte requise." }) {
  if (!onCTA) return null;
  return (
    <div className="section-cta">
      <button className="btn-primary big" onClick={onCTA}>
        {label} <Icon.Arrow />
      </button>
      <span className="section-cta-note">{note}</span>
    </div>
  );
}

// ============ "Ce qui se passe souvent après la mise en ligne" ============
function AfterPublish({ onCTA }) {
  const cards = [
    {
      n: "01",
      title: "L'app est publiée",
      body: "Mais personne ne sait encore qu'elle existe.",
    },
    {
      n: "02",
      title: "Le créateur attend",
      body: "Il pense que les utilisateurs vont venir naturellement.",
    },
    {
      n: "03",
      title: "Rien ne se passe",
      body: "Alors il doute de son idée, de son design, ou de son app elle-même.",
    },
    {
      n: "04",
      title: "L'étape oubliée",
      body: "Avant d'améliorer encore l'app, il faut la montrer aux bonnes personnes.",
    }
  ];
  return (
    <section className="section alt" id="problem">
      <div className="wrap">
        <div className="section-head">
          <h2 className="h2">Ce qui se passe souvent <span className="accent">après la mise en ligne.</span></h2>
          <p className="lede">Beaucoup de créateurs pensent que publier leur app suffit à attirer des utilisateurs. En réalité, c'est souvent là que le vrai travail commence.</p>
        </div>
        <div className="problem-grid">
          {cards.map((c) => (
            <div className="problem-card" key={c.n}>
              <div className="problem-num">{c.n}</div>
              <h3 className="problem-title">{c.title}</h3>
              <p className="problem-body">{c.body}</p>
            </div>
          ))}
        </div>
        <SectionCTA onCTA={onCTA} />
      </div>
    </section>
  );
}

// ============ HOW IT WORKS ============
function HowItWorks({ onCTA }) {
  const cards = [
    {
      n: "01",
      title: "Tu nous expliques ton app simplement",
      body: "En quelques questions, on comprend ce que fait ton app, à qui elle s'adresse, et pourquoi quelqu'un pourrait l'essayer.",
      meta: "5 minutes · sans jargon"
    },
    {
      n: "02",
      title: "On identifie les premières bonnes personnes",
      body: "On détermine où ton app peut être présentée intelligemment : communautés, groupes, audiences, forums, niches adaptées.",
      meta: "Analyse humaine, basée en France"
    },
    {
      n: "03",
      title: "On lance une première action concrète",
      body: "On prépare et diffuse une première présentation pour provoquer les premiers signaux : clics, retours, conversations, inscriptions.",
      meta: "Premiers signaux sous 7 jours"
    }
  ];
  return (
    <section className="section" id="how">
      <div className="wrap">
        <div className="section-head">
          <h2 className="h2">Une première mise en visibilité, <span className="accent">en trois étapes.</span></h2>
          <p className="lede">Rien de magique. Un accompagnement clair, conçu pour les créateurs qui viennent de publier leur app et ne savent pas par où commencer.</p>
        </div>
        <div className="how-grid">
          {cards.map((c) => (
            <div className="how-card" key={c.n}>
              <div className="how-num">
                <span className="num-circle">{c.n}</span>
                Étape {c.n}
              </div>
              <h3 className="how-title">{c.title}</h3>
              <p className="how-body">{c.body}</p>
              <div className="how-meta">
                <Icon.Check /> {c.meta}
              </div>
            </div>
          ))}
        </div>
        <SectionCTA onCTA={onCTA} />
      </div>
    </section>
  );
}

// ============ COMPARISON TABLE ============
function Compare({ onCTA }) {
  const rows = [
    ["Savoir qui cibler", "yes", "no", "no", "yes-partiel"],
    ["Savoir quoi dire", "yes", "no", "no", "yes-partiel"],
    ["Trouver où présenter l'app", "yes", "yes-paye", "no", "yes-paye"],
    ["Obtenir les premiers retours", "yes", "no", "no", "no"],
    ["Budget nécessaire", "47 €", "500 € - 2 000 € / mois", "0 € · ton temps", "3 000 € - 8 000 €"],
    ["Complexité", "Simple", "Élevée", "Très élevée", "Élevée"]
  ];
  const Cell = ({ val }) => {
    if (val === "yes") return <span className="v-yes">Inclus</span>;
    if (val === "yes-partiel") return <span className="v-partial">En partie</span>;
    if (val === "yes-paye") return <span className="v-partial">Si tu paies</span>;
    if (val === "no") return <span className="v-no">À faire seul</span>;
    return <span style={{ fontWeight: 500, color: 'var(--fg)' }}>{val}</span>;
  };
  return (
    <section className="section alt" id="compare">
      <div className="wrap">
        <div className="section-head">
          <h2 className="h2">Pourquoi c'est souvent difficile <span className="accent">seul.</span></h2>
          <p className="lede">Faire découvrir une app demande du temps, des compétences précises, ou un budget. Après Lancement propose une alternative simple, conçue pour les créateurs qui viennent de publier.</p>
        </div>
        <div className="compare">
          <div className="compare-row head">
            <div></div>
            <div>Faire seul</div>
            <div>Publicité payante</div>
            <div>Agence marketing</div>
            <div className="me"><span className="me-dot" />Après Lancement</div>
          </div>
          {rows.map((row, i) => (
            <div className="compare-row" key={i}>
              <div className="lbl">{row[0]}</div>
              <div><Cell val={row[3]} /></div>
              <div><Cell val={row[2]} /></div>
              <div><Cell val={row[4]} /></div>
              <div className="me"><Cell val={row[1]} /></div>
            </div>
          ))}
        </div>
        <SectionCTA onCTA={onCTA} />
      </div>
    </section>
  );
}

// ============ TESTIMONIALS ============
function Testimonials({ onCTA }) {
  const items = [
    {
      stars: 5,
      quote: "Je pensais que mon app ne plaisait pas. En fait, je ne l'avais juste montrée à personne de vraiment concerné. Ça change tout d'avoir quelqu'un qui t'aide à voir ça.",
      name: "Léa Marchand", role: "Cofondatrice · app méditation",
      initials: "LM", color: "#1A56DB"
    },
    {
      stars: 5,
      quote: "Ça m'a aidé à comprendre à qui parler et comment présenter mon app simplement. J'avais survalorisé les détails techniques, alors que ce qui comptait pour les gens était ailleurs.",
      name: "Thomas Reynaud", role: "Solo founder · app fitness",
      initials: "TR", color: "#0A2540"
    },
    {
      stars: 5,
      quote: "J'ai eu mes premiers retours concrets. Même sans gros volume, ça m'a permis de savoir quoi améliorer et de ne plus avancer à l'aveugle.",
      name: "Sophie Aubert", role: "Indé · outil productivité",
      initials: "SA", color: "#2563EB"
    }
  ];
  return (
    <section className="section" id="testimonials">
      <div className="wrap">
        <div className="section-head">
          <h2 className="h2">Ce que racontent les créateurs <span className="accent">qu'on a accompagnés.</span></h2>
          <p className="lede">Retours bruts. Pas de chiffres spectaculaires, pas de promesses. Juste des étapes franchies par des gens qui étaient bloqués au même endroit que beaucoup.</p>
        </div>
        <div className="testimonials">
          {items.map((it, i) => (
            <div className="test-card" key={i}>
              <Stars n={it.stars} />
              <p className="test-quote">« {it.quote} »</p>
              <div className="test-foot">
                <div className="test-avatar" style={{ background: it.color }}>{it.initials}</div>
                <div>
                  <div className="test-name">{it.name}</div>
                  <div className="test-role">{it.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
        <SectionCTA onCTA={onCTA} />
      </div>
    </section>
  );
}

function Stars({ n = 5, size = 14 }) {
  return <span className="stars">{Array.from({ length: n }).map((_, i) => <Icon.Star key={i} s={size} />)}</span>;
}

// ============ FOUNDER ============
function Founder({ onCTA }) {
  return (
    <section className="section alt">
      <div className="wrap">
        <div className="founder">
          <div className="founder-card">
            <div className="top">
              <div className="label">Fondateur · 2026</div>
              <div className="label">Paris</div>
            </div>
            <div className="signature">
              <div className="sig-avatar">LR</div>
              <div>
                <div className="sig-name">Lucas Renard</div>
                <div className="sig-role">Fondateur</div>
              </div>
            </div>
          </div>
          <div className="founder-content">
            <h3>Créer une app n'a jamais été aussi simple. La faire découvrir reste l'étape la plus oubliée.</h3>
            <p>
              Avec l'IA, il est possible de construire en quelques jours ce qui demandait autrefois des mois. Mais une chose n'a pas changé : une app publiée ne trouve pas ses utilisateurs toute seule.
            </p>
            <p>
              Beaucoup de créateurs découvrent cette réalité après coup. Ils ont travaillé sur leur idée, mis leur app en ligne, puis attendent - sans savoir quoi faire ensuite.
            </p>
            <p>
              Après Lancement existe pour cette étape précise : aider les créateurs à faire découvrir leur app aux premières bonnes personnes, récolter des retours concrets, et avancer avec plus de clarté.
            </p>
            <div className="name-row">
              <div className="sig-avatar" style={{ width: 36, height: 36, background: 'var(--primary)', color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: '50%', fontWeight: 700, fontSize: 14 }}>LR</div>
              <div>
                <strong>Lucas Renard</strong> - Fondateur · <a href="#">LinkedIn</a>
              </div>
            </div>
          </div>
        </div>
        <SectionCTA onCTA={onCTA} />
      </div>
    </section>
  );
}

// ============ PRESS / CERTIFICATIONS ============
function Press() {
  return (
    <section className="press">
      <div className="wrap">
        <div className="press-grid" style={{ gridTemplateColumns: '1fr' }}>
          <div className="press-block-r" style={{ alignItems: 'center', textAlign: 'center' }}>
            <div className="press-label">Sécurité & confiance</div>
            <div className="certs" style={{ justifyContent: 'center' }}>
              <div className="cert-badge"><Icon.Shield /><span><strong>RGPD</strong> conforme</span></div>
              <div className="cert-badge"><Icon.Lock /><span>SSL <strong>256-bit</strong></span></div>
              <div className="cert-badge"><Icon.Check /><span>Paiement <strong>Stripe</strong></span></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ OFFER / PRICING ============
function Offer({ onCTA, price }) {
  const features = [
    "Analyse rapide de ton app et de sa proposition de valeur",
    "Identification des premières audiences à tester",
    "Reformulation simple de ton message de présentation",
    "Préparation d'une présentation prête à être diffusée",
    "Première action concrète de mise en visibilité",
    "Retour clair sur les premiers signaux obtenus",
    "Recommandations simples pour la suite"
  ];
  return (
    <section className="section" id="pricing">
      <div className="wrap">
        <div className="section-head center">
          <h2 className="h2 center" style={{ textAlign: 'center' }}>Un paiement unique. <span className="accent">Sans abonnement.</span></h2>
          <p className="lede" style={{ margin: '0 auto', textAlign: 'center' }}>Pas de contrat, pas d'engagement, pas de petits caractères. Tu paies une fois, on s'occupe de l'étape d'après.</p>
        </div>
        <div className="offer-wrap">
          <div className="offer-card">
            <span className="offer-flag">Service</span>
            <h3>Première mise en visibilité</h3>
            <p className="offer-sub">Une première action concrète pour faire découvrir ton app après sa mise en ligne.</p>
            <div className="offer-price">
              <span className="num">{price}</span>
              <span className="once">paiement unique · TTC</span>
            </div>
            <div className="offer-fact">Conçu pour les créateurs qui viennent de publier leur app et ne savent pas par où commencer.</div>
            <ul className="offer-list">
              {features.map((f, i) => <li key={i}>{f}</li>)}
            </ul>
            <div className="offer-cta-row">
              <button className="btn-primary big" onClick={onCTA} style={{ justifyContent: 'center' }}>
                Démarrer l'étape d'après <Icon.Arrow />
              </button>
              <div className="meta">
                <span className="item"><Icon.Check /> Première analyse gratuite</span>
                <span className="item"><Icon.Lock /> Paiement Stripe</span>
                <span className="item"><Icon.Shield /> Garantie de sérieux</span>
              </div>
            </div>
          </div>
          <div className="offer-side">
            <div className="guarantee-block">
              <div className="guarantee-seal">7<span className="small">jours</span></div>
              <div>
                <h4>Garantie de sérieux</h4>
                <p>Si on ne te livre pas une première analyse claire et une action concrète pour faire découvrir ton app sous 7 jours, tu es remboursé intégralement.</p>
              </div>
            </div>
            <div className="offer-info-grid">
              <div className="offer-info">
                <div className="offer-info-lbl">Pour qui</div>
                <div className="offer-info-val">Créateurs d'apps qui viennent de publier - solo, en équipe, indé ou pro.</div>
              </div>
              <div className="offer-info">
                <div className="offer-info-lbl">Pour quoi</div>
                <div className="offer-info-val">Sortir du silence, obtenir les premiers signaux, savoir quoi faire ensuite.</div>
              </div>
              <div className="offer-info">
                <div className="offer-info-lbl">Pas pour</div>
                <div className="offer-info-val">Les apps déjà installées avec un volume d'utilisateurs significatif.</div>
              </div>
              <div className="offer-info">
                <div className="offer-info-lbl">Délai</div>
                <div className="offer-info-val">Première analyse sous 48h. Action concrète lancée sous 7 jours.</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ FAQ ============
function FAQ({ onCTA }) {
  const items = [
    { q: "Concrètement, qu'est-ce qu'on fait pour moi ?", a: "On regarde ton app, on identifie les premières bonnes personnes à toucher, on reformule ta présentation pour qu'elle soit claire, et on lance une première action de mise en visibilité dans la ou les communautés adaptées. Ce n'est pas de la publicité payante, c'est un accompagnement humain pour franchir l'étape d'après." },
    { q: "Vous promettez des utilisateurs ?", a: "Non. Promettre des utilisateurs pour 47€ ne serait pas sérieux. Ce qu'on s'engage à livrer, c'est une analyse claire, une action concrète, et un retour honnête sur les premiers signaux obtenus. Les premiers retours, retours d'usage ou inscriptions qui peuvent suivre dépendent de beaucoup de facteurs propres à ton app." },
    { q: "Comment fonctionne la garantie ?", a: "Si on ne te livre pas, dans les 7 jours suivant ton brief, une première analyse claire de ton app et au moins une action concrète de mise en visibilité, tu es remboursé intégralement. Tu nous écris, on rembourse sous 48h, sans justification." },
    { q: "Faut-il savoir coder ou faire du marketing ?", a: "Non. Aucune compétence marketing requise. C'est exactement ce qu'on prend en charge à ta place. Tu décris ton app simplement, en quelques mots. On s'occupe du reste." },
    { q: "Mes données sont-elles protégées ?", a: "Oui. Données hébergées en France, chiffrées en transit (SSL 256-bit) et au repos, traitées conformément au RGPD. Tu peux demander la suppression de tes données à tout moment." },
    { q: "Ça marche pour quel type d'application ?", a: "La plupart : mobile, web, SaaS, marketplace, outil grand public. Si on estime que la tienne ne s'y prête pas (par exemple : déjà installée à grande échelle, ou marché trop spécifique pour qu'on puisse t'apporter de la valeur), on te le dit avant tout paiement." },
    { q: "Combien de temps ça prend de mon côté ?", a: "5 minutes pour remplir le brief initial. Un éventuel échange par email pour préciser des choses si besoin. L'essentiel du travail se fait sans toi." },
    { q: "Et après les 7 premiers jours ?", a: "Rien. Pas d'abonnement, pas de prélèvement, pas de relance. Tu repars avec une analyse, une première action lancée, et des recommandations claires pour la suite. Si tu veux relancer plus tard, tu repaies une seule fois." },
    { q: "Qui est derrière Après Lancement ?", a: "Une équipe basée en France. Fondateur : Lucas Renard. Toute personne avec qui tu échanges est en France et fait partie de l'équipe." },
    { q: "Puis-je obtenir une facture pour ma société ?", a: "Oui, automatiquement. Une facture conforme est envoyée par email immédiatement après le paiement." }
  ];
  const [open, setOpen] = useStateS(0);
  const left = items.filter((_, i) => i % 2 === 0);
  const right = items.filter((_, i) => i % 2 === 1);
  const render = (arr, offset) => arr.map((it, idx) => {
    const i = idx * 2 + offset;
    return (
      <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
        <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
          <span>{it.q}</span>
          <span className="faq-icon">+</span>
        </button>
        <div className="faq-a">{it.a}</div>
      </div>
    );
  });
  return (
    <section className="section alt" id="faq">
      <div className="wrap">
        <div className="section-head">
          <h2 className="h2">Les questions <span className="accent">qu'on nous pose</span> le plus.</h2>
          <p className="lede">Toujours un doute ? Écris-nous à <a href="mailto:bonjour@apreslancement.fr" style={{ color: 'var(--primary)' }}>bonjour@apreslancement.fr</a>, réponse sous 2 heures ouvrées.</p>
        </div>
        <div className="faq-grid">
          <div>{render(left, 0)}</div>
          <div>{render(right, 1)}</div>
        </div>
        <SectionCTA onCTA={onCTA} />
      </div>
    </section>
  );
}

// ============ FINAL CTA ============
function FinalCTA({ onCTA, price }) {
  return (
    <section className="final-cta" id="final">
      <div className="wrap final-cta-inner">
        <h2>Ton app est en ligne.<br />Il est temps de la faire découvrir.</h2>
        <p className="lede">Décris ton app en quelques questions. On t'aide à comprendre qui toucher, comment la présenter, et quelle première action lancer pour obtenir des retours concrets.</p>
        <button className="btn-primary big" onClick={onCTA}>
          Démarrer l'étape d'après <Icon.Arrow />
        </button>
        <div className="meta">
          <span>Paiement unique de {price}</span>
          <span>·</span>
          <span>Sans abonnement</span>
          <span>·</span>
          <span>Garantie de sérieux 7 jours</span>
          <span>·</span>
          <span>Accompagnement français</span>
        </div>
      </div>
    </section>
  );
}

// ============ FOOTER ============
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-grid">
          <div className="footer-col footer-about">
            <div className="brand" style={{ marginBottom: 16 }}>
              <img src="logo.png" alt="Après Lancement" className="brand-logo" />
              <span>Après Lancement</span>
            </div>
            <p>Service d'accompagnement français pour les créateurs d'apps qui viennent de publier et veulent faire découvrir leur app aux premières bonnes personnes.</p>
            <div className="footer-cert">
              <span className="footer-cert-tag"><Icon.Shield /> RGPD</span>
              <span className="footer-cert-tag"><Icon.Lock /> SSL 256-bit</span>
            </div>
          </div>
          <div className="footer-col">
            <h5>Service</h5>
            <a href="#problem">L'étape d'après</a>
            <a href="#how">Méthode</a>
            <a href="#compare">Comparatif</a>
            <a href="#pricing">Tarifs</a>
          </div>
          <div className="footer-col">
            <h5>Ressources</h5>
            <a href="#faq">FAQ</a>
            <a href="#testimonials">Témoignages</a>
            <a href="mailto:bonjour@apreslancement.fr">Contact</a>
          </div>
          <div className="footer-col">
            <h5>Légal</h5>
            <a href="mentions-legales.html">Mentions légales</a>
            <a href="cgv.html">CGV</a>
            <a href="confidentialite.html">Confidentialité</a>
            <a href="cookies.html">Cookies</a>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 Après Lancement · édité par RUJI SAS · SIREN 851 567 388</div>
          <div className="footer-legal">
            <a href="mentions-legales.html">Mentions légales</a>
            <a href="cgv.html">CGV</a>
            <a href="confidentialite.html">Confidentialité</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// LiveStats keeps the export name app.jsx imports, but its content is the new pedagogical section
function LiveStats({ onCTA }) {
  return <AfterPublish onCTA={onCTA} />;
}

Object.assign(window, { Ticker, Nav, Hero, LiveStats, AfterPublish, HowItWorks, Compare, Testimonials, Founder, Press, Offer, FAQ, FinalCTA, Footer, Icon });