export default function VisualizPackagesComparison() {
  const plans = [
    {
      name: "Essential Tour",
      audience: "For quick listings and smaller units",
      price: "AED 1,400",
      note: "Best for apartments",
      cta: "Get Started",
      featured: false,
      features: [
        "Up to 8 spaces",
        "360° walkthrough",
        "Mobile + desktop ready",
        "Basic navigation",
        "48h delivery",
      ],
    },
    {
      name: "Professional Tour",
      audience: "For serious agents who want to stand out",
      price: "AED 2,850",
      note: "Most Popular",
      cta: "Choose Professional",
      featured: true,
      features: [
        "Up to 13 spaces",
        "Interior + exterior coverage",
        "Interactive hotspots",
        "Floor plan included",
        "Branding integration",
        "48h delivery",
      ],
    },
    {
      name: "Signature Experience",
      audience: "For luxury properties and premium clients",
      price: "From AED 4,500",
      note: "Luxury tier",
      cta: "Contact Us",
      featured: false,
      features: [
        "Full property coverage",
        "Advanced hotspots",
        "Premium floor plans",
        "Custom branding",
        "Priority delivery",
        "Cinematic presentation",
      ],
    },
  ];

  const comparisonRows = [
    ["Spaces Covered", "Up to 8", "Up to 13", "Full coverage"],
    ["Interior Tour", "Included", "Included", "Included"],
    ["Exterior Coverage", "—", "Included", "Included"],
    ["Floor Plan", "—", "Included", "Advanced"],
    ["Interactive Hotspots", "—", "Included", "Premium"],
    ["Branding", "—", "Included", "Custom"],
    ["Delivery Time", "48h", "48h", "Priority"],
    ["Best For", "Apartments", "Villas", "Luxury spaces"],
  ];

  return (
    <section className="relative overflow-hidden bg-[#070b0a] px-6 py-20 text-white md:px-10 lg:px-16">
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(34,197,94,0.12),transparent_35%),radial-gradient(circle_at_bottom_right,rgba(255,255,255,0.06),transparent_28%)]" />

      <div className="relative mx-auto max-w-7xl">
        <div className="mx-auto max-w-3xl text-center">
          <p className="mb-4 inline-flex rounded-full border border-white/10 bg-white/5 px-4 py-1 text-sm tracking-[0.2em] text-emerald-300 uppercase">
            Packages
          </p>
          <h2 className="text-4xl font-semibold tracking-tight md:text-5xl">
            Choose the Right Experience for Your Listing
          </h2>
          <p className="mt-5 text-base leading-7 text-white/70 md:text-lg">
            Compare features and select the virtual tour package that fits your
            property, your client experience, and your sales goals.
          </p>
        </div>

        <div className="mt-14 grid gap-6 lg:grid-cols-3">
          {plans.map((plan) => (
            <div
              key={plan.name}
              className={`relative rounded-3xl border p-8 shadow-2xl backdrop-blur-sm transition-transform duration-300 hover:-translate-y-1 ${
                plan.featured
                  ? "border-emerald-400/60 bg-white/[0.08] ring-1 ring-emerald-400/40"
                  : "border-white/10 bg-white/[0.03]"
              }`}
            >
              {plan.featured && (
                <div className="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-emerald-400 px-4 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-black">
                  Most Popular
                </div>
              )}

              <div className="mb-6">
                <p className="text-sm uppercase tracking-[0.18em] text-white/50">
                  {plan.note}
                </p>
                <h3 className="mt-3 text-2xl font-semibold">{plan.name}</h3>
                <p className="mt-2 text-sm leading-6 text-white/65">
                  {plan.audience}
                </p>
              </div>

              <div className="mb-8 border-y border-white/10 py-6">
                <div className="text-3xl font-semibold md:text-4xl">
                  {plan.price}
                </div>
              </div>

              <ul className="space-y-4 text-sm text-white/85">
                {plan.features.map((feature) => (
                  <li key={feature} className="flex items-start gap-3">
                    <span className="mt-1 inline-block h-2.5 w-2.5 flex-none rounded-full bg-emerald-400" />
                    <span>{feature}</span>
                  </li>
                ))}
              </ul>

              <button
                className={`mt-10 w-full rounded-2xl px-5 py-4 text-sm font-medium transition ${
                  plan.featured
                    ? "bg-emerald-400 text-black hover:bg-emerald-300"
                    : "border border-white/12 bg-white/5 text-white hover:bg-white/10"
                }`}
              >
                {plan.cta}
              </button>
            </div>
          ))}
        </div>

        <div className="mt-10 overflow-hidden rounded-[28px] border border-white/10 bg-white/[0.03] shadow-2xl">
          <div className="overflow-x-auto">
            <table className="min-w-full border-collapse text-left">
              <thead>
                <tr className="border-b border-white/10 bg-white/[0.04] text-sm text-white/70">
                  <th className="px-6 py-5 font-medium">Feature</th>
                  <th className="px-6 py-5 font-medium">Essential</th>
                  <th className="px-6 py-5 font-medium text-emerald-300">
                    Professional
                  </th>
                  <th className="px-6 py-5 font-medium">Signature</th>
                </tr>
              </thead>
              <tbody>
                {comparisonRows.map(([label, essential, pro, signature], index) => (
                  <tr
                    key={label}
                    className={index !== comparisonRows.length - 1 ? "border-b border-white/10" : ""}
                  >
                    <td className="px-6 py-5 text-sm font-medium text-white">
                      {label}
                    </td>
                    <td className="px-6 py-5 text-sm text-white/70">{essential}</td>
                    <td className="px-6 py-5 text-sm text-emerald-200">{pro}</td>
                    <td className="px-6 py-5 text-sm text-white/70">{signature}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        <div className="mt-8 grid gap-4 lg:grid-cols-2">
          <div className="rounded-3xl border border-white/10 bg-white/[0.03] p-6">
            <p className="text-sm uppercase tracking-[0.18em] text-emerald-300">
              Why it works
            </p>
            <p className="mt-3 text-base leading-7 text-white/75">
              All tours are optimized for remote viewing, helping agents present
              properties clearly to clients from anywhere.
            </p>
          </div>
          <div className="rounded-3xl border border-white/10 bg-white/[0.03] p-6">
            <p className="text-sm uppercase tracking-[0.18em] text-emerald-300">
              Booking note
            </p>
            <p className="mt-3 text-base leading-7 text-white/75">
              Limited booking slots per week to maintain quality and delivery
              speed across every project.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}