/* ClientBase — Homepage part 2: Beta pitch, Final CTA, HomePage */

/* -------- BETA TESTERS — invitation card with benefits -------- */
const BetaPitch = ({ go }) => (
  <section style={{ padding: "32px 0 80px" }}>
    <style>{`
      @keyframes cbPulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.6; transform: scale(1.3); }
      }
    `}</style>
    <div className="container">
      <div style={{
        maxWidth: 580, margin: "0 auto",
        background: "var(--surface)",
        border: "1px solid var(--line-strong)",
        borderRadius: 24,
        boxShadow: "var(--sh-3)",
        position: "relative",
        overflow: "hidden",
      }}>
        {/* Decorative accent — top-right bloom */}
        <div aria-hidden style={{
          position: "absolute", top: -100, right: -100,
          width: 260, height: 260, borderRadius: "50%",
          background: "radial-gradient(circle, var(--accent-soft) 0%, transparent 70%)",
          pointerEvents: "none",
        }}/>
        {/* Top accent strip */}
        <div aria-hidden style={{
          height: 4,
          background: "linear-gradient(90deg, var(--accent) 0%, oklch(70% 0.18 300) 50%, var(--accent) 100%)",
        }}/>

        <div style={{ padding: "36px 32px", position: "relative" }}>
          <div style={{ textAlign: "center" }}>
            <div style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              padding: "5px 12px 5px 10px",
              background: "var(--surface)", border: "1px solid var(--accent-soft-2)",
              borderRadius: 999, fontSize: 12.5, fontWeight: 520,
              color: "var(--accent-ink)",
            }}>
              <span style={{
                width: 7, height: 7, borderRadius: 50, background: "var(--accent)",
                animation: "cbPulse 1.8s ease-in-out infinite",
              }}/>
              Bêta ouverte
            </div>
            <h2 style={{
              marginTop: 18,
              fontSize: "clamp(28px, 3.4vw, 40px)", letterSpacing: "-0.03em",
              lineHeight: 1.05,
            }}>
              On vous réserve <br/>
              <span style={{ position: "relative", display: "inline-block" }}>
                <span aria-hidden style={{
                  position: "absolute", zIndex: 0,
                  left: "-4%", right: "-4%", bottom: "0.06em",
                  height: "0.36em",
                  background: "linear-gradient(90deg, color-mix(in oklab, var(--accent) 22%, transparent) 0%, color-mix(in oklab, var(--accent) 35%, transparent) 100%)",
                  borderRadius: "0.16em",
                }}/>
                <span style={{ position: "relative", zIndex: 1 }}>une place.</span>
              </span>
            </h2>
            <p style={{
              marginTop: 14, fontSize: 15, color: "var(--ink-2)",
              lineHeight: 1.55, maxWidth: 420, margin: "14px auto 0",
            }}>
              Rejoignez les premiers utilisateurs et contribuez à créer l'outil qui va vous simplifier le quotidien.
            </p>
          </div>

          {/* Benefits checklist */}
          <ul style={{
            listStyle: "none", padding: 0, margin: "26px 0 0",
            display: "flex", flexDirection: "column", gap: 10,
          }}>
            {[
              ["euro",     "Gratuit pendant toute la bêta"],
              ["sparkle",  "Mise en place gratuite avec votre fichier clients"],
              ["chat",     "Accès direct à l'équipe pour vos retours"],
              ["shield",   "Données hébergées en France, conformes RGPD"],
            ].map(([icon, text]) => (
              <li key={text} style={{
                display: "flex", alignItems: "center", gap: 12,
                padding: "10px 14px",
                background: "var(--bg-alt)", borderRadius: 10,
                fontSize: 14, color: "var(--ink-2)",
              }}>
                <span style={{
                  width: 30, height: 30, borderRadius: 8,
                  background: "var(--surface)", color: "var(--accent-ink)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  flexShrink: 0, border: "1px solid var(--accent-soft-2)",
                }}>
                  <Icon name={icon} size={14}/>
                </span>
                <span style={{ flex: 1 }}>{text}</span>
                <Icon name="check" size={14} stroke={2.6} style={{ color: "var(--sage)", flexShrink: 0 }}/>
              </li>
            ))}
          </ul>

          {/* CTAs */}
          <div style={{ marginTop: 24, display: "flex", flexDirection: "column", gap: 8 }}>
            <button className="btn btn-accent btn-lg" onClick={() => go("signup")} style={{ width: "100%" }}>
              Créer mon compte gratuit <Icon name="arrow" size={15}/>
            </button>
            <button className="btn btn-ghost btn-lg" onClick={() => go("login")} style={{ width: "100%" }}>
              J'ai déjà un compte
            </button>
            <button className="btn btn-ghost btn-lg" onClick={() => go("contact")} style={{ width: "100%", border: "none" }}>
              J'ai une question
            </button>
          </div>

          <div style={{
            marginTop: 18, textAlign: "center",
            display: "flex", alignItems: "center", justifyContent: "center",
            gap: 6, fontSize: 12, color: "var(--ink-4)",
          }}>
            <Icon name="clock" size={11}/>
            Moins de 2 minutes. Sans carte bancaire.
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* -------- FINAL CTA -------- */
const FinalCTA = ({ go }) => (
  <section className="section">
    <div className="container">
      <div style={{
        position: "relative", overflow: "hidden",
        padding: "72px 48px",
        background: "var(--ink)",
        color: "var(--bg)",
        borderRadius: 24,
        textAlign: "center",
      }} className="final-cta">
        <div aria-hidden style={{
          position: "absolute", inset: 0,
          backgroundImage: "radial-gradient(circle at 1px 1px, rgba(255,255,255,0.08) 1px, transparent 0)",
          backgroundSize: "28px 28px",
          maskImage: "radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent 70%)",
          WebkitMaskImage: "radial-gradient(ellipse 80% 60% at 50% 0%, black, transparent 70%)",
        }}/>
        <div style={{ position: "relative" }}>
          <div style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            padding: "5px 12px 5px 8px",
            borderRadius: 999,
            background: "rgba(255,255,255,0.08)",
            color: "oklch(85% 0.15 268)",
            fontSize: 12.5, fontWeight: 500,
          }}>
            <span style={{ width: 6, height: 6, borderRadius: 50, background: "oklch(85% 0.15 268)" }}/>
            Gratuit pendant la bêta · sans carte bancaire
          </div>
          <h2 style={{
            color: "var(--bg)", marginTop: 20,
            fontSize: "clamp(32px, 4vw, 52px)", letterSpacing: "-0.03em",
          }}>
            Prêt à simplifier votre business&nbsp;?
          </h2>
          <p style={{ color: "oklch(78% 0.02 260)", marginTop: 16, fontSize: 17, maxWidth: 520, marginLeft: "auto", marginRight: "auto" }}>
            Installation en 10 minutes. Importez vos clients depuis Excel. On vous accompagne en direct si besoin.
          </p>
          <div style={{ marginTop: 32, display: "flex", gap: 10, justifyContent: "center", flexWrap: "wrap" }}>
            <button className="btn btn-lg" style={{ background: "var(--bg)", color: "var(--ink)" }} onClick={() => go("signup")}>
              Rejoindre la bêta <Icon name="arrow" size={16}/>
            </button>
            <button className="btn btn-lg btn-ghost" style={{ borderColor: "rgba(255,255,255,0.2)", color: "var(--bg)" }} onClick={() => go("contact")}>
              Parler à un humain
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const HomePage = ({ go, heroVariant }) => (
  <>
    <Hero go={go} variant={heroVariant}/>
    <div className="container" style={{ textAlign: "center" }}>
      <FlowArrow step={2} totalSteps={3}
        caption="Ensuite, estimons ce que ClientBase peut vous rapporter"/>
    </div>
    <Reveal><SavingsSimulator/></Reveal>
    <div className="container" style={{ textAlign: "center" }}>
      <FlowArrow step={3} totalSteps={3}
        caption="On y va ? La bêta est ouverte, profitez-en maintenant"/>
    </div>
    <Reveal><BetaPitch go={go}/></Reveal>
  </>
);

Object.assign(window, { BetaPitch, FinalCTA, HomePage });