const { useState, useEffect } = React;

const PLANS = [
  {
    id: "starter",
    name: "Starter",
    devices: "Up to 25 devices",
    price: 3,
    features: [
      "MDM management",
      "Fleet dashboard & analytics",
      "Declarative Device Management (DDM)",
      "Osquery telemetry & ad-hoc queries",
      "Community support",
    ],
    excluded: ["IdP login / Platform SSO"],
  },
  {
    id: "business",
    name: "Business",
    devices: "Up to 250 devices",
    price: 4,
    popular: true,
    features: [
      "Everything in Starter, plus:",
      "IdP login / Platform SSO",
      "Telemetry / SIEM forwarding",
      "Auto-deploy rules",
      "API access",
      "Priority email & chat support",
    ],
  },
  {
    id: "enterprise",
    name: "Enterprise",
    devices: "Unlimited devices",
    price: 5,
    features: [
      "Everything in Business",
      "Dedicated infrastructure",
      "SLA guarantee",
      "Onboarding call",
      "Custom integrations",
    ],
  },
];

const features = [
  {
    icon: "🔐",
    title: "All the MDM Essentials",
    desc: "Signed enrollment with DEP/ADE zero-touch onboarding, push .mobileconfig profiles and .pkg packages fleet-wide — Wi-Fi, VPN, certificates, passcode policies, restrictions — everything you expect from MDM, ready out of the box.",
  },
  {
    icon: "⚡",
    title: "DDM and Profile Templates",
    desc: "Use Apple Declarative Device Management together with reusable configuration profile templates. Define passcode rules, software update deadlines, restrictions, and settings once — devices enforce them locally and stay compliant without constant server check-ins.",
  },
  {
    icon: "🔑",
    title: "IdP Login / Platform SSO",
    desc: "Users log into their Mac with Okta, Azure AD, Google Workspace, or JumpCloud credentials. Automatic account creation from IdP attributes — no manual provisioning.",
    badge: "Business+",
  },
  {
    icon: "🔍",
    title: "Osquery Telemetry & Ad-Hoc Queries",
    desc: "Push SQL query packs to enrolled devices — monitor running processes, browser extensions, installed certificates, USB devices, and 200+ osquery tables. Run ad-hoc queries for instant fleet-wide answers.",
  },
  {
    icon: "📡",
    title: "Telemetry Forwarding",
    desc: "Forward osquery results to Datadog, Prometheus, Grafana, Splunk, or any custom webhook endpoint. Configurable batch intervals and API key auth — plug straight into your existing observability stack.",
    badge: "Business+",
  },
  {
    icon: "🛡️",
    title: "Security Change Alerts",
    desc: "Detect newly added local administrators and certificates in the system keychain or trust store during agent check-ins. ZenMDM records each change in the device log and emits an OTLP security event when telemetry export is configured.",
  },
  {
    icon: "🔌",
    title: "Bring Your Own Security",
    desc: "ZenMDM stays lean and integrates instead of locking you in. Forward device telemetry and audit events to your SIEM, and pair with the endpoint-security stack you already trust — CrowdStrike, Santa, ZenShield, or your own EDR agent deployed as a package.",
  },
  {
    icon: "🐧",
    title: "Linux & Android, Too",
    desc: "Not just Apple. A lightweight Go agent brings Linux endpoints under management (package + config policies, remote scripts, osquery), and Android Enterprise policies and apps are managed from the same console.",
  },
  {
    icon: "🤖",
    title: "AI Co-Pilot",
    desc: "A chat-style assistant inside the admin UI that translates plain-language intents into MDM artifacts and helps diagnose device and fleet issues.",
  },
  {
    icon: "🏗️",
    title: "GitOps: Terraform + CLI",
    desc: "Manage your entire MDM server as code — profiles, packages, device groups, DDM policies, IdP settings, osquery packs, and telemetry forwarding in version-controlled HCL, plus a fleet-as-code CLI (plan / apply / export). Review changes in PRs before they hit your fleet.",
  },
];

