/* Windows landing — Coming Soon + email waitlist.

   Same visual language as the macOS landing (gradients, surface cards,
   Pro features grid), but every CTA points at the waitlist form instead
   of a Download button. Features are marked "Coming" with a soft greyed
   badge. The email field POSTs to /api/waitlist on the CF Worker, which
   stores {email, platform, capturedAt, country} in KV so we can ping
   everyone at WinFleek launch. */

const WIN_API_BASE = "https://api.macfleek.store";

const WinHero = () => {
  const [email, setEmail]       = React.useState("");
  const [status, setStatus]     = React.useState("idle"); // idle | loading | ok | error
  const [errMsg, setErrMsg]     = React.useState("");

  const submit = async (e) => {
    e.preventDefault();
    setStatus("loading"); setErrMsg("");
    try {
      const r = await fetch(`${WIN_API_BASE}/api/waitlist`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email: email.trim().toLowerCase(), platform: "windows" }),
      });
      const data = await r.json();
      if (!r.ok || !data.ok) {
        setErrMsg(data.error === "invalid_email"
          ? "Введите корректный email"
          : "Что-то пошло не так. Попробуйте ещё раз.");
        setStatus("error");
        return;
      }
      setStatus("ok");
    } catch {
      setErrMsg("Сеть недоступна. Попробуйте через минуту.");
      setStatus("error");
    }
  };

  return (
    <section style={{ padding: "70px 40px 60px", maxWidth: 1280, margin: "0 auto" }}>
      <div style={{ textAlign: "center", marginBottom: 40 }}>
        <div style={{
          display: "inline-flex", alignItems: "center", gap: 8,
          padding: "5px 12px",
          borderRadius: 999,
          background: "color-mix(in srgb, #06b6d4 14%, transparent)",
          border: "1px solid color-mix(in srgb, #06b6d4 32%, transparent)",
          fontSize: 11.5, fontWeight: 500,
          color: "#67e8f9",
          marginBottom: 24,
        }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: "#22d3ee", boxShadow: "0 0 8px #22d3ee", animation: "pulse 2s ease-in-out infinite" }}/>
          Coming Q3 2026 · early-access waitlist open
        </div>

        <h1 style={{
          margin: 0,
          fontSize: "clamp(2.4rem, 6vw, 4.6rem)",
          fontWeight: 800,
          letterSpacing: "-0.03em",
          lineHeight: 1.05,
          maxWidth: 880, marginInline: "auto",
        }}>
          The same <span style={{
            background: "linear-gradient(180deg, #67e8f9, #0891b2)",
            WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
            backgroundClip: "text",
          }}>honest</span> cleaner.<br/>Now for Windows.
        </h1>

        <p style={{
          margin: "22px auto 0",
          maxWidth: 640,
          fontSize: 17,
          color: "var(--text-secondary)",
          lineHeight: 1.55,
        }}>
          WinFleek brings the MacFleek philosophy to Windows 10 / 11.
          Open source · zero telemetry · $29 once · no subscription.
          Drop your email — we'll ping you the moment beta opens.
        </p>

        {/* Waitlist form */}
        <form onSubmit={submit} style={{ marginTop: 36, maxWidth: 460, marginInline: "auto" }}>
          {status === "ok" ? (
            <div className="surface" style={{
              padding: 22,
              textAlign: "center",
              background: "linear-gradient(135deg, rgba(34,197,94,0.10), rgba(34,197,94,0.02))",
              border: "1px solid rgba(34,197,94,0.30)",
            }}>
              <div style={{ fontSize: 32, marginBottom: 6 }}>🎉</div>
              <div style={{ fontWeight: 700, fontSize: 16, marginBottom: 4 }}>
                You're on the list
              </div>
              <div style={{ fontSize: 13, color: "var(--text-secondary)" }}>
                We'll write to <b>{email}</b> the day WinFleek beta drops.
                Until then — no marketing emails, promise.
              </div>
            </div>
          ) : (
            <>
              <div style={{ display: "flex", gap: 8 }}>
                <input
                  type="email"
                  required
                  placeholder="you@example.com"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  disabled={status === "loading"}
                  style={{
                    flex: 1,
                    padding: "14px 16px",
                    borderRadius: 10,
                    border: "1px solid var(--hairline-strong)",
                    background: "var(--surface-1)",
                    color: "var(--text-primary)",
                    fontSize: 15,
                    fontFamily: "inherit",
                    outline: "none",
                  }}
                />
                <button
                  type="submit"
                  disabled={status === "loading" || !email}
                  className="btn btn-primary btn-xl"
                  style={{
                    padding: "0 22px",
                    background: "linear-gradient(135deg, #06b6d4, #0e7490)",
                    border: 0,
                    opacity: status === "loading" || !email ? 0.55 : 1,
                    cursor: status === "loading" ? "wait" : "pointer",
                  }}
                >
                  {status === "loading" ? "…" : "Notify me"}
                </button>
              </div>
              {errMsg && (
                <div style={{ marginTop: 10, fontSize: 12, color: "#fca5a5" }}>
                  {errMsg}
                </div>
              )}
              <div style={{ marginTop: 12, fontSize: 11.5, color: "var(--text-tertiary)" }}>
                One email when beta opens. No spam, no marketing list resale.
              </div>
            </>
          )}
        </form>
      </div>

      {/* Why now — quick context */}
      <div className="surface" style={{
        padding: 28,
        maxWidth: 760,
        marginInline: "auto",
        background: "linear-gradient(165deg, var(--surface-1) 0%, color-mix(in srgb, #06b6d4 6%, var(--surface-1)) 100%)",
      }}>
        <div className="cap" style={{ marginBottom: 10, color: "#67e8f9" }}>Why WinFleek</div>
        <p style={{ margin: 0, fontSize: 14.5, color: "var(--text-secondary)", lineHeight: 1.65 }}>
          The Windows cleaner market is a wasteland. CCleaner is malware-adjacent,
          BleachBit hasn't been redesigned in a decade, every "PC optimizer" with
          slick ads is freemium spyware. We're building the cleaner Windows
          deserves — same philosophy as MacFleek: open source, no telemetry, one
          payment forever. AI-tool cache awareness (Cursor, Claude, Ollama,
          HuggingFace), subscription detector, privacy wipe, treemap. Built right.
        </p>
      </div>
    </section>
  );
};

