import { createFileRoute, Link } from "@tanstack/react-router";
import { ArrowRight, ShieldCheck, Zap, Clock, Award, Star, Sparkles, Search, UserPlus, FileCheck2, Wallet, PackageCheck } from "lucide-react";
import { useMemo, useState } from "react";

import heroImg from "@/assets/hero-cafe.jpg";
import { SiteLayout } from "@/components/site/SiteLayout";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { services } from "@/lib/services";

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: "Flexflares Cyber Services — Homabay's Digital Service Centre" },
      {
        name: "description",
        content:
          "KRA PIN, eCitizen, HELB, NTSA, passport, printing, design, and 40+ digital services in Homabay, Kenya.",
      },
      { property: "og:title", content: "Flexflares Cyber Services — Homabay's Digital Service Centre" },
      {
        property: "og:description",
        content: "KRA PIN, eCitizen, HELB, NTSA, passport, printing, design, and 40+ digital services in Homabay, Kenya.",
      },
    ],
  }),
  component: Home,
});

const whyUs = [
  { icon: Zap, title: "Fast turnaround", body: "Most services complete the same visit. We respect your time." },
  { icon: ShieldCheck, title: "Secure & confidential", body: "Your documents and personal data are handled with strict privacy." },
  { icon: Award, title: "Trained specialists", body: "eCitizen, KRA, HELB, NTSA — we do this every day." },
  { icon: Clock, title: "Open 7 days", body: "Mon–Sun, 6:00 AM – 10:00 PM. Walk in or book online." },
];

const howItWorks = [
  { icon: UserPlus, title: "Create your account", body: "Register in under a minute with your name, phone and email." },
  { icon: FileCheck2, title: "Order a service", body: "Pick a service, fill the short form and upload any documents needed." },
  { icon: Wallet, title: "Pay from your wallet", body: "Top up with M-PESA and pay the quoted price securely in KES." },
  { icon: PackageCheck, title: "Collect your results", body: "Track progress live and download completed documents from your dashboard." },
];

const testimonials = [
  { name: "Achieng O.", role: "University student", body: "They filed my HELB application in minutes. Super helpful and patient." },
  { name: "Brian K.", role: "Small business owner", body: "Got my business registration and CR12 without stress. Highly recommended." },
  { name: "Mercy A.", role: "Job seeker", body: "The CV they wrote helped me land two interviews the same month!" },
];

const faqs = [
  { q: "Do I need to book an appointment?", a: "No — walk in any day from 6 AM to 10 PM. Booking is optional." },
  { q: "Do you accept M-Pesa?", a: "Yes, we accept M-Pesa, cash and bank transfer." },
  { q: "Where are you located?", a: "We are in Homabay town. See the Contact page for the map and directions." },
  { q: "Can I get help remotely?", a: "Yes — WhatsApp us and we'll process most services online." },
];

function Home() {
  const [q, setQ] = useState("");
  const featured = useMemo(() => {
    const s = q.trim().toLowerCase();
    const list = s ? services.filter((x) => x.name.toLowerCase().includes(s) || x.category.toLowerCase().includes(s)) : services;
    return list.slice(0, 12);
  }, [q]);

  return (
    <SiteLayout>
      {/* Hero */}
      <section className="relative overflow-hidden">
        <div
          aria-hidden
          className="pointer-events-none absolute inset-0 -z-10"
          style={{ backgroundImage: "var(--gradient-glow)" }}
        />
        <div className="mx-auto grid max-w-7xl gap-10 px-4 pt-10 pb-16 sm:px-6 md:grid-cols-2 md:pt-16 md:pb-24">
          <div className="flex flex-col justify-center">
            <Badge variant="secondary" className="w-fit gap-1">
              <Sparkles className="h-3 w-3" /> Trusted in Homabay
            </Badge>
            <h1 className="mt-4 text-4xl font-black tracking-tight sm:text-5xl md:text-6xl">
              Welcome to <span className="text-gradient">Flexflares</span> Cyber Services
            </h1>
            <p className="mt-5 max-w-xl text-lg text-muted-foreground">
              Your one‑stop digital service centre. KRA, eCitizen, HELB, NTSA, printing, design and 40+ more services — done fast, done right.
            </p>
            <div className="mt-8 flex flex-wrap gap-3">
              <Button asChild size="lg" className="shadow-glow">
                <Link to="/auth" search={{ mode: "login" }}>
                  Login <ArrowRight className="ml-1 h-4 w-4" />
                </Link>
              </Button>
              <Button asChild size="lg" variant="outline">
                <Link to="/auth" search={{ mode: "register" }}>Register</Link>
              </Button>
            </div>
            <div className="mt-8 flex flex-wrap items-center gap-6 text-sm text-muted-foreground">
              <div className="flex items-center gap-1"><Star className="h-4 w-4 fill-primary text-primary" /> 4.9 average rating</div>
              <div>1,200+ customers served</div>
            </div>
          </div>

          <div className="relative">
            <div className="absolute -inset-4 -z-10 rounded-3xl gradient-hero opacity-20 blur-2xl" />
            <div className="glass overflow-hidden rounded-3xl shadow-elegant">
              <img
                src={heroImg}
                alt="Modern cyber café interior with glowing blue screens"
                width={1600}
                height={1008}
                className="h-full w-full object-cover"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Search */}
      <section id="services" className="mx-auto max-w-7xl px-4 sm:px-6">
        <div className="glass flex items-center gap-3 rounded-2xl p-3 shadow-elegant">
          <Search className="ml-2 h-5 w-5 text-muted-foreground" />
          <Input
            value={q}
            onChange={(e) => setQ(e.target.value)}
            placeholder="Search a service — e.g. KRA, passport, HELB, printing…"
            className="border-0 bg-transparent shadow-none focus-visible:ring-0"
          />
          <Button asChild variant="secondary" className="hidden sm:inline-flex">
            <Link to="/services">Browse all</Link>
          </Button>
        </div>

        <div className="mt-8 grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4">
          {featured.map((s) => (
            <Link key={s.slug} to="/services/$slug" params={{ slug: s.slug }}>
              <Card className="group h-full transition-all hover:-translate-y-1 hover:shadow-glow">
                <CardContent className="p-4">
                  <div className="grid h-11 w-11 place-items-center rounded-xl bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground">
                    <s.icon className="h-5 w-5" />
                  </div>
                  <div className="mt-3 text-sm font-semibold leading-tight">{s.name}</div>
                  <div className="mt-1 text-xs text-muted-foreground">{s.price}</div>
                </CardContent>
              </Card>
            </Link>
          ))}
        </div>
        <div className="mt-6 text-center">
          <Button asChild variant="outline">
            <Link to="/services">View all services <ArrowRight className="ml-1 h-4 w-4" /></Link>
          </Button>
        </div>
      </section>

      {/* Why us */}
      <section className="mx-auto mt-24 max-w-7xl px-4 sm:px-6">
        <div className="text-center">
          <Badge variant="secondary">How it works</Badge>
          <h2 className="mt-3 text-3xl font-bold tracking-tight sm:text-4xl">Four simple steps</h2>
        </div>
        <div className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {howItWorks.map((h, i) => (
            <Card key={h.title} className="glass border-0">
              <CardContent className="p-6">
                <div className="flex items-center gap-3">
                  <span className="grid h-11 w-11 place-items-center rounded-xl bg-primary/10 text-primary">
                    <h.icon className="h-5 w-5" />
                  </span>
                  <span className="text-2xl font-black text-muted-foreground/40">{i + 1}</span>
                </div>
                <div className="mt-4 font-semibold">{h.title}</div>
                <p className="mt-1 text-sm text-muted-foreground">{h.body}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

      <section className="mx-auto mt-24 max-w-7xl px-4 sm:px-6">
        <div className="text-center">
          <Badge variant="secondary">Why choose us</Badge>
          <h2 className="mt-3 text-3xl font-bold tracking-tight sm:text-4xl">Fast, friendly, professional</h2>
          <p className="mx-auto mt-3 max-w-2xl text-muted-foreground">
            We combine speed, expertise and care — so every visit ends with the outcome you came for.
          </p>
        </div>
        <div className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {whyUs.map((w) => (
            <Card key={w.title} className="glass border-0">
              <CardContent className="p-6">
                <div className="grid h-11 w-11 place-items-center rounded-xl gradient-hero text-white shadow-glow">
                  <w.icon className="h-5 w-5" />
                </div>
                <div className="mt-4 font-semibold">{w.title}</div>
                <p className="mt-1 text-sm text-muted-foreground">{w.body}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

      {/* Reviews */}
      <section className="mx-auto mt-24 max-w-7xl px-4 sm:px-6">
        <div className="text-center">
          <Badge variant="secondary">Customer reviews</Badge>
          <h2 className="mt-3 text-3xl font-bold tracking-tight sm:text-4xl">What our customers say</h2>
        </div>
        <div className="mt-10 grid gap-4 md:grid-cols-3">
          {testimonials.map((t) => (
            <Card key={t.name}>
              <CardContent className="p-6">
                <div className="flex gap-0.5 text-primary">
                  {Array.from({ length: 5 }).map((_, i) => <Star key={i} className="h-4 w-4 fill-current" />)}
                </div>
                <p className="mt-3 text-sm">"{t.body}"</p>
                <div className="mt-4 text-sm font-semibold">{t.name}</div>
                <div className="text-xs text-muted-foreground">{t.role}</div>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

      {/* FAQ */}
      <section className="mx-auto mt-24 max-w-3xl px-4 sm:px-6">
        <div className="text-center">
          <Badge variant="secondary">FAQ</Badge>
          <h2 className="mt-3 text-3xl font-bold tracking-tight sm:text-4xl">Frequently asked questions</h2>
        </div>
        <Accordion type="single" collapsible className="mt-8">
          {faqs.map((f, i) => (
            <AccordionItem key={i} value={`i-${i}`}>
              <AccordionTrigger className="text-left">{f.q}</AccordionTrigger>
              <AccordionContent>{f.a}</AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </section>

      {/* CTA */}
      <section className="mx-auto mt-24 max-w-7xl px-4 sm:px-6">
        <div className="relative overflow-hidden rounded-3xl gradient-hero p-10 text-center text-white shadow-glow sm:p-16">
          <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">Ready to get started?</h2>
          <p className="mx-auto mt-3 max-w-xl opacity-90">
            Create a free account and start booking any of our 40+ digital services.
          </p>
          <div className="mt-6 flex flex-wrap justify-center gap-3">
            <Button asChild size="lg" variant="secondary">
              <Link to="/auth" search={{ mode: "register" }}>Create account</Link>
            </Button>
            <Button asChild size="lg" variant="outline" className="border-white/40 bg-white/10 text-white hover:bg-white/20">
              <Link to="/contact">Contact us</Link>
            </Button>
          </div>
        </div>
      </section>
    </SiteLayout>
  );
}