import { createFileRoute, Link } from "@tanstack/react-router";
import { ArrowRight, ShieldCheck, Zap, Award, Clock, Sparkles } from "lucide-react";
import { SiteLayout } from "@/components/site/Layout";
import { PageHero } from "@/components/site/PageHero";
import { CTAButtons } from "@/components/site/CTAButtons";
import { TrustBar } from "@/components/site/TrustBar";
import { Section, SectionHeader } from "@/components/site/Section";
import { ServiceCard } from "@/components/site/ServiceCard";
import { Testimonials } from "@/components/site/Testimonials";
import { FAQ } from "@/components/site/FAQ";
import { ContactForm } from "@/components/site/ContactForm";
import { ExitPopup } from "@/components/site/ExitPopup";
import { JsonLd } from "@/components/site/JsonLd";
import { SERVICES, SITE, FAQ as FAQ_DATA } from "@/lib/site";

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: `${SITE.name} — WordPress Expert: Malware Removal, Bug Fix, Speed` },
      { name: "description", content: "Hire a 5+ years experienced WordPress expert. Malware removal, hacked site recovery, bug fixing, speed optimization & maintenance. 100+ sites fixed. Reply in 30 mins." },
      { property: "og:title", content: "Fix WordPress Issues Fast — Expert Help in 30 Minutes" },
      { property: "og:description", content: "Malware, hacks, bugs, white screen, slow sites — fixed by a 5-year WordPress specialist. Money-back guarantee." },
    ],
  }),
  component: HomePage,
});

const orgSchema = {
  "@context": "https://schema.org",
  "@type": "ProfessionalService",
  name: SITE.legalName,
  url: SITE.url,
  email: SITE.email,
  telephone: SITE.phone,
  description: "WordPress emergency experts: malware removal, hacked site recovery, speed optimization and maintenance.",
  priceRange: "₹999 – ₹8,999",
  areaServed: "Worldwide",
  aggregateRating: { "@type": "AggregateRating", ratingValue: "4.9", reviewCount: "127" },
};

const faqSchema = {
  "@context": "https://schema.org",
  "@type": "FAQPage",
  mainEntity: FAQ_DATA.map((f) => ({
    "@type": "Question",
    name: f.q,
    acceptedAnswer: { "@type": "Answer", text: f.a },
  })),
};

