import { useState } from "react";
import SiteLayout from "@/components/SiteLayout";
import AnimateIn from "@/components/AnimateIn";
import { ContactUsModal, GetPriceModal } from "@/components/ContactModals";
import {
  Activity,
  ShieldCheck,
  Globe,
  Clock,
  Server,
  Radio,
  Search,
  Bell,
  BarChart3,
  Wrench,
  Code2,
  MapPin,
  Check,
  ArrowRight,
  Zap,
  Eye,
  Mail,
  Share2,
  Palette,
  AlertTriangle,
} from "lucide-react";

/**
 * Uptime Monitor page — clone of https://doiteasy.net/uptime-monitor
 *
 * Sections:
 *  - Hero (headline, free-tier pitch, animated monitor ticker mockup)
 *  - Anchor nav (Monitored / Advanced / Reliability / Pricing)
 *  - Monitor types grid (7 categories, switchable tabs)
 *  - Advanced features (6 feature cards)
 *  - Status-page promo
 *  - Pricing (3 tiers)
 *  - FAQ
 *  - Final CTA
 * Uses the site's brand-green + gold palette and shared modals.
 */

const monitorTypes = [
  {
    key: "website",
    icon: Globe,
    title: "Website Monitoring",
    desc: "Be the first to know when your website goes down. Reliable HTTP/HTTPS monitoring from multiple global locations alerts you before visitors ever notice — so you protect revenue and reputation.",
    bullets: [
      "Checks every 30s – 5 min",
      "HTTP, HTTPS, HEAD & GET",
      "Multi-region verification",
    ],
  },
  {
    key: "ssl",
    icon: ShieldCheck,
    title: "SSL Monitoring",
    desc: "Never lose visitors to an expired certificate again. Get notifications 30, 14 and 7 days before expiration, plus instant alerts if a certificate becomes invalid or mis-issued.",
    bullets: [
      "30 / 14 / 7 day expiry alerts",
      "Invalid / self-signed detection",
      "Chain & hostname validation",
    ],
  },
  {
    key: "domain",
    icon: Clock,
    title: "Domain Expiration",
    desc: "Keep your online presence safe by tracking domain expiration dates. Receive reminders in advance so you never accidentally lose a domain to lapsed renewal.",
    bullets: [
      "Automatic WHOIS lookups",
      "Expiry reminders 60 / 30 / 7 days",
      "Status change alerts",
    ],
  },
  {
    key: "cron",
    icon: Activity,
    title: "Cron Job Monitoring",
    desc: "Also known as heartbeat monitoring — watch recurring background jobs, scheduled tasks or intranet devices. If a job misses its check-in, you'll know immediately.",
    bullets: [
      "Custom ping URLs",
      "Grace periods & schedules",
      "Missed / late run alerts",
    ],
  },
  {
    key: "port",
    icon: Server,
    title: "Port Monitoring",
    desc: "Is the mail service still up? How about that critical database port? Verify any TCP service running on any port, anywhere on your infrastructure.",
    bullets: [
      "TCP port checks",
      "SMTP / POP3 / IMAP / FTP / SSH",
      "Custom port & protocol support",
    ],
  },
  {
    key: "ping",
    icon: Radio,
    title: "Ping Monitoring",
    desc: "Leverage one of the most trusted tools for checking availability. ICMP ping lets you quickly verify the reachability of routers, switches and servers.",
    bullets: [
      "ICMP & TCP ping",
      "Latency & packet loss tracking",
      "Global probe network",
    ],
  },
  {
    key: "keyword",
    icon: Search,
    title: "Keyword Monitoring",
    desc: "Check for the presence — or absence — of specific text in an HTTP response body (HTML or JSON). Perfect for catching soft-failures that still return 200 OK.",
    bullets: [
      "HTML & JSON body search",
      "Presence / absence conditions",
      "Regex pattern matching",
    ],
  },
];

const advancedFeatures = [
  {
    icon: Share2,
    title: "Share Incident Updates",
    desc: "Send real-time status updates by email and SMS to your status page subscribers — and keep customers informed during outages.",
  },
  {
    icon: Palette,
    title: "White-Labeled Status Pages",
    desc: "Customize colors, upload your logo, or map your own custom domain so status pages feel entirely branded to your business.",
  },
  {
    icon: BarChart3,
    title: "Response Time Monitoring",
    desc: "Track response times on beautiful charts to spot slow performance before it turns into a full outage.",
  },
  {
    icon: Wrench,
    title: "Maintenance Windows",
    desc: "Schedule maintenance windows to pause alerts during planned downtime — keep your team focused on real incidents.",
  },
  {
    icon: Code2,
    title: "Custom HTTP Requests",
    desc: "Need a special header, auth token or payload? Build custom HTTP requests with full control over method, headers, and body.",
  },
  {
    icon: MapPin,
    title: "Multi-Location Checks",
    desc: "Every incident is confirmed from multiple global locations to eliminate false positives and provide a truly accurate picture.",
  },
];

