// app/stories/page.tsx
"use client";

import { useState } from "react";
// ⬇️ If you already use a Breadcrumb component, uncomment & fix the path
// import Breadcrumb from "../../components/Breadcrumb";

type StoryCategory = "Customer" | "Innovation" | "Culture" | "Impact";

interface Story {
  id: string;
  title: string;
  subtitle: string;
  category: StoryCategory;
  date: string;
  readingTime: string;
  image: string;
  featured?: boolean;
}

const STORIES: Story[] = [
  {
    id: "satellite-security",
    title: "Securing a Global Satellite Network in 90 Days",
    subtitle:
      "How a leading operator partnered with Wimraw to harden 120+ ground stations against next-gen cyber threats.",
    category: "Customer",
    date: "Jan 2025",
    readingTime: "6 min read",
    image: "/img/stories/satellite.jpg",
    featured: true,
  },
  {
    id: "mera-insights",
    title: "Inside M.E.R.A: Re-imagining Market Intelligence",
    subtitle:
      "From static reports to live decision dashboards used by investment teams across three continents.",
    category: "Innovation",
    date: "Dec 2024",
    readingTime: "5 min read",
    image: "/img/stories/mera.jpg",
  },
  {
    id: "culture-lab",
    title: "Building a Culture Lab Around Responsible AI",
    subtitle:
      "Why our research, ethics and product teams sit at the same table from day one.",
    category: "Culture",
    date: "Oct 2024",
    readingTime: "4 min read",
    image: "/img/stories/culture.jpg",
  },
  {
    id: "impact-healthcare",
    title: "Faster Diagnostics for Underserved Hospitals",
    subtitle:
      "Deploying edge-AI models that reduced triage time by 37% in a public health network.",
    category: "Impact",
    date: "Aug 2024",
    readingTime: "7 min read",
    image: "/img/stories/healthcare.jpg",
  },
  {
    id: "operations-control",
    title: "From Data Chaos to a Single Command View",
    subtitle:
      "How a logistics leader unified telemetry from 18 countries into one operations cockpit.",
    category: "Customer",
    date: "Jun 2024",
    readingTime: "5 min read",
    image: "/img/stories/logistics.jpg",
  },
];

const CATEGORIES: (StoryCategory | "All")[] = [
  "All",
  "Customer",
  "Innovation",
  "Culture",
  "Impact",
];

