"use client";

import {
  Download,
  Languages,
  MousePointerClick,
  Star,
  Users,
  Wallet,
  type LucideIcon,
} from "lucide-react";
import React from "react";

const FEATURES: {
  icon: LucideIcon;
  title: string;
  body: string;
  span: string;
}[] = [
  {
    icon: Download,
    title: "Offline downloads",
    body: "Queue a full season before your flight. Episodes play with zero signal and zero buffering anxiety.",
    span: "md:col-span-2",
  },
  {
    icon: Wallet,
    title: "No coin math",
    body: "One flat pass. Every episode of every show is included — no per-episode coins, no surprise charges.",
    span: "",
  },
  {
    icon: Languages,
    title: "12 dubbed languages",
    body: "Switch audio or subtitles mid-scene. Same drama, your language.",
    span: "",
  },
  {
    icon: Users,
    title: "Watch parties",
    body: "Synchronized playback plus live reactions with up to 8 friends. Scream at plot twists together.",
    span: "",
  },
  {
    icon: MousePointerClick,
    title: "Interactive branching",
    body: "Originals where you pick the hero's next move and unlock endings other viewers never see.",
    span: "md:col-span-2",
  },
  {
    icon: Star,
    title: "Spoiler-free episode notes",
    body: "Ratings and content notes per episode, written so you can choose safely without the plot being spoiled.",
    span: "",
  },
];

const WhyReelFlix = () => {
  return (
    <section className="border-y border-white/10 bg-[#100a0d] py-24 md:py-32">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <p className="text-xs font-bold uppercase tracking-[0.24em] text-[#ED3A57]">
          Why ReelFlix
        </p>
        <h2 className="mt-3 max-w-2xl text-[36px] md:text-[48px] font-extrabold leading-[1.1] tracking-tight text-white">
          Everything the old apps made difficult
        </h2>

        <div className="mt-12 grid gap-4 md:grid-cols-3 md:gap-5">
          {FEATURES?.map(({ icon: Icon, title, body, span }) => (
            <div key={title} className={span}>
              <div className="group h-full rounded-xl border border-white/10 bg-[#141014] p-6 transition-all duration-300 hover:-translate-y-1 hover:border-[#ED3A57]/40">
                <span className="flex h-11 w-11 items-center justify-center rounded-lg bg-[#2A2124] transition-colors group-hover:bg-[#ED3A57]">
                  <Icon
                    className="h-5 w-5 text-[#ED3A57] transition-colors group-hover:text-white"
                    aria-hidden="true"
                  />
                </span>
                <h3 className="mt-5 text-[18px] font-semibold text-white">
                  {title}
                </h3>
                <p className="mt-2 text-[14px] leading-relaxed text-gray-400">
                  {body}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default WhyReelFlix;