// ============================================================
// Launcher — "Choose a flow" demo entry screen
// Lives over the Maverick chrome on first load.
// ============================================================

const Launcher = ({ onPick, partnerName }) => {
  const cards = [
    {
      id: "warm",
      eyebrow: "Warm flow",
      title: "Pre-qualified offer waiting",
      desc: `Acme Coffee has a soft offer surfaced based on ${partnerName} processing data. They enter Capital and see "you're approved for up to $75,000."`,
      steps: "Offer → Amount → Plaid → Info → Review → Decision → Agreement → Funded → Dashboard",
      cta: "Run warm flow",
      accent: "var(--funding-pool)",
      icon: "sparkle"
    },
    {
      id: "cold",
      eyebrow: "Cold flow",
      title: "Apply from scratch",
      desc: "A merchant with no pre-qual lands in Capital, learns about Flex Line, and applies.",
      steps: "Marketing → Info → Review → Plaid → Decision → Agreement → Funded → Dashboard",
      cta: "Run cold flow",
      accent: "var(--growth-galaxy)",
      icon: "compass"
    },
    {
      id: "dashboard",
      eyebrow: "Returning customer",
      title: "Active Flex Line dashboard",
      desc: "Jump straight to the post-funding dashboard. The ongoing value story — weekly payments, payment calendar, multiple draws on one line.",
      steps: "Summary · Active draws · Calendar · History · Cash draw · PayNow",
      cta: "Open dashboard",
      accent: "var(--trust-tech)",
      icon: "layout-grid"
    }
  ];

  return (
    <div style={{
      position: "fixed", inset: 0, zIndex: 80,
      background: "radial-gradient(1200px 600px at 30% 0%, rgba(0,64,186,0.10), transparent 60%), radial-gradient(900px 500px at 80% 100%, rgba(4,196,158,0.08), transparent 60%), var(--trust-tech)",
      display: "flex", alignItems: "center", justifyContent: "center",
      padding: "40px 32px",
      overflow: "auto"
    }}>
      {/* Decorative rings, soft */}
      <div style={{ position: "absolute", right: -80, top: -80, opacity: 0.55 }}>
        <Rings size={400} palette="light" />
      </div>
      <div style={{ position: "absolute", left: -100, bottom: -100, opacity: 0.35 }}>
        <Rings size={500} palette="light" />
      </div>

      <div style={{ width: "100%", maxWidth: 1080, position: "relative", zIndex: 1 }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 32 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 11.5, fontWeight: 600, color: "rgba(255,255,255,0.6)", letterSpacing: "0.10em", textTransform: "uppercase" }}>
            <span style={{ width: 8, height: 8, borderRadius: 2, background: "var(--funding-pool)" }} />
            Embedded demo · {partnerName} Capital, powered by Revenued
          </div>
          <RevenuedLogo height={18} white />
        </div>

        <div style={{ marginBottom: 36, maxWidth: 720 }}>
          <h1 style={{
            fontFamily: "var(--font-primary)",
            fontSize: 52, fontWeight: 700, letterSpacing: "-0.025em",
            lineHeight: 1.05, color: "#fff", margin: "0 0 16px"
          }}>
            A click-through of the embedded Flex Line — pick where to start.
          </h1>
          <p style={{ fontSize: 16, lineHeight: 1.5, color: "rgba(255,255,255,0.7)", margin: 0 }}>
            This prototype lives inside a {partnerName}-style merchant dashboard. The Capital section is the embedded product — same building, different room.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
          {cards.map((c, i) => (
            <button
              key={c.id}
              onClick={() => onPick(c.id)}
              style={{
                textAlign: "left",
                background: "rgba(255,255,255,0.04)",
                border: "1px solid rgba(255,255,255,0.12)",
                borderRadius: 16,
                padding: 24,
                color: "#fff",
                cursor: "pointer",
                font: "inherit",
                transition: "all 200ms cubic-bezier(0.2,0,0,1)",
                display: "flex", flexDirection: "column", gap: 14,
                position: "relative",
                overflow: "hidden"
              }}
              onMouseEnter={e => {
                e.currentTarget.style.background = "rgba(255,255,255,0.07)";
                e.currentTarget.style.transform = "translateY(-2px)";
                e.currentTarget.style.borderColor = "rgba(255,255,255,0.20)";
              }}
              onMouseLeave={e => {
                e.currentTarget.style.background = "rgba(255,255,255,0.04)";
                e.currentTarget.style.transform = "translateY(0)";
                e.currentTarget.style.borderColor = "rgba(255,255,255,0.12)";
              }}
            >
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <div style={{
                  width: 38, height: 38, borderRadius: 10,
                  background: c.accent,
                  color: c.id === "warm" ? "var(--trust-tech)" : "#fff",
                  display: "grid", placeItems: "center"
                }}>
                  <Icon name={c.icon} size={20} />
                </div>
                <div style={{
                  fontSize: 10.5, fontWeight: 700,
                  letterSpacing: "0.12em", textTransform: "uppercase",
                  color: c.accent
                }}>{c.eyebrow}</div>
              </div>

              <div>
                <div style={{ fontSize: 19, fontWeight: 700, letterSpacing: "-0.01em", marginBottom: 8 }}>{c.title}</div>
                <div style={{ fontSize: 13.5, lineHeight: 1.5, color: "rgba(255,255,255,0.7)" }}>{c.desc}</div>
              </div>

              <div style={{
                marginTop: "auto",
                paddingTop: 14,
                borderTop: "1px solid rgba(255,255,255,0.08)",
                fontSize: 10.5, lineHeight: 1.5,
                color: "rgba(255,255,255,0.45)",
                fontFamily: "var(--font-mono)",
                letterSpacing: "-0.01em"
              }}>{c.steps}</div>

              <div style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 13, fontWeight: 600, color: c.accent }}>
                {c.cta} <Icon name="arrow-right" size={14} />
              </div>
            </button>
          ))}
        </div>

        <div style={{
          marginTop: 36,
          padding: "14px 18px",
          background: "rgba(255,255,255,0.04)",
          border: "1px solid rgba(255,255,255,0.08)",
          borderRadius: 10,
          display: "flex", alignItems: "center", gap: 12,
          fontSize: 12, color: "rgba(255,255,255,0.6)"
        }}>
          <Icon name="info" size={14} color="rgba(255,255,255,0.5)" />
          <span>You can switch flows mid-demo using the controls in the bottom-left corner. Press <b style={{ color: "#fff", fontWeight: 600 }}>Esc</b> or click the Capital nav item to return here.</span>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Launcher });