import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { PartnerLoginDialog } from "@/components/site/PartnerLoginDialog";
import {
  Check,
  TrendingUp,
  LayoutDashboard,
  Megaphone,
  BarChart3,
  ClipboardList,
  BadgeCheck,
  Smile,
  ArrowRight,
} from "lucide-react";
import { SiteLayout } from "@/components/site/SiteLayout";
import { Reveal } from "@/components/site/Reveal";
import { Accent, DashedArrow, SectionHeading } from "@/components/site/Section";
import appStoreBadge from "@/assets/app-store-badge.png.asset.json";
import playStoreBadge from "@/assets/play-store-badge.png.asset.json";
import groupAsset from "@/assets/Group.png.asset.json";

export const Route = createFileRoute("/partners")({
  head: () => ({
    meta: [
      { title: "Airfis Connect — Grow your service business" },
      {
        name: "description",
        content:
          "Join 18,000+ verified partners. Receive more bookings, promote offers, and grow with Airfis Connect.",
      },
      { property: "og:title", content: "Airfis Connect for Partners" },
      {
        property: "og:description",
        content:
          "Grow your vehicle service business with India's fastest-growing vehicle ecosystem.",
      },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary_large_image" },
    ],
  }),
  component: Partners,
});

const BENEFITS = [
  {
    icon: TrendingUp,
    title: "Receive more bookings",
    desc: "Get discovered by owners actively searching in your area.",
  },
  {
    icon: LayoutDashboard,
    title: "Business dashboard",
    desc: "Manage staff, bookings and availability from one screen.",
  },
  { icon: Megaphone, title: "Promote offers", desc: "Push deals directly to nearby customers." },
  {
    icon: BarChart3,
    title: "Business analytics",
    desc: "See what drives your revenue in real time.",
  },
];

const STEPS = [
  { icon: ClipboardList, title: "Create your business profile." },
  { icon: BadgeCheck, title: "Submit your details and get approved." },
  { icon: Smile, title: "Get discovered and start receiving bookings." },
];

const REQ = [
  { title: "Business Details", desc: "Name, address & mobile" },
  { title: "Service Categories", desc: "Choose your services" },
  { title: "Working Hours", desc: "Set your availability" },
];

const PLANS = [
  {
    name: "Free",
    price: "₹0",
    period: "/month",
    tagline: "List your business and get discovered by customers.",
    features: ["Business listing", "Showcase your services", "Get discovered by customers"],
    cta: "Get Started",
  },
  {
    name: "Standard",
    price: "₹299",
    period: "/month",
    featured: true,
    tagline: "Get more bookings and manage your business with ease.",
    features: [
      "2 staff accounts",
      "Booking management",
      "Basic support",
      "Reach more nearby customers",
    ],
    cta: "Get Started",
  },
  {
    name: "Pro",
    price: "₹499",
    period: "/month",
    tagline: "Boost visibility, promote offers, grow faster.",
    features: [
      "5 staff accounts",
      "Offers & promotions",
      "Priority listing",
      "Analytics dashboard",
      "Priority support",
    ],
    cta: "Get Started",
  },
];

