/* ============================================================
   Home page
   ============================================================ */

const { useState: useStateH, useEffect: useEffectH, useMemo } = React;

function HomePage() {
  return (
    <main>
      <Hero />
      <MarqueeStrip />
      <FeatureGrid />
      <PerformanceBlock />
      <LocationsTeaser />
      <PricingTeaser />
      <TestimonialsBlock />
      <FinalCTA />
    </main>
  );
}

/* ---------- Hero ---------- */
function Hero() {
  return (
    <section style={{ position: "relative", paddingTop: 88, paddingBottom: 72, overflow: "hidden" }}>
      <div className="grain" />
      {/* Sun glow behind */}
      <div aria-hidden style={{
        position: "absolute",
        right: "-10%",
        top: "-20%",
        width: 700, height: 700,
        background: "radial-gradient(circle, rgba(96,165,250,0.35), rgba(37,99,235,0.12) 40%, transparent 70%)",
        filter: "blur(20px)",
        pointerEvents: "none",
      }} />

      <div className="wrap" style={{ position: "relative" }}>
        <div className="pill" style={{ marginBottom: 28 }}>
          <span className="dot" /> 99.98% uptime this quarter · FL · SEA · FRA
        </div>

        <h1 className="display" style={{ maxWidth: 1100 }}>
          Hosting<br/>
          <em>uncomplicated.</em> <span style={{ color: "var(--ink-3)" }}>Fast</span><br/>
          cPanel, done right.
        </h1>

        <p style={{
          marginTop: 32,
          fontSize: 19,
          lineHeight: 1.5,
          maxWidth: 640,
          color: "var(--ink-2)",
        }}>
          Unlimited disk and bandwidth on LiteSpeed + NVMe servers, in three global
          regions, starting at <b className="mono" style={{ color: "var(--ink)" }}>$2.95/mo</b>.
          No upsells. Instant setup. Free migration from your current host.
        </p>

        <div style={{ marginTop: 36, display: "flex", gap: 12, flexWrap: "wrap" }}>
          <Link to="/pricing" className="btn btn-primary">
            See plans & pricing <span className="arrow">→</span>
          </Link>
          <Link to="/hosting" className="btn btn-ghost">
            Why Loominost
          </Link>
        </div>

        {/* Hero "terminal + stats" dashboard */}
        <div style={{ marginTop: 72 }}>
          <HeroDashboard />
        </div>
      </div>
    </section>
  );
}

