"use client";

import Image from "next/image";
import { useState } from "react";

const slides = [
  {
    id: 1,
    tag: "MÚSICA",
    title:
      "Diddy na XB Label? Gerilson Israel responde após anúncio de lançamento de nova música em conjunto.",
    byline: "Por Redação — 24 de Março, 2025",
    image:
      "https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=1400&q=80",
  },
  {
    id: 2,
    tag: "CULTURA",
    title: "Festivais de verão: calendário completo e bilhetes à venda esta semana.",
    byline: "Por Equipa tvone — 23 de Março, 2025",
    image:
      "https://images.unsplash.com/photo-1459749411175-04bf5292ceea?w=1400&q=80",
  },
  {
    id: 3,
    tag: "TV",
    title: "Novas séries internacionais chegam às plataformas — o que não pode perder.",
    byline: "Por Redação — 22 de Março, 2025",
    image:
      "https://images.unsplash.com/photo-1522869635100-9f4c5e86aa37?w=1400&q=80",
  },
];

export function TvoneHero() {
  const [active, setActive] = useState(0);
  const slide = slides[active]!;

  return (
    <section className="mx-auto w-full max-w-[1200px] px-4 py-6">
      <div className="relative overflow-hidden  shadow-[0_12px_40px_rgba(0,0,0,0.12)]">
        <div className="relative aspect-[21/9] min-h-[280px] w-full md:aspect-[2.4/1]">
          <Image
            src={slide.image}
            alt=""
            fill
            className="object-cover"
            sizes="(max-width: 1200px) 100vw, 1200px"
            priority
          />
          <div className="absolute inset-0 bg-gradient-to-t from-black/75 via-black/25 to-transparent" />
          <div className="absolute inset-0 flex flex-col justify-end p-6 md:p-10">
            <span className="mb-2 inline-flex w-fit  bg-[#7c3aed] px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-white">
              {slide.tag}
            </span>
            <h1 className="max-w-3xl text-balance text-2xl font-bold leading-tight text-white md:text-3xl lg:text-4xl">
              {slide.title}
            </h1>
            <p className="mt-3 text-sm text-white/85">{slide.byline}</p>
          </div>
        </div>
        <div className="absolute bottom-4 left-0 right-0 z-10 flex justify-center gap-2 md:bottom-6">
          {slides.map((s, i) => (
            <button
              key={s.id}
              type="button"
              onClick={() => setActive(i)}
              className={`h-2 w-2 rounded-full transition ${i === active ? "bg-white" : "bg-white/45 hover:bg-white/70"}`}
              aria-label={`Slide ${i + 1}`}
              aria-current={i === active}
            />
          ))}
        </div>
      </div>
    </section>
  );
}