"use client";

import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Check, ArrowRight, Star, Quote } from "lucide-react";

const features = [
  "Unlimited seller leads",
  "Unlimited buyer database",
  "AI-powered matching engine",
  "Automated email & SMS outreach",
  "Buyer portal with NDA signing",
  "Real-time engagement tracking",
  "Deal analytics dashboard",
  "Document storage & management",
  "Priority support",
  "White-label buyer portal",
];

const testimonials = [
  {
    name: "Sarah Chen",
    title: "VP Acquisitions",
    company: "Pacific Capital Group",
    text: "CREdispo cut our disposition time from weeks to days. The matching algorithm is incredibly accurate — we're closing deals 3x faster.",
    initials: "SC",
  },
  {
    name: "Marcus Williams",
    title: "Managing Director",
    company: "Blackstone Capital Partners",
    text: "The automated outreach alone saves us 15+ hours per week. The buyer engagement tracking is a game-changer for our team.",
    initials: "MW",
  },
  {
    name: "David Rodriguez",
    title: "Principal",
    company: "Lone Star Investments",
    text: "We've processed over $500M in deal volume through CREdispo. The ROI is incredible — it pays for itself on the first deal.",
    initials: "DR",
  },
];

export function Pricing() {
  return (
    <section id="pricing" className="py-20 sm:py-28 bg-white relative">
      <div className="absolute inset-0 grid-pattern opacity-30 pointer-events-none" />

      <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        {/* Testimonials */}
        <div className="mb-20">
          <div className="text-center mb-12">
            <div className="inline-flex items-center gap-2 bg-navy-50 rounded-full px-4 py-1.5 mb-4">
              <Star className="h-4 w-4 text-gold-500" />
              <span className="text-sm font-medium text-navy-600">What Clients Say</span>
            </div>
            <h2 className="text-2xl sm:text-4xl font-bold text-navy-900 mb-4">
              Trusted by <span className="text-gold-500">500+ CRE professionals</span>
            </h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {testimonials.map((t) => (
              <div key={t.name} className="relative p-6 rounded-xl bg-gradient-to-br from-navy-25 to-white border border-navy-100 hover-lift">
                <Quote className="h-8 w-8 text-gold-200 mb-4" />
                <p className="text-sm text-navy-700 leading-relaxed mb-4">&ldquo;{t.text}&rdquo;</p>
                <div className="flex items-center gap-3 pt-4 border-t border-navy-100">
                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-navy-700 to-navy-900 text-white text-xs font-bold">
                    {t.initials}
                  </div>
                  <div>
                    <p className="text-sm font-semibold text-navy-900">{t.name}</p>
                    <p className="text-xs text-navy-500">{t.title}, {t.company}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Section header */}
        <div className="text-center mb-16">
          <div className="inline-flex items-center gap-2 bg-navy-50 rounded-full px-4 py-1.5 mb-4">
            <span className="text-sm font-medium text-navy-600">Pricing</span>
          </div>
          <h2 className="text-2xl sm:text-4xl lg:text-5xl font-bold text-navy-900 mb-4">
            One plan.
            <span className="text-gold-500"> Everything included.</span>
          </h2>
          <p className="text-base sm:text-lg text-navy-500 max-w-2xl mx-auto px-2 sm:px-0">
            No tiers, no upsells, no surprises. Get the full CREdispo platform for one flat monthly fee.
            Cancel anytime.
          </p>
        </div>

        {/* Pricing card */}
        <div className="max-w-lg mx-auto">
          <div className="gradient-border">
            <div className="relative rounded-2xl bg-white shadow-xl overflow-hidden glow-gold">
              {/* Top accent */}
              <div className="absolute top-0 inset-x-0 h-1 bg-gradient-to-r from-gold-400 via-gold-500 to-gold-400" />
              
              {/* Popular badge */}
              <div className="absolute top-4 right-4">
                <span className="inline-flex items-center rounded-full bg-gold-100 text-gold-800 text-xs font-semibold px-3 py-1">
                  Most Popular
                </span>
              </div>

              <div className="p-6 sm:p-10">
                {/* Plan name */}
                <h3 className="text-lg font-semibold text-navy-900 mb-1">Pro Plan</h3>
                <p className="text-sm text-navy-500 mb-6">Everything you need to dominate dispositions</p>

                {/* Price */}
                <div className="flex items-baseline gap-1 mb-8">
                  <span className="text-5xl sm:text-6xl font-bold text-navy-900">$297</span>
                  <span className="text-lg text-navy-500">/month</span>
                </div>

                {/* CTA */}
                <Link href="/signup">
                  <Button variant="gold" size="xl" className="w-full group active:scale-[0.98] transition-transform">
                    Start 14-Day Free Trial
                    <ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />
                  </Button>
                </Link>

                <p className="text-xs text-navy-400 text-center my-8">
                  No credit card required • Cancel anytime
                </p>

                {/* Features list */}
                <div className="space-y-3">
                  {features.map((feature) => (
                    <div key={feature} className="flex items-start gap-3">
                      <div className="flex-shrink-0 mt-0.5">
                        <div className="flex h-5 w-5 items-center justify-center rounded-full bg-emerald-100">
                          <Check className="h-3.5 w-3.5 text-emerald-600" />
                        </div>
                      </div>
                      <span className="text-sm text-navy-700">{feature}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Trust indicators */}
        <div className="mt-12 text-center">
          <p className="text-sm text-navy-400 mb-4">Trusted by 500+ CRE professionals nationwide</p>
          <div className="flex flex-wrap items-center justify-center gap-4 sm:gap-8 opacity-40">
            {["CBRE", "Cushman", "JLL", "Marcus & Millichap", "Colliers"].map((name) => (
              <span key={name} className="text-sm sm:text-lg font-bold text-navy-400 tracking-wider">
                {name}
              </span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
