"use client";

import { Reveal } from "@/components/shared/Reveal";
import type { PointsSection as PointsSectionType } from "@/constants/pages";

type Props = {
  section: PointsSectionType;
};

export default function PointsSection({ section }: Props) {
  return (
    <section className="px-6 py-12 md:py-12 md:px-12">
        <div className="mx-auto max-w-4xl text-center">
          <h2 className="font-serif italic text-4xl md:text-5xl font-light text-espresso leading-tight">
            {section.title}
          </h2>

          <div className="flex items-center justify-center gap-4 mt-6">
              <div className="h-0.5 w-20 bg-gradient-to-r from-transparent to-gold"></div>

              <div className="relative flex items-center justify-center">
                <div className="h-4 w-4 rotate-45 border border-gold bg-gold/20"></div>
                <div className="absolute h-2 w-2 rotate-45 bg-gold"></div>
              </div>

              <div className="h-0.5 w-20 bg-gradient-to-l from-transparent to-gold"></div>
            </div>
            {/* Optional Section Description */}
            {section.description && (
              <div className="mx-auto mt-7 max-w-4xl font-sans text-sm font-light leading-7 text-mahogany md:text-base">
                {section.description}
              </div>
            )}
        </div>

      <div className="mx-auto mt-4 max-w-4xl">
        {section.items.map((item, index) => (
          <Reveal key={item.title}>
            <div className="group border-b border-gold/15 py-8">
              <div className="grid gap-0 lg:grid-cols-[90px_1fr]">
                <span className="font-serif text-5xl text-gold/55 transition-all duration-500 group-hover:text-gold">
                  {(index + 1).toString().padStart(2, "0")}
                </span>

                <div>
                  <h3 className="font-serif text-2xl text-espresso transition-colors duration-500 group-hover:text-gold-deep">
                    {item.title}
                  </h3>

                  {item.venue && (
                    <p className="mt-1 font-medium text-espresso">
                      {item.venue}
                    </p>
                  )}

                  <div className="mt-2 leading-8 text-mahogany">
                    {item.description}
                  </div>
                </div>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}