frontend.sensualmoment.de/src/components/sections/Packages.tsx

import { ScrollReveal } from "@/components/ScrollReveal"

interface Package {
  name: string
  price: string
  features: string[]
  featured?: boolean
}

const packages: Package[] = [
  {
    name: "Entdecken",
    price: "Ab 349 EUR",
    features: [
      "1-2 Stunden Shooting",
      "Professionelles Styling-Beratung",
      "10 bearbeitete Digitalbilder",
      "Private Online-Galerie",
      "Persoenliche Bildauswahl",
    ],
  },
  {
    name: "Erleben",
    price: "Ab 599 EUR",
    featured: true,
    features: [
      "2-3 Stunden Shooting",
      "Professionelles Hair & Make-up",
      "25 bearbeitete Digitalbilder",
      "Private Online-Galerie",
      "1 Fine-Art Print (30x40)",
      "Outfitwechsel inklusive",
    ],
  },
  {
    name: "Zelebrieren",
    price: "Ab 899 EUR",
    features: [
      "3-4 Stunden Shooting",
      "Professionelles Hair & Make-up",
      "Alle bearbeiteten Digitalbilder",
      "Premium Fine-Art Album",
      "3 Fine-Art Prints",
      "Champagner & Verwoehn-Paket",
    ],
  },
]

export function Packages() {
  return (
    <section className="bg-navy py-[120px] max-[900px]:py-20">
      <div className="max-w-[1280px] mx-auto px-6">
        <ScrollReveal>
          <div className="text-center mb-16">
            <span className="section-label text-blush block mb-4">Investition in dich</span>
            <h2 className="font-playfair text-[clamp(2rem,4vw,3.2rem)] text-blush mb-4">
              Pakete & <em>Preise</em>
            </h2>
            <div className="divider-line mx-auto" />
          </div>
        </ScrollReveal>

        <div className="grid grid-cols-1 min-[901px]:grid-cols-3 gap-8">
          {packages.map((pkg, i) => (
            <ScrollReveal key={i}>
              <div
                className={
                  "relative p-8 border transition-all duration-400 hover:-translate-y-1 hover:shadow-xl "
                  + (pkg.featured
                    ? "border-blush bg-white/5"
                    : "border-blush-border hover:border-blush/50")
                }
              >
                {pkg.featured && (
                  <div className="absolute -top-3 left-1/2 -translate-x-1/2">
                    <span className="bg-blush text-dark-wine font-josefin text-[0.5rem] font-light uppercase tracking-[0.15em] px-4 py-1.5 rounded-full">
                      Beliebtestes Paket
                    </span>
                  </div>
                )}

                <h3 className="font-playfair text-[1.4rem] text-blush text-center mb-2 mt-4">
                  {pkg.name}
                </h3>
                <p className="font-josefin text-[0.7rem] font-light uppercase tracking-[0.15em] text-blush/60 text-center mb-8">
                  {pkg.price}
                </p>

                <ul className="space-y-3 mb-8">
                  {pkg.features.map((f, j) => (
                    <li key={j} className="font-cormorant text-[0.95rem] font-light text-creme/70 flex items-start gap-3">
                      <span className="text-blush/60 mt-0.5">&#10003;</span>
                      {f}
                    </li>
                  ))}
                </ul>

                <div className="text-center">
                  <a
                    href="/kontakt"
                    className={
                      "btn-cta inline-block "
                      + (pkg.featured
                        ? "bg-blush text-dark-wine border-blush hover:bg-[#E0B8B0] hover:shadow-lg"
                        : "text-blush")
                    }
                  >
                    Jetzt anfragen
                  </a>
                </div>
              </div>
            </ScrollReveal>
          ))}
        </div>
      </div>
    </section>
  )
}