const WinFeaturesPreview = () => {
  const features = [
    { icon: "brain-circuit", title: "Smart Scan", desc: "200+ Windows-specific cleanup rules — temp, prefetch, Windows.old, error reports, telemetry caches.", soon: true },
    { icon: "database", title: "AI & Dev Tool Cleaner", desc: "Cursor, Claude, Ollama, HuggingFace, Copilot, Conda — all the AI/dev caches that pile up on Windows dev machines.", soon: true, flag: "★" },
    { icon: "credit-card", title: "Subscription Detector", desc: "Microsoft Store + UWP receipts + Steam library + Xbox Game Pass. Cancel before you're charged.", soon: true, flag: "★" },
    { icon: "eye", title: "Privacy Cleaner", desc: "Browsing history, Cortana queries, recent docs, Windows search history, telemetry — wiped clean.", soon: true },
    { icon: "shield-check", title: "Bloatware Remover", desc: "Pre-installed Win11 garbage — Candy Crush, weather widget, Cortana, Edge nags. Gone.", soon: true, flag: "★ Win-only" },
    { icon: "chart-treemap", title: "Disk Treemap + Diff", desc: "Squarified visualization. Compare snapshots. See exactly what grew between scans.", soon: true },
    { icon: "magnify-stacked", title: "Duplicate Finder", desc: "Three-pass detection: size → hash → bit-by-bit. Works across NTFS + ReFS volumes.", soon: true },
    { icon: "power", title: "Startup Tuner", desc: "See and disable every startup app, service, scheduled task slowing your boot. Time-to-desktop graph.", soon: true, flag: "★ Win-only" },
    { icon: "clock", title: "Scheduled Cleanup", desc: "Daily / weekly / monthly auto-scans via Task Scheduler.", soon: true },
    { icon: "tools-cross", title: "Maintenance Toolkit", desc: "DISM repair, SFC scan, network reset, font cache rebuild — without the cmd-prompt incantations.", soon: true, flag: "★ Win-only" },
    { icon: "warning", title: "Real-time Disk Alerts", desc: "Get notified BEFORE C: fills up. Configurable thresholds.", soon: true },
    { icon: "globe", title: "9 languages", desc: "Localized day one, same catalog as macOS.", soon: true },
  ];

  return (
    <section style={{ padding: "60px 40px", maxWidth: 1280, margin: "0 auto" }}>
      <div style={{ textAlign: "center", marginBottom: 36 }}>
        <div className="cap" style={{ marginBottom: 8, color: "#67e8f9" }}>What's coming</div>
        <h2 style={{ margin: 0, fontSize: "clamp(1.8rem, 4vw, 2.8rem)", fontWeight: 700, letterSpacing: "-0.02em" }}>
          Twelve features. Same DNA.
        </h2>
        <p style={{ marginTop: 12, color: "var(--text-secondary)", fontSize: 15 }}>
          Everything you love about MacFleek — adapted to Windows quirks.
          The <strong style={{ color: "#67e8f9" }}>★ Win-only</strong> tools tackle problems Macs don't have.
        </p>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 14 }}>
        {features.map((f, i) => (
          <div key={i} className="surface" style={{
            padding: 20,
            position: "relative",
            opacity: 0.86,
            transition: "opacity 0.2s",
          }}
          onMouseEnter={e => e.currentTarget.style.opacity = "1"}
          onMouseLeave={e => e.currentTarget.style.opacity = "0.86"}>
            {f.flag && (
              <div style={{ position: "absolute", top: 14, right: 14 }}>
                <span style={{
                  fontSize: 10.5, fontWeight: 700,
                  padding: "3px 8px",
                  borderRadius: 999,
                  background: f.flag.includes("Win") ? "rgba(6,182,212,0.18)" : "rgba(167,139,250,0.20)",
                  color: f.flag.includes("Win") ? "#67e8f9" : "#a78bfa",
                  letterSpacing: "0.02em",
                }}>{f.flag}</span>
              </div>
            )}
            <div style={{
              width: 40, height: 40,
              borderRadius: 10,
              background: "linear-gradient(135deg, rgba(6,182,212,0.18), rgba(8,145,178,0.06))",
              border: "1px solid rgba(6,182,212,0.22)",
              display: "grid", placeItems: "center",
              color: "#67e8f9",
              marginBottom: 12,
            }}>
              <Icon name={f.icon} size={20}/>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
              <h3 style={{ margin: 0, fontSize: 14.5, fontWeight: 600 }}>{f.title}</h3>
              {f.soon && (
                <span style={{
                  fontSize: 9, fontWeight: 600,
                  padding: "2px 6px",
                  borderRadius: 999,
                  background: "rgba(255,255,255,0.06)",
                  color: "var(--text-tertiary)",
                  textTransform: "uppercase",
                  letterSpacing: "0.06em",
                }}>SOON</span>
              )}
            </div>
            <p style={{ margin: 0, fontSize: 12.5, color: "var(--text-secondary)", lineHeight: 1.5 }}>
              {f.desc}
            </p>
          </div>
        ))}
      </div>
    </section>
  );
};