export default function StoriesPage() {
  const [activeCategory, setActiveCategory] = useState<StoryCategory | "All">(
    "All"
  );

  const featured = STORIES.find((s) => s.featured) ?? STORIES[0];
  const others = STORIES.filter((s) => s.id !== featured.id);

  const filteredStories =
    activeCategory === "All"
      ? others
      : others.filter((s) => s.category === activeCategory);

  return (
    <main className="min-h-screen bg-slate-950 text-slate-50">
      {/* Optional: your existing breadcrumb */}
      {/* 
      <Breadcrumb
        breadcrumbs={[
          { name: "Home", href: "/" },
          { name: "Stories", href: "/stories" },
        ]}
        pageTitle="Stories"
        description="Real outcomes from customers, partners and our teams."
      />
      */}

      {/* Hero / Featured story */}
      <section className="border-b border-slate-800 bg-gradient-to-b from-slate-950 via-slate-950 to-slate-900">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-20 grid gap-10 lg:grid-cols-[minmax(0,1.6fr)_minmax(0,1.1fr)] items-center">
          {/* Text side */}
          <div>
            <p className="text-xs font-semibold tracking-[0.22em] uppercase text-violet-400 mb-3">
              Wimraw Stories
            </p>
            <h1 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight">
              Stories from the edge of{" "}
              <span className="text-violet-400">technology and impact.</span>
            </h1>
            <p className="mt-4 text-slate-300 max-w-xl">
              Explore how teams use Wimraw to secure infrastructure, launch new
              platforms, and build solutions that scale from lab to orbit.
            </p>

            <div className="mt-8 flex flex-wrap gap-4 items-center">
              <a
                href={`/stories/${featured.id}`}
                className="inline-flex items-center gap-2 rounded-full bg-violet-500 px-6 py-3 text-sm font-semibold text-white shadow-lg shadow-violet-500/30 hover:bg-violet-600 transition"
              >
                Read Featured Story
                <span aria-hidden>↗</span>
              </a>
              <p className="text-xs uppercase tracking-[0.18em] text-slate-400">
                {featured.date} • {featured.readingTime}
              </p>
            </div>
          </div>

          {/* Featured card visual */}
          <article className="relative group rounded-3xl overflow-hidden border border-slate-800 bg-gradient-to-br from-slate-900/80 via-slate-900 to-slate-950 shadow-2xl">
            <div className="relative h-64 sm:h-72 lg:h-80 overflow-hidden">
              <img
                src={featured.image}
                alt={featured.title}
                className="w-full h-full object-cover opacity-90 group-hover:scale-105 transition-transform duration-700"
              />

              {/* gradient overlay */}
              <div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/40 to-transparent" />
            </div>

            <div className="absolute inset-x-0 bottom-0 p-6 sm:p-7">
              <span className="inline-flex items-center rounded-full bg-violet-500/20 text-violet-300 text-xs font-semibold px-3 py-1 backdrop-blur">
                Featured • {featured.category}
              </span>
              <h2 className="mt-3 text-lg sm:text-xl font-semibold">
                {featured.title}
              </h2>
              <p className="mt-2 text-sm text-slate-300 line-clamp-2">
                {featured.subtitle}
              </p>
            </div>
          </article>
        </div>
      </section>

      {/* Filters + grid */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-14 lg:py-18">
        {/* Filter bar */}
        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-10">
          <div>
            <h3 className="text-xl font-semibold">Latest stories</h3>
            <p className="text-sm text-slate-400">
              Browse by theme or category to see how organizations work with
              Wimraw.
            </p>
          </div>

          <div className="flex flex-wrap gap-2">
            {CATEGORIES.map((cat) => (
              <button
                key={cat}
                type="button"
                onClick={() => setActiveCategory(cat)}
                className={`px-4 py-2 rounded-full text-xs font-semibold border transition-all ${
                  activeCategory === cat
                    ? "bg-violet-500 text-white border-violet-500 shadow-lg shadow-violet-500/30"
                    : "border-slate-700 text-slate-200 hover:border-violet-400/80 hover:text-white"
                }`}
              >
                {cat === "All" ? "All stories" : cat}
              </button>
            ))}
          </div>
        </div>

        {/* Stories grid */}
        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {filteredStories.map((story) => (
            <article
              key={story.id}
              className="group flex flex-col rounded-2xl border border-slate-800 bg-slate-900/60 hover:bg-slate-900 transition shadow-sm hover:shadow-xl overflow-hidden"
            >
              <div className="relative h-40 overflow-hidden">
                <img
                  src={story.image}
                  alt={story.title}
                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-slate-950/70 via-transparent to-transparent" />
                <span className="absolute bottom-3 left-3 inline-flex items-center rounded-full bg-black/50 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-100 backdrop-blur">
                  {story.category}
                </span>
              </div>

              <div className="flex-1 p-5 flex flex-col">
                <p className="text-xs text-slate-400 mb-1">
                  {story.date} · {story.readingTime}
                </p>
                <h4 className="text-base font-semibold leading-snug group-hover:text-violet-300 transition-colors">
                  {story.title}
                </h4>
                <p className="mt-2 text-sm text-slate-300 line-clamp-3">
                  {story.subtitle}
                </p>

                <div className="mt-4 flex items-center justify-between">
                  <a
                    href={`/stories/${story.id}`}
                    className="inline-flex items-center gap-1 text-xs font-semibold text-violet-400 group-hover:text-violet-300"
                  >
                    Read story
                    <span
                      aria-hidden
                      className="inline-block translate-y-[1px] group-hover:translate-x-0.5 transition-transform"
                    >
                      ↗
                    </span>
                  </a>

                  <div className="flex items-center gap-1 text-[11px] text-slate-500">
                    <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
                    Verified customer story
                  </div>
                </div>
              </div>
            </article>
          ))}

          {filteredStories.length === 0 && (
            <div className="col-span-full rounded-2xl border border-dashed border-slate-700 bg-slate-900/60 p-8 text-center text-sm text-slate-400">
              No stories match this filter yet. Try a different category.
            </div>
          )}
        </div>
      </section>

      {/* Bottom CTA */}
      <section className="border-t border-slate-800 bg-slate-950/90">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 flex flex-col md:flex-row items-center justify-between gap-6">
          <div>
            <h3 className="text-xl font-semibold">
              Have a story you&apos;d like to create with Wimraw?
            </h3>
            <p className="mt-2 text-sm text-slate-400 max-w-xl">
              Our team partners with customers, NGOs, and research labs to build
              pilots, proof-of-concepts and full-scale platforms.
            </p>
          </div>

          <div className="flex gap-3">
            <a
              href="/contact"
              className="inline-flex items-center justify-center px-6 py-3 rounded-full bg-violet-500 text-sm font-semibold text-white shadow-lg shadow-violet-500/30 hover:bg-violet-600 transition"
            >
              Talk to our team
            </a>
            <a
              href="/press"
              className="inline-flex items-center justify-center px-6 py-3 rounded-full border border-slate-700 text-sm font-semibold text-slate-200 hover:border-violet-400 hover:text-white transition"
            >
              Visit press center
            </a>
          </div>
        </div>
      </section>
    </main>
  );
}