import { useParams, Link } from "react-router-dom";
import { ArrowRight, Bot, MessageSquare } from "lucide-react";
import { Button } from "@/components/ui/button";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import Breadcrumb from "@/components/Breadcrumb";
import { problems, severityColors, severityTextColors } from "@/data/problems";

const ProblemDetail = () => {
  const { slug } = useParams<{ slug: string }>();
  const problem = problems.find((p) => p.slug === slug);

  if (!problem) {
    return (
      <div className="min-h-screen bg-background">
        <Navbar />
        <div className="pt-24 text-center">
          <h1 className="font-display text-4xl font-bold text-foreground">Problem not found</h1>
          <Link to="/problems" className="text-primary mt-4 inline-block">Back to all problems</Link>
        </div>
        <Footer />
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-background">
      <Navbar />

      {/* Section 1: Hero */}
      <section className="pt-20 pb-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <Breadcrumb
            items={[
              { label: "Home", to: "/" },
              { label: "Problems", to: "/problems" },
              { label: problem.name },
            ]}
          />

          <div className="mt-4 flex items-center gap-2 mb-6">
            <div className={`w-2.5 h-2.5 rounded-full ${severityColors[problem.severity]}`} />
            <span className={`text-xs font-semibold uppercase tracking-widest ${severityTextColors[problem.severity]}`}>
              {problem.severity}
            </span>
          </div>

          <h1 className="font-display font-bold text-4xl sm:text-5xl lg:text-[56px] text-foreground leading-[1.1] mb-6">
            {problem.name}
          </h1>
          <p className="text-xl sm:text-2xl text-primary font-normal max-w-2xl">
            {problem.financialHook}
          </p>
        </div>
      </section>

      {/* Section 2: What's Actually Happening */}
      <section className="py-20 border-t border-border">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-xs font-bold text-primary uppercase tracking-[0.2em] mb-4">
            What's Actually Happening
          </div>
          <h2 className="font-display font-bold text-3xl sm:text-[32px] text-foreground leading-tight mb-8 max-w-2xl">
            {problem.section2Headline}
          </h2>
          <div className="max-w-[640px] space-y-5">
            {problem.section2Body.map((para, i) => (
              <p key={i} className="text-[17px] text-muted-foreground leading-relaxed">
                {para}
              </p>
            ))}
          </div>
        </div>
      </section>

      {/* Section 3: The Scenario */}
      <section className="py-20 bg-secondary">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-xs font-bold text-primary uppercase tracking-[0.2em] mb-8">
            A Real Buyer. A Real Moment.
          </div>
          <blockquote className="text-xl sm:text-2xl text-foreground italic leading-relaxed max-w-3xl mb-6">
            "{problem.scenario}"
          </blockquote>
          <p className="text-sm text-muted-foreground">
            {problem.scenarioClosing}
          </p>
        </div>
      </section>

      {/* Section 4: What This Costs */}
      <section className="py-20 border-t border-border">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid sm:grid-cols-3 gap-8">
            {problem.stats.map((stat) => (
              <div key={stat.label} className="text-center sm:text-left">
                <div className="text-3xl sm:text-4xl font-display font-bold text-primary mb-2">
                  {stat.value}
                </div>
                <div className="text-sm text-muted-foreground leading-relaxed">
                  {stat.label}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Section 5: How ChatSKU Solves It */}
      <section className="py-20 border-t border-border">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-xs font-bold text-primary uppercase tracking-[0.2em] mb-4">
            The Fix
          </div>
          <h2 className="font-display font-bold text-3xl sm:text-[32px] text-foreground leading-tight mb-12">
            One deployment. Problem closed.
          </h2>
          <div className="grid lg:grid-cols-2 gap-12 items-start">
            <p className="text-[17px] text-muted-foreground leading-relaxed">
              {problem.solveCopy}
            </p>

            {/* Mock chat widget */}
            <div className="rounded-2xl border border-border bg-card shadow-2xl overflow-hidden glow-teal-sm">
              <div className="bg-primary px-4 py-3 flex items-center gap-3">
                <div className="w-8 h-8 rounded-full bg-primary-foreground/20 flex items-center justify-center">
                  <MessageSquare className="w-4 h-4 text-primary-foreground" />
                </div>
                <div className="text-primary-foreground font-semibold text-sm font-display">ChatSKU</div>
              </div>
              <div className="p-4 space-y-3 bg-background/60">
                <div className="flex justify-end">
                  <div className="max-w-[85%] bg-primary/15 border border-primary/20 rounded-2xl rounded-br-md px-4 py-2.5">
                    <p className="text-sm text-foreground leading-relaxed">{problem.sampleExchange.user}</p>
                  </div>
                </div>
                <div className="flex gap-2 items-end">
                  <div className="w-6 h-6 rounded-full bg-primary/20 flex items-center justify-center flex-shrink-0">
                    <Bot className="w-3 h-3 text-primary" />
                  </div>
                  <div className="max-w-[85%] bg-card border border-border rounded-2xl rounded-bl-md px-4 py-2.5">
                    <p className="text-sm text-foreground leading-relaxed">{problem.sampleExchange.bot}</p>
                  </div>
                </div>
              </div>
              <div className="px-4 py-3 border-t border-border bg-card flex items-center gap-2">
                <div className="flex-1 bg-muted rounded-xl px-3 py-2 text-xs text-muted-foreground">Ask about any product...</div>
                <div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center">
                  <ArrowRight className="w-3.5 h-3.5 text-primary-foreground" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Section 6: Bottom CTA */}
      <section className="py-20 border-t border-border bg-primary/5">
        <div className="max-w-3xl mx-auto text-center px-4">
          <h2 className="font-display font-bold text-3xl sm:text-4xl text-foreground leading-tight mb-4">
            Stop losing revenue to {problem.shortName}.
          </h2>
          <p className="text-muted-foreground text-lg mb-8">
            See ChatSKU handle it on a live catalog, right now.
          </p>
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
            <Button asChild size="lg" className="bg-primary text-primary-foreground hover:bg-teal-glow font-semibold px-8 glow-teal-sm">
              <Link to="/demo">Try Live Demo <ArrowRight className="w-4 h-4" /></Link>
            </Button>
            <Link to="/problems" className="text-sm text-muted-foreground hover:text-primary transition-colors">
              Back to all problems
            </Link>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
};

export default ProblemDetail;