function MDMLanding() {
  // Platform URL for the Sign in and brand links: /site-config's app_url
  // (#842). The platform serves this page on the MDM host and routes /api/ on
  // every host, so the fetch is same-origin. Guessing from the hostname was
  // wrong under the zensys.app layout (stripping "mdm." from mdm.zensys.app
  // gives the marketing apex, not app.zensys.app). Until it loads — or if it
  // fails — links stay on this origin rather than on a guessed host. Sign-ups
  // are currently disabled in the UI: Get Started / Start free trial render as
  // disabled buttons.
  const [platform, setPlatform] = useState(window.location.origin);
  useEffect(() => {
    fetch("/api/v1/site-config")
      .then(r => { if (!r.ok) throw new Error(r.status); return r.json(); })
      .then(data => {
        // Only an absolute http(s) URL may become an href: a javascript: or
        // other value from a misconfigured server must not reach the links.
        if (data && typeof data.app_url === "string" && /^https?:\/\/[^\s]+$/.test(data.app_url)) {
          setPlatform(data.app_url.replace(/\/+$/, ""));
        }
      })
      .catch(err => console.warn("site-config fetch failed:", err));
  }, []);

  const [hoveredCard, setHoveredCard] = useState(null);

  return (
    <div style={{ fontFamily: "'DM Sans', sans-serif", color: "#0a0a0a" }}>
      {/* Nav */}
      <nav
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          padding: "20px 48px",
          position: "fixed",
          top: 0,
          left: 0,
          right: 0,
          zIndex: 100,
          background: "rgba(255,255,255,0.88)",
          backdropFilter: "blur(20px)",
          borderBottom: "1px solid rgba(0,0,0,0.06)",
        }}
      >
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <a
            href={platform}
            style={{
              fontFamily: "'DM Sans', sans-serif",
              fontWeight: 700,
              fontSize: 22,
              letterSpacing: "-0.02em",
              color: "#0a0a0a",
              textDecoration: "none",
            }}
          >
            <span style={{ color: "#22c55e" }}>zen</span>sys
          </a>
          <span
            style={{
              fontSize: 10,
              fontWeight: 700,
              background: "#22c55e",
              color: "#000",
              padding: "3px 8px",
              borderRadius: 4,
              letterSpacing: "0.04em",
            }}
          >
            MDM
          </span>
        </div>
        <div style={{ display: "flex", gap: 24, alignItems: "center" }}>
          <a href="#features" style={{ color: "#666", textDecoration: "none", fontSize: 14, fontWeight: 500 }}>Features</a>
          <a href="#pricing" style={{ color: "#666", textDecoration: "none", fontSize: 14, fontWeight: 500 }}>Pricing</a>
          <a
            href={platform + "/#/login"}
            style={{
              color: "#22c55e",
              textDecoration: "none",
              fontSize: 14,
              fontWeight: 600,
            }}
          >
            Sign in
          </a>
          <span style={{ fontSize: 12, fontWeight: 500, color: "#6e6e6e" }}>
            Signups are disabled currently
          </span>
          <button
            type="button"
            disabled
            aria-disabled="true"
            style={{
              background: "#22c55e",
              color: "#000",
              padding: "8px 20px",
              borderRadius: 8,
              textDecoration: "none",
              fontSize: 14,
              fontWeight: 600,
              fontFamily: "inherit",
              border: 0,
              opacity: 0.45,
              cursor: "not-allowed",
            }}
          >
            Get Started
          </button>
        </div>
      </nav>

      {/* Hero */}
      <section
        style={{
          minHeight: "100vh",
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
          textAlign: "center",
          padding: "120px 24px 80px",
          background: "radial-gradient(ellipse 80% 50% at 50% -20%, rgba(34,197,94,0.1), transparent), #fafafa",
          position: "relative",
          overflow: "hidden",
        }}
      >
        {/* Grid */}
        <div
          style={{
            position: "absolute",
            inset: 0,
            backgroundImage: "linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px)",
            backgroundSize: "64px 64px",
            maskImage: "radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent)",
            pointerEvents: "none",
          }}
        />

        <div style={{ animation: "fadeUp 0.8s ease-out", position: "relative", zIndex: 1 }}>
          <div
            style={{
              background: "#0a0a0a",
              color: "#22c55e",
              fontSize: 12,
              fontWeight: 600,
              padding: "6px 16px",
              borderRadius: 24,
              marginBottom: 32,
              letterSpacing: "0.04em",
              display: "inline-block",
            }}
          >
            MACOS FLEET MANAGEMENT
          </div>

          <h1
            style={{
              fontSize: "clamp(40px, 6vw, 72px)",
              fontWeight: 700,
              lineHeight: 1.05,
              letterSpacing: "-0.03em",
              maxWidth: 800,
              margin: "0 auto 24px",
            }}
          >
            Device management{" "}
            <span
              style={{
                fontFamily: "'Instrument Serif', serif",
                fontStyle: "italic",
                fontWeight: 400,
                color: "#22c55e",
              }}
            >
              that ships today
            </span>
          </h1>

          <p
            style={{
              fontSize: 18,
              color: "#666",
              maxWidth: 520,
              lineHeight: 1.6,
              margin: "0 auto 40px",
            }}
          >
            Deploy a fully managed macOS MDM server in minutes. Push profiles,
            enforce policies, collect telemetry — manage it all with Terraform,
            API or the dashboard. No infrastructure expertise required.
          </p>

          <div style={{ display: "flex", gap: 12, flexWrap: "wrap", justifyContent: "center" }}>
            <button
              type="button"
              disabled
              aria-disabled="true"
              style={{
                background: "#22c55e",
                color: "#000",
                padding: "16px 32px",
                borderRadius: 8,
                textDecoration: "none",
                fontSize: 16,
                fontWeight: 600,
                fontFamily: "inherit",
                border: 0,
                display: "inline-flex",
                alignItems: "center",
                gap: 8,
                opacity: 0.45,
                cursor: "not-allowed",
              }}
            >
              Start free trial →
            </button>
            <a
              href="#features"
              style={{
                background: "transparent",
                color: "#0a0a0a",
                padding: "16px 32px",
                borderRadius: 8,
                border: "1px solid #ddd",
                textDecoration: "none",
                fontSize: 16,
                fontWeight: 600,
              }}
            >
              See features
            </a>
          </div>
          <p style={{ marginTop: 14, fontSize: 13, fontWeight: 500, color: "#6e6e6e" }}>
            Signups are disabled currently
          </p>
        </div>

        {/* Terminal preview */}
        <div
          style={{
            marginTop: 64,
            maxWidth: 900,
            width: "100%",
            borderRadius: 16,
            overflow: "hidden",
            boxShadow: "0 0 0 1px rgba(0,0,0,0.06), 0 24px 80px rgba(0,0,0,0.12)",
            background: "#111",
            padding: "12px 12px 0",
            animation: "fadeUp 1s ease-out 0.2s both",
          }}
        >
          <div style={{ display: "flex", gap: 6, marginBottom: 12, paddingLeft: 4 }}>
            <div style={{ width: 12, height: 12, borderRadius: "50%", background: "#ff5f57" }} />
            <div style={{ width: 12, height: 12, borderRadius: "50%", background: "#febc2e" }} />
            <div style={{ width: 12, height: 12, borderRadius: "50%", background: "#28c840" }} />
          </div>
          <div
            style={{
              background: "#0d1117",
              borderRadius: "8px 8px 0 0",
              padding: 40,
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 13,
              color: "#8b949e",
              lineHeight: 1.8,
              textAlign: "left",
            }}
          >
            <span style={{ color: "#22c55e" }}>$</span> terraform apply<br />
            <span style={{ color: "#c9d1d9" }}>  zenmdm_ddm_settings.policy:    </span><span style={{ color: "#22c55e" }}>Creating...</span><br />
            <span style={{ color: "#c9d1d9" }}>  zenmdm_profile.wifi_corp:      </span><span style={{ color: "#22c55e" }}>Creating...</span><br />
            <span style={{ color: "#c9d1d9" }}>  zenmdm_osquery_pack.security:  </span><span style={{ color: "#22c55e" }}>Creating...</span><br />
            <br />
            <span style={{ color: "#c9d1d9" }}>Apply complete! Resources: 3 added, 0 changed, 0 destroyed.</span><br />
            <br />
            <span style={{ color: "#8b949e" }}>Outputs:</span><br />
            <span style={{ color: "#c9d1d9" }}>enrolled_devices = ["MacBook-Pro-Eng-01", "MacBook-Air-Design-03"]</span>
          </div>
        </div>
      </section>

      {/* Features */}
      <section
        id="features"
        style={{ padding: "120px 48px", background: "#fff" }}
      >
        <div style={{ maxWidth: 1100, margin: "0 auto" }}>
          <div
            style={{
              fontSize: 13,
              fontWeight: 600,
              color: "#22c55e",
              letterSpacing: "0.06em",
              textTransform: "uppercase",
              marginBottom: 12,
            }}
          >
            Features
          </div>
          <h2
            style={{
              fontSize: 36,
              fontWeight: 700,
              letterSpacing: "-0.02em",
              marginBottom: 64,
              maxWidth: 500,
            }}
          >
            Everything you need to manage macOS at scale
          </h2>

          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
              gap: 24,
            }}
          >
            {features.map((f, i) => (
              <div
                key={i}
                onMouseEnter={(e) => {
                  e.currentTarget.style.borderColor = "#22c55e";
                  e.currentTarget.style.transform = "translateY(-2px)";
                  e.currentTarget.style.boxShadow = "0 8px 32px rgba(34,197,94,0.08)";
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.borderColor = "#f0f0f0";
                  e.currentTarget.style.transform = "none";
                  e.currentTarget.style.boxShadow = "none";
                }}
                style={{
                  padding: 28,
                  borderRadius: 12,
                  border: "1px solid #f0f0f0",
                  transition: "all 0.25s ease",
                  position: "relative",
                }}
              >
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                  <div style={{ fontSize: 28, marginBottom: 14 }}>{f.icon}</div>
                  {f.badge && (
                    <span
                      style={{
                        fontSize: 10,
                        fontWeight: 700,
                        padding: "3px 8px",
                        borderRadius: 4,
                        background: "#f0f0f0",
                        color: "#888",
                        letterSpacing: "0.02em",
                      }}
                    >
                      {f.badge}
                    </span>
                  )}
                </div>
                <h4 style={{ fontSize: 16, fontWeight: 600, marginBottom: 8, letterSpacing: "-0.01em" }}>
                  {f.title}
                </h4>
                <p style={{ color: "#666", lineHeight: 1.6, fontSize: 14 }}>
                  {f.desc}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Pricing */}
      <section
        id="pricing"
        style={{
          padding: "120px 48px",
          background: "#0a0a0a",
          color: "#fff",
        }}
      >
        <div style={{ maxWidth: 1100, margin: "0 auto", textAlign: "center" }}>
          <div
            style={{
              fontSize: 13,
              fontWeight: 600,
              color: "#22c55e",
              letterSpacing: "0.06em",
              textTransform: "uppercase",
              marginBottom: 12,
            }}
          >
            Pricing
          </div>
          <h2
            style={{
              fontSize: 36,
              fontWeight: 700,
              letterSpacing: "-0.02em",
              marginBottom: 12,
            }}
          >
            Simple, transparent pricing
          </h2>
          <p
            style={{
              color: "#888",
              fontSize: 16,
              marginBottom: 64,
              maxWidth: 450,
              marginLeft: "auto",
              marginRight: "auto",
            }}
          >
            14-day free trial on all plans. No credit card required. All prices in EUR.
          </p>

          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
              gap: 24,
              textAlign: "left",
            }}
          >
            {PLANS.map((plan) => (
              <div
                key={plan.id}
                onMouseEnter={() => setHoveredCard(plan.id)}
                onMouseLeave={() => setHoveredCard(null)}
                style={{
                  padding: 32,
                  borderRadius: 16,
                  border: plan.popular ? "2px solid #22c55e" : "1px solid #222",
                  background: plan.popular ? "linear-gradient(180deg, #0f1a0f, #0a0a0a)" : "#111",
                  position: "relative",
                  transition: "transform 0.2s",
                  transform: hoveredCard === plan.id ? "translateY(-4px)" : "none",
                }}
              >
                {plan.popular && (
                  <div
                    style={{
                      position: "absolute",
                      top: -12,
                      left: "50%",
                      transform: "translateX(-50%)",
                      background: "#22c55e",
                      color: "#000",
                      fontSize: 11,
                      fontWeight: 700,
                      padding: "4px 16px",
                      borderRadius: 12,
                      letterSpacing: "0.04em",
                    }}
                  >
                    MOST POPULAR
                  </div>
                )}
                <h4 style={{ fontSize: 18, fontWeight: 600, marginBottom: 4 }}>
                  {plan.name}
                </h4>
                <p style={{ color: "#888", fontSize: 13, marginBottom: 20 }}>
                  {plan.devices}
                </p>
                <div
                  style={{
                    display: "flex",
                    alignItems: "baseline",
                    gap: 4,
                    marginBottom: 24,
                  }}
                >
                  <span style={{ fontSize: 48, fontWeight: 700, letterSpacing: "-0.03em" }}>
                    €{plan.price}
                  </span>
                  <span style={{ color: "#666", fontSize: 14 }}>/month</span>
                </div>
                <ul style={{ listStyle: "none", padding: 0, marginBottom: 16 }}>
                  {plan.features.map((f, i) => (
                    <li
                      key={i}
                      style={{
                        padding: "7px 0",
                        fontSize: 14,
                        color: "#ccc",
                        display: "flex",
                        alignItems: "center",
                        gap: 10,
                      }}
                    >
                      <span style={{ color: "#22c55e", flexShrink: 0 }}>✓</span> {f}
                    </li>
                  ))}
                </ul>
                {plan.excluded && plan.excluded.length > 0 && (
                  <ul style={{ listStyle: "none", padding: 0, marginBottom: 16 }}>
                    {plan.excluded.map((f, i) => (
                      <li
                        key={i}
                        style={{
                          padding: "7px 0",
                          fontSize: 14,
                          color: "#555",
                          display: "flex",
                          alignItems: "center",
                          gap: 10,
                        }}
                      >
                        <span style={{ color: "#555", flexShrink: 0 }}>✗</span> {f}
                      </li>
                    ))}
                  </ul>
                )}
                <button
                  type="button"
                  disabled
                  aria-disabled="true"
                  style={{
                    display: "block",
                    width: "100%",
                    fontFamily: "inherit",
                    opacity: 0.45,
                    cursor: "not-allowed",
                    textAlign: "center",
                    padding: "12px 24px",
                    borderRadius: 8,
                    fontWeight: 600,
                    fontSize: 14,
                    textDecoration: "none",
                    transition: "all 0.2s",
                    background: plan.popular ? "#22c55e" : "transparent",
                    color: plan.popular ? "#000" : "#fff",
                    border: plan.popular ? "none" : "1px solid rgba(255,255,255,0.2)",
                  }}
                >
                  Start free trial
                </button>
                <p style={{ marginTop: 10, textAlign: "center", fontSize: 12, fontWeight: 500, color: "rgba(255,255,255,0.6)" }}>
                  Signups are disabled currently
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer
        style={{
          padding: "48px",
          background: "#0a0a0a",
          borderTop: "1px solid #1a1a1a",
        }}
      >
        <div
          style={{
            maxWidth: 1100,
            margin: "0 auto",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
          }}
        >
          <a
            href={platform}
            style={{
              fontFamily: "'DM Sans', sans-serif",
              fontWeight: 700,
              fontSize: 22,
              letterSpacing: "-0.02em",
              color: "#fff",
              textDecoration: "none",
            }}
          >
            <span style={{ color: "#22c55e" }}>zen</span>sys
          </a>
          <div style={{ display: "flex", gap: 24 }}>
            <a href={platform} style={{ color: "#666", textDecoration: "none", fontSize: 13 }}>Platform</a>
            <a href="#features" style={{ color: "#666", textDecoration: "none", fontSize: 13 }}>Features</a>
            <a href="#pricing" style={{ color: "#666", textDecoration: "none", fontSize: 13 }}>Pricing</a>
          </div>
          <span style={{ color: "#444", fontSize: 12 }}>
            © {new Date().getFullYear()} Zensys B.V. — Amsterdam
          </span>
        </div>
      </footer>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MDMLanding />);