const { useState, useEffect, useMemo, useRef } = React;

/* Waitlist — locked upgrade gate to the full ContactIQ platform */

function WaitlistPage({ go, user, target }) {
  const [submitted, setSubmitted] = useState(false);
  const [email, setEmail] = useState(user?.email || "");
  const [company, setCompany] = useState(user?.company !== "—" ? user?.company || "" : "");
  const [useCase, setUseCase] = useState("broker");
  const [size, setSize] = useState("2-10");

  // Headline target (the thing they clicked to get here)
  const targetCopy = {
    full_report: { label: "Full Report",      desc: "The 7-tab deep entity record" },
    map:         { label: "Main Map System",  desc: "The full 5M-pin building map" },
    upgrade:     { label: "Full Platform",    desc: "Everything beyond the extension" },
  }[target || "upgrade"];

  return (
    <div className="wl-page">
      {/* Top */}
      <header className="wl-top">
        <Logo size="md"/>
        <button className="btn ghost sm" onClick={() => go("dashboard")}>
          ← Back to dashboard
        </button>
      </header>

      <div className="wl-body">
        {!submitted ? (
          <>
            <div className="wl-hero">
              <span className="pill accent" style={{ fontSize: 10, padding: "3px 10px" }}>
                <I.Shield style={{ width: 11, height: 11 }}/> EARLY ACCESS · INVITE-ONLY
              </span>
              <h1 className="wl-h1">
                The full ContactIQ platform<br/>
                <span className="dim">is rolling out in waves.</span>
              </h1>
              <p className="wl-lede">
                You're on the extension. Next up is the full platform — the searchable building map, the
                7-tab entity record, the source-cited intel page, financials, news. We're letting people
                in a few hundred at a time so the data team can vet each cohort.
                Reserve your spot below.
              </p>
            </div>

            <div className="wl-grid">
              <WlProduct
                active={target === "full_report"}
                icon={<I.Box style={{ width: 18, height: 18 }}/>}
                label="Full Entity Report"
                lines={[
                  "7-tab record: Overview · People · Location · Intelligence · Financials · Sources · News",
                  "Per-field source provenance — every value cites the originating filing",
                  "Linked filings, classifications, footprint maps, regulatory shadow",
                ]}
              />
              <WlProduct
                active={target === "map"}
                icon={<I.Pin style={{ width: 18, height: 18 }}/>}
                label="Main Map System"
                lines={[
                  "~5M building-anchored organizations across the US",
                  "Filter by source, industry, license status, state — at map zoom",
                  "Click any pin → cluster drawer with grouped tenant rows",
                ]}
              />
            </div>

            <div className="wl-form">
              <div className="wl-form-head">
                <span className="eyebrow" style={{ color: "var(--accent)" }}>RESERVE YOUR SPOT</span>
                <h2 style={{ font: "600 20px var(--font-sans)", letterSpacing: "-0.015em" }}>
                  Tell us a bit about you.
                </h2>
                <p className="dim" style={{ fontSize: 12 }}>
                  We use this to prioritize the waitlist by use case — brokers + tenant-rep agents go first,
                  vendors next, researchers after.
                </p>
              </div>

              <div className="wl-form-grid">
                <div className="field">
                  <label className="label">Work email</label>
                  <input className="input" value={email} onChange={e => setEmail(e.target.value)}/>
                </div>
                <div className="field">
                  <label className="label">Company</label>
                  <input className="input" value={company} onChange={e => setCompany(e.target.value)} placeholder="Candor Brokers"/>
                </div>
                <div className="field" style={{ gridColumn: "span 2" }}>
                  <label className="label">What are you using ContactIQ for?</label>
                  <div className="wl-radio-group">
                    {[
                      { k: "broker",    l: "Brokerage / tenant rep" },
                      { k: "vendor",    l: "Vendor prospecting" },
                      { k: "research",  l: "Regulatory research" },
                      { k: "investor",  l: "Investment / diligence" },
                      { k: "other",     l: "Something else" },
                    ].map(o => (
                      <button
                        key={o.k}
                        className={"wl-radio " + (useCase === o.k ? "on" : "")}
                        onClick={() => setUseCase(o.k)}
                      >
                        <span className="wl-radio-dot"/>
                        {o.l}
                      </button>
                    ))}
                  </div>
                </div>
                <div className="field" style={{ gridColumn: "span 2" }}>
                  <label className="label">Team size</label>
                  <div className="wl-radio-group">
                    {[
                      { k: "1",      l: "Just me" },
                      { k: "2-10",   l: "2–10" },
                      { k: "11-50",  l: "11–50" },
                      { k: "51+",    l: "51+" },
                    ].map(o => (
                      <button
                        key={o.k}
                        className={"wl-radio " + (size === o.k ? "on" : "")}
                        onClick={() => setSize(o.k)}
                      >
                        <span className="wl-radio-dot"/>
                        {o.l}
                      </button>
                    ))}
                  </div>
                </div>
              </div>

              <button className="btn primary lg full" onClick={() => setSubmitted(true)}>
                Reserve my spot <I.ChevR/>
              </button>
              <div className="dim" style={{ fontSize: 11, textAlign: "center" }}>
                Your extension keeps working as normal. We'll email you when the platform opens for your cohort.
              </div>
            </div>
          </>
        ) : (
          <WlSuccess email={email} go={go}/>
        )}
      </div>
    </div>
  );
}

