// early-access.jsx - Community download + segmentation form
// Preserves Google Forms integration. Adds segment-aware success messages
// so each buyer type (internal team / MSSP / practitioner / exploring) gets
// a different next step.

const EA_ROLES = [
  "Founder / CEO / CTO",
  "CISO / vCISO",
  "Security Engineer",
  "SOC Analyst",
  "SOC Manager / Lead",
  "MSSP / MDR Provider",
  "IT Admin with Security Duties",
  "Student / Researcher",
  "Other",
];

const EA_WAZUH = [
  "Yes, in production",
  "Yes, in a lab / test environment",
  "Planning to deploy Wazuh",
  "No, I use a different SIEM",
  "No SIEM yet",
];

// The segmentation question — drives success-page routing
const EA_INTEREST = [
  "My own internal team — we run our security in-house",
  "Our clients — we're an MSP / MSSP / consultancy",
  "Evaluating for a specific project or audit",
  "Just exploring — learning what's possible",
];

const EA_CAPS = [
  { t: "AI Alert Triage",
    d: "Every alert analyzed in context — asset, identity, threat intel, behavioral baselines. Structured verdicts at 92%+ confidence, mapped to MITRE." },
  { t: "Closed-Loop Detection",
    d: "Feedback engine tracks FP patterns, proposes Wazuh rule XML changes, auto-tunes confidence thresholds. Detection quality compounds over time." },
  { t: "Natural Language Investigation",
    d: "Ask in plain English, get answers synthesized from your SIEM data. No query language required. No context switch." },
  { t: "Autonomous Threat Hunting",
    d: "Hypothesis-driven hunts based on MITRE coverage gaps. Runs every 6 hours, builds queries, surfaces findings for review. Enterprise tier." },
  { t: "Incident Case Management",
    d: "Alerts auto-grouped into incidents by 4-rule priority engine. Timeline, MITRE badges, assignment, Slack/email notifications." },
  { t: "Active Response",
    d: "9 response actions with verification. Integrated CVE remediation — find vulns, generate fix commands, execute remotely, verify. Enterprise tier." },
];