const plans = [
  {
    name: "Free",
    tagline: "Perfect for solo developers & side projects",
    price: "$0",
    cadence: "/forever",
    highlight: false,
    cta: "Start Free",
    specs: [
      "50 monitors included",
      "5-minute check interval",
      "Email alerts",
      "3-month data retention",
      "1 public status page",
      "Community support",
    ],
  },
  {
    name: "Pro",
    tagline: "Best for growing businesses & SaaS teams",
    price: "$9.99",
    cadence: "/month",
    highlight: true,
    badge: "MOST POPULAR",
    cta: "Order Now",
    specs: [
      "200 monitors",
      "30-second check interval",
      "Email + SMS + Slack + Webhook",
      "12-month data retention",
      "Unlimited status pages",
      "Maintenance windows",
      "Custom HTTP requests",
      "Multi-location checks",
      "24/7 priority support",
    ],
  },
  {
    name: "Business",
    tagline: "For agencies & mission-critical infrastructure",
    price: "$29.99",
    cadence: "/month",
    highlight: false,
    cta: "Contact Sales",
    specs: [
      "1,000 monitors",
      "30-second check interval",
      "All notification channels",
      "Unlimited retention",
      "White-label status pages",
      "Custom domains for status pages",
      "SSO / SAML login",
      "API & webhook access",
      "Dedicated account manager",
    ],
  },
];

const faqs = [
  {
    q: "How does uptime monitoring work?",
    a: "Our probes located around the world send requests to your website, API or service at configurable intervals. If a check fails, we re-verify from additional locations before notifying you — this prevents false alerts caused by transient network issues.",
  },
  {
    q: "Is the Free plan really free forever?",
    a: "Yes. The Free plan includes 50 monitors with 5-minute checks and email alerts, free forever. You can upgrade to Pro or Business any time if you need faster checks, more monitors, or advanced notification channels.",
  },
  {
    q: "Which notification channels are supported?",
    a: "Email is available on all plans. Pro and Business add SMS, Slack, Microsoft Teams, Discord, Telegram, PagerDuty, Opsgenie, and custom webhooks so you can route alerts wherever your team lives.",
  },
  {
    q: "Can I create a public status page for my users?",
    a: "Absolutely. Every plan includes at least one hosted status page. Pro and Business plans let you customize colors, add your logo, and map a custom domain (e.g. status.yourcompany.com) for a fully branded experience.",
  },
  {
    q: "How quickly will I be alerted when my site goes down?",
    a: "With 30-second checks on Pro / Business, you'll typically receive an alert within 60 seconds of a failure — after our probes verify the incident from multiple global locations to eliminate false positives.",
  },
  {
    q: "Do you offer an API for integration?",
    a: "Yes — Pro and Business plans include a full REST API and webhook access so you can create monitors, fetch incidents, and integrate uptime data into your existing internal dashboards or tooling.",
  },
];

export default function UptimeMonitor() {
  const [priceOpen, setPriceOpen] = useState(false);
  const [contactOpen, setContactOpen] = useState(false);
  const [activeMonitor, setActiveMonitor] = useState<string>("website");
  const [activeFaq, setActiveFaq] = useState<number | null>(0);

  const current =
    monitorTypes.find((m) => m.key === activeMonitor) || monitorTypes[0];

  return (
    <SiteLayout>
      {/* ===== HERO ===== */}
      <section className="relative overflow-hidden bg-[#052217] text-white">
        <div className="absolute inset-0 -z-0">
          <div className="absolute inset-0 bg-gradient-to-br from-[#052217] via-[#063019] to-[#0b6e3e]" />
          <div className="absolute -top-32 -right-32 w-[40rem] h-[40rem] rounded-full bg-emerald-500/25 blur-3xl" />
          <div className="absolute -bottom-40 -left-24 w-[36rem] h-[36rem] rounded-full bg-[#0b6e3e]/40 blur-3xl" />
          <div
            className="absolute inset-0 opacity-10"
            style={{
              backgroundImage:
                "radial-gradient(rgba(255,255,255,0.4) 1px, transparent 1px)",
              backgroundSize: "28px 28px",
            }}
          />
        </div>

        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-32 pb-24">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <AnimateIn direction="right">
              <div className="inline-flex items-center gap-2 bg-emerald-500/20 border border-emerald-400/40 rounded-full px-4 py-1.5 text-xs md:text-sm mb-5">
                <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
                Always-on uptime monitoring — 50 monitors FREE forever
              </div>

              <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold leading-tight mb-4">
                The world's leading{" "}
                <span className="text-[#f5c400]">uptime monitoring</span>{" "}
                service.
              </h1>
              <p className="text-slate-300 mb-8 leading-relaxed max-w-xl text-lg">
                Get <span className="text-[#f5c400] font-bold">50 monitors</span>{" "}
                with 5-minute checks — totally free. Add SSL, domain, cron,
                port, ping and keyword checks, plus branded status pages, as
                your team grows.
              </p>

              <div className="flex flex-wrap gap-3 mb-6">
                <button
                  type="button"
                  onClick={() => setPriceOpen(true)}
                  className="px-7 py-3.5 rounded-md bg-[#f5c400] text-slate-900 font-bold hover:bg-yellow-400 transition shadow-2xl shadow-[#f5c400]/30 inline-flex items-center gap-2"
                >
                  Start monitoring in 30 seconds{" "}
                  <ArrowRight className="w-4 h-4" />
                </button>
                <a
                  href="#plans"
                  className="px-7 py-3.5 rounded-md bg-white/10 border border-white/20 text-white font-bold hover:bg-white/20 transition backdrop-blur-sm"
                >
                  View Pricing
                </a>
              </div>
              <div className="flex flex-wrap gap-5 text-xs text-slate-400">
                <span className="inline-flex items-center gap-1.5">
                  <Check className="w-3.5 h-3.5 text-emerald-400" /> No credit
                  card required
                </span>
                <span className="inline-flex items-center gap-1.5">
                  <Check className="w-3.5 h-3.5 text-emerald-400" /> Multi-region
                  checks
                </span>
                <span className="inline-flex items-center gap-1.5">
                  <Check className="w-3.5 h-3.5 text-emerald-400" /> SMS + Slack
                  + Webhook alerts
                </span>
              </div>
            </AnimateIn>

            <AnimateIn direction="left" delay={150}>
              <div className="relative mx-auto w-full max-w-lg">
                {/* Floating status card */}
                <div className="absolute -top-5 -left-5 z-10 bg-white text-slate-900 rounded-2xl shadow-xl px-4 py-2.5 flex items-center gap-2">
                  <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
                  <div>
                    <div className="text-[10px] text-slate-500 uppercase tracking-widest">
                      All systems
                    </div>
                    <div className="text-sm font-bold text-emerald-600">
                      Operational
                    </div>
                  </div>
                </div>

                {/* Monitor dashboard mockup */}
                <div className="rounded-2xl bg-white text-slate-900 shadow-2xl overflow-hidden border border-slate-200">
                  {/* Toolbar */}
                  <div className="bg-slate-100 border-b border-slate-200 px-4 py-3 flex items-center gap-2">
                    <span className="w-2.5 h-2.5 rounded-full bg-red-400" />
                    <span className="w-2.5 h-2.5 rounded-full bg-yellow-400" />
                    <span className="w-2.5 h-2.5 rounded-full bg-green-500" />
                    <div className="ml-3 flex-1 bg-white border border-slate-200 rounded px-3 py-1 text-[11px] text-slate-500 truncate">
                      🔒 app.doiteasy.net/uptime
                    </div>
                  </div>

                  {/* Dashboard body */}
                  <div className="p-4 bg-slate-50 min-h-[320px]">
                    <div className="flex items-center justify-between mb-3">
                      <div>
                        <h3 className="text-sm font-bold">Monitors</h3>
                        <p className="text-[10px] text-slate-500">
                          Checked every 30 seconds
                        </p>
                      </div>
                      <div className="flex items-center gap-2">
                        <div className="text-right">
                          <div className="text-[10px] text-slate-500">
                            Overall uptime
                          </div>
                          <div className="text-sm font-extrabold text-emerald-600">
                            99.982%
                          </div>
                        </div>
                      </div>
                    </div>

                    <div className="space-y-2">
                      {[
                        {
                          name: "yoursite.com",
                          status: "up",
                          ms: "142ms",
                          up: "99.99%",
                        },
                        {
                          name: "api.yoursite.com",
                          status: "up",
                          ms: "88ms",
                          up: "99.98%",
                        },
                        {
                          name: "shop.yoursite.com",
                          status: "up",
                          ms: "201ms",
                          up: "99.95%",
                        },
                        {
                          name: "staging.yoursite.com",
                          status: "down",
                          ms: "—",
                          up: "97.42%",
                        },
                        {
                          name: "mail.yoursite.com",
                          status: "up",
                          ms: "112ms",
                          up: "99.99%",
                        },
                      ].map((m) => (
                        <div
                          key={m.name}
                          className="bg-white rounded-lg border border-slate-200 px-3 py-2.5 flex items-center gap-3"
                        >
                          <span
                            className={`w-2.5 h-2.5 rounded-full shrink-0 ${
                              m.status === "up"
                                ? "bg-emerald-500 animate-pulse"
                                : "bg-red-500"
                            }`}
                          />
                          <div className="flex-1 min-w-0">
                            <div className="text-xs font-bold truncate">
                              {m.name}
                            </div>
                            <div className="flex gap-0.5 mt-1">
                              {Array.from({ length: 24 }).map((_, i) => (
                                <span
                                  key={i}
                                  className={`w-1 h-3 rounded-sm ${
                                    m.status === "down" && i > 20
                                      ? "bg-red-400"
                                      : "bg-emerald-500"
                                  }`}
                                />
                              ))}
                            </div>
                          </div>
                          <div className="text-right shrink-0">
                            <div className="text-[10px] text-slate-500">
                              {m.ms}
                            </div>
                            <div
                              className={`text-[11px] font-bold ${
                                m.status === "up"
                                  ? "text-emerald-600"
                                  : "text-red-600"
                              }`}
                            >
                              {m.up}
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>

                {/* Floating alert card */}
                <div className="absolute -bottom-5 -right-5 bg-white rounded-2xl shadow-xl px-4 py-2.5 flex items-center gap-3 max-w-[220px]">
                  <div className="w-11 h-11 rounded-full bg-gradient-to-br from-amber-400 to-amber-600 text-white flex items-center justify-center">
                    <Bell className="w-5 h-5" />
                  </div>
                  <div className="text-slate-900">
                    <div className="text-[10px] text-amber-600 uppercase font-bold">
                      Alert sent
                    </div>
                    <div className="text-[11px] text-slate-600 leading-tight">
                      SMS · Slack · Email
                    </div>
                  </div>
                </div>
              </div>
            </AnimateIn>
          </div>

          {/* Anchor nav */}
          <div className="mt-16 flex flex-wrap justify-center gap-4 text-sm">
            {[
              { href: "#monitored", label: "Monitored" },
              { href: "#advanced", label: "Advanced Features" },
              { href: "#reliability", label: "Reliability" },
              { href: "#plans", label: "Pricing" },
            ].map((a) => (
              <a
                key={a.href}
                href={a.href}
                className="px-5 py-2 rounded-full bg-white/10 border border-white/20 text-white font-semibold hover:bg-white/20 transition backdrop-blur-sm"
              >
                {a.label}
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* ===== MONITOR TYPES ===== */}
      <section id="monitored" className="py-20 bg-white scroll-mt-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <AnimateIn className="text-center max-w-3xl mx-auto mb-12">
            <span className="text-[#0b6e3e] font-bold uppercase tracking-widest text-sm">
              What We Monitor
            </span>
            <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mt-2 mb-4">
              All you really care about —{" "}
              <span className="text-[#0b6e3e]">monitored</span> in one place.
            </h2>
            <p className="text-slate-600 leading-relaxed">
              Seven battle-tested monitor types, one unified dashboard. Watch
              your websites, certificates, domains, background jobs and network
              services — all with the same alerting &amp; status-page stack.
            </p>
          </AnimateIn>

          {/* Tabs */}
          <div className="flex flex-wrap justify-center gap-2 mb-8">
            {monitorTypes.map((m) => {
              const active = m.key === activeMonitor;
              return (
                <button
                  key={m.key}
                  type="button"
                  onClick={() => setActiveMonitor(m.key)}
                  className={`inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-semibold transition border ${
                    active
                      ? "bg-[#0b6e3e] text-white border-[#0b6e3e] shadow-md"
                      : "bg-white text-slate-700 border-slate-200 hover:border-[#0b6e3e] hover:text-[#0b6e3e]"
                  }`}
                >
                  <m.icon className="w-4 h-4" />
                  {m.title}
                </button>
              );
            })}
          </div>

          {/* Active panel */}
          <AnimateIn
            key={current.key}
            className="grid md:grid-cols-2 gap-8 items-center bg-gradient-to-br from-slate-50 to-white border border-slate-200 rounded-3xl p-8 md:p-12"
          >
            <div>
              <div className="w-16 h-16 rounded-2xl bg-[#0b6e3e]/10 text-[#0b6e3e] flex items-center justify-center mb-5">
                <current.icon className="w-7 h-7" />
              </div>
              <h3 className="text-2xl md:text-3xl font-bold text-slate-900 mb-3">
                {current.title}
              </h3>
              <p className="text-slate-600 leading-relaxed mb-6">
                {current.desc}
              </p>
              <ul className="space-y-2.5 mb-6">
                {current.bullets.map((b) => (
                  <li
                    key={b}
                    className="flex items-start gap-2 text-sm text-slate-700"
                  >
                    <Check
                      className="w-4 h-4 text-[#0b6e3e] shrink-0 mt-0.5"
                      strokeWidth={3}
                    />
                    {b}
                  </li>
                ))}
              </ul>
              <button
                type="button"
                onClick={() => setPriceOpen(true)}
                className="px-5 py-2.5 bg-[#0b6e3e] text-white rounded-md font-bold hover:bg-[#0a8048] transition inline-flex items-center gap-2"
              >
                Enable {current.title} <ArrowRight className="w-4 h-4" />
              </button>
            </div>

            {/* Right visual — stylized monitor preview */}
            <div className="rounded-2xl bg-[#052217] text-white p-6 shadow-xl relative overflow-hidden">
              <div className="absolute inset-0 opacity-20 bg-gradient-to-br from-emerald-500/40 to-transparent" />
              <div className="relative">
                <div className="flex items-center justify-between mb-4">
                  <div className="flex items-center gap-2">
                    <span className="w-2.5 h-2.5 rounded-full bg-emerald-400 animate-pulse" />
                    <span className="text-xs font-semibold">Live</span>
                  </div>
                  <span className="text-[10px] text-slate-400 uppercase">
                    {current.title}
                  </span>
                </div>
                <div className="grid grid-cols-2 gap-3">
                  {[
                    { k: "Uptime", v: "99.99%", col: "text-emerald-400" },
                    { k: "Response", v: "142ms", col: "text-[#f5c400]" },
                    { k: "Checks", v: "1,240", col: "text-sky-300" },
                    { k: "Incidents", v: "0", col: "text-emerald-400" },
                  ].map((s) => (
                    <div
                      key={s.k}
                      className="bg-white/5 border border-white/10 rounded-lg p-3"
                    >
                      <div className="text-[10px] text-slate-400 uppercase">
                        {s.k}
                      </div>
                      <div className={`text-xl font-extrabold ${s.col}`}>
                        {s.v}
                      </div>
                    </div>
                  ))}
                </div>
                <div className="mt-4 flex gap-0.5">
                  {Array.from({ length: 60 }).map((_, i) => (
                    <span
                      key={i}
                      className={`flex-1 h-6 rounded-sm ${
                        i === 45 ? "bg-amber-400" : "bg-emerald-500"
                      }`}
                    />
                  ))}
                </div>
                <div className="mt-2 text-[10px] text-slate-400 flex justify-between">
                  <span>60 min ago</span>
                  <span>now</span>
                </div>
              </div>
            </div>
          </AnimateIn>
        </div>
      </section>

      {/* ===== ADVANCED FEATURES ===== */}
      <section id="advanced" className="py-20 bg-slate-50 scroll-mt-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <AnimateIn className="text-center max-w-3xl mx-auto mb-14">
            <span className="text-[#0b6e3e] font-bold uppercase tracking-widest text-sm">
              Advanced
            </span>
            <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mt-2 mb-4">
              Advanced features for{" "}
              <span className="text-[#0b6e3e]">advanced users.</span>
            </h2>
            <p className="text-slate-600 leading-relaxed">
              Everything power users expect — response time charts, maintenance
              windows, custom HTTP, multi-location checks, and fully branded
              status pages.
            </p>
          </AnimateIn>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {advancedFeatures.map((f, idx) => (
              <AnimateIn
                key={f.title}
                direction="up"
                delay={idx * 90}
                className="group relative rounded-3xl p-7 bg-white border border-slate-200 hover:border-[#0b6e3e] hover:shadow-2xl transition"
              >
                <div className="w-14 h-14 rounded-2xl bg-[#0b6e3e]/10 text-[#0b6e3e] flex items-center justify-center mb-4 group-hover:bg-[#0b6e3e] group-hover:text-white transition">
                  <f.icon className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-bold text-slate-900 mb-2">
                  {f.title}
                </h3>
                <p className="text-sm text-slate-600 leading-relaxed">
                  {f.desc}
                </p>
              </AnimateIn>
            ))}
          </div>
        </div>
      </section>

      {/* ===== STATUS PAGE PROMO ===== */}
      <section id="reliability" className="py-20 bg-white scroll-mt-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid lg:grid-cols-2 gap-12 items-center">
          <AnimateIn direction="right">
            <span className="text-[#0b6e3e] font-bold uppercase tracking-widest text-sm">
              Reliability
            </span>
            <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mt-2 mb-5 leading-tight">
              Showcase reliability with a hosted{" "}
              <span className="text-[#0b6e3e]">status page.</span>
            </h2>
            <p className="text-slate-600 mb-6 leading-relaxed">
              Share incidents and scheduled maintenance with your users through
              beautiful hosted status pages and crisp email notifications —
              keeping trust high even on bad days.
            </p>

            <ul className="space-y-3 mb-8">
              {[
                "Public or private (password-protected) pages",
                "Custom domain (status.yourdomain.com)",
                "Logo, colors and typography",
                "Email & SMS subscriber notifications",
                "Incident history & uptime SLA reporting",
              ].map((t) => (
                <li key={t} className="flex items-start gap-3">
                  <span className="w-5 h-5 rounded-full bg-[#0b6e3e] flex items-center justify-center shrink-0 mt-0.5">
                    <Check className="w-3 h-3 text-white" strokeWidth={3} />
                  </span>
                  <span className="text-slate-700">{t}</span>
                </li>
              ))}
            </ul>

            <div className="flex flex-wrap gap-3">
              <button
                type="button"
                onClick={() => setPriceOpen(true)}
                className="px-6 py-3 bg-[#0b6e3e] text-white font-bold rounded-md hover:bg-[#0a8048] transition shadow-md"
              >
                Get a free status page
              </button>
              <button
                type="button"
                onClick={() => setContactOpen(true)}
                className="px-6 py-3 !bg-transparent !hover:bg-transparent border-2 border-[#0b6e3e] text-[#0b6e3e] font-bold rounded-md hover:!bg-[#0b6e3e] hover:!text-white transition"
              >
                Check live demo
              </button>
            </div>
          </AnimateIn>

          <AnimateIn direction="left" delay={150}>
            <div className="rounded-2xl bg-white border border-slate-200 shadow-2xl overflow-hidden">
              {/* Status page header */}
              <div className="bg-gradient-to-r from-[#0b6e3e] to-[#0a8048] text-white p-5">
                <div className="flex items-center gap-3">
                  <div className="w-9 h-9 rounded-lg bg-white/20 flex items-center justify-center">
                    <Eye className="w-5 h-5" />
                  </div>
                  <div>
                    <div className="text-xs text-emerald-100">
                      status.yourcompany.com
                    </div>
                    <div className="text-lg font-bold">
                      All systems operational
                    </div>
                  </div>
                  <div className="ml-auto">
                    <span className="w-3 h-3 rounded-full bg-emerald-300 animate-pulse block" />
                  </div>
                </div>
              </div>

              {/* Components list */}
              <div className="p-5 space-y-3 bg-slate-50">
                {[
                  { label: "API", status: "Operational", color: "emerald" },
                  { label: "Website", status: "Operational", color: "emerald" },
                  {
                    label: "Dashboard",
                    status: "Operational",
                    color: "emerald",
                  },
                  { label: "Payments", status: "Degraded", color: "amber" },
                  { label: "Email", status: "Operational", color: "emerald" },
                ].map((c) => (
                  <div
                    key={c.label}
                    className="flex items-center justify-between bg-white border border-slate-200 rounded-lg px-4 py-3"
                  >
                    <span className="text-sm font-semibold text-slate-800">
                      {c.label}
                    </span>
                    <div className="flex items-center gap-2">
                      <span
                        className={`w-2 h-2 rounded-full ${
                          c.color === "emerald"
                            ? "bg-emerald-500"
                            : "bg-amber-500"
                        }`}
                      />
                      <span
                        className={`text-xs font-bold ${
                          c.color === "emerald"
                            ? "text-emerald-600"
                            : "text-amber-600"
                        }`}
                      >
                        {c.status}
                      </span>
                    </div>
                  </div>
                ))}
              </div>

              {/* 90-day bar */}
              <div className="px-5 pb-5">
                <div className="text-[11px] text-slate-500 mb-1.5 flex justify-between">
                  <span>Last 90 days</span>
                  <span className="text-emerald-600 font-bold">99.98%</span>
                </div>
                <div className="flex gap-0.5">
                  {Array.from({ length: 90 }).map((_, i) => (
                    <span
                      key={i}
                      className={`flex-1 h-5 rounded-sm ${
                        i === 62 ? "bg-amber-400" : "bg-emerald-500"
                      }`}
                    />
                  ))}
                </div>
              </div>
            </div>
          </AnimateIn>
        </div>
      </section>

      {/* ===== RELIABILITY STRIP ===== */}
      <section className="py-14 bg-[#052217] text-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid md:grid-cols-4 gap-6 text-center">
          {[
            { icon: Zap, k: "30s", v: "Check interval" },
            { icon: MapPin, k: "15+", v: "Global probe regions" },
            { icon: Bell, k: "< 60s", v: "Time-to-alert" },
            { icon: ShieldCheck, k: "99.99%", v: "Monitor uptime SLA" },
          ].map((s) => (
            <AnimateIn
              key={s.v}
              className="flex flex-col items-center"
              direction="up"
            >
              <div className="w-12 h-12 rounded-full bg-white/10 text-[#f5c400] flex items-center justify-center mb-3">
                <s.icon className="w-5 h-5" />
              </div>
              <div className="text-3xl font-extrabold text-[#f5c400]">
                {s.k}
              </div>
              <div className="text-xs text-slate-300 mt-1">{s.v}</div>
            </AnimateIn>
          ))}
        </div>
      </section>

      {/* ===== PRICING ===== */}
      <section id="plans" className="py-20 bg-slate-50 scroll-mt-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <AnimateIn className="text-center max-w-2xl mx-auto mb-14">
            <span className="text-[#0b6e3e] font-bold uppercase tracking-widest text-sm">
              Pricing
            </span>
            <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mt-2 mb-3">
              Simple pricing that scales with you
            </h2>
            <p className="text-slate-600">
              Start free forever — upgrade only when you need faster checks,
              more monitors or advanced integrations.
            </p>
          </AnimateIn>

          <div className="grid md:grid-cols-3 gap-6">
            {plans.map((p, idx) => (
              <AnimateIn
                key={p.name}
                delay={idx * 120}
                className={`relative rounded-3xl p-8 border flex flex-col transition hover:-translate-y-1 hover:shadow-2xl ${
                  p.highlight
                    ? "bg-gradient-to-br from-[#0b6e3e] to-[#063019] text-white border-[#0b6e3e] shadow-2xl scale-[1.03]"
                    : "bg-white text-slate-900 border-slate-200 shadow"
                }`}
              >
                {p.highlight && p.badge && (
                  <div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-[#f5c400] text-slate-900 text-xs font-bold px-4 py-1 rounded-full">
                    {p.badge}
                  </div>
                )}
                <div className="mb-5">
                  <h3 className="text-xl font-extrabold mb-1">{p.name}</h3>
                  <p
                    className={`text-xs mb-4 ${
                      p.highlight ? "text-slate-300" : "text-slate-500"
                    }`}
                  >
                    {p.tagline}
                  </p>
                  <div>
                    <span
                      className={`text-4xl font-extrabold ${
                        p.highlight ? "text-[#f5c400]" : "text-[#0b6e3e]"
                      }`}
                    >
                      {p.price}
                    </span>
                    <span
                      className={`ml-1 text-sm ${
                        p.highlight ? "text-slate-300" : "text-slate-500"
                      }`}
                    >
                      {p.cadence}
                    </span>
                  </div>
                </div>

                <ul
                  className={`space-y-2.5 mb-7 text-sm flex-1 ${
                    p.highlight ? "text-slate-200" : "text-slate-700"
                  }`}
                >
                  {p.specs.map((s) => (
                    <li key={s} className="flex items-start gap-2">
                      <Check
                        className={`w-4 h-4 shrink-0 mt-0.5 ${
                          p.highlight ? "text-[#f5c400]" : "text-[#0b6e3e]"
                        }`}
                        strokeWidth={3}
                      />
                      <span>{s}</span>
                    </li>
                  ))}
                </ul>

                <button
                  type="button"
                  onClick={() =>
                    p.cta === "Contact Sales"
                      ? setContactOpen(true)
                      : setPriceOpen(true)
                  }
                  className={`block text-center py-3 rounded-md font-bold transition ${
                    p.highlight
                      ? "bg-[#f5c400] text-slate-900 hover:bg-yellow-400"
                      : "bg-[#0b6e3e] text-white hover:bg-[#0a8048]"
                  }`}
                >
                  {p.cta}
                </button>
              </AnimateIn>
            ))}
          </div>
        </div>
      </section>

      {/* ===== FAQ ===== */}
      <section className="py-20 bg-white">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <AnimateIn className="text-center mb-12">
            <span className="text-[#0b6e3e] font-bold uppercase tracking-widest text-sm">
              FAQ
            </span>
            <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mt-2">
              Uptime Monitor — questions
            </h2>
          </AnimateIn>

          <div className="space-y-3">
            {faqs.map((f, i) => {
              const open = activeFaq === i;
              return (
                <AnimateIn
                  key={f.q}
                  delay={i * 60}
                  className={`rounded-2xl border transition ${
                    open
                      ? "bg-white border-[#0b6e3e] shadow-lg"
                      : "bg-slate-50 border-slate-200 hover:border-[#0b6e3e]"
                  }`}
                >
                  <button
                    type="button"
                    onClick={() => setActiveFaq(open ? null : i)}
                    className="w-full flex items-center justify-between gap-4 px-5 py-4 text-left"
                  >
                    <span className="font-bold text-slate-900">{f.q}</span>
                    <span
                      className={`w-6 h-6 rounded-full flex items-center justify-center shrink-0 transition ${
                        open
                          ? "bg-[#0b6e3e] text-white rotate-45"
                          : "bg-slate-200 text-slate-600"
                      }`}
                    >
                      +
                    </span>
                  </button>
                  {open && (
                    <div className="px-5 pb-5 text-sm text-slate-600 leading-relaxed">
                      {f.a}
                    </div>
                  )}
                </AnimateIn>
              );
            })}
          </div>
        </div>
      </section>

      {/* ===== FINAL CTA ===== */}
      <section className="py-20 bg-slate-50">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <AnimateIn className="rounded-3xl bg-gradient-to-br from-[#0b6e3e] via-[#0a8048] to-[#063019] text-white p-10 md:p-14 shadow-2xl text-center relative overflow-hidden">
            <div className="absolute -top-20 -right-20 w-72 h-72 rounded-full bg-white/10 blur-3xl" />
            <div className="absolute -bottom-20 -left-20 w-72 h-72 rounded-full bg-black/20 blur-3xl" />
            <div className="relative">
              <AlertTriangle className="w-10 h-10 text-[#f5c400] mx-auto mb-4" />
              <h2 className="text-3xl md:text-5xl font-extrabold mb-4">
                Don't wait for your users to tell you you're down.
              </h2>
              <p className="text-slate-100 max-w-2xl mx-auto mb-8">
                Start monitoring in 30 seconds with 50 free monitors — upgrade
                only when you need more speed, volume or advanced alerts.
              </p>
              <div className="flex flex-wrap justify-center gap-3">
                <button
                  type="button"
                  onClick={() => setPriceOpen(true)}
                  className="px-8 py-3.5 bg-[#f5c400] text-slate-900 font-bold rounded-md hover:bg-yellow-400 transition inline-flex items-center gap-2"
                >
                  Start free <ArrowRight className="w-4 h-4" />
                </button>
                <button
                  type="button"
                  onClick={() => setContactOpen(true)}
                  className="px-8 py-3.5 bg-white/10 border border-white/30 text-white font-bold rounded-md hover:bg-white/20 transition inline-flex items-center gap-2"
                >
                  <Mail className="w-4 h-4" /> Talk to sales
                </button>
              </div>
            </div>
          </AnimateIn>
        </div>
      </section>

      {/* Shared modals */}
      <ContactUsModal open={contactOpen} onClose={() => setContactOpen(false)} />
      <GetPriceModal open={priceOpen} onClose={() => setPriceOpen(false)} />
    </SiteLayout>
  );
}