function Partners() {
  const [loginOpen, setLoginOpen] = useState(false);
  const [dialogStep, setDialogStep] = useState<0 | 2>(0);
  const openLogin = () => {
    setDialogStep(0);
    setLoginOpen(true);
  };
  const openSignup = () => {
    setDialogStep(2);
    setLoginOpen(true);
  };
  return (
    <SiteLayout>
      <section className="pt-16 lg:pt-24 pb-16 lg:pb-20">
        <div className="container-airfis text-center">
          <h1 className="h-display text-ink mx-auto max-w-3xl">
            <Accent>Grow</Accent> your business with Airfis Connect
          </h1>
          <p className="mt-6 text-[15px] leading-7 text-ink-2 mx-auto max-w-md">
            Connect with customers who need your services whenever and wherever you&apos;re
            available.
          </p>
          <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
            <button
              type="button"
              onClick={openSignup}
              className="btn-brand inline-flex items-center gap-2"
            >
              Register your business <ArrowRight className="h-4 w-4" />
            </button>
          </div>
          <p className="mt-10 text-xs text-ink-3">Already a partner? Download the Partner App</p>
          <div className="mt-3 flex flex-wrap items-center justify-center gap-3">
            <a
              href="https://play.google.com/store/apps/details?id=com.airfis"
              target="_blank"
              rel="noopener noreferrer"
              aria-label="Get it on Google Play"
              className="transition-transform hover:scale-[1.03]"
            >
              <img
                src={playStoreBadge.url}
                alt="Get Airfis on Google Play"
                className="h-11 w-auto"
              />
            </a>
            <a
              href="https://apps.apple.com/app/airfis"
              target="_blank"
              rel="noopener noreferrer"
              aria-label="Download on the App Store"
              className="transition-transform hover:scale-[1.03]"
            >
              <img
                src={appStoreBadge.url}
                alt="Download Airfis on the App Store"
                className="h-11 w-auto"
              />
            </a>
          </div>
        </div>
      </section>

      <section id="benefits" className="py-20 lg:py-28">
        <div className="container-airfis grid lg:grid-cols-12 gap-10 lg:gap-14 items-center">
          <div className="lg:col-span-5">
            <span className="inline-flex text-[#FF4308]">
              <LayoutDashboard className="h-12 w-12" strokeWidth={1.75} />
            </span>
            <h2 className="h-section mt-6 text-ink">
              Everything you need
              <br />
              to <Accent>simplify</Accent>
            </h2>
            <p className="mt-5 text-[15px] leading-relaxed text-ink-2 max-w-sm">
              Tools built for workshops, showrooms and independent technicians — all in one console.
            </p>
          </div>
          <div className="lg:col-span-7 grid sm:grid-cols-2 gap-5">
            {BENEFITS.map((b, i) => (
              <Reveal key={b.title} delay={i * 70}>
                <div className="surface-card surface-card-hover h-full p-6">
                  <span className="flex h-10 w-10 items-center justify-center rounded-xl bg-[#f3f3f3] text-[#0a0a12]">
                    <b.icon className="h-5 w-5" />
                  </span>
                  <div className="mt-5 font-semibold text-ink">{b.title}</div>
                  <p className="mt-2 text-sm leading-relaxed text-ink-2">{b.desc}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="py-20 lg:py-28 bg-surface">
        <div className="container-airfis">
          <SectionHeading sub="Three simple steps between signing up and serving your first Airfis customer.">
            Get your <Accent>first booking</Accent>
          </SectionHeading>
          <div className="mt-14 flex flex-col md:flex-row items-start justify-center gap-8 md:gap-0">
            {STEPS.map((s, i) => (
              <div key={s.title} className="contents">
                <Reveal delay={i * 90} className="w-full md:w-[260px]">
                  <div className="flex flex-col items-center text-center">
                    <span className="flex h-20 w-20 items-center justify-center rounded-3xl bg-[#f3f3f3] text-[#0a0a12]">
                      <s.icon className="h-9 w-9" strokeWidth={1.5} />
                    </span>
                    <p className="mt-5 text-[15px] font-medium text-ink-2 leading-snug max-w-[220px]">
                      {s.title}
                    </p>
                  </div>
                </Reveal>
                {i < STEPS.length - 1 && (
                  <DashedArrow
                    className="hidden md:block w-[140px] h-14 -mt-2 shrink-0"
                    flip={i % 2 === 1}
                  />
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="py-20 lg:py-28">
        <div className="container-airfis grid lg:grid-cols-2 gap-12 items-center">
          <div>
            <img src={groupAsset.url} alt="Register your business" className="mb-6 h-16 w-auto" />
            <h2 className="h-section text-ink">
              <Accent>Ready</Accent> to get started?
            </h2>
            <p className="mt-5 text-[15px] leading-relaxed text-ink-2 max-w-md">
              Standard business details — nothing you don&apos;t already have. Sign up in under five
              minutes.
            </p>
            <button
              type="button"
              onClick={openSignup}
              className="btn-brand mt-8 inline-flex items-center gap-2"
            >
              Register your business <ArrowRight className="h-4 w-4" />
            </button>
          </div>
          <div className="mx-auto w-full max-w-md">
            {REQ.map((r) => (
              <div
                key={r.title}
                className="flex items-start gap-3 border-b border-hairline py-4 last:border-b-0"
              >
                <span className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-black/20 text-black">
                  <Check className="h-3.5 w-3.5" />
                </span>
                <div className="min-w-0">
                  <div className="text-sm font-semibold text-ink">{r.title}</div>
                  <div className="mt-1 text-sm text-ink-2">{r.desc}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section id="pricing" className="py-20 lg:py-28 bg-surface">
        <div className="container-airfis">
          <SectionHeading sub="Start free, upgrade when you're ready. Cancel any time.">
            Simple <Accent>plans.</Accent> No hidden fees.
          </SectionHeading>

          <div className="mt-14 grid md:grid-cols-3 gap-6">
            {PLANS.map((p, i) => (
              <Reveal key={p.name} delay={i * 80}>
                <div
                  className={`h-full rounded-3xl p-8 border flex flex-col ${
                    p.featured
                      ? "border-[#FF4308] bg-white shadow-[0_30px_70px_-45px_rgba(255,67,8,0.65)]"
                      : "border-hairline bg-white"
                  }`}
                >
                  <div className="flex items-center justify-between">
                    <div className="font-semibold text-ink">{p.name}</div>
                    {p.featured && (
                      <span className="rounded-full bg-[#FF4308] px-2 py-1 text-[10px] uppercase tracking-widest text-white">
                        Most popular
                      </span>
                    )}
                  </div>
                  <div className="mt-6 flex items-baseline gap-1">
                    <span className="text-4xl font-semibold tracking-tight text-ink">
                      {p.price}
                    </span>
                    <span className="text-ink-2 text-sm">{p.period}</span>
                  </div>
                  <p className="mt-3 text-sm text-ink-2">{p.tagline}</p>
                  <ul className="mt-7 space-y-3 flex-1">
                    {p.features.map((f) => (
                      <li key={f} className="flex items-center gap-3 text-sm text-ink-2">
                        <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-black/20 text-black">
                          <Check className="h-3 w-3" />
                        </span>
                        <span>{f}</span>
                      </li>
                    ))}
                  </ul>
                  <button
                    type="button"
                    onClick={openLogin}
                    className={`mt-8 w-full inline-flex items-center justify-center ${p.featured ? "btn-brand" : "btn-dark"}`}
                  >
                    {p.cta}
                  </button>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
      <PartnerLoginDialog
        open={loginOpen}
        onClose={() => setLoginOpen(false)}
        initialStep={dialogStep}
      />
    </SiteLayout>
  );
}