// DownloadPage — sign-up card + system requirements.

function DownloadPage() {
  const { colors, SectionLabel, PrimaryButton, TealLink, appUrls } = window;

  return (
    <div data-screen-label="Download">
      <section style={{ padding: "160px 0 40px" }}>
        <div className="max-w-[1240px] mx-auto px-6 md:px-10 text-center">
          <SectionLabel className="mb-5">Download</SectionLabel>
          <h1
            className="mx-auto"
            style={{
              fontSize: "clamp(40px,5.4vw,72px)",
              fontWeight: 500,
              letterSpacing: "-0.04em",
              lineHeight: 1.02,
              color: colors.body,
              maxWidth: 920
            }}>

            Download Sfuma for Windows.
          </h1>
          <p className="mt-7 mx-auto text-[18px]" style={{ color: colors.muted, lineHeight: 1.6, maxWidth: 640 }}>Sfuma runs natively on Windows 10 and 11 (64-bit).

          </p>
        </div>
      </section>

      {/* Sign up → dashboard download card */}
      <section style={{ padding: "40px 0 80px" }}>
        <div className="max-w-[640px] mx-auto px-6">
          <div
            className="p-8 md:p-10"
            style={{
              background: "#fff",
              border: `2px solid ${colors.primary}`,
              borderRadius: 10,
              boxShadow: "0 12px 40px rgba(15,110,86,0.08)"
            }}>

            <h3
              style={{
                fontSize: 26,
                fontWeight: 500,
                letterSpacing: "-0.02em",
                lineHeight: 1.1,
                color: colors.body
              }}>

              Sign up, then download from your dashboard.
            </h3>
            <p className="mt-3 text-[14.5px]" style={{ color: colors.muted, lineHeight: 1.6 }}>
              Create your account at app.sfuma.in, pick a plan, and the Windows installer is waiting on your dashboard's Downloads page.
            </p>

            <div className="mt-8 flex flex-col sm:flex-row gap-5 sm:items-center">
              <PrimaryButton as="a" href={appUrls.signup} target="_blank" rel="noopener">
                Create your account
              </PrimaryButton>
              <TealLink href={appUrls.login} target="_blank" rel="noopener">
                Already subscribed? Sign in
              </TealLink>
            </div>

            <p className="mt-5 text-[13px]" style={{ color: colors.muted, lineHeight: 1.6 }}>
              New to API keys? Get our free step-by-step{" "}
              <TealLink href={appUrls.guide} target="_blank" rel="noopener">
                setup guide (PDF)
              </TealLink>
              .
            </p>
          </div>
        </div>
      </section>

      {/* System requirements */}
      <section style={{ padding: "60px 0 140px" }}>
        <div className="max-w-[820px] mx-auto px-6 md:px-10" style={{ borderTop: `0.6px solid ${colors.hairline}`, paddingTop: 64 }}>
          <SectionLabel className="mb-6">System requirements</SectionLabel>
          <ul className="flex flex-col gap-3">
            {[
            "Windows 10 or Windows 11, 64-bit",
            "SketchUp 2021+ or 3ds Max 2024+ (Rhino support coming soon)",
            "8 GB RAM recommended, 4 GB minimum",
            "Internet connection (Sfuma calls AI provider APIs directly from your machine)",
            "An API key from at least one of: OpenAI, Google Gemini, Black Forest Labs, fal.ai, Volcengine"].
            map((x, i) =>
            <li key={i} className="flex items-start gap-3 text-[14.5px]" style={{ color: colors.body }}>
                <span style={{ color: colors.muted, fontVariantNumeric: "tabular-nums", minWidth: 24 }}>{String(i + 1).padStart(2, "0")}</span>
                <span style={{ color: colors.body, lineHeight: 1.55 }}>{x}</span>
              </li>
            )}
          </ul>
        </div>
      </section>
    </div>);

}

window.DownloadPage = DownloadPage;