function WlProduct({ active, icon, label, lines }) {
  return (
    <div className={"wl-product " + (active ? "active" : "")}>
      <div className="wl-product-head">
        <div className="wl-product-icon">{icon}</div>
        <div className="col" style={{ gap: 2, flex: 1 }}>
          <span style={{ fontWeight: 600, fontSize: 14 }}>{label}</span>
          <span className="dim" style={{ fontSize: 11 }}>Coming Q3 2026</span>
        </div>
        <span className="wl-lock">
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
            <rect x="2.5" y="5.5" width="7" height="5" rx="0.5"/>
            <path d="M4 5.5 V3.5 A2 2 0 0 1 8 3.5 V5.5"/>
          </svg>
        </span>
      </div>
      <ul className="wl-product-lines">
        {lines.map((l, i) => (
          <li key={i}>
            <span className="wl-bullet"/>
            <span>{l}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

function WlSuccess({ email, go }) {
  const position = 247;
  return (
    <div className="wl-success">
      <div className="wl-success-check">
        <I.Check style={{ width: 36, height: 36 }}/>
      </div>
      <h2 className="wl-h1" style={{ fontSize: 32, marginTop: 0 }}>You're on the list.</h2>
      <p className="wl-lede" style={{ maxWidth: 480, textAlign: "center" }}>
        We've sent a confirmation to <span className="mono" style={{ color: "var(--fg-1)", fontWeight: 600 }}>{email}</span>.
        We'll reach out when the platform opens for your cohort — likely within 2–4 weeks.
      </p>

      <div className="wl-position">
        <div className="col" style={{ gap: 2, alignItems: "center" }}>
          <span className="eyebrow" style={{ color: "var(--fg-3)" }}>YOUR POSITION</span>
          <span className="mono" style={{ font: "700 48px var(--font-mono)", color: "var(--accent)", letterSpacing: "-0.03em", lineHeight: 1 }}>
            #{position}
          </span>
          <span className="dim" style={{ fontSize: 11 }}>of 1,420 on the waitlist</span>
        </div>
        <div className="wl-position-bar">
          <div style={{ width: ((1420 - position) / 1420 * 100) + "%" }}/>
        </div>
        <div className="dim" style={{ fontSize: 11, textAlign: "center" }}>
          Want to move up? Refer a colleague — each verified signup bumps you ~30 spots.
        </div>
      </div>

      <div className="row tight">
        <button className="btn primary" onClick={() => go("dashboard")}>← Back to my dashboard</button>
        <button className="btn">
          <I.Mail/> Refer a colleague
        </button>
      </div>
    </div>
  );
}

window.WaitlistPage = WaitlistPage;