type ItemCard = {
  icon: string;
  title: string;
  status: string;
};

type Highlight = {
  eyebrow: string;
  title: string;
  icon: string;
};

type SponsorItemBasedData = {
  eyebrow: string;
  title: string;
  description: string;
  items: ItemCard[];
  highlights: Highlight[];
};

export default function SponsorItemBased({ data }: { data: SponsorItemBasedData }) {
  return (
    <section className="py-[var(--spacing-section-gap)] px-[var(--spacing-gutter)] bg-background">
      <div className="max-w-hd mx-auto">
        {/* Header */}
        <div className="text-center mb-16 lg:mb-28">
          <h2 className="font-[var(--font-display-lg)] text-[clamp(1.75rem,3.5vw,3.5rem)] mb-4 md:mb-6 text-on-surface leading-tight">
            {data.title}
          </h2>
          <p className="text-on-surface-variant text-base lg:text-[20px] max-w-3xl mx-auto opacity-70 leading-relaxed">
            {data.description}
          </p>
        </div>

        {/* 4-col cards */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-10 mb-16 lg:mb-24">
          {data.items.map((item) => (
            <div
              key={item.title}
              className="glass-panel p-8 lg:p-12 rounded-3xl text-center group hover:bg-surface-container-high transition-all duration-500 transform hover:-translate-y-2 border-primary/10"
            >
              <div className="w-16 h-16 gold-gradient-bg rounded-2xl flex items-center justify-center mx-auto mb-8 rotate-3 group-hover:rotate-0 transition-transform duration-500 shadow-xl shadow-primary/20">
                <span className="material-symbols-outlined text-on-primary text-3xl lg:text-4xl">
                  {item.icon}
                </span>
              </div>
              <h4 className="font-[var(--font-display-lg)] text-xl lg:text-2xl mb-3 text-on-surface">
                {item.title}
              </h4>
              <p className="text-[11px] font-bold tracking-[0.3em] uppercase text-primary">
                {item.status}
              </p>
            </div>
          ))}
        </div>

        {/* Highlights */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-10">
          {data.highlights.map((h) => (
            <div
              key={h.eyebrow}
              className="glass-panel border-primary/20 bg-surface-container-high/40 p-8 lg:p-14 rounded-[2rem] flex items-center justify-between group hover:bg-surface-container-highest transition-all duration-500"
            >
              <div className="space-y-2 lg:space-y-4">
                <p className="font-[var(--font-label-caps)] text-xs lg:text-sm tracking-[0.2em] text-primary uppercase opacity-80">
                  {h.eyebrow}
                </p>
                <p className="font-[var(--font-display-lg)] text-xl lg:text-3xl text-on-surface leading-tight">
                  {h.title}
                </p>
              </div>
              <div className="w-16 h-16 lg:w-24 lg:h-24 rounded-2xl bg-primary/10 flex items-center justify-center group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 flex-shrink-0 ml-6">
                <span className="material-symbols-outlined text-primary text-3xl lg:text-5xl">
                  {h.icon}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}