import { createFileRoute, Link } from "@tanstack/react-router";
import { SiteLayout } from "@/components/site/SiteLayout";
import { Reveal } from "@/components/site/Reveal";
import { ArrowRight, Clock, Search } from "lucide-react";

export const Route = createFileRoute("/blog")({
  head: () => ({
    meta: [
      { title: "Airfis Blog — Stories, guides & vehicle care insights" },
      {
        name: "description",
        content:
          "Fresh perspectives on vehicle ownership, service tips, product updates and stories from the Airfis community.",
      },
      { property: "og:title", content: "Airfis Blog" },
      {
        property: "og:description",
        content: "Guides, product updates and stories from India's smart vehicle ecosystem.",
      },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary_large_image" },
    ],
  }),
  component: Blog,
});

const CATEGORIES = ["All", "Product", "Vehicle care", "Partners", "Stories", "Company"];

const FEATURED = {
  category: "Product",
  title: "Introducing the new Airfis dashboard — your vehicles, beautifully organised.",
  excerpt:
    "A ground-up redesign that puts your entire garage, service history and reminders into one calm, glance-able view. Here's what we changed and why it matters.",
  author: "Aditya Rao",
  date: "July 18, 2026",
  read: "6 min read",
  cover: "linear-gradient(135deg, #FF4308 0%, #FF7A4A 45%, #1a1a1a 100%)",
};

const POSTS = [
  {
    category: "Vehicle care",
    title: "The monsoon checklist every Indian car owner should run this week.",
    excerpt: "Twelve small checks that save you thousands and a very bad Tuesday morning.",
    author: "Meera Iyer",
    date: "July 12, 2026",
    read: "5 min read",
    tint: "linear-gradient(135deg, #0f172a, #334155)",
  },
  {
    category: "Partners",
    title: "How Sri Balaji Auto grew bookings 4× in six months with Airfis.",
    excerpt: "A single-bay garage in Coimbatore, a smart dashboard, and a very focused owner.",
    author: "Karthik R.",
    date: "July 05, 2026",
    read: "4 min read",
    tint: "linear-gradient(135deg, #FF4308, #ffb199)",
  },
  {
    category: "Stories",
    title: "1,200 km on the East Coast Road: a founder's field notes.",
    excerpt:
      "What we learned about breakdowns, human kindness, and the gaps our app still needs to close.",
    author: "Ishaan Verma",
    date: "June 28, 2026",
    read: "8 min read",
    tint: "linear-gradient(135deg, #1e3a8a, #38bdf8)",
  },
  {
    category: "Product",
    title: "Reminders that actually remind you — the science behind our nudges.",
    excerpt:
      "Why insurance, FASTag and PUC reminders now arrive at the right moment, not the wrong one.",
    author: "Priya N.",
    date: "June 21, 2026",
    read: "5 min read",
    tint: "linear-gradient(135deg, #052e2b, #14b8a6)",
  },
  {
    category: "Vehicle care",
    title: "Alignment vs balancing: what your steering wheel is trying to tell you.",
    excerpt: "A plain-English guide to the two services garages sell most — and mix up most.",
    author: "Ramesh Kumar",
    date: "June 14, 2026",
    read: "4 min read",
    tint: "linear-gradient(135deg, #4a044e, #f472b6)",
  },
  {
    category: "Company",
    title: "We're hiring: come build the vehicle ecosystem India deserves.",
    excerpt: "Engineering, design and partner-success roles are open across Bengaluru and Chennai.",
    author: "Team Airfis",
    date: "June 07, 2026",
    read: "3 min read",
    tint: "linear-gradient(135deg, #1a1a1a, #FF4308)",
  },
];

