// download-community.jsx - Community download with embedded Google Form
// Flow: form → submit via hidden iframe → show download page
// Source field is hidden, auto-filled from the button that brought the user here.

const DL_ROLES = [
  "SOC Analyst/Engineer",
  "Security Lead/Manager",
  "CISO/Security Director",
  "CTO/Founder",
  "IT Manager/Generalist",
  "Student/Learning",
  "Other",
];

const DL_TEAM_SIZE = [
  "Just me (personal lab)",
  "2-10",
  "11-50",
  "51-250",
  "250+",
];

const DL_MOTIVATION = [
  "Drowning in Alerts/Noise",
  "Looking for Wazuh starting point",
  "Evaluating SOC Tools for my team",
  "Learning/building a home lab",
  "Something else",
];

function DownloadCommunityPage({ setPage }) {
  const FILE_URL = "/assets/downloads/dhruva-4.8.5.1-source-community.tar.gz";
  const [submitted, setSubmitted] = React.useState(false);
  const [source] = React.useState(() => window.__dlSource || "direct");

  const handleSubmit = () => {
    setTimeout(() => setSubmitted(true), 600);
  };

  return (
    <div>
      <section style={{ padding: "80px 0 60px" }}>
        <div className="container" style={{
          display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "flex-start",
        }}>
          {/* Left: copy */}
          <div style={{ position: "sticky", top: 100, display: "flex", flexDirection: "column", gap: 28 }}>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
              <Dot color="var(--accent-2)" size={7} />
              <Label>DHRUVA COMMUNITY · v4.8.5.1 · FREE</Label>
            </div>

            <h1 className="serif" style={{
              fontSize: "clamp(44px, 5.2vw, 76px)", margin: 0,
              lineHeight: 0.98, letterSpacing: "-0.025em",
            }}>
              Download<br/>
              <span style={{ color: "var(--fg-mute)", fontStyle: "italic" }}>DHRUVA Community.</span>
            </h1>

            <p style={{ fontSize: 17, color: "var(--fg-mute)", margin: 0, lineHeight: 1.65, maxWidth: 480 }}>
              Self-host the core AI SOC platform on your Wazuh. Pre-tuned rules, dashboards,
              and the noise-reduction engine we use on paid engagements. Free forever.
            </p>

            <div style={{
              display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20,
              paddingTop: 28, borderTop: "1px solid var(--line-soft)",
            }}>
              {[
                ["2.6 MB", "tar.gz package"],
                ["< 5 min", "to first triage"],
                ["0 limits", "agents or alerts"],
              ].map(([v, l]) => (
                <div key={l}>
                  <div className="serif" style={{ fontSize: 28, color: "var(--accent)", lineHeight: 1 }}>{v}</div>
                  <Mono style={{ fontSize: 10, color: "var(--fg-dim)", marginTop: 4, display: "block", lineHeight: 1.4 }}>{l}</Mono>
                </div>
              ))}
            </div>
          </div>

          {/* Right: form or download */}
          <div style={{ border: "1px solid var(--line)", background: "var(--bg-1)" }}>
            <div style={{
              padding: "14px 20px", borderBottom: "1px solid var(--line)", background: "var(--bg-2)",
              display: "flex", alignItems: "center", gap: 14,
            }}>
              <Mono style={{ fontSize: 11, color: "var(--fg-mute)", letterSpacing: "0.08em" }}>
                {submitted ? "DOWNLOAD READY" : "GET COMMUNITY"}
              </Mono>
              <span style={{ flex: 1 }} />
              <Dot color={submitted ? "var(--accent)" : undefined} />
              <Mono style={{ fontSize: 11, color: submitted ? "var(--accent)" : "var(--fg-dim)" }}>
                {submitted ? "READY" : "OPEN"}
              </Mono>
            </div>

            {submitted ? (
              <DownloadReady fileUrl={FILE_URL} setPage={setPage} />
            ) : (
              <form
                action="https://docs.google.com/forms/d/e/1FAIpQLSedpypfyo9X8YTQk-vmrR4sj5lvRy0mZPdknE-CIDetTuSoDA/formResponse"
                method="POST"
                target="dl_hidden_iframe"
                onSubmit={handleSubmit}
                style={{ padding: 32, display: "flex", flexDirection: "column", gap: 20 }}
              >
                <p style={{ fontSize: 14, color: "var(--fg-mute)", margin: 0, lineHeight: 1.6 }}>
                  Quick form — we'll give you the download link immediately after.
                  No marketing emails. One reply from Prathamesh within 24 hours.
                </p>

                <DLField label="FIRST NAME" name="entry.514190894" placeholder="Jane" required />
                <DLField label="WORK EMAIL" name="entry.940781893" placeholder="jane@company.com" type="email" required />
                <DLField label="COMPANY" name="entry.1095524650" placeholder="Acme Corp" required />

                <DLSelect label="YOUR ROLE" name="entry.561226002" options={DL_ROLES} required />
                <DLSelect label="TEAM SIZE" name="entry.445759625" options={DL_TEAM_SIZE} required />
                <DLSelect label="WHAT PULLED YOU TOWARDS DHRUVA" name="entry.1786765338" options={DL_MOTIVATION} required />

                {/* Hidden source field — tracks which CTA brought the user here */}
                <input type="hidden" name="entry.826035701" value={source} />

                <button type="submit" className="btn btn-primary" style={{ justifyContent: "center", padding: "16px" }}>
                  Get download link →
                </button>
                <Mono style={{ fontSize: 11, color: "var(--fg-dim)", textAlign: "center" }}>
                  No marketing emails. No nurture sequence. Just the package.
                </Mono>
              </form>
            )}
          </div>
        </div>
      </section>

      {/* Hidden iframe for Google Forms */}
      <iframe name="dl_hidden_iframe" style={{ display: "none" }} title="Hidden form target" />

      {/* Noise Teardown upsell — visible always */}
      <section style={{ padding: "40px 0 80px" }}>
        <div className="container" style={{ maxWidth: 720 }}>
          <div style={{
            border: "1px solid var(--accent)",
            background: "var(--bg-1)",
            padding: 40,
            display: "grid", gridTemplateColumns: "1fr auto", gap: 32, alignItems: "center",
          }}>
            <div>
              <Label>NEXT STEP</Label>
              <h3 className="serif" style={{ fontSize: 28, margin: "12px 0 10px", lineHeight: 1.15, letterSpacing: "-0.01em" }}>
                DHRUVA running but still<br/>
                <span style={{ color: "var(--fg-mute)", fontStyle: "italic" }}>drowning in alerts?</span>
              </h3>
              <p style={{ color: "var(--fg-mute)", fontSize: 14.5, margin: 0, lineHeight: 1.6 }}>
                Book a Noise Teardown. I review your actual alert volume,
                identify the top 5 noise sources, and hand you a tuning playbook.
                48hr turnaround. $297.
              </p>
            </div>
            <button className="btn" onClick={() => setPage("contact")} style={{ whiteSpace: "nowrap" }}>
              Book a Noise Teardown →
            </button>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ---------- Download ready view (post-submit) ---------- */
function DownloadReady({ fileUrl, setPage }) {
  return (
    <div style={{ padding: 32, display: "flex", flexDirection: "column", gap: 24 }}>
      <div style={{ textAlign: "center", padding: "20px 0" }}>
        <Tag color="var(--accent)">DHRUVA COMMUNITY · v4.8.5.1</Tag>
        <h2 className="serif" style={{
          fontSize: 32, margin: "16px 0 10px", lineHeight: 1.1, letterSpacing: "-0.015em",
        }}>
          Your build is ready.
        </h2>
        <p style={{ color: "var(--fg-mute)", fontSize: 14.5, margin: "0 0 20px", lineHeight: 1.6 }}>
          Click below to download. Check your email for a copy of the link.
        </p>
        <a
          href={fileUrl}
          download
          className="btn btn-primary"
          style={{ fontSize: 16, padding: "16px 32px" }}
        >
          Download DHRUVA Community v4.8.5.1 →
        </a>
        <Mono style={{ fontSize: 11, color: "var(--fg-dim)", display: "block", marginTop: 12 }}>
          tar.gz · 2.6 MB · self-hosted · no license key required
        </Mono>
        <div style={{ marginTop: 16, padding: "12px 14px", border: "1px solid var(--line-soft)", textAlign: "left" }}>
          <Mono style={{ fontSize: 10, color: "var(--fg-dim)", letterSpacing: "0.12em", display: "block", marginBottom: 6 }}>
            VERIFY INTEGRITY · SHA-256
          </Mono>
          <Mono style={{ fontSize: 11, color: "var(--fg-mute)", display: "block", wordBreak: "break-all", lineHeight: 1.5 }}>
            5ce9d1f86c8ec0eea5b93bc9a1ae166c3fe3088a06135a1bb5369ad85aee3e33
          </Mono>
          <Mono style={{ fontSize: 11, color: "var(--fg-dim)", display: "block", marginTop: 8 }}>
            shasum -a 256 dhruva-4.8.5.1-source-community.tar.gz
          </Mono>
          <Mono style={{ fontSize: 10.5, color: "var(--fg-dim)", display: "block", marginTop: 8 }}>
            Checksums: <a href="/assets/downloads/SHA256SUMS" style={{ color: "var(--accent)" }}>SHA256SUMS</a>
          </Mono>
        </div>
      </div>

      <div style={{ borderTop: "1px solid var(--line-soft)", paddingTop: 24 }}>
        <Mono style={{ fontSize: 11, color: "var(--fg-dim)", letterSpacing: "0.12em", marginBottom: 16, display: "block" }}>
          QUICK START
        </Mono>
        {[
          ["01", "Unzip the archive", "tar -xzf dhruva-4.8.5.1-source-community.tar.gz"],
          ["02", "Start the stack", "docker compose up -d"],
          ["03", "Open the dashboard", "https://localhost:8443"],
          ["04", "Sign in", "Default creds and full install guide are in the README"],
        ].map(([n, title, detail]) => (
          <div key={n} style={{
            display: "grid", gridTemplateColumns: "40px 1fr",
            padding: "12px 0",
            borderBottom: n !== "04" ? "1px solid var(--line-soft)" : "none",
          }}>
            <Mono style={{ fontSize: 12, color: "var(--accent)" }}>{n}</Mono>
            <div>
              <span style={{ fontSize: 14, color: "var(--fg)" }}>{title}</span>
              <Mono style={{ fontSize: 12, color: "var(--fg-dim)", display: "block", marginTop: 4 }}>{detail}</Mono>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------- Form field primitives ---------- */
const DLField = ({ label, placeholder, type = "text", name, required }) => (
  <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
    <Label>{label}{required && " *"}</Label>
    <input type={type} name={name} placeholder={placeholder} required={required}
      style={{
        background: "var(--bg)", border: "1px solid var(--line)",
        color: "var(--fg)", padding: "14px 16px",
        fontFamily: "var(--sans)", fontSize: 14,
      }} />
  </div>
);

const DLSelect = ({ label, name, options, required }) => (
  <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
    <Label>{label}{required && " *"}</Label>
    <select
      name={name}
      required={required}
      defaultValue=""
      style={{
        background: "var(--bg)", border: "1px solid var(--line)",
        color: "var(--fg)", padding: "14px 16px",
        fontFamily: "var(--sans)", fontSize: 14,
      }}>
      <option value="" disabled>Select one</option>
      {options.map((o, i) => <option key={i} value={o}>{o}</option>)}
    </select>
  </div>
);

Object.assign(window, { DownloadCommunityPage });