const WinFAQ = () => {
  return (
    <section style={{ padding: "60px 40px 100px", maxWidth: 820, margin: "0 auto" }}>
      <div style={{ textAlign: "center", marginBottom: 32 }}>
        <div className="cap" style={{ marginBottom: 8, color: "#67e8f9" }}>FAQ</div>
        <h2 style={{ margin: 0, fontSize: "clamp(1.8rem, 4vw, 2.6rem)", fontWeight: 700, letterSpacing: "-0.02em" }}>
          Answers, not roadmap-theater.
        </h2>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        <FAQItem defaultOpen
          q="When exactly does WinFleek launch?"
          a="Beta opens Q3 2026 (July-September). Realistically: when we have 500+ MacFleek users and verified the model works. Then we hire one C# contractor for 2 months to port the engine. We won't ship a half-baked Windows version just to claim cross-platform — that's how cleaners become malware-adjacent."
        />
        <FAQItem
          q="What stack are you building it on?"
          a="Avalonia + C# .NET 9 — native Windows feel, can also build for Linux later. We're studying hellzerg/optimizer and BleachBit's rule catalog as references. The cleanup rules will be a shared YAML repo with the macOS app — adding a new Cursor cache path benefits both platforms at once."
        />
        <FAQItem
          q="Same $29 lifetime price?"
          a="Yes. Same model: free tier (Smart Scan + uninstaller + privacy wipe) and $29 lifetime Pro (AI cleaner, subscription detector, treemap, etc.). License works on every Windows machine you personally own."
        />
        <FAQItem
          q="If I already paid for MacFleek Pro — do I get WinFleek free?"
          a="Yes. Your $29 covers both platforms. Same email, same license key — paste it into WinFleek when it launches and you're Pro on Day 1."
        />
        <FAQItem
          q="Will you collect my email aggressively now?"
          a="No. We send exactly one email — when WinFleek beta opens. After that we'll add you to product-update emails (one per release), opt-out always one click away. Zero ad-tracking, zero list resale, zero telemetry. Same philosophy as the app."
        />
      </div>
    </section>
  );
};

const LandingWindowsView = () => (
  <div style={{
    minHeight: "100%",
    background: `
      radial-gradient(50% 60% at 50% 0%, rgba(6,182,212,0.10) 0%, transparent 70%),
      radial-gradient(40% 50% at 90% 30%, rgba(8,145,178,0.06) 0%, transparent 60%),
      var(--surface-0)`,
  }}>
    <div style={{ position: "relative", zIndex: 1 }}>
      <WinHero/>
      <WinFeaturesPreview/>
      <WinFAQ/>
    </div>
  </div>
);

Object.assign(window, { LandingWindowsView });