function Blog() {
  return (
    <SiteLayout>
      {/* Hero */}
      <section className="pt-16 pb-10 lg:pt-24 lg:pb-14">
        <div className="container-airfis">
          <Reveal>
            <p className="eyebrow">The Airfis Blog</p>
            <h1 className="h-hero mt-4 text-ink max-w-3xl">
              Ideas, updates and stories from the road.
            </h1>
            <p className="mt-5 text-ink-2 text-lg max-w-2xl leading-relaxed">
              Product news, care guides and honest field notes from the team building India's smart
              vehicle ecosystem.
            </p>
          </Reveal>

          {/* Search + categories */}
          <Reveal delay={100}>
            <div className="mt-10 flex flex-col lg:flex-row lg:items-center gap-5 justify-between">
              <div className="relative w-full lg:w-96">
                <Search className="w-4 h-4 absolute left-4 top-1/2 -translate-y-1/2 text-ink-2" />
                <input
                  type="search"
                  placeholder="Search articles"
                  className="w-full pl-11 pr-4 py-3 rounded-full border border-hairline bg-white text-sm text-ink placeholder:text-ink-2 focus:outline-none focus:border-primary transition-colors"
                />
              </div>
              <div className="flex flex-wrap gap-2">
                {CATEGORIES.map((c, i) => (
                  <button
                    key={c}
                    className={`text-xs uppercase tracking-widest px-4 py-2 rounded-full border transition-colors ${
                      i === 0
                        ? "bg-ink text-white border-ink"
                        : "bg-white text-ink-2 border-hairline hover:border-ink hover:text-ink"
                    }`}
                  >
                    {c}
                  </button>
                ))}
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* Featured post */}
      <section className="py-8">
        <div className="container-airfis">
          <Reveal>
            <article className="grid lg:grid-cols-2 gap-10 items-center rounded-3xl overflow-hidden border border-hairline bg-white shadow-elev">
              <div
                className="h-72 lg:h-full min-h-[380px] relative"
                style={{ background: FEATURED.cover }}
              >
                <div
                  className="absolute inset-0 opacity-30"
                  style={{
                    backgroundImage:
                      "radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), transparent 60%)",
                  }}
                />
                <span className="absolute top-6 left-6 text-[10px] uppercase tracking-widest bg-white/90 text-ink px-3 py-1.5 rounded-full">
                  Featured · {FEATURED.category}
                </span>
              </div>
              <div className="p-8 lg:p-12">
                <h2 className="text-3xl lg:text-4xl font-semibold tracking-tight text-ink leading-tight">
                  {FEATURED.title}
                </h2>
                <p className="mt-5 text-ink-2 leading-relaxed">{FEATURED.excerpt}</p>
                <div className="mt-6 flex items-center gap-4 text-sm text-ink-2">
                  <span className="font-medium text-ink">{FEATURED.author}</span>
                  <span>·</span>
                  <span>{FEATURED.date}</span>
                  <span className="inline-flex items-center gap-1">
                    <Clock className="w-3.5 h-3.5" />
                    {FEATURED.read}
                  </span>
                </div>
                <button className="mt-8 btn-brand inline-flex items-center gap-2">
                  Read the story <ArrowRight className="w-4 h-4" />
                </button>
              </div>
            </article>
          </Reveal>
        </div>
      </section>

      {/* Post grid */}
      <section className="py-16">
        <div className="container-airfis">
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {POSTS.map((p, i) => (
              <Reveal key={p.title} delay={i * 60}>
                <article className="group rounded-2xl overflow-hidden border border-hairline bg-white hover:shadow-elev transition-shadow duration-300 h-full flex flex-col">
                  <div className="h-48 relative" style={{ background: p.tint }}>
                    <div
                      className="absolute inset-0 opacity-40"
                      style={{
                        backgroundImage:
                          "radial-gradient(circle at 70% 30%, rgba(255,255,255,0.35), transparent 55%)",
                      }}
                    />
                    <span className="absolute top-4 left-4 text-[10px] uppercase tracking-widest bg-white/90 text-ink px-2.5 py-1 rounded-full">
                      {p.category}
                    </span>
                  </div>
                  <div className="p-6 flex flex-col flex-1">
                    <h3 className="text-lg font-semibold text-ink leading-snug group-hover:text-primary transition-colors">
                      {p.title}
                    </h3>
                    <p className="mt-3 text-sm text-ink-2 leading-relaxed flex-1">{p.excerpt}</p>
                    <div className="mt-5 flex items-center gap-3 text-xs text-ink-2">
                      <span className="font-medium text-ink">{p.author}</span>
                      <span>·</span>
                      <span>{p.date}</span>
                      <span className="inline-flex items-center gap-1 ml-auto">
                        <Clock className="w-3 h-3" />
                        {p.read}
                      </span>
                    </div>
                  </div>
                </article>
              </Reveal>
            ))}
          </div>

          <div className="mt-14 flex justify-center">
            <button className="btn-dark">Load more articles</button>
          </div>
        </div>
      </section>

      {/* Newsletter */}
      <section className="pb-24">
        <div className="container-airfis">
          <Reveal>
            <div className="rounded-3xl bg-ink text-white p-10 lg:p-16 flex flex-col lg:flex-row items-start lg:items-center gap-8 justify-between">
              <div className="max-w-xl">
                <p className="eyebrow">Stay in the loop</p>
                <h2 className="h-section mt-4 text-white">
                  One thoughtful email a month. Nothing else.
                </h2>
                <p className="mt-4 text-white/70 leading-relaxed">
                  Product updates, vehicle care guides and behind-the-scenes stories — straight to
                  your inbox.
                </p>
              </div>
              <form
                onSubmit={(e) => e.preventDefault()}
                className="flex flex-col sm:flex-row gap-3 w-full lg:w-auto lg:min-w-[420px]"
              >
                <input
                  type="email"
                  required
                  placeholder="you@example.com"
                  className="flex-1 bg-white/5 border border-white/10 rounded-full px-5 py-3 text-sm text-white placeholder:text-white/40 focus:outline-none focus:border-primary"
                />
                <button className="btn-brand">Subscribe</button>
              </form>
            </div>
          </Reveal>

          <div className="mt-8 text-center text-sm text-ink-2">
            Looking for help instead?{" "}
            <Link to="/support" className="text-primary font-medium hover:underline">
              Visit the Help Center
            </Link>
          </div>
        </div>
      </section>
    </SiteLayout>
  );
}