import React, { useMemo, useState } from "react";
import { Shield, Cctv, Fingerprint, Wifi, Home, Clock, PhoneCall, CheckCircle2, ArrowRight, Building2, Server, Lock, Sparkles, MapPin, Mail, Phone } from "lucide-react";
import { motion } from "framer-motion";

// Single-file website design (landing + lightweight routing)
// Styling: TailwindCSS (assumed available in the environment)

const brand = {
  company: "Gateway Dynamics Integrated Solutions",
  tagline: "Connected security, automation, and response—built for 24/7 peace of mind.",
  primaryCTA: "Request a Security Assessment",
  secondaryCTA: "Talk to an Expert",
};

const services = [
  {
    id: "monitoring",
    title: "24/7 Remote Monitoring & Emergency Response",
    blurb:
      "Always-on detection, verified alerts, and rapid escalation—backed by clear response plans.",
    icon: Clock,
    bullets: [
      "Event verification and priority-based dispatch",
      "Mobile alerts, incident timelines, and reporting",
      "Response playbooks for home and business",
    ],
  },
  {
    id: "access",
    title: "Access Control Systems Integration",
    blurb:
      "Modern credentialing and door control integrated with cameras, alarms, and policies.",
    icon: Fingerprint,
    bullets: [
      "Card, mobile, and keypad credential options",
      "Role-based access and audit trails",
      "Visitor workflows and multi-site support",
    ],
  },
  {
    id: "automation",
    title: "Smart Home Automation Systems",
    blurb:
      "Lighting, locks, sensors, and routines that work together—securely and reliably.",
    icon: Sparkles,
    bullets: [
      "Scenes and schedules (home/away, night mode)",
      "Device interoperability planning",
      "Secure remote access and privacy settings",
    ],
  },
  {
    id: "security",
    title: "Home & Business Security Systems",
    blurb:
      "Professional-grade intrusion detection and life-safety options tailored to your risk.",
    icon: Shield,
    bullets: [
      "Perimeter + interior detection strategy",
      "Glass break, motion, and environmental sensors",
      "Commercial options for offices and storefronts",
    ],
  },
  {
    id: "network",
    title: "Network Infrastructure & ISP (AltaFiber)",
    blurb:
      "Reliable networking that keeps cameras, access control, and automation responsive.",
    icon: Wifi,
    bullets: [
      "Site survey, structured cabling, and Wi‑Fi design",
      "Bandwidth planning for video and critical services",
      "ISP coordination and installation support",
    ],
    badge: "Supported through AltaFiber",
  },
  {
    id: "cctv",
    title: "CCTV Camera Systems (Milestone)",
    blurb:
      "Scalable video surveillance with professional management and analytics-ready architecture.",
    icon: Cctv,
    bullets: [
      "Camera placement for coverage + identification",
      "Centralized VMS management and user permissions",
      "Retention planning and evidence export workflows",
    ],
    badge: "Supported through Milestone Systems",
  },
];

const stats = [
  { label: "Monitoring", value: "24/7" },
  { label: "Avg. Response Workflows", value: "Verified" },
  { label: "Systems Integrated", value: "Cameras · Access · Network" },
  { label: "Deployment", value: "Home & Business" },
];

const faqs = [
  {
    q: "Can you integrate existing cameras, alarms, or access control hardware?",
    a: "Yes—our approach starts with an assessment to understand what you have today, what can be retained, and where upgrades will produce the best security and reliability gains.",
  },
  {
    q: "How do you avoid false alarms while keeping response fast?",
    a: "We combine tuned sensor placement, event verification, and clear escalation paths. You get the right alert at the right time—without alert fatigue.",
  },
  {
    q: "Do you support multi-site businesses?",
    a: "Absolutely. We design standard policies, user roles, and reporting across locations, while still handling site-specific needs like entrances, schedules, and retention.",
  },
  {
    q: "What’s included in a security assessment?",
    a: "A walkthrough (or remote review), risk discussion, coverage gaps, network readiness for video, and a phased plan with options.",
  },
];

function cn(...classes) {
  return classes.filter(Boolean).join(" ");
}

function Pill({ children }) {
  return (
    <span className="inline-flex items-center rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs text-white/80">
      {children}
    </span>
  );
}

function Section({ id, title, kicker, children }) {
  return (
    <section id={id} className="relative mx-auto max-w-6xl px-6 py-16 sm:py-20">
      <div className="mb-10">
        {kicker ? (
          <div className="mb-3 text-sm font-medium text-white/70">{kicker}</div>
        ) : null}
        {title ? (
          <h2 className="text-2xl font-semibold tracking-tight text-white sm:text-3xl">
            {title}
          </h2>
        ) : null}
      </div>
      {children}
    </section>
  );
}

function Card({ children, className }) {
  return (
    <div
      className={cn(
        "rounded-2xl border border-white/10 bg-white/[0.04] p-6 shadow-sm backdrop-blur",
        className
      )}
    >
      {children}
    </div>
  );
}

function NavLink({ label, onClick }) {
  return (
    <button
      onClick={onClick}
      className="rounded-full px-3 py-2 text-sm text-white/80 transition hover:bg-white/10 hover:text-white"
    >
      {label}
    </button>
  );
}

function Badge({ children }) {
  return (
    <span className="inline-flex items-center gap-2 rounded-full bg-white/10 px-3 py-1 text-xs font-medium text-white/80">
      <CheckCircle2 className="h-4 w-4" />
      {children}
    </span>
  );
}

function CTAButton({ children, variant = "primary", onClick }) {
  const base =
    "inline-flex items-center justify-center gap-2 rounded-2xl px-5 py-3 text-sm font-medium transition focus:outline-none focus:ring-2 focus:ring-white/20";
  const styles =
    variant === "primary"
      ? "bg-white text-black hover:bg-white/90"
      : "border border-white/15 bg-white/5 text-white hover:bg-white/10";
  return (
    <button onClick={onClick} className={cn(base, styles)}>
      {children}
      <ArrowRight className="h-4 w-4" />
    </button>
  );
}

function Modal({ open, onClose, title, children }) {
  if (!open) return null;
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center px-4">
      <div
        className="absolute inset-0 bg-black/70 backdrop-blur-sm"
        onClick={onClose}
      />
      <motion.div
        initial={{ opacity: 0, y: 10, scale: 0.98 }}
        animate={{ opacity: 1, y: 0, scale: 1 }}
        exit={{ opacity: 0, y: 10, scale: 0.98 }}
        className="relative w-full max-w-xl rounded-2xl border border-white/10 bg-zinc-950 p-6 shadow-2xl"
      >
        <div className="mb-4 flex items-start justify-between gap-4">
          <div>
            <div className="text-xs font-medium text-white/60">Get started</div>
            <div className="text-lg font-semibold text-white">{title}</div>
          </div>
          <button
            onClick={onClose}
            className="rounded-xl border border-white/10 bg-white/5 px-3 py-2 text-sm text-white/80 hover:bg-white/10"
          >
            Close
          </button>
        </div>
        {children}
      </motion.div>
    </div>
  );
}

function TextField({ label, placeholder, type = "text" }) {
  return (
    <label className="block">
      <div className="mb-2 text-xs font-medium text-white/70">{label}</div>
      <input
        type={type}
        placeholder={placeholder}
        className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-white placeholder:text-white/40 outline-none focus:border-white/20"
      />
    </label>
  );
}

function TextArea({ label, placeholder }) {
  return (
    <label className="block">
      <div className="mb-2 text-xs font-medium text-white/70">{label}</div>
      <textarea
        placeholder={placeholder}
        rows={4}
        className="w-full resize-none rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-white placeholder:text-white/40 outline-none focus:border-white/20"
      />
    </label>
  );
}

function SimpleRouter({ route }) {
  const map = {
    "/": "home",
    "/services": "services",
    "/solutions": "solutions",
    "/about": "about",
    "/contact": "contact",
  };
  return map[route] || "home";
}

export default function WebsiteDesign() {
  const [route, setRoute] = useState("/");
  const page = SimpleRouter({ route });
  const [ctaOpen, setCtaOpen] = useState(false);

  const go = (path) => {
    setRoute(path);
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  const pageTitle = useMemo(() => {
    const titles = {
      home: "Home",
      services: "Services",
      solutions: "Solutions",
      about: "About",
      contact: "Contact",
    };
    return titles[page] || "Home";
  }, [page]);

  return (
    <div className="min-h-screen bg-zinc-950 text-white">
      {/* Ambient background */}
      <div className="pointer-events-none fixed inset-0 overflow-hidden">
        <div className="absolute -top-24 left-1/2 h-[480px] w-[720px] -translate-x-1/2 rounded-full bg-white/10 blur-3xl" />
        <div className="absolute bottom-0 right-[-120px] h-[520px] w-[520px] rounded-full bg-white/5 blur-3xl" />
        <div className="absolute left-[-120px] top-[40%] h-[420px] w-[420px] rounded-full bg-white/5 blur-3xl" />
      </div>

      {/* Top bar */}
      <header className="sticky top-0 z-40 border-b border-white/10 bg-zinc-950/70 backdrop-blur">
        <div className="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
          <button
            onClick={() => go("/")}
            className="flex items-center gap-3 rounded-2xl px-2 py-1 hover:bg-white/5"
            aria-label="Go to home"
          >
            <div className="flex h-10 w-10 items-center justify-center rounded-2xl border border-white/10 bg-white/5">
              <Shield className="h-5 w-5" />
            </div>
            <div className="leading-tight">
              <div className="text-sm font-semibold tracking-tight">
                {brand.company}
              </div>
              <div className="text-xs text-white/60">Security • Network • Automation</div>
            </div>
          </button>

          <nav className="hidden items-center gap-1 md:flex">
            <NavLink label="Home" onClick={() => go("/")} />
            <NavLink label="Services" onClick={() => go("/services")} />
            <NavLink label="Solutions" onClick={() => go("/solutions")} />
            <NavLink label="About" onClick={() => go("/about")} />
            <NavLink label="Contact" onClick={() => go("/contact")} />
          </nav>

          <div className="flex items-center gap-2">
            <button
              onClick={() => setCtaOpen(true)}
              className="hidden rounded-2xl border border-white/10 bg-white/5 px-4 py-2 text-sm text-white/80 hover:bg-white/10 sm:inline-flex"
            >
              {brand.secondaryCTA}
            </button>
            <button
              onClick={() => setCtaOpen(true)}
              className="inline-flex items-center justify-center rounded-2xl bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90"
            >
              {brand.primaryCTA}
            </button>
          </div>
        </div>
      </header>

      {/* Page content */}
      <main className="relative">
        {page === "home" && (
          <>
            {/* Hero */}
            <section className="mx-auto max-w-6xl px-6 pb-16 pt-14 sm:pt-20">
              <div className="grid items-center gap-10 lg:grid-cols-2">
                <motion.div
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.5 }}
                >
                  <div className="mb-4 flex flex-wrap items-center gap-2">
                    <Pill>
                      <Shield className="mr-2 h-4 w-4" /> Integrated Protection
                    </Pill>
                    <Pill>
                      <Wifi className="mr-2 h-4 w-4" /> Network-Ready
                    </Pill>
                    <Pill>
                      <Cctv className="mr-2 h-4 w-4" /> Video Intelligence
                    </Pill>
                  </div>

                  <h1 className="text-4xl font-semibold tracking-tight text-white sm:text-5xl">
                    Secure spaces.
                    <span className="text-white/70"> Smarter systems.</span>
                    <span className="block">Always-on response.</span>
                  </h1>

                  <p className="mt-5 max-w-xl text-base leading-relaxed text-white/70">
                    {brand.tagline} From homes to multi-site businesses, we design,
                    install, and integrate security, access control, cameras, and
                    network infrastructure into one cohesive system.
                  </p>

                  <div className="mt-7 flex flex-col gap-3 sm:flex-row">
                    <CTAButton variant="primary" onClick={() => setCtaOpen(true)}>
                      {brand.primaryCTA}
                    </CTAButton>
                    <CTAButton variant="secondary" onClick={() => go("/services")}>
                      Explore Services
                    </CTAButton>
                  </div>

                  <div className="mt-8 grid grid-cols-2 gap-4 sm:grid-cols-4">
                    {stats.map((s) => (
                      <div
                        key={s.label}
                        className="rounded-2xl border border-white/10 bg-white/[0.03] p-4"
                      >
                        <div className="text-lg font-semibold">{s.value}</div>
                        <div className="text-xs text-white/60">{s.label}</div>
                      </div>
                    ))}
                  </div>
                </motion.div>

                <motion.div
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.6, delay: 0.05 }}
                  className="relative"
                >
                  <div className="rounded-3xl border border-white/10 bg-white/[0.03] p-6">
                    <div className="mb-5 flex items-center justify-between">
                      <div className="text-sm font-medium text-white/80">
                        Unified Security Dashboard
                      </div>
                      <span className="rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs text-white/70">
                        Live (demo)
                      </span>
                    </div>

                    <div className="grid gap-4 sm:grid-cols-2">
                      <Card className="p-5">
                        <div className="flex items-center gap-3">
                          <div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-white/10">
                            <Cctv className="h-5 w-5" />
                          </div>
                          <div>
                            <div className="text-sm font-semibold">CCTV</div>
                            <div className="text-xs text-white/60">
                              Milestone-backed VMS
                            </div>
                          </div>
                        </div>
                        <div className="mt-4 space-y-2 text-xs text-white/70">
                          <div className="flex items-center justify-between rounded-xl bg-white/5 px-3 py-2">
                            <span>Retention</span>
                            <span className="text-white/90">30–90 days</span>
                          </div>
                          <div className="flex items-center justify-between rounded-xl bg-white/5 px-3 py-2">
                            <span>Users</span>
                            <span className="text-white/90">Roles + audit</span>
                          </div>
                        </div>
                      </Card>

                      <Card className="p-5">
                        <div className="flex items-center gap-3">
                          <div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-white/10">
                            <Fingerprint className="h-5 w-5" />
                          </div>
                          <div>
                            <div className="text-sm font-semibold">Access</div>
                            <div className="text-xs text-white/60">
                              Doors • users • schedules
                            </div>
                          </div>
                        </div>
                        <div className="mt-4 space-y-2 text-xs text-white/70">
                          <div className="flex items-center justify-between rounded-xl bg-white/5 px-3 py-2">
                            <span>Credentials</span>
                            <span className="text-white/90">Mobile + card</span>
                          </div>
                          <div className="flex items-center justify-between rounded-xl bg-white/5 px-3 py-2">
                            <span>Policies</span>
                            <span className="text-white/90">Time + role</span>
                          </div>
                        </div>
                      </Card>

                      <Card className="p-5 sm:col-span-2">
                        <div className="flex items-center gap-3">
                          <div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-white/10">
                            <Wifi className="h-5 w-5" />
                          </div>
                          <div>
                            <div className="text-sm font-semibold">Network</div>
                            <div className="text-xs text-white/60">
                              AltaFiber-supported connectivity
                            </div>
                          </div>
                        </div>
                        <div className="mt-4 grid gap-2 text-xs text-white/70 sm:grid-cols-3">
                          <div className="rounded-xl bg-white/5 px-3 py-2">
                            <div className="text-white/90">WAN + failover</div>
                            <div className="text-white/60">availability</div>
                          </div>
                          <div className="rounded-xl bg-white/5 px-3 py-2">
                            <div className="text-white/90">Segmentation</div>
                            <div className="text-white/60">protect systems</div>
                          </div>
                          <div className="rounded-xl bg-white/5 px-3 py-2">
                            <div className="text-white/90">QoS</div>
                            <div className="text-white/60">prioritize video</div>
                          </div>
                        </div>
                      </Card>
                    </div>

                    <div className="mt-5 flex flex-wrap gap-2">
                      <Badge>Design • Install • Integrate</Badge>
                      <Badge>Secure remote access</Badge>
                      <Badge>Scales with you</Badge>
                    </div>
                  </div>
                </motion.div>
              </div>
            </section>

            {/* Services preview */}
            <Section
              id="services"
              kicker="What we do"
              title="A complete stack—from network to response"
            >
              <div className="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
                {services.map((s) => {
                  const Icon = s.icon;
                  return (
                    <motion.div
                      key={s.id}
                      initial={{ opacity: 0, y: 10 }}
                      whileInView={{ opacity: 1, y: 0 }}
                      viewport={{ once: true, amount: 0.2 }}
                      transition={{ duration: 0.4 }}
                    >
                      <Card className="h-full">
                        <div className="flex items-start justify-between gap-4">
                          <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-white/10">
                            <Icon className="h-5 w-5" />
                          </div>
                          {s.badge ? (
                            <span className="rounded-full border border-white/10 bg-white/5 px-3 py-1 text-[11px] text-white/70">
                              {s.badge}
                            </span>
                          ) : null}
                        </div>
                        <div className="mt-4">
                          <div className="text-base font-semibold">{s.title}</div>
                          <div className="mt-2 text-sm leading-relaxed text-white/70">
                            {s.blurb}
                          </div>
                          <ul className="mt-4 space-y-2">
                            {s.bullets.map((b) => (
                              <li key={b} className="flex gap-2 text-sm text-white/70">
                                <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0" />
                                <span>{b}</span>
                              </li>
                            ))}
                          </ul>
                        </div>
                        <div className="mt-5">
                          <button
                            onClick={() => go("/services")}
                            className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/5 px-4 py-2 text-sm text-white/80 hover:bg-white/10"
                          >
                            Learn more <ArrowRight className="h-4 w-4" />
                          </button>
                        </div>
                      </Card>
                    </motion.div>
                  );
                })}
              </div>
            </Section>

            {/* Process */}
            <Section
              id="process"
              kicker="How it works"
              title="Assess, design, deploy, and support"
            >
              <div className="grid gap-5 lg:grid-cols-4">
                {[
                  {
                    title: "1) Discovery",
                    icon: Building2,
                    text: "Walkthrough, risks, coverage goals, and network readiness.",
                  },
                  {
                    title: "2) System Design",
                    icon: Server,
                    text: "Architecture, device selection, retention, and policy planning.",
                  },
                  {
                    title: "3) Installation",
                    icon: Home,
                    text: "Clean deployment, labeling, documentation, and testing.",
                  },
                  {
                    title: "4) 24/7 Support",
                    icon: PhoneCall,
                    text: "Remote monitoring, response workflows, and ongoing improvements.",
                  },
                ].map((step) => {
                  const Icon = step.icon;
                  return (
                    <Card key={step.title} className="h-full">
                      <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-white/10">
                        <Icon className="h-5 w-5" />
                      </div>
                      <div className="mt-4 text-base font-semibold">{step.title}</div>
                      <div className="mt-2 text-sm text-white/70">{step.text}</div>
                    </Card>
                  );
                })}
              </div>

              <div className="mt-10 rounded-3xl border border-white/10 bg-white/[0.03] p-6 sm:p-8">
                <div className="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
                  <div>
                    <div className="text-sm font-medium text-white/70">Ready to scope your system?</div>
                    <div className="mt-1 text-xl font-semibold tracking-tight">
                      Get a phased plan you can implement now—and expand later.
                    </div>
                  </div>
                  <CTAButton variant="primary" onClick={() => setCtaOpen(true)}>
                    {brand.primaryCTA}
                  </CTAButton>
                </div>
              </div>
            </Section>

            {/* FAQ */}
            <Section id="faq" kicker="FAQ" title="Questions we hear a lot">
              <div className="grid gap-5 lg:grid-cols-2">
                {faqs.map((f) => (
                  <Card key={f.q}>
                    <div className="text-base font-semibold">{f.q}</div>
                    <div className="mt-2 text-sm leading-relaxed text-white/70">{f.a}</div>
                  </Card>
                ))}
              </div>
            </Section>
          </>
        )}

        {page === "services" && (
          <>
            <section className="mx-auto max-w-6xl px-6 pb-6 pt-14">
              <div className="flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between">
                <div>
                  <div className="text-sm font-medium text-white/70">{pageTitle}</div>
                  <h1 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">
                    Services designed to integrate
                  </h1>
                  <p className="mt-3 max-w-2xl text-sm leading-relaxed text-white/70">
                    Choose what you need today, and keep everything compatible for
                    expansion later. We focus on reliable operation, secure remote
                    access, and clear ownership.
                  </p>
                </div>
                <div className="flex gap-2">
                  <CTAButton variant="secondary" onClick={() => go("/")}
                    >Back to Home</CTAButton
                  >
                  <CTAButton variant="primary" onClick={() => setCtaOpen(true)}>
                    {brand.primaryCTA}
                  </CTAButton>
                </div>
              </div>
            </section>

            <Section id="services-grid" title={null} kicker={null}>
              <div className="grid gap-5 lg:grid-cols-3">
                {services.map((s) => {
                  const Icon = s.icon;
                  return (
                    <Card key={s.id} className="h-full">
                      <div className="flex items-start justify-between gap-4">
                        <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-white/10">
                          <Icon className="h-5 w-5" />
                        </div>
                        {s.badge ? (
                          <span className="rounded-full border border-white/10 bg-white/5 px-3 py-1 text-[11px] text-white/70">
                            {s.badge}
                          </span>
                        ) : null}
                      </div>
                      <div className="mt-4 text-base font-semibold">{s.title}</div>
                      <div className="mt-2 text-sm text-white/70">{s.blurb}</div>
                      <div className="mt-4">
                        <div className="text-xs font-medium text-white/60">Includes</div>
                        <ul className="mt-2 space-y-2">
                          {s.bullets.map((b) => (
                            <li key={b} className="flex gap-2 text-sm text-white/70">
                              <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0" />
                              <span>{b}</span>
                            </li>
                          ))}
                        </ul>
                      </div>
                    </Card>
                  );
                })}
              </div>

              <div className="mt-10 grid gap-5 lg:grid-cols-2">
                <Card>
                  <div className="flex items-center gap-3">
                    <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-white/10">
                      <Lock className="h-5 w-5" />
                    </div>
                    <div>
                      <div className="text-base font-semibold">Security-first deployment</div>
                      <div className="text-sm text-white/70">
                        Segmentation, least-privilege access, and hardening guidelines.
                      </div>
                    </div>
                  </div>
                  <div className="mt-4 grid gap-2 text-sm text-white/70 sm:grid-cols-2">
                    <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
                      <div className="font-medium text-white/80">Documentation</div>
                      <div className="mt-1 text-white/70">
                        As-built diagrams, device lists, and credentials handling.
                      </div>
                    </div>
                    <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
                      <div className="font-medium text-white/80">Operational readiness</div>
                      <div className="mt-1 text-white/70">
                        Test plans, response procedures, and admin training.
                      </div>
                    </div>
                  </div>
                </Card>

                <Card>
                  <div className="text-base font-semibold">Need a bundled solution?</div>
                  <div className="mt-2 text-sm text-white/70">
                    Tell us your goals and timeline—home, single site, or multi-site—and we’ll map
                    the right combination of monitoring, access, cameras, and network.
                  </div>
                  <div className="mt-5 flex flex-col gap-3 sm:flex-row">
                    <CTAButton variant="primary" onClick={() => go("/solutions")}
                      >View Solutions</CTAButton
                    >
                    <CTAButton variant="secondary" onClick={() => setCtaOpen(true)}>
                      {brand.secondaryCTA}
                    </CTAButton>
                  </div>
                </Card>
              </div>
            </Section>
          </>
        )}

        {page === "solutions" && (
          <>
            <section className="mx-auto max-w-6xl px-6 pb-6 pt-14">
              <div className="text-sm font-medium text-white/70">{pageTitle}</div>
              <h1 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">
                Solutions for real environments
              </h1>
              <p className="mt-3 max-w-2xl text-sm leading-relaxed text-white/70">
                Three common bundles below—each one can be customized. The goal: a
                cohesive system that’s easy to operate and ready to scale.
              </p>
            </section>

            <Section id="solution-cards" title={null} kicker={null}>
              <div className="grid gap-5 lg:grid-cols-3">
                <Card className="h-full">
                  <div className="text-xs font-medium text-white/60">Home</div>
                  <div className="mt-2 text-lg font-semibold">Connected Home Protection</div>
                  <div className="mt-2 text-sm text-white/70">
                    Smart security and automation with remote monitoring—designed to
                    reduce false alarms and improve daily convenience.
                  </div>
                  <ul className="mt-4 space-y-2 text-sm text-white/70">
                    {[
                      "Intrusion + environmental sensors",
                      "Smart locks, lighting, and scenes",
                      "Cameras at key entry points",
                      "Secure remote app access",
                    ].map((b) => (
                      <li key={b} className="flex gap-2">
                        <CheckCircle2 className="mt-0.5 h-4 w-4" /> {b}
                      </li>
                    ))}
                  </ul>
                  <div className="mt-5">
                    <CTAButton variant="secondary" onClick={() => setCtaOpen(true)}>
                      Get a Quote
                    </CTAButton>
                  </div>
                </Card>

                <Card className="h-full">
                  <div className="text-xs font-medium text-white/60">Business</div>
                  <div className="mt-2 text-lg font-semibold">Office & Retail Security</div>
                  <div className="mt-2 text-sm text-white/70">
                    Access control and cameras unified with monitoring so incidents are
                    captured, verified, and handled fast.
                  </div>
                  <ul className="mt-4 space-y-2 text-sm text-white/70">
                    {[
                      "Access control with roles + schedules",
                      "Milestone-supported CCTV management",
                      "Alarm integration and response plans",
                      "Network readiness and segmentation",
                    ].map((b) => (
                      <li key={b} className="flex gap-2">
                        <CheckCircle2 className="mt-0.5 h-4 w-4" /> {b}
                      </li>
                    ))}
                  </ul>
                  <div className="mt-5">
                    <CTAButton variant="primary" onClick={() => setCtaOpen(true)}>
                      Request Assessment
                    </CTAButton>
                  </div>
                </Card>

                <Card className="h-full">
                  <div className="text-xs font-medium text-white/60">Multi-site</div>
                  <div className="mt-2 text-lg font-semibold">Standardized Security Rollouts</div>
                  <div className="mt-2 text-sm text-white/70">
                    Consistent policies, permissions, and reporting across locations—with
                    room for site-specific needs.
                  </div>
                  <ul className="mt-4 space-y-2 text-sm text-white/70">
                    {[
                      "Template designs and hardware standards",
                      "Centralized user roles + audit trails",
                      "ISP coordination (AltaFiber support)",
                      "Lifecycle support and upgrades",
                    ].map((b) => (
                      <li key={b} className="flex gap-2">
                        <CheckCircle2 className="mt-0.5 h-4 w-4" /> {b}
                      </li>
                    ))}
                  </ul>
                  <div className="mt-5">
                    <CTAButton variant="secondary" onClick={() => setCtaOpen(true)}>
                      Talk to a Specialist
                    </CTAButton>
                  </div>
                </Card>
              </div>
            </Section>
          </>
        )}

        {page === "about" && (
          <>
            <section className="mx-auto max-w-6xl px-6 pb-6 pt-14">
              <div className="text-sm font-medium text-white/70">{pageTitle}</div>
              <h1 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">
                Built for reliability and clarity
              </h1>
              <p className="mt-3 max-w-2xl text-sm leading-relaxed text-white/70">
                Our design philosophy: the best security system is the one you can
                operate confidently. We prioritize clean installs, clear roles,
                and documented handoffs—so you always know what’s running and why.
              </p>
            </section>

            <Section id="about-content" title={null} kicker={null}>
              <div className="grid gap-5 lg:grid-cols-2">
                <Card>
                  <div className="text-base font-semibold">What sets us apart</div>
                  <ul className="mt-4 space-y-2 text-sm text-white/70">
                    {[
                      "Integration-first (cameras, access, alarms, network)",
                      "Security-first networking practices",
                      "Operator-friendly workflows and training",
                      "Vendor-backed platforms (Milestone, AltaFiber support)",
                    ].map((b) => (
                      <li key={b} className="flex gap-2">
                        <CheckCircle2 className="mt-0.5 h-4 w-4" /> {b}
                      </li>
                    ))}
                  </ul>
                </Card>

                <Card>
                  <div className="text-base font-semibold">Who we serve</div>
                  <div className="mt-2 text-sm text-white/70">
                    Homeowners, property managers, offices, retail, and multi-site
                    organizations that need consistent security operations.
                  </div>
                  <div className="mt-5 grid gap-3 sm:grid-cols-2">
                    {["Homes", "Retail", "Offices", "Multi-site"].map((t) => (
                      <div
                        key={t}
                        className="rounded-2xl border border-white/10 bg-white/[0.03] p-4"
                      >
                        <div className="font-medium text-white/80">{t}</div>
                        <div className="mt-1 text-sm text-white/60">
                          Tailored, scalable deployments
                        </div>
                      </div>
                    ))}
                  </div>
                </Card>
              </div>

              <div className="mt-10 rounded-3xl border border-white/10 bg-white/[0.03] p-6 sm:p-8">
                <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                  <div>
                    <div className="text-sm font-medium text-white/70">Want to see a sample plan?</div>
                    <div className="mt-1 text-xl font-semibold tracking-tight">
                      We’ll propose a clean, phased roadmap—no jargon.
                    </div>
                  </div>
                  <CTAButton variant="primary" onClick={() => setCtaOpen(true)}>
                    {brand.primaryCTA}
                  </CTAButton>
                </div>
              </div>
            </Section>
          </>
        )}

        {page === "contact" && (
          <>
            <section className="mx-auto max-w-6xl px-6 pb-6 pt-14">
              <div className="text-sm font-medium text-white/70">{pageTitle}</div>
              <h1 className="mt-2 text-3xl font-semibold tracking-tight sm:text-4xl">
                Contact
              </h1>
              <p className="mt-3 max-w-2xl text-sm leading-relaxed text-white/70">
                Share a few details and we’ll follow up to schedule an assessment.
              </p>
            </section>

            <Section id="contact-form" title={null} kicker={null}>
              <div className="grid gap-5 lg:grid-cols-3">
                <Card className="lg:col-span-2">
                  <div className="text-base font-semibold">Request a security assessment</div>
                  <div className="mt-2 text-sm text-white/70">
                    Typical response: same or next business day.
                  </div>
                  <div className="mt-6 grid gap-4 sm:grid-cols-2">
                    <TextField label="Name" placeholder="Your name" />
                    <TextField label="Company" placeholder="Company (optional)" />
                    <TextField label="Email" placeholder="you@company.com" type="email" />
                    <TextField label="Phone" placeholder="(555) 555-5555" type="tel" />
                    <div className="sm:col-span-2">
                      <TextArea
                        label="What do you need help with?"
                        placeholder="Example: 8-camera coverage + access control for 2 doors + network readiness."
                      />
                    </div>
                    <div className="sm:col-span-2">
                      <button className="inline-flex w-full items-center justify-center gap-2 rounded-2xl bg-white px-5 py-3 text-sm font-medium text-black hover:bg-white/90">
                        Submit request <ArrowRight className="h-4 w-4" />
                      </button>
                      <div className="mt-2 text-xs text-white/50">
                        This is a design mockup (no backend connected).
                      </div>
                    </div>
                  </div>
                </Card>

                <Card>
                  <div className="text-base font-semibold">Direct</div>
                  <div className="mt-4 space-y-3 text-sm text-white/70">
                    <div className="flex items-center gap-3">
                      <Phone className="h-4 w-4" /> <span>513-756-2662</span>
                    </div>
                    <div className="flex items-center gap-3">
                      <Mail className="h-4 w-4" /> <span>info@gatewaydynamics.com</span>
                    </div>
                    <div className="flex items-center gap-3">
                      <MapPin className="h-4 w-4" /> <span>Service area: Indiana, Ohio, West Virginia, and Kentucky</span>
                    </div>
                  </div>

                  <div className="mt-6">
                    <div className="text-xs font-medium text-white/60">Partners</div>
                    <div className="mt-3 flex flex-wrap gap-2">
                      <span className="rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs text-white/70">
                        AltaFiber
                      </span>
                      <span className="rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs text-white/70">
                        Milestone Systems
                      </span>
                    </div>
                  </div>

                  <div className="mt-8 rounded-2xl border border-white/10 bg-white/[0.03] p-4">
                    <div className="text-sm font-semibold">Before we talk</div>
                    <div className="mt-2 text-sm text-white/70">
                      If you can, note your number of doors, camera count, and whether
                      you want monitoring and response.
                    </div>
                  </div>
                </Card>
              </div>
            </Section>
          </>
        )}

        {/* Footer */}
        <footer className="relative border-t border-white/10">
          <div className="mx-auto max-w-6xl px-6 py-12">
            <div className="grid gap-10 md:grid-cols-4">
              <div className="md:col-span-2">
                <div className="flex items-center gap-3">
                  <div className="flex h-10 w-10 items-center justify-center rounded-2xl border border-white/10 bg-white/5">
                    <Shield className="h-5 w-5" />
                  </div>
                  <div>
                    <div className="text-sm font-semibold">{brand.company}</div>
                    <div className="text-xs text-white/60">
                      Security • Cameras • Access • Network • Automation
                    </div>
                  </div>
                </div>
                <p className="mt-4 max-w-md text-sm text-white/70">
                  Integrated systems designed for clarity, reliability, and rapid response.
                </p>
              </div>

              <div>
                <div className="text-xs font-medium text-white/60">Explore</div>
                <div className="mt-3 flex flex-col gap-2 text-sm">
                  <button onClick={() => go("/services")} className="text-left text-white/70 hover:text-white">
                    Services
                  </button>
                  <button onClick={() => go("/solutions")} className="text-left text-white/70 hover:text-white">
                    Solutions
                  </button>
                  <button onClick={() => go("/about")} className="text-left text-white/70 hover:text-white">
                    About
                  </button>
                  <button onClick={() => go("/contact")} className="text-left text-white/70 hover:text-white">
                    Contact
                  </button>
                </div>
              </div>

              <div>
                <div className="text-xs font-medium text-white/60">Call to action</div>
                <div className="mt-3 flex flex-col gap-2">
                  <button
                    onClick={() => setCtaOpen(true)}
                    className="rounded-2xl bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90"
                  >
                    {brand.primaryCTA}
                  </button>
                  <div className="text-xs text-white/50">
                    © {new Date().getFullYear()} {brand.company}. All rights reserved.
                  </div>
                </div>
              </div>
            </div>
          </div>
        </footer>
      </main>

      {/* CTA modal */}
      <Modal
        open={ctaOpen}
        onClose={() => setCtaOpen(false)}
        title="Request a Security Assessment"
      >
        <div className="grid gap-4 sm:grid-cols-2">
          <TextField label="Name" placeholder="Your name" />
          <TextField label="Email" placeholder="you@company.com" type="email" />
          <TextField label="Phone" placeholder="513-756-2662" type="tel" />
          <TextField label="Project type" placeholder="Home / Business / Multi-site" />
          <div className="sm:col-span-2">
            <TextArea
              label="Details"
              placeholder="What are you looking to secure? Doors, cameras, monitoring, automation, network…"
            />
          </div>
          <div className="sm:col-span-2">
            <button className="inline-flex w-full items-center justify-center gap-2 rounded-2xl bg-white px-5 py-3 text-sm font-medium text-black hover:bg-white/90">
              Send request <ArrowRight className="h-4 w-4" />
            </button>
            <div className="mt-2 text-xs text-white/50">
              This is a design mockup (no backend connected).
            </div>
          </div>
        </div>
      </Modal>

      {/* Mobile nav */}
      <div className="fixed bottom-4 left-1/2 z-40 w-[92%] max-w-md -translate-x-1/2 rounded-3xl border border-white/10 bg-zinc-950/70 p-2 backdrop-blur md:hidden">
        <div className="grid grid-cols-5 gap-1">
          {[{ p: "/", l: "Home" }, { p: "/services", l: "Services" }, { p: "/solutions", l: "Solutions" }, { p: "/about", l: "About" }, { p: "/contact", l: "Contact" }].map((i) => (
            <button
              key={i.p}
              onClick={() => go(i.p)}
              className={cn(
                "rounded-2xl px-2 py-2 text-xs transition",
                route === i.p
                  ? "bg-white text-black"
                  : "text-white/70 hover:bg-white/10 hover:text-white"
              )}
            >
              {i.l}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}