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

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

      {/* Header */}
      <section className="pt-28 pb-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h1 className="font-display font-bold text-4xl sm:text-5xl lg:text-[52px] text-foreground leading-[1.1] mb-6 max-w-3xl">
            Your B2B website is losing revenue in 6 specific ways.
          </h1>
          <p className="text-lg sm:text-xl text-muted-foreground leading-relaxed max-w-[560px]">
            Most manufacturers and distributors don't know how much because the losses are invisible. Here's exactly where it's happening.
          </p>
        </div>
      </section>

      {/* Problem Cards Grid */}
      <section className="pb-24">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-2 gap-6">
            {problems.map((problem) => (
              <div
                key={problem.slug}
                className="group rounded-lg border-l-[3px] border-l-primary bg-secondary p-6 sm:p-8 hover:shadow-lg hover:shadow-primary/5 hover:border-primary/60 transition-all duration-300"
                style={{
                  borderLeftColor:
                    problem.severity === "Critical"
                      ? "hsl(var(--teal))"
                      : problem.severity === "High"
                      ? "#f97316"
                      : "#eab308",
                }}
              >
                {/* Severity */}
                <div className="flex items-center gap-2 mb-4">
                  <div className={`w-2 h-2 rounded-full ${severityColors[problem.severity]}`} />
                  <span className={`text-xs font-semibold uppercase tracking-widest ${severityTextColors[problem.severity]}`}>
                    {problem.severity}
                  </span>
                </div>

                {/* Name */}
                <h3 className="font-display font-bold text-xl sm:text-2xl text-foreground mb-3">
                  {problem.name}
                </h3>

                {/* Cost line */}
                <p className="text-muted-foreground leading-relaxed mb-3">
                  {problem.costLine}
                </p>

                {/* Occurrence */}
                <p className="text-xs text-muted-foreground/70 mb-5">
                  {problem.occurrence}
                </p>

                {/* Link */}
                <Link
                  to={`/problems/${problem.slug}`}
                  className="inline-flex items-center gap-1.5 text-sm font-semibold text-primary hover:text-teal-glow transition-colors"
                >
                  See How It's Costing You
                  <ArrowRight className="w-3.5 h-3.5" />
                </Link>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Bottom CTA Band */}
      <section className="py-20 bg-primary/5 border-t border-border">
        <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">
            See ChatSKU close every one of these gaps, live.
          </h2>
          <p className="text-muted-foreground text-lg mb-8">
            No slides. No sales call. Just the product working on a real catalog.
          </p>
          <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>
        </div>
      </section>

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

export default Problems;