function EarlyAccessPage({ setPage }) {
  const [submitted, setSubmitted] = React.useState(false);
  const [interest, setInterest] = React.useState("");

  const handleSubmit = (e) => {
    // Google Forms posts via hidden iframe; show success after short delay
    setTimeout(() => setSubmitted(true), 600);
  };

  // Route the success message based on segment
  const getSegment = () => {
    if (interest.includes("internal team")) return "internal";
    if (interest.includes("clients")) return "mssp";
    if (interest.includes("specific project")) return "project";
    if (interest.includes("exploring")) return "exploring";
    return "unknown";
  };

  return (
    <div className="page">
      {/* Hero + Form */}
      <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>COMMUNITY FREE · SELF-HOSTED · UNLIMITED AGENTS</Label>
            </div>

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

            <p style={{ fontSize: 17, color: "var(--fg-mute)", margin: 0, lineHeight: 1.65, maxWidth: 480 }}>
              Download Community for free and self-host on your Wazuh. Book a Noise Teardown for $297 if you want expert eyes first. Talk to us if you're reselling. Three paths, no pitch.
            </p>

            {/* Buyer-centric stats */}
            <div style={{
              display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20,
              paddingTop: 28, borderTop: "1px solid var(--line-soft)",
            }}>
              {[
                ["30 min",    "a day on the platform"],
                ["< 2%",      "FP rate by week 6"],
                ["7 days",    "to first real value"],
                ["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 */}
          <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" }}>
                REQUEST ACCESS
              </Mono>
              <span style={{ flex: 1 }} />
              <Dot /> <Mono style={{ fontSize: 11, color: "var(--accent)" }}>OPEN</Mono>
            </div>

            {submitted ? (
              <EASuccess segment={getSegment()} name={""} setPage={setPage} />
            ) : (
              <form
                action="https://docs.google.com/forms/d/e/1FAIpQLSd0DSkcfdtbO0Qa-O-ghcQAYGiXo0ghutWPXVGtoCUMFNY5cQ/formResponse"
                method="POST"
                target="ea_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 }}>
                  Three honest questions. We reply within 24 hours with the right next step — Community download link, Noise Teardown booking, or partnership call.
                </p>

                <EAField label="FULL NAME" name="entry.1239392469" placeholder="Jane Smith" required />
                <EAField label="WORK EMAIL" name="entry.358627560" placeholder="jane@company.com" type="email" required />
                <EAField label="LINKEDIN PROFILE URL" name="entry.2051727320" placeholder="https://linkedin.com/in/yourname" type="url" />

                <EASelect label="ROLE" name="entry.1976736783" options={EA_ROLES} required />
                <EASelect label="DO YOU CURRENTLY RUN WAZUH?" name="entry.502610843" options={EA_WAZUH} required />
                <EASelect
                  label="ARE YOU EVALUATING THIS FOR —"
                  name="entry.462764161"
                  options={EA_INTEREST}
                  required
                  onInterestChange={setInterest}
                />

                <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                  <Label>OPTIONAL · BIGGEST ALERT / SOC CHALLENGE RIGHT NOW</Label>
                  <textarea name="entry.1666131068"
                    placeholder="e.g. Too many false positives, no time to tune rules, alert fatigue, compliance audit looming..."
                    rows={3}
                    style={{
                      background: "var(--bg)", border: "1px solid var(--line)",
                      color: "var(--fg)", padding: 14,
                      fontFamily: "var(--sans)", fontSize: 14, lineHeight: 1.55, resize: "vertical",
                    }}
                  />
                </div>

                <button type="submit" className="btn btn-primary" style={{ justifyContent: "center", padding: "16px" }}>
                  Request access →
                </button>
                <Mono style={{ fontSize: 11, color: "var(--fg-dim)", textAlign: "center" }}>
                  No marketing emails. No nurture sequence. One reply from Prathamesh.
                </Mono>
              </form>
            )}
          </div>
        </div>
      </section>

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

      {/* Three paths */}
      <section style={{ padding: "60px 0" }}>
        <div className="container" style={{ display: "flex", flexDirection: "column", gap: 40 }}>
          <Divider label="THREE WAYS TO START" />
          <SectionHead
            title="Not everyone starts the same way."
            sub="Download it. Let us look at your setup first. Resell it under your brand. Pick what fits."
          />
          <ThreePaths setPage={setPage} />
        </div>
      </section>

      {/* Capabilities */}
      <section style={{ padding: "80px 0" }}>
        <div className="container">
          <SectionHead
            kicker="PLATFORM CAPABILITIES"
            title="What's running behind the scenes."
            sub="Six capabilities, one platform, self-hosted. Community gives you the first three. Team adds closed-loop detection and NL investigation. Enterprise adds the rest."
            align="center"
          />
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20,
            marginTop: 56,
          }}>
            {EA_CAPS.map((c, i) => (
              <div key={i} style={{
                border: "1px solid var(--line)",
                padding: 28,
                display: "flex", flexDirection: "column", gap: 14,
              }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <Diamond />
                  <Mono style={{ fontSize: 10, color: "var(--fg-dim)", letterSpacing: "0.14em" }}>
                    CAPABILITY · {String(i + 1).padStart(2, "0")}
                  </Mono>
                </div>
                <h3 className="serif" style={{ fontSize: 22, margin: 0, letterSpacing: "-0.01em", lineHeight: 1.15 }}>
                  {c.t}
                </h3>
                <p style={{ fontSize: 13.5, color: "var(--fg-mute)", margin: 0, lineHeight: 1.65 }}>
                  {c.d}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Technical note — deploy (de-emphasized) */}
      <section style={{ padding: "60px 0", borderTop: "1px solid var(--line-soft)" }}>
        <div className="container" style={{ maxWidth: 980, margin: "0 auto" }}>
          <div style={{
            display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 48, alignItems: "center",
          }}>
            <div>
              <Label>FOR THE ENGINEER READING THIS</Label>
              <h3 className="serif" style={{ fontSize: 32, margin: "16px 0 14px", lineHeight: 1.1, letterSpacing: "-0.015em" }}>
                Deploy in three commands.
              </h3>
              <p style={{ color: "var(--fg-mute)", fontSize: 14.5, margin: 0, lineHeight: 1.65 }}>
                Community ships as a Docker package. Runs on any Linux box with Docker. Point it at your Wazuh instance and you're live. Code protected, config fully editable.
              </p>
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 20 }}>
                <Tag color="var(--line)">SELF-HOSTED</Tag>
                <Tag color="var(--line)">WAZUH-NATIVE</Tag>
                <Tag color="var(--line)">LINUX + DOCKER</Tag>
              </div>
            </div>
            <div style={{
              background: "var(--bg-1)", border: "1px solid var(--line)",
              padding: "24px 28px", fontFamily: "var(--mono)", fontSize: 13,
              lineHeight: 2, color: "var(--fg-mute)", overflowX: "auto",
            }}>
              <span style={{ color: "var(--fg-dim)" }}># clone and configure</span><br/>
              <span style={{ color: "var(--accent-2)" }}>git clone</span> {"<repo>"} && <span style={{ color: "var(--accent-2)" }}>cd</span> ai-soc-platform<br/>
              <span style={{ color: "var(--accent-2)" }}>cp</span> .env.template .env && <span style={{ color: "var(--accent-2)" }}>nano</span> .env<br/><br/>
              <span style={{ color: "var(--fg-dim)" }}># launch</span><br/>
              <span style={{ color: "var(--accent-2)" }}>docker compose up -d</span><br/><br/>
              <span style={{ color: "var(--fg-dim)" }}># dashboard at https://localhost:8443</span>
            </div>
          </div>
        </div>
      </section>

      {/* Bottom CTA - dual path */}
      <section style={{ padding: "80px 0", borderTop: "1px solid var(--line-soft)", textAlign: "center" }}>
        <div className="container" style={{ maxWidth: 720, margin: "0 auto" }}>
          <Label>READY WHEN YOU ARE</Label>
          <h2 className="serif" style={{
            fontSize: "clamp(30px, 3.4vw, 48px)", margin: "18px 0 14px",
            fontStyle: "italic", lineHeight: 1.1, letterSpacing: "-0.015em",
          }}>
            Start with the form above.<br/>
            Or pick a different path.
          </h2>
          <p style={{ fontSize: 15, color: "var(--fg-mute)", marginTop: 0, marginBottom: 32, lineHeight: 1.65 }}>
            Community is free forever. Noise Teardown is $297 with a written output in 24 hours. Partnerships start with a conversation.
          </p>
          <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
            <button className="btn" onClick={() => setPage("pricing")}>See all pricing →</button>
            <button className="btn" onClick={() => setPage("platform")}>Platform deep-dive →</button>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ---------- Success screen — segment-aware routing ---------- */
function EASuccess({ segment, setPage }) {
  const messages = {
    internal: {
      kicker: "INTERNAL TEAM · RECEIVED",
      headline: "You'll get a Community download link within 24 hours.",
      body: "Your role is exactly what Community was built for. You'll get the Docker package + install guide from prathamesh@securesleuths.in. If you'd like expert eyes on your Wazuh first, book a Noise Teardown — $297, 60 minutes, written one-pager in 24h.",
      cta: "Book Noise Teardown →",
      ctaTarget: "contact",
    },
    mssp: {
      kicker: "MSSP · PARTNERSHIP INTRO",
      headline: "Different conversation. Let's talk partnership.",
      body: "MSSPs get a separate track — revenue share, multi-tenant licensing, white-label options. You'll get a partnership call invite, not a product pitch. Direct reply from Prathamesh within 24 hours.",
      cta: "See partner program →",
      ctaTarget: "partners",
    },
    project: {
      kicker: "SPECIFIC PROJECT · RECEIVED",
      headline: "Project scope conversation coming your way.",
      body: "For audit-driven or project-scoped evaluations, we typically recommend a Noise Teardown first to map what you have against what you need. Prathamesh will reach out with a scoping call invite within 24 hours.",
      cta: "See pricing tiers →",
      ctaTarget: "pricing",
    },
    exploring: {
      kicker: "EXPLORING · RECEIVED",
      headline: "No pressure. Here's what to read.",
      body: "You'll get the architecture guide + Wazuh noise audit checklist from prathamesh@securesleuths.in. Feel free to download Community whenever you're ready — free, no time limit. If questions come up, just reply.",
      cta: "See the platform →",
      ctaTarget: "platform",
    },
    unknown: {
      kicker: "REQUEST RECEIVED",
      headline: "Reply from Prathamesh within 24 hours.",
      body: "We'll send the right next step based on what you shared. Community download, Noise Teardown booking, or partnership call — whichever fits.",
      cta: "See pricing →",
      ctaTarget: "pricing",
    },
  };

  const m = messages[segment] || messages.unknown;

  return (
    <div style={{
      padding: 40,
      display: "flex", flexDirection: "column", gap: 20,
      minHeight: 420, justifyContent: "center",
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <Mono style={{ fontSize: 13, color: "var(--accent-2)" }}>✓</Mono>
        <Label style={{ color: "var(--accent-2)" }}>{m.kicker}</Label>
      </div>
      <h3 className="serif" style={{ fontSize: 28, margin: 0, lineHeight: 1.2, letterSpacing: "-0.015em", fontStyle: "italic" }}>
        {m.headline}
      </h3>
      <p style={{ margin: 0, color: "var(--fg-mute)", fontSize: 14.5, lineHeight: 1.7 }}>
        {m.body}
      </p>
      <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginTop: 8 }}>
        <button className="btn btn-primary" onClick={() => setPage(m.ctaTarget)}>
          {m.cta}
        </button>
        <button className="btn" onClick={() => setPage("home")}>
          Back to home
        </button>
      </div>
      <Mono style={{ fontSize: 11, color: "var(--fg-dim)", marginTop: 16 }}>
        reply will come from prathamesh@securesleuths.in
      </Mono>
    </div>
  );
}

/* ---------- Three paths block ---------- */
function ThreePaths({ setPage }) {
  const paths = [
    {
      tag: "THE FREE PATH",
      title: "Download Community",
      price: "Free · self-hosted",
      description: "Run the core platform on your Wazuh. AI triage, enrichment, MITRE heatmap, 7 TI feeds, knowledge base. 5 users, no agent limits.",
      cta: "Fill the form →",
      target: null, // scrolls up to form
    },
    {
      tag: "THE FASTEST PATH",
      title: "Noise Teardown",
      price: "$297 · 60 min live",
      description: "Live review of your Wazuh rules with Prathamesh. Top 10 noise sources, MITRE gaps, three fixes you can apply same-day. Written one-pager in 24h.",
      cta: "Book a Teardown →",
      target: "contact",
    },
    {
      tag: "THE PARTNER PATH",
      title: "White-label / MSSP",
      price: "Contact us",
      description: "Resell the platform to your clients with multi-tenancy, custom branding, revenue share. Different conversation, different economics.",
      cta: "See partner program →",
      target: "partners",
    },
  ];
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", border: "1px solid var(--line)" }}>
      {paths.map((p, i) => (
        <div key={p.title} style={{
          padding: 32,
          borderRight: i < 2 ? "1px solid var(--line-soft)" : "none",
          display: "flex", flexDirection: "column", gap: 16,
          minHeight: 320,
        }}>
          <Label>{p.tag}</Label>
          <h3 className="serif" style={{ fontSize: 30, margin: 0, lineHeight: 1.1, letterSpacing: "-0.015em" }}>
            {p.title}
          </h3>
          <Mono style={{ fontSize: 12, color: "var(--accent)" }}>{p.price}</Mono>
          <p style={{ margin: 0, color: "var(--fg-mute)", fontSize: 14, lineHeight: 1.6, flex: 1 }}>
            {p.description}
          </p>
          <button
            className="btn"
            onClick={() => {
              if (p.target) setPage(p.target);
              else window.scrollTo({ top: 0, behavior: "smooth" });
            }}
            style={{ alignSelf: "flex-start" }}
          >
            {p.cta}
          </button>
        </div>
      ))}
    </div>
  );
}

/* ---------- Form field primitives ---------- */
const EAField = ({ 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 EASelect = ({ label, name, options, required, onInterestChange }) => (
  <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
    <Label>{label}{required && " *"}</Label>
    <select
      name={name}
      required={required}
      defaultValue=""
      onChange={onInterestChange ? (e) => onInterestChange(e.target.value) : undefined}
      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, { EarlyAccessPage });