function HeroDashboard() {
  // Real round-trip — fetch a tiny resource near each region, time the request.
  // These are public CORS-friendly endpoints close to each datacenter.
  const probes = useMemo(() => ([
    { code: "FL",  name: "Miami, FL",     url: "https://speed.cloudflare.com/__down?bytes=1024" }, // routes to nearest CF PoP
    { code: "SEA", name: "Seattle, WA",   url: "https://speed.cloudflare.com/__down?bytes=1024" }, // routes to nearest CF PoP
    { code: "FRA", name: "Frankfurt, DE", url: "https://speed.cloudflare.com/__down?bytes=1024" }, // routes to nearest CF PoP
  ]), []);

  const [ping, setPing] = useStateH({ FL: null, SEA: null, FRA: null });

  useEffectH(() => {
    let cancelled = false;
    async function timeOnce(url) {
      const u = url + (url.includes("?") ? "&" : "?") + "t=" + Math.random().toString(36).slice(2);
      const t0 = performance.now();
      try {
        await fetch(u, { method: "GET", mode: "no-cors", cache: "no-store" });
        return performance.now() - t0;
      } catch { return null; }
    }

    async function probe(p) {
      // warm-up (DNS/TLS) — discard
      await timeOnce(p.url);
      const samples = [];
      for (let i = 0; i < 3; i++) {
        const ms = await timeOnce(p.url);
        if (ms != null) samples.push(ms);
      }
      if (cancelled || !samples.length) return;
      const sorted = [...samples].sort((a, b) => a - b);
      const median = Math.round(sorted[Math.floor(sorted.length / 2)]);
      setPing(prev => ({ ...prev, [p.code]: median }));
    }

    // Run all probes in parallel + repeat every 12s
    const runAll = () => probes.forEach(probe);
    runAll();
    const id = setInterval(runAll, 12000);
    return () => { cancelled = true; clearInterval(id); };
  }, [probes]);

  return (
    <div style={{
      display: "grid",
      gridTemplateColumns: "1.3fr 1fr",
      gap: 18,
      alignItems: "stretch",
    }}>
      {/* Terminal-ish pane */}
      <div style={{
        background: "var(--ink)",
        color: "#E8E3D8",
        borderRadius: 18,
        padding: 24,
        fontFamily: "var(--font-mono)",
        fontSize: 13,
        position: "relative",
        overflow: "hidden",
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18, opacity: 0.7 }}>
          <span style={{ width: 10, height: 10, borderRadius: 999, background: "#ff5f57" }} />
          <span style={{ width: 10, height: 10, borderRadius: 999, background: "#febc2e" }} />
          <span style={{ width: 10, height: 10, borderRadius: 999, background: "#28c840" }} />
          <span style={{ marginLeft: 10, fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase" }}>
            ssh · you@mysite.com
          </span>
        </div>

        <Line prompt>curl -I https://mysite.com</Line>
        <Line><span style={{ color: "var(--accent-glow)" }}>HTTP/2 200</span></Line>
        <Line>server: <span style={{ color: "#9bd1ff" }}>LiteSpeed</span></Line>
        <Line>x-loominost-dc: <span style={{ color: "#9bd1ff" }}>fl-01</span></Line>
        <Line>x-cache: <span style={{ color: "#b0e8b0" }}>HIT</span></Line>
        <Line>ttfb: <span style={{ color: "var(--accent-glow)" }}>47ms</span></Line>
        <Line />
        <Line prompt>uptime</Line>
        <Line>up 287 days, 14 hours, load avg: 0.08, 0.05, 0.02</Line>
        <Line />
        <Line prompt>
          <span style={{ background: "var(--accent-glow)", width: 8, height: 16, display: "inline-block", verticalAlign: "middle", animation: "blink 1s steps(2) infinite" }} />
        </Line>

        <style>{`@keyframes blink { 50% { opacity: 0; } }`}</style>
      </div>

      {/* Live ping card */}
      <div style={{
        background: "#fff",
        border: "1px solid var(--line)",
        borderRadius: 18,
        padding: 24,
        display: "flex",
        flexDirection: "column",
      }}>
        <div className="h-eyebrow"><span className="dot" />Live · round-trip from your browser</div>
        <div style={{
          fontFamily: "var(--font-serif)",
          fontSize: 40,
          lineHeight: 1,
          marginTop: 18,
          letterSpacing: "-0.02em",
        }}>
          Three regions.<br/>
          <em style={{ color: "var(--accent-ink)", fontStyle: "italic" }}>One experience.</em>
        </div>

        <div style={{ marginTop: 22, display: "grid", gap: 10 }}>
          {[
            { code: "FL", name: "Miami, FL", ms: ping.FL },
            { code: "SEA", name: "Seattle, WA", ms: ping.SEA },
            { code: "FRA", name: "Frankfurt, DE", ms: ping.FRA },
          ].map(r => (
            <div key={r.code} style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
              padding: "10px 14px",
              borderRadius: 10,
              background: "var(--bg-2)",
              fontFamily: "var(--font-mono)",
              fontSize: 13,
            }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <span style={{
                  fontSize: 10,
                  background: "var(--ink)",
                  color: "#fff",
                  padding: "2px 6px",
                  borderRadius: 4,
                  letterSpacing: "0.08em",
                }}>{r.code}</span>
                <span>{r.name}</span>
              </div>
              <div style={{
                display: "flex",
                alignItems: "center",
                gap: 8,
                color: "var(--ink-2)",
              }}>
                <PingBar ms={r.ms} />
                <span style={{ minWidth: 52, textAlign: "right" }}>
                  {r.ms == null ? "—" : `${r.ms}ms`}
                </span>
              </div>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 14,
          fontFamily: "var(--font-mono)",
          fontSize: 10,
          color: "var(--ink-3)",
          letterSpacing: "0.04em",
          lineHeight: 1.5,
        }}>
          Measured from your browser — typical TCP+TLS round-trip.
          Numbers vary with network conditions.
        </div>
      </div>
    </div>
  );
}

function Line({ children, prompt }) {
  return (
    <div style={{ lineHeight: 1.75, opacity: prompt ? 1 : 0.85 }}>
      {prompt && <span style={{ color: "var(--accent-glow)", marginRight: 8 }}>$</span>}
      {children}
    </div>
  );
}

function PingBar({ ms }) {
  if (ms == null) {
    return (
      <div style={{ width: 60, height: 4, background: "var(--line)", borderRadius: 999, overflow: "hidden" }}>
        <div style={{
          width: "30%", height: "100%", background: "var(--accent-glow)",
          animation: "pulse 1.2s ease-in-out infinite",
        }} />
      </div>
    );
  }
  // 0-300ms scale (real-world latencies)
  const pct = Math.min(100, (ms / 300) * 100);
  const color = ms < 80 ? "#10B981" : ms < 200 ? "var(--accent)" : "#F59E0B";
  return (
    <div style={{ width: 60, height: 4, background: "var(--line)", borderRadius: 999, overflow: "hidden" }}>
      <div style={{ width: pct + "%", height: "100%", background: color, transition: "width 400ms ease-out" }} />
    </div>
  );
}

/* ---------- Marquee logos / trust strip ---------- */
function MarqueeStrip() {
  const items = [
    "cPanel", "LiteSpeed", "NVMe SSD", "Softaculous", "CloudLinux",
    "Imunify360", "AutoSSL", "JetBackup", "WordPress", "LSCache",
  ];
  return (
    <section style={{
      borderTop: "1px solid var(--line)",
      borderBottom: "1px solid var(--line)",
      padding: "22px 0",
      background: "var(--bg-2)",
      overflow: "hidden",
    }}>
      <div style={{
        display: "flex",
        gap: 56,
        animation: "scroll 40s linear infinite",
        whiteSpace: "nowrap",
        fontFamily: "var(--font-mono)",
        fontSize: 13,
        color: "var(--ink-2)",
        letterSpacing: "0.04em",
      }}>
        {[...items, ...items, ...items].map((it, i) => (
          <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 56 }}>
            {it}
            <span style={{ color: "var(--line-2)" }}>✦</span>
          </span>
        ))}
      </div>
      <style>{`@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }`}</style>
    </section>
  );
}

/* ---------- Feature Grid ---------- */
function FeatureGrid() {
  const features = [
    {
      eyebrow: "01 / Performance",
      title: "LiteSpeed + NVMe. Measurably faster.",
      body: "Servers run LiteSpeed Web Server with LSCache, on pure NVMe storage. TTFB in double digits, not triple.",
      stat: { big: "47ms", small: "median TTFB · global" },
    },
    {
      eyebrow: "02 / Reliability",
      title: "99.9% uptime, guaranteed.",
      body: "Daily local + offsite backups included on every plan. Imunify360 + AutoSSL keep everything patched and protected.",
      stat: { big: "99.98%", small: "uptime · trailing 90d" },
    },
    {
      eyebrow: "03 / Simplicity",
      title: "cPanel, Softaculous, instant setup.",
      body: "The control panel you already know, with 280+ one-click apps. Accounts provision the moment you pay.",
      stat: { big: "< 60s", small: "provisioning time" },
    },
    {
      eyebrow: "04 / Value",
      title: "Unmetered disk & bandwidth.",
      body: "No per-GB surprises. Grow your site without sweating the meter. Free SSL and free migration from any host.",
      stat: { big: "$2.95", small: "/month" },
    },
  ];

  return (
    <section style={{ padding: "120px 0 40px" }}>
      <div className="wrap">
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 56, gap: 40, flexWrap: "wrap" }}>
          <div style={{ maxWidth: 640 }}>
            <div className="h-eyebrow"><span className="dot" />What you get</div>
            <h2 style={{
              fontFamily: "var(--font-serif)",
              fontSize: "clamp(40px, 5vw, 64px)",
              letterSpacing: "-0.02em",
              lineHeight: 1,
              marginTop: 16,
            }}>
              Everything a modern site<br/>
              needs — <em style={{ color: "var(--accent-ink)", fontStyle: "italic" }}>nothing it doesn't.</em>
            </h2>
          </div>
          <Link to="/hosting" className="btn btn-ghost">
            Full feature list <span className="arrow">→</span>
          </Link>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          {features.map((f, i) => (
            <article key={i} style={{
              background: "#fff",
              border: "1px solid var(--line)",
              borderRadius: 18,
              padding: 32,
              display: "grid",
              gridTemplateColumns: "1.4fr 1fr",
              gap: 28,
              alignItems: "start",
              minHeight: 230,
            }}>
              <div>
                <div className="h-eyebrow" style={{ marginBottom: 14 }}>{f.eyebrow}</div>
                <h3 style={{
                  fontSize: 22,
                  letterSpacing: "-0.015em",
                  lineHeight: 1.2,
                  marginBottom: 10,
                }}>{f.title}</h3>
                <p style={{ margin: 0, color: "var(--ink-2)", fontSize: 14.5, lineHeight: 1.55 }}>{f.body}</p>
              </div>
              <div style={{
                borderLeft: "1px solid var(--line)",
                paddingLeft: 24,
                alignSelf: "stretch",
                display: "flex",
                flexDirection: "column",
                justifyContent: "center",
              }}>
                <div style={{
                  fontFamily: "var(--font-serif)",
                  fontSize: 56,
                  lineHeight: 0.95,
                  letterSpacing: "-0.02em",
                  color: "var(--ink)",
                }}>{f.stat.big}</div>
                <div className="mono" style={{
                  fontSize: 11,
                  color: "var(--ink-3)",
                  marginTop: 8,
                  letterSpacing: "0.04em",
                }}>{f.stat.small}</div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Performance block: animated benchmark ---------- */
function PerformanceBlock() {
  const [pct, setPct] = useStateH(0);
  useEffectH(() => {
    let raf;
    const start = performance.now();
    const tick = (t) => {
      const p = Math.min(1, (t - start) / 2200);
      const ease = 1 - Math.pow(1 - p, 3);
      setPct(ease);
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  const rows = [
    { name: "Loominost · LiteSpeed + NVMe", ms: 47, accent: true },
    { name: "Average shared host · Apache", ms: 612 },
    { name: "Budget cPanel reseller", ms: 841 },
    { name: "Entry-level WordPress host", ms: 489 },
  ];
  const max = 900;

  return (
    <section style={{
      padding: "80px 0",
      background: "var(--bg-2)",
      borderTop: "1px solid var(--line)",
      borderBottom: "1px solid var(--line)",
    }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 60, alignItems: "center" }}>
          <div>
            <div className="h-eyebrow"><span className="dot" />Real benchmarks</div>
            <h2 style={{
              fontFamily: "var(--font-serif)",
              fontSize: "clamp(36px, 4.5vw, 56px)",
              letterSpacing: "-0.02em",
              lineHeight: 1,
              marginTop: 16,
            }}>
              13× faster first-byte<br/>
              than <em style={{ color: "var(--accent-ink)", fontStyle: "italic" }}>the average host.</em>
            </h2>
            <p style={{ color: "var(--ink-2)", marginTop: 18, fontSize: 16, maxWidth: 420 }}>
              Ultra fast servers with the latest NVMe drives paired with Litespeed on all
              our servers to provide you with the best website loading times.
            </p>
          </div>

          <div style={{
            background: "#fff",
            border: "1px solid var(--line)",
            borderRadius: 18,
            padding: 32,
          }}>
            <div style={{ display: "flex", justifyContent: "space-between", fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 20 }}>
              <span>TTFB · median, milliseconds</span>
              <span>Lower is better ↓</span>
            </div>
            {rows.map((r, i) => {
              const w = (r.ms / max) * 100 * pct;
              return (
                <div key={i} style={{ marginBottom: 18, lastChild: { marginBottom: 0 } }}>
                  <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
                    <span style={{
                      fontSize: 14,
                      fontWeight: r.accent ? 500 : 400,
                      color: r.accent ? "var(--ink)" : "var(--ink-2)",
                    }}>{r.name}</span>
                    <span className="mono" style={{
                      fontSize: 13,
                      color: r.accent ? "var(--accent-ink)" : "var(--ink-2)",
                      fontWeight: r.accent ? 600 : 400,
                    }}>{Math.round(r.ms * pct)}ms</span>
                  </div>
                  <div style={{ height: 10, background: "var(--bg-3)", borderRadius: 999, overflow: "hidden" }}>
                    <div style={{
                      width: w + "%",
                      height: "100%",
                      background: r.accent
                        ? "linear-gradient(90deg, var(--accent) 0%, var(--accent-glow) 100%)"
                        : "var(--line-2)",
                      borderRadius: 999,
                      transition: "width 60ms linear",
                    }} />
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Locations teaser ---------- */
function LocationsTeaser() {
  const locs = [
    { city: "Miami", region: "Florida, US", ip: "xxx.xx.xxx.xx", tz: "UTC−5" },
    { city: "Seattle", region: "Washington, US", ip: "xxx.xx.xxx.xx", tz: "UTC−8" },
    { city: "Frankfurt", region: "Hesse, DE", ip: "xxx.xxx.xx.x", tz: "UTC+1" },
  ];
  return (
    <section style={{ padding: "120px 0 40px" }}>
      <div className="wrap">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 40, flexWrap: "wrap", gap: 20 }}>
          <div>
            <div className="h-eyebrow"><span className="dot" />Datacenters</div>
            <h2 style={{
              fontFamily: "var(--font-serif)",
              fontSize: "clamp(40px, 5vw, 64px)",
              letterSpacing: "-0.02em",
              lineHeight: 1,
              marginTop: 16,
            }}>
              Three regions.<br/>
              <em style={{ color: "var(--accent-ink)", fontStyle: "italic" }}>Low latency, everywhere.</em>
            </h2>
          </div>
          <a
            href="#/locations"
            className="btn btn-ghost"
          >
            View all locations <span className="arrow">→</span>
          </a>
        </div>

        <WorldMap />

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12, marginTop: 20 }}>
          {locs.map(l => (
            <div key={l.city} style={{
              background: "#fff",
              border: "1px solid var(--line)",
              borderRadius: 14,
              padding: 22,
            }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
                <div style={{ fontSize: 18, fontWeight: 500, letterSpacing: "-0.01em" }}>{l.city}</div>
                <span className="pill"><span className="dot" /> Online</span>
              </div>
              <div className="mono" style={{ fontSize: 12, color: "var(--ink-3)", lineHeight: 1.8 }}>
                <div>region · {l.region}</div>
                <div>test · {l.ip}</div>
                <div>tz · {l.tz}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function WorldMap() {
  // Simple dotted equirectangular world with 3 DC pins
  const pins = [
    { x: 27, y: 48, label: "Seattle" },     // Seattle
    { x: 31, y: 57, label: "Miami" },       // Miami/FL
    { x: 52, y: 40, label: "Frankfurt" },   // Frankfurt
  ];
  return (
    <div style={{
      background: "var(--ink)",
      borderRadius: 18,
      padding: 32,
      position: "relative",
      overflow: "hidden",
      aspectRatio: "2.4 / 1",
    }}>
      <svg viewBox="0 0 1000 420" style={{ width: "100%", height: "100%", display: "block" }}>
        <defs>
          <pattern id="dots" x="0" y="0" width="12" height="12" patternUnits="userSpaceOnUse">
            <circle cx="2" cy="2" r="1" fill="#3a3a3a" />
          </pattern>
          <radialGradient id="glow" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#60A5FA" stopOpacity="0.9" />
            <stop offset="100%" stopColor="#60A5FA" stopOpacity="0" />
          </radialGradient>
        </defs>
        {/* Simplified continent shapes as dot masks */}
        <g>
          {/* North America */}
          <path d="M 80 100 Q 200 70 300 120 Q 350 200 280 260 Q 200 300 130 280 Q 60 200 80 100 Z" fill="url(#dots)" />
          {/* South America */}
          <path d="M 240 280 Q 290 290 310 340 Q 290 400 250 400 Q 220 360 240 280 Z" fill="url(#dots)" />
          {/* Europe/Africa */}
          <path d="M 460 100 Q 560 80 600 140 Q 620 250 560 360 Q 520 400 480 380 Q 440 280 460 100 Z" fill="url(#dots)" />
          {/* Asia */}
          <path d="M 600 100 Q 780 80 880 160 Q 900 230 840 270 Q 760 280 680 240 Q 620 180 600 100 Z" fill="url(#dots)" />
          {/* Australia */}
          <path d="M 800 300 Q 870 300 890 340 Q 860 370 810 360 Q 780 330 800 300 Z" fill="url(#dots)" />
        </g>

        {/* Pins */}
        {pins.map((p, i) => (
          <g key={i} transform={`translate(${p.x * 10},${p.y * 4.2})`}>
            <circle r="40" fill="url(#glow)">
              <animate attributeName="r" values="30;50;30" dur="3s" repeatCount="indefinite" />
              <animate attributeName="opacity" values="0.5;0.2;0.5" dur="3s" repeatCount="indefinite" />
            </circle>
            <circle r="5" fill="#2563EB" stroke="#fff" strokeWidth="1.5" />
            <text x="12" y="4" fill="#E8E3D8" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.05em">
              {p.label}
            </text>
          </g>
        ))}
      </svg>
    </div>
  );
}

/* ---------- Pricing teaser ---------- */
function PricingTeaser() {
  const plans = [
    { name: "Basic", price: 2.95, sites: 15, disk: "Unlimited", bw: "Unlimited", db: "Unlimited" },
    { name: "Advanced", price: 3.95, sites: 30, disk: "Unlimited", bw: "Unlimited", db: "Unlimited" },
    { name: "Professional", price: 5.95, sites: "Unlimited", disk: "Unlimited", bw: "Unlimited", db: "Unlimited", popular: true },
  ];

  return (
    <section style={{ padding: "40px 0 40px" }}>
      <div className="wrap">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 40, flexWrap: "wrap", gap: 20 }}>
          <div>
            <div className="h-eyebrow"><span className="dot" />Pricing</div>
            <h2 style={{
              fontFamily: "var(--font-serif)",
              fontSize: "clamp(40px, 5vw, 64px)",
              letterSpacing: "-0.02em",
              lineHeight: 1,
              marginTop: 16,
            }}>
              Honest pricing,<br/>
              <em style={{ color: "var(--accent-ink)", fontStyle: "italic" }}>no surprises.</em>
            </h2>
          </div>
          <Link to="/pricing" className="btn btn-ghost">
            Compare all plans <span className="arrow">→</span>
          </Link>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12 }}>
          {plans.map(p => (
            <div key={p.name} style={{
              background: p.popular ? "var(--ink)" : "#fff",
              color: p.popular ? "#fff" : "var(--ink)",
              border: p.popular ? "1px solid var(--ink)" : "1px solid var(--line)",
              borderRadius: 18,
              padding: 28,
              position: "relative",
            }}>
              {p.popular && (
                <div style={{
                  position: "absolute", top: 18, right: 18,
                  background: "var(--accent)",
                  color: "#fff",
                  fontFamily: "var(--font-mono)",
                  fontSize: 10,
                  letterSpacing: "0.1em",
                  textTransform: "uppercase",
                  padding: "4px 8px",
                  borderRadius: 999,
                }}>Most popular</div>
              )}
              <div style={{
                fontFamily: "var(--font-mono)",
                fontSize: 11,
                letterSpacing: "0.12em",
                textTransform: "uppercase",
                color: p.popular ? "#9a958c" : "var(--ink-3)",
              }}>{p.name}</div>

              <div style={{ marginTop: 20, display: "flex", alignItems: "baseline", gap: 8 }}>
                <span style={{ fontFamily: "var(--font-serif)", fontSize: 64, lineHeight: 1, letterSpacing: "-0.02em" }}>
                  ${p.price}
                </span>
                <span className="mono" style={{ fontSize: 12, color: p.popular ? "#9a958c" : "var(--ink-3)" }}>/mo</span>
              </div>

              <ul style={{ listStyle: "none", padding: 0, margin: "24px 0", display: "grid", gap: 10, fontSize: 14 }}>
                <Spec label="Websites" val={p.sites} dark={p.popular} />
                <Spec label="Disk" val={p.disk} dark={p.popular} />
                <Spec label="Bandwidth" val={p.bw} dark={p.popular} />
                <Spec label="Databases" val={p.db} dark={p.popular} />
                <Spec label="Free SSL" val="✓" dark={p.popular} />
                <Spec label="Daily backups" val="✓" dark={p.popular} />
              </ul>

              <Link
                to={WHMCS.signup}
                className={p.popular ? "btn btn-accent" : "btn btn-primary"}
                style={{ width: "100%", justifyContent: "center" }}
              >
                Choose {p.name} <span className="arrow">→</span>
              </Link>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Spec({ label, val, dark }) {
  return (
    <li style={{
      display: "flex",
      justifyContent: "space-between",
      borderBottom: `1px dashed ${dark ? "#2a2a2a" : "var(--line)"}`,
      paddingBottom: 8,
    }}>
      <span style={{ color: dark ? "#9a958c" : "var(--ink-3)" }}>{label}</span>
      <span className="mono" style={{ fontSize: 13 }}>{val}</span>
    </li>
  );
}

/* ---------- Testimonials ---------- */
function TestimonialsBlock() {
  const quotes = [
    { name: "Daniel R.", role: "Agency owner", body: "Moved 14 client sites from a big-name host. Pages that took 4s now take 600ms. Support actually replies.", stars: 5 },
    { name: "Priya S.", role: "WordPress dev", body: "The LiteSpeed + NVMe combo is the real deal. Lighthouse scores went up without me doing anything.", stars: 5 },
    { name: "Marcus T.", role: "Small business", body: "Simple pricing, no upsells, free migration. Been with Loominost for 2 years. Haven't thought about hosting since.", stars: 5 },
  ];
  return (
    <section style={{ padding: "80px 0 40px" }}>
      <div className="wrap">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 40 }}>
          <div>
            <div className="h-eyebrow"><span className="dot" />Trustpilot</div>
            <h2 style={{
              fontFamily: "var(--font-serif)",
              fontSize: "clamp(36px, 4.5vw, 56px)",
              letterSpacing: "-0.02em",
              lineHeight: 1,
              marginTop: 16,
            }}>
              <em style={{ color: "var(--accent-ink)", fontStyle: "italic" }}>4.8 stars</em> across 400+ reviews.
            </h2>
            <a
              href="https://au.trustpilot.com/review/loominost.com"
              target="_blank"
              rel="noopener noreferrer"
              className="btn btn-ghost"
              style={{ marginTop: 20 }}
            >
              Read reviews on Trustpilot <span className="arrow">→</span>
            </a>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16 }}>
          {quotes.map((q, i) => (
            <div key={i} style={{
              background: "#fff",
              border: "1px solid var(--line)",
              borderRadius: 18,
              padding: 28,
              display: "flex",
              flexDirection: "column",
              gap: 20,
            }}>
              <div style={{ display: "flex", gap: 2, color: "var(--accent)" }}>
                {Array.from({ length: q.stars }).map((_, si) => (
                  <svg key={si} width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.9 6.9L22 10l-5.5 4.8L18.2 22 12 18l-6.2 4 1.7-7.2L2 10l7.1-1.1L12 2z"/></svg>
                ))}
              </div>
              <p style={{ margin: 0, fontFamily: "var(--font-serif)", fontSize: 22, lineHeight: 1.35, letterSpacing: "-0.01em" }}>
                "{q.body}"
              </p>
              <div style={{ marginTop: "auto", display: "flex", alignItems: "center", gap: 12 }}>
                <div style={{
                  width: 36, height: 36, borderRadius: 999,
                  background: "var(--bg-3)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontSize: 13, fontWeight: 500,
                }}>{q.name[0]}</div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 500 }}>{q.name}</div>
                  <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)" }}>{q.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Final CTA ---------- */
function FinalCTA() {
  return (
    <section style={{ padding: "80px 0 0" }}>
      <div className="wrap">
        <div style={{
          background: "linear-gradient(135deg, #0A1220 0%, #1D4ED8 55%, #2563EB 100%)",
          borderRadius: 24,
          padding: "80px 48px",
          position: "relative",
          overflow: "hidden",
          color: "#EAF2FF",
        }}>
          {/* Decorative sun arcs */}
          <svg style={{ position: "absolute", right: -120, top: -120, opacity: 0.25 }} width="500" height="500" viewBox="0 0 500 500">
            {Array.from({ length: 8 }).map((_, i) => (
              <circle key={i} cx="250" cy="250" r={50 + i * 28} fill="none" stroke="#fff" strokeWidth="1" />
            ))}
          </svg>

          <div style={{ position: "relative", maxWidth: 700 }}>
            <div className="h-eyebrow" style={{ color: "#9CC2FF" }}>
              <span className="dot" style={{ background: "#60A5FA" }} /> Ready in 60 seconds
            </div>
            <h2 style={{
              fontFamily: "var(--font-serif)",
              fontSize: "clamp(48px, 6vw, 88px)",
              letterSpacing: "-0.02em",
              lineHeight: 0.95,
              marginTop: 20,
              color: "#fff",
            }}>
              Let's make your<br/>
              site <em style={{ color: "#60A5FA" }}>shine.</em>
            </h2>
            <div style={{ marginTop: 36, display: "flex", gap: 10, flexWrap: "wrap" }}>
              <Link to={WHMCS.signup} className="btn" style={{ background: "#fff", color: "#0A1220" }}>
                Start from $2.95/mo <span className="arrow">→</span>
              </Link>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HomePage });