import { createFileRoute, Link } from "@tanstack/react-router";
import { ArrowRight, Shield, Wifi, Zap, Router, BarChart3 } from "lucide-react";

import { BrandLogo } from "@/components/brand/brand-logo";
import { Button } from "@/components/ui/button";

/**
 * BVANNY CONNECT — Marketing landing page.
 *
 * Phase 1 role:
 *   - Introduces the product with premium first impression
 *   - Routes end-users to the captive portal (/portal — Slice 3)
 *   - Routes operators to the admin dashboard (/admin — Phase 2)
 *
 * All colors, gradients, shadows, and glass surfaces are semantic design
 * tokens defined in src/styles.css. No hard-coded palette values here.
 */
export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      {
        title: "BVANNY CONNECT — Premium Hotspot & ISP Management Platform",
      },
      {
        name: "description",
        content:
          "The all-in-one platform to sell WiFi, manage MikroTik routers, and grow your ISP. M-Pesa payments, real-time monitoring, enterprise security.",
      },
    ],
  }),
  component: LandingPage,
});

const FEATURES = [
  {
    icon: Wifi,
    title: "Instant WiFi Access",
    description:
      "Customers connect, pick a plan, pay via M-Pesa STK Push, and are online in seconds.",
  },
  {
    icon: Router,
    title: "MikroTik at Scale",
    description:
      "Manage unlimited RouterOS devices from one dashboard. Sessions, bandwidth, and health in real time.",
  },
  {
    icon: BarChart3,
    title: "Revenue Intelligence",
    description:
      "Daily, weekly, and monthly reports with export-ready PDFs and Excel — know your numbers.",
  },
  {
    icon: Shield,
    title: "Enterprise Security",
    description:
      "Role-based access, audit logs, encrypted secrets, and 2FA — built for compliance from day one.",
  },
] as const;

function LandingPage() {
  return (
    <main className="relative min-h-screen overflow-hidden">
      {/* Ambient grid backdrop */}
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 bg-grid opacity-40"
      />
      <div
        aria-hidden
        className="pointer-events-none absolute inset-x-0 top-0 h-[520px] bg-gradient-to-b from-primary/[0.08] via-transparent to-transparent blur-3xl"
      />

      {/* Top nav */}
      <header className="relative z-10 mx-auto flex max-w-7xl items-center justify-between px-6 py-6 sm:py-8">
        <BrandLogo variant="inline" size={44} compactWordmark />
        <nav className="hidden items-center gap-8 text-sm text-muted-foreground md:flex">
          <a href="#features" className="transition-colors hover:text-foreground">
            Features
          </a>
          <a href="#who" className="transition-colors hover:text-foreground">
            Who it's for
          </a>
          <a href="#pricing" className="transition-colors hover:text-foreground">
            Pricing
          </a>
        </nav>
        <div className="flex items-center gap-2">
          <Button
            variant="ghost"
            size="sm"
            className="hidden text-muted-foreground hover:text-foreground sm:inline-flex"
            asChild
          >
            <Link to="/auth">Sign in</Link>
          </Button>
          <Button size="sm" className="gradient-brand text-primary-foreground shadow-glow-gold hover:opacity-95" asChild>
            <Link to="/portal">
              Buy WiFi
              <ArrowRight className="ml-1.5 h-4 w-4" />
            </Link>
          </Button>
        </div>
      </header>

      {/* Hero */}
      <section className="relative z-10 mx-auto max-w-7xl px-6 pb-20 pt-10 sm:pt-16 lg:pt-24">
        <div className="mx-auto max-w-3xl text-center">
          <div className="inline-flex items-center gap-2 rounded-full border border-border/70 bg-surface-1/60 px-3 py-1 text-xs font-medium text-muted-foreground backdrop-blur">
            <span className="relative flex h-2 w-2">
              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-accent opacity-70" />
              <span className="relative inline-flex h-2 w-2 rounded-full bg-accent" />
            </span>
            Now in early access — Kenya first
          </div>

          <h1 className="mt-6 font-display text-4xl font-bold leading-[1.05] tracking-tight sm:text-6xl lg:text-7xl">
            The premium platform for
            <br />
            <span className="text-gradient-brand">selling & running WiFi.</span>
          </h1>

          <p className="mx-auto mt-6 max-w-2xl text-base leading-relaxed text-muted-foreground sm:text-lg">
            BVANNY CONNECT gives internet operators a beautiful captive portal,
            real-time MikroTik control, and instant M-Pesa payments — all in one
            enterprise-grade platform.
          </p>

          <div className="mt-10 flex flex-col items-center justify-center gap-3 sm:flex-row">
            <Button
              size="lg"
              className="gradient-brand h-12 px-6 text-base font-semibold text-primary-foreground shadow-glow-gold hover:opacity-95"
              asChild
            >
              <Link to="/portal">
                Get Online Now
                <ArrowRight className="ml-2 h-4 w-4" />
              </Link>
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="h-12 border-border/80 bg-surface-1/50 px-6 text-base backdrop-blur hover:bg-surface-2"
              asChild
            >
              <Link to="/auth">Operator Login</Link>
            </Button>
          </div>

          <p className="mt-4 text-xs text-muted-foreground">
            No app to install. Connect to WiFi and you'll land on the portal automatically.
          </p>
        </div>

        {/* Hero mascot spotlight */}
        <div className="mt-16 flex justify-center sm:mt-20">
          <div className="relative">
            <div
              aria-hidden
              className="absolute inset-0 -z-10 rounded-full bg-gradient-brand opacity-30 blur-3xl"
            />
            <div className="glass-strong rounded-3xl px-8 py-10 shadow-card">
              <BrandLogo variant="mark" size={180} />
            </div>
          </div>
        </div>
      </section>

      {/* Features */}
      <section id="features" className="relative z-10 mx-auto max-w-7xl px-6 pb-24">
        <div className="mx-auto max-w-2xl text-center">
          <span className="text-xs font-semibold uppercase tracking-[0.25em] text-accent">
            Built for operators
          </span>
          <h2 className="mt-3 font-display text-3xl font-bold tracking-tight sm:text-4xl">
            Everything you need. Nothing you don't.
          </h2>
          <p className="mt-4 text-muted-foreground">
            From the first customer connection to your monthly revenue report,
            BVANNY CONNECT handles it end to end.
          </p>
        </div>

        <div className="mt-14 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {FEATURES.map((feature) => (
            <div
              key={feature.title}
              className="glass group relative overflow-hidden rounded-2xl p-6 transition-all duration-300 hover:border-primary/30 hover:shadow-glow-gold"
            >
              <div
                aria-hidden
                className="absolute -right-6 -top-6 h-24 w-24 rounded-full bg-primary/10 blur-2xl transition-opacity duration-300 group-hover:opacity-100 opacity-0"
              />
              <div className="relative">
                <div className="mb-4 inline-flex h-11 w-11 items-center justify-center rounded-xl bg-surface-2 ring-1 ring-border">
                  <feature.icon className="h-5 w-5 text-primary" />
                </div>
                <h3 className="font-display text-lg font-semibold">
                  {feature.title}
                </h3>
                <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
                  {feature.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Who it's for */}
      <section id="who" className="relative z-10 mx-auto max-w-7xl px-6 pb-24">
        <div className="glass-strong overflow-hidden rounded-3xl p-8 sm:p-12">
          <div className="grid gap-10 lg:grid-cols-[1.1fr_1fr] lg:items-center">
            <div>
              <span className="text-xs font-semibold uppercase tracking-[0.25em] text-accent">
                One platform, every venue
              </span>
              <h2 className="mt-3 font-display text-3xl font-bold tracking-tight sm:text-4xl">
                From a home hotspot to a national ISP.
              </h2>
              <p className="mt-4 text-muted-foreground">
                BVANNY CONNECT scales with you. Start with a single MikroTik
                router in your building — grow into a multi-tenant SaaS operator
                serving hotels, estates, campuses, and cafés without switching
                tools.
              </p>
              <div className="mt-8 flex items-center gap-3">
                <Zap className="h-5 w-5 text-primary" />
                <span className="text-sm text-muted-foreground">
                  Provision new customers in under 30 seconds.
                </span>
              </div>
            </div>
            <ul className="grid grid-cols-2 gap-3 text-sm">
              {[
                "Home ISPs",
                "Apartments",
                "Estates",
                "Hotels",
                "Schools",
                "Cyber Cafés",
                "Campuses",
                "Restaurants",
                "Public WiFi",
                "Small ISPs",
              ].map((venue) => (
                <li
                  key={venue}
                  className="flex items-center gap-2 rounded-lg border border-border/60 bg-surface-1/60 px-3 py-2.5 font-medium"
                >
                  <span className="h-1.5 w-1.5 rounded-full bg-accent" />
                  {venue}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="relative z-10 border-t border-border/60">
        <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-4 px-6 py-8 text-sm text-muted-foreground sm:flex-row">
          <BrandLogo variant="inline" size={32} compactWordmark />
          <p>© {new Date().getFullYear()} BVANNY CONNECT. All rights reserved.</p>
        </div>
      </footer>
    </main>
  );
}