// landing.jsx — public marketing surface: the company overview and the docs page.
// Loaded from index.html as an ordered `text/babel` classic script (position 3 of 8).
// Classic scripts share one global scope — see docs/engineering/Patterns.md §9.

function LandingPage({ siteConfig }) {
  const nav = siteConfig?.nav || [];
  const hero = siteConfig?.sections?.hero || {};
  const mdmUrl = siteConfig?.mdm_url || MDM_URL_FALLBACK;

  // Hero defaults — used when no admin config exists.
  const heroBadge = hero.badge || "ZenMDM now available";
  const heroTitle = hero.title || "Infrastructure tools for";
  const heroTitleAccent = hero.title_accent || "modern IT";
  const heroSubtitle = hero.subtitle || "The open, declarative-first Apple-only MDM that scales from indie start-ups to MSPs, delivers instant OS support, privacy-safe BYOD, and deep telemetry you own, all at half the cost of incumbents.";
  const heroCTAPrimary = hero.cta_primary || "Explore ZenMDM →";
  const heroCTAPrimaryHref = hero.cta_primary_href || mdmUrl;
  const heroCTASecondary = hero.cta_secondary || "View all products";
  const heroCTASecondaryHref = hero.cta_secondary_href || "#products";
  const [hoveredProduct, setHoveredProduct] = useState(null);
  const [apiProducts, setApiProducts] = useState(null);

  useEffect(() => {
    fetch(`${API_BASE}/community/products`)
      .then(r => { if (!r.ok) throw new Error(r.status); return r.json(); })
      .then(d => { if (d.products && d.products.length > 0) setApiProducts(d.products); })
      .catch(err => console.warn("fetch failed:", err));
  }, []);

  const rawProducts = apiProducts || DEFAULT_PRODUCTS;
  const products = rawProducts.map(p => ({
    ...p,
    id: p.slug,
    desc: p.description,
    href: productHref(p, mdmUrl),
    features: productFeatures(p),
  }));

  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(10,10,10,0.92)",
          backdropFilter: "blur(20px)",
          borderBottom: "1px solid rgba(255,255,255,0.06)",
        }}
      >
        <div style={{ display: "flex", alignItems: "center", gap: 40 }}>
          <Logo light />
          <div style={{ display: "flex", gap: 24 }}>
            <DynamicNavLinks items={nav} mdmUrl={mdmUrl} style={{ fontSize: 14, fontWeight: 500 }} />
          </div>
        </div>
        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <Button
            variant="ghost"
            size="sm"
            onClick={() => (window.location.hash = "#/login")}
          >
            Sign in
          </Button>
          <span style={{ fontSize: 12, fontWeight: 500, color: "rgba(255,255,255,0.6)" }}>
            Signups are disabled currently
          </span>
          <Button
            size="sm"
            disabled
            aria-disabled="true"
            style={{ 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: "#0a0a0a",
          position: "relative",
          overflow: "hidden",
        }}
      >
        {/* Radial glow */}
        <div
          style={{
            position: "absolute",
            width: "120%",
            height: "60%",
            top: "-10%",
            left: "-10%",
            background: "radial-gradient(ellipse 50% 80% at 50% 0%, rgba(34,197,94,0.08), transparent)",
            pointerEvents: "none",
          }}
        />

        {/* Grid */}
        <div
          style={{
            position: "absolute",
            inset: 0,
            backgroundImage:
              "linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px)",
            backgroundSize: "80px 80px",
            maskImage: "radial-gradient(ellipse 60% 60% at 50% 40%, black, transparent)",
            pointerEvents: "none",
          }}
        />

        <div
          style={{
            animation: "fadeUp 0.8s ease-out",
            position: "relative",
            zIndex: 1,
          }}
        >
          <div
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 8,
              background: "rgba(34,197,94,0.1)",
              border: "1px solid rgba(34,197,94,0.2)",
              color: "#22c55e",
              fontSize: 13,
              fontWeight: 600,
              padding: "8px 20px",
              borderRadius: 24,
              marginBottom: 40,
            }}
          >
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#22c55e" }} />
            {heroBadge}
          </div>

          <h1
            style={{
              fontSize: "clamp(44px, 6.5vw, 80px)",
              fontWeight: 700,
              lineHeight: 1.05,
              letterSpacing: "-0.035em",
              maxWidth: 900,
              margin: "0 auto 28px",
              color: "#fff",
            }}
          >
            {heroTitle}{" "}
            <span
              style={{
                fontFamily: "'Instrument Serif', serif",
                fontStyle: "italic",
                fontWeight: 400,
                color: "#22c55e",
              }}
            >
              {heroTitleAccent}
            </span>
          </h1>

          <p
            style={{
              fontSize: 18,
              color: "rgba(255,255,255,0.5)",
              maxWidth: 540,
              lineHeight: 1.7,
              margin: "0 auto 48px",
            }}
          >
            {heroSubtitle}
          </p>

          <div style={{ display: "flex", gap: 12, flexWrap: "wrap", justifyContent: "center" }}>
            <Button
              size="lg"
              onClick={() => {
                const href = heroCTAPrimaryHref;
                if (href.startsWith("http")) window.open(href, "_self");
                else if (href.startsWith("#")) window.location.hash = href;
                else document.getElementById(href.replace("#",""))?.scrollIntoView({ behavior: "smooth" });
              }}
            >
              {heroCTAPrimary}
            </Button>
            <Button
              variant="secondary"
              size="lg"
              onClick={() => {
                const href = heroCTASecondaryHref;
                if (href.startsWith("#/")) window.location.hash = href;
                else document.getElementById(href.replace("#",""))?.scrollIntoView({ behavior: "smooth" });
              }}
            >
              {heroCTASecondary}
            </Button>
          </div>
        </div>

        {/* Scroll indicator */}
        <div
          style={{
            position: "absolute",
            bottom: 40,
            left: "50%",
            transform: "translateX(-50%)",
            color: "rgba(255,255,255,0.5)",
            fontSize: 12,
            fontWeight: 500,
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            gap: 8,
            animation: "fadeIn 1.5s ease-out",
          }}
        >
          <span>Scroll</span>
          <div style={{ width: 1, height: 24, background: "linear-gradient(rgba(255,255,255,0.3), transparent)" }} />
        </div>
      </section>

      {/* Products */}
      <section
        id="products"
        style={{
          padding: "120px 48px",
          background: "#fafafa",
        }}
      >
        <div style={{ maxWidth: 1100, margin: "0 auto" }}>
          <div style={{ marginBottom: 64 }}>
            <div
              style={{
                fontSize: 13,
                fontWeight: 600,
                color: "#22c55e",
                letterSpacing: "0.06em",
                textTransform: "uppercase",
                marginBottom: 12,
              }}
            >
              Products
            </div>
            <h2
              style={{
                fontSize: "clamp(28px, 4vw, 42px)",
                fontWeight: 700,
                letterSpacing: "-0.025em",
                maxWidth: 500,
                lineHeight: 1.15,
              }}
            >
              One platform,{" "}
              <span style={{ fontFamily: "'Instrument Serif', serif", fontStyle: "italic", fontWeight: 400 }}>
                the tools for you
              </span>
            </h2>
          </div>

          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))",
              gap: 24,
            }}
          >
            {products.map((p) => {
              const isAvailable = p.status === "available";
              const isHovered = hoveredProduct === p.id;
              // An available product card is one link over the whole card — the
              // same pattern DocsPage uses. It replaced a <div onClick> that
              // wrapped a second onClick handler on "See features", so a click
              // there used to navigate twice. A card with no destination stays
              // an inert <div>.
              const Card = p.href ? "a" : "div";
              return (
                <Card
                  key={p.id}
                  href={p.href || undefined}
                  onMouseEnter={() => setHoveredProduct(p.id)}
                  onMouseLeave={() => setHoveredProduct(null)}
                  style={{
                    display: "block",
                    textDecoration: "none",
                    color: "inherit",
                    padding: 36,
                    borderRadius: 16,
                    border: isHovered && isAvailable ? `1px solid ${p.color}40` : "1px solid #e8e8e8",
                    background: "#fff",
                    cursor: isAvailable ? "pointer" : "default",
                    transition: "all 0.3s ease",
                    transform: isHovered && isAvailable ? "translateY(-4px)" : "none",
                    boxShadow: isHovered && isAvailable ? `0 12px 40px ${p.color}12` : "none",
                    opacity: isAvailable ? 1 : 0.65,
                    position: "relative",
                    overflow: "hidden",
                  }}
                >
                  {/* Top accent line */}
                  <div
                    style={{
                      position: "absolute",
                      top: 0,
                      left: 0,
                      right: 0,
                      height: 3,
                      background: p.color,
                      opacity: isHovered ? 1 : 0,
                      transition: "opacity 0.3s",
                    }}
                  />

                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 16 }}>
                    <div>
                      <h3 style={{ fontSize: 20, fontWeight: 700, letterSpacing: "-0.01em" }}>
                        {p.name}
                      </h3>
                      <div style={{ fontSize: 14, color: "#6e6e6e", marginTop: 2 }}>
                        {p.tagline}
                      </div>
                    </div>
                    <div
                      style={{
                        fontSize: 11,
                        fontWeight: 600,
                        padding: "4px 12px",
                        borderRadius: 12,
                        background: isAvailable ? `${p.color}15` : "#f5f5f5",
                        color: isAvailable ? p.color : "#6e6e6e",
                        letterSpacing: "0.02em",
                        whiteSpace: "nowrap",
                      }}
                    >
                      {productStatusLabel(p.status)}
                    </div>
                  </div>

                  <p style={{ color: "#666", lineHeight: 1.7, fontSize: 14, marginBottom: 24, minHeight: 72 }}>
                    {p.desc}
                  </p>

                  <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                    {p.features.map((f, i) => (
                      <span
                        key={i}
                        style={{
                          fontSize: 12,
                          padding: "5px 12px",
                          borderRadius: 6,
                          background: "#f7f7f7",
                          color: "#555",
                          fontWeight: 500,
                        }}
                      >
                        {f}
                      </span>
                    ))}
                  </div>

                  {isAvailable && (
                    <div
                      style={{
                        marginTop: 24,
                        paddingTop: 24,
                        borderTop: "1px solid #f0f0f0",
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "space-between",
                      }}
                    >
                      <span style={{ fontSize: 14, fontWeight: 600 }}>
                        From <span style={{ color: p.color }}>€3</span>/mo
                      </span>
                      <span
                        style={{
                          fontSize: 14,
                          fontWeight: 600,
                          color: p.color,
                          display: "flex",
                          alignItems: "center",
                          gap: 4,
                        }}
                      >
                        See features →
                      </span>
                    </div>
                  )}
                </Card>
              );
            })}
          </div>
        </div>
      </section>

      {/* Stats / trust bar */}
      <section
        style={{
          padding: "80px 48px",
          background: "#fff",
          borderTop: "1px solid #f0f0f0",
          borderBottom: "1px solid #f0f0f0",
        }}
      >
        <div
          style={{
            maxWidth: 1100,
            margin: "0 auto",
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            gap: 48,
            textAlign: "center",
          }}
        >
          {[
            { value: "< 60s", label: "Instance provisioning" },
            { value: "€3", label: "Starting price / month" },
            { value: "200+", label: "Osquery data points" },
            { value: "5", label: "IdP providers supported" },
          ].map((s, i) => (
            <div key={i}>
              <div
                style={{
                  fontSize: 36,
                  fontWeight: 700,
                  letterSpacing: "-0.03em",
                  color: "#0a0a0a",
                  marginBottom: 4,
                }}
              >
                {s.value}
              </div>
              <div style={{ fontSize: 14, color: "#6e6e6e" }}>{s.label}</div>
            </div>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section
        style={{
          padding: "120px 48px",
          background: "#0a0a0a",
          textAlign: "center",
        }}
      >
        <div style={{ maxWidth: 600, margin: "0 auto" }}>
          <h2
            style={{
              fontSize: "clamp(28px, 4vw, 44px)",
              fontWeight: 700,
              letterSpacing: "-0.03em",
              color: "#fff",
              marginBottom: 16,
              lineHeight: 1.15,
            }}
          >
            Ready to manage your fleet?
          </h2>
          <p
            style={{
              fontSize: 16,
              color: "rgba(255,255,255,0.5)",
              marginBottom: 40,
              lineHeight: 1.7,
            }}
          >
            Free for up to 5 devices — forever. No credit card. No trial expiry. Scale to unlimited when you're ready.
          </p>
          <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
            <Button size="lg" disabled aria-disabled="true" style={{ opacity: 0.45, cursor: "not-allowed" }}>
              Get started free →
            </Button>
            <Button variant="secondary" size="lg" onClick={() => window.open(mdmUrl + "#features", "_self")}>
              View MDM features
            </Button>
          </div>
          <p style={{ marginTop: 14, fontSize: 13, fontWeight: 500, color: "rgba(255,255,255,0.6)" }}>
            Signups are disabled currently
          </p>
        </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",
          }}
        >
          <Logo light />
          <div style={{ display: "flex", gap: 24 }}>
            <DynamicNavLinks items={nav} mdmUrl={mdmUrl} style={{ fontSize: 13, fontWeight: 500 }} />
          </div>
          <span style={{ color: "#888", fontSize: 12 }}>
            {siteConfig?.sections?.footer?.copyright || `© ${new Date().getFullYear()} Zensys - NL, Europe`}
          </span>
        </div>
      </footer>
    </div>
  );
}

// ─── Documentation Page ──────────────────────────────────────────────────────

function DocsPage() {
  const sections = [
    {
      title: "MDM Server API",
      description: "Endpoint reference for devices, profiles, packages, device groups, DDM, IdP, osquery, and security events. Interactive Swagger UI is available on your MDM instance at /api/v1/docs.",
      icon: "📡",
      href: "/api/v1/docs/mdm-api",
      external: true,
    },
    {
      title: "Platform API",
      description: "Authentication, billing, instance management, and Mollie webhooks for the Zensys platform.",
      icon: "🌐",
      href: "/api/v1/docs/platform-api",
      external: true,
    },
    {
      title: "Terraform Provider",
      description: "Manage your MDM configuration as infrastructure-as-code. All resources, data sources, and attributes documented.",
      icon: "🏗️",
      href: "/api/v1/docs/terraform-reference",
      external: true,
    },
  ];

  return (
    <div style={{ fontFamily: "'DM Sans', sans-serif", minHeight: "100vh", background: "#fafafa" }}>
      {/* Header */}
      <header style={{ background: "#0a0a0a", borderBottom: "1px solid #222" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto", padding: "16px 32px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <a href="#/" style={{ textDecoration: "none" }}><Logo light /></a>
          <div style={{ display: "flex", gap: 20, alignItems: "center" }}>
            <a href="#/" style={{ color: "rgba(255,255,255,0.6)", textDecoration: "none", fontSize: 14 }}>Home</a>
            <a href="#/docs" style={{ color: "#fff", textDecoration: "none", fontSize: 14, fontWeight: 600 }}>Docs</a>
            <a href="#/dashboard" style={{ color: "rgba(255,255,255,0.6)", textDecoration: "none", fontSize: 14 }}>Dashboard</a>
          </div>
        </div>
      </header>

      {/* Hero */}
      <div style={{ background: "#0a0a0a", padding: "64px 32px 80px", textAlign: "center" }}>
        <h1 style={{ color: "#fff", fontSize: 36, fontWeight: 700, letterSpacing: "-0.02em", marginBottom: 12 }}>Documentation</h1>
        <p style={{ color: "#888", fontSize: 16, maxWidth: 560, margin: "0 auto" }}>
          Everything you need to deploy, configure, and automate ZenMDM.
        </p>
      </div>

      {/* Cards */}
      <div style={{ maxWidth: 960, margin: "-40px auto 0", padding: "0 32px 80px", display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 20 }}>
        {sections.map((s) => (
          <a
            key={s.title}
            href={s.href}
            target={s.external ? "_blank" : undefined}
            rel={s.external ? "noopener noreferrer" : undefined}
            style={{
              display: "block",
              background: "#fff",
              border: "1px solid #e5e5e5",
              borderRadius: 12,
              padding: 28,
              textDecoration: "none",
              color: "inherit",
              transition: "box-shadow 0.2s, border-color 0.2s",
            }}
            onMouseEnter={(e) => { e.currentTarget.style.boxShadow = "0 4px 16px rgba(0,0,0,0.08)"; e.currentTarget.style.borderColor = "#22c55e"; }}
            onMouseLeave={(e) => { e.currentTarget.style.boxShadow = "none"; e.currentTarget.style.borderColor = "#e5e5e5"; }}
          >
            <div style={{ fontSize: 32, marginBottom: 12 }}>{s.icon}</div>
            <h3 style={{ fontSize: 18, fontWeight: 600, marginBottom: 8 }}>{s.title}</h3>
            <p style={{ fontSize: 14, color: "#666", lineHeight: 1.5 }}>{s.description}</p>
          </a>
        ))}
      </div>

      {/* Quick Links */}
      <div style={{ maxWidth: 960, margin: "0 auto", padding: "0 32px 80px" }}>
        <h2 style={{ fontSize: 20, fontWeight: 600, marginBottom: 16 }}>Quick Links</h2>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          {[
            { label: "Getting Started", desc: "Register, provision, and enroll your first device", href: "#/register?plan=free" },
            { label: "Profile Templates", desc: "visionOS, watchOS, macOS CIS L1/L2 — ready to deploy", href: "/api/v1/docs/mdm-api" },
            { label: "AI Co-Pilot", desc: "Generate profiles from plain language", href: "/api/v1/docs/mdm-api" },
            { label: "GitOps & CLI", desc: "Manage your fleet as code — Terraform + zenmdm CLI", href: "/api/v1/docs/mdm-api" },
          ].map((item) => (
            <a
              key={item.label}
              href={item.href}
              target="_blank"
              rel="noopener noreferrer"
              style={{
                display: "flex", alignItems: "center", gap: 12,
                padding: "14px 18px", background: "#fff", border: "1px solid #e5e5e5",
                borderRadius: 8, textDecoration: "none", color: "inherit",
              }}
            >
              <div>
                <div style={{ fontSize: 14, fontWeight: 500 }}>{item.label}</div>
                <div style={{ fontSize: 12, color: "#6e6e6e" }}>{item.desc}</div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </div>
  );
}