function HomePage() {
  return (
    <SiteLayout>
      <JsonLd data={orgSchema} />
      <JsonLd data={faqSchema} />

      <PageHero
        eyebrow="WordPress Emergency Experts"
        title="WordPress Problems? Get Them Fixed Fast by an Expert."
        subtitle="5+ years experienced WordPress specialist for malware removal, bug fixing, speed optimization & design fixes. Most sites fixed within 4 hours."
      >
        <CTAButtons />
        <div className="mt-10">
          <TrustBar />
        </div>
      </PageHero>

      {/* Stats strip */}
      <div className="bg-card border-y border-border">
        <div className="container-tight grid grid-cols-2 md:grid-cols-4 gap-6 py-10">
          {[
            { v: "100+", l: "Sites Recovered" },
            { v: "30 min", l: "Avg Response" },
            { v: "4.9★", l: "Client Rating" },
            { v: "99%", l: "Success Rate" },
          ].map((s) => (
            <div key={s.l} className="text-center">
              <div className="font-display text-3xl md:text-4xl font-bold text-navy-deep">{s.v}</div>
              <div className="text-sm text-muted-foreground mt-1">{s.l}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Services */}
      <Section bg="muted">
        <SectionHeader
          eyebrow="What We Fix"
          title="Every WordPress Problem. One Expert."
          subtitle="From a tiny CSS bug to a full malware infection — pick a service below or describe your issue, we'll quote in 30 minutes."
        />
        <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {SERVICES.map((s) => (
            <ServiceCard key={s.slug} {...s} />
          ))}
        </div>
        <div className="mt-10 text-center">
          <Link
            to="/services"
            className="inline-flex items-center gap-2 font-semibold text-emerald hover:gap-3 transition-all"
          >
            See all services <ArrowRight className="h-4 w-4" />
          </Link>
        </div>
      </Section>

      {/* Why us */}
      <Section>
        <SectionHeader
          eyebrow="Why Choose Us"
          title="Why 100+ Founders Trust FixWP Pro"
          subtitle="No agencies. No outsourcing. One specialist who has seen every WordPress error in the book."
        />
        <div className="grid gap-6 md:grid-cols-3">
          {[
            { icon: Clock, title: "30-Minute Response", text: "Real human reply within 30 minutes — including nights and weekends." },
            { icon: ShieldCheck, title: "Money-back Guarantee", text: "Can't fix it? You don't pay. 99% success rate across 100+ sites." },
            { icon: Zap, title: "Same-day Delivery", text: "Most fixes shipped within 4 hours. Emergency same-day support available." },
            { icon: Award, title: "5+ Years Experience", text: "Specialist focus on WordPress only. No generalist agency overhead." },
            { icon: Sparkles, title: "Clean, Maintainable Code", text: "We fix root causes — no hacks, no bandaids, no broken sites later." },
            { icon: ShieldCheck, title: "Post-fix Hardening", text: "Every fix includes basic security hardening so the issue stays gone." },
          ].map((b) => (
            <div key={b.title} className="rounded-2xl border border-border bg-card p-6 shadow-soft">
              <span className="grid place-items-center h-12 w-12 rounded-xl bg-gradient-emerald shadow-emerald">
                <b.icon className="h-6 w-6 text-navy-deep" />
              </span>
              <h3 className="mt-4 text-lg font-semibold">{b.title}</h3>
              <p className="mt-2 text-muted-foreground">{b.text}</p>
            </div>
          ))}
        </div>
      </Section>

      {/* Pricing preview */}
      <Section bg="navy">
        <SectionHeader
          eyebrow="Honest Pricing"
          title="Transparent prices. No surprises."
          subtitle="Realistic rates from a freelancer — not agency markups. Pricing in INR & USD."
        />
        <div className="grid gap-5 md:grid-cols-3">
          {[
            { name: "Quick Fix", price: "₹999", usd: "$14", text: "Minor changes, CSS tweaks, image swaps, content edits.", cta: "Most popular for tweaks" },
            { name: "Bug & Error Fix", price: "₹1,999", usd: "$29", text: "Plugin conflicts, PHP errors, white screen, theme issues.", cta: "Same-day delivery" },
            { name: "Malware Removal", price: "₹4,999", usd: "$69", text: "Deep clean, backdoor removal, hardening, 30-day guarantee.", cta: "Recovery guaranteed" },
          ].map((p, i) => (
            <div
              key={p.name}
              className={`rounded-2xl border p-7 ${
                i === 1
                  ? "bg-gradient-emerald text-navy-deep border-emerald shadow-glow scale-[1.02]"
                  : "bg-cream/5 border-cream/15"
              }`}
            >
              <div className="text-sm font-semibold uppercase tracking-wider opacity-80">{p.name}</div>
              <div className="mt-3 flex items-baseline gap-2">
                <span className="font-display text-4xl font-bold">{p.usd}</span>
                <span className="opacity-70 text-sm">/ {p.price}</span>
              </div>
              <p className={`mt-3 text-sm ${i === 1 ? "text-navy-deep/80" : "text-cream/75"}`}>{p.text}</p>
              <Link
                to="/contact"
                className={`mt-6 inline-flex w-full items-center justify-center rounded-lg px-5 py-2.5 font-semibold transition-all ${
                  i === 1
                    ? "bg-navy-deep text-cream hover:bg-navy-deep/90"
                    : "bg-cream text-navy-deep hover:bg-emerald"
                }`}
              >
                {p.cta}
              </Link>
            </div>
          ))}
        </div>
        <div className="mt-10 text-center">
          <Link to="/pricing" className="inline-flex items-center gap-2 font-semibold text-emerald hover:gap-3 transition-all">
            See full pricing table <ArrowRight className="h-4 w-4" />
          </Link>
        </div>
      </Section>

      {/* Testimonials */}
      <Section>
        <SectionHeader eyebrow="Happy Clients" title="What Our Clients Say" subtitle="Real reviews from founders, agencies, and store owners." />
        <Testimonials />
      </Section>

      {/* FAQ */}
      <Section bg="muted">
        <SectionHeader eyebrow="FAQ" title="Frequently Asked Questions" />
        <FAQ />
      </Section>

      {/* Contact */}
      <Section>
        <div className="grid gap-12 lg:grid-cols-2 items-start">
          <div>
            <SectionHeader
              align="left"
              eyebrow="Contact"
              title="Tell us what's broken."
              subtitle="Describe the issue — we'll diagnose it and quote a fix within 30 minutes. Free for emergencies."
            />
            <div className="space-y-3 text-sm">
              <p className="flex gap-2"><strong className="w-24 text-foreground">Email</strong><a href={`mailto:${SITE.email}`} className="text-emerald hover:underline">{SITE.email}</a></p>
              <p className="flex gap-2"><strong className="w-24 text-foreground">WhatsApp</strong><span>{SITE.phone}</span></p>
              <p className="flex gap-2"><strong className="w-24 text-foreground">Hours</strong><span>24 / 7 — including weekends</span></p>
            </div>
          </div>
          <ContactForm />
        </div>
      </Section>

      <ExitPopup />
    </SiteLayout>
  );
}