import React, { useState } from “react”; import { Check, CreditCard, ShieldCheck, Sparkles } from “lucide-react”; import { motion } from “framer-motion”; // ===================================================== // REDIGER TEKST HER // Du kan frit ændre overskrifter, beskrivelser og priser. // ===================================================== const content = { badge: “Sindal Padel- & Tennisklub”, title: “Kontingentbetaling”, subtitle: “Vælg det kontingent, der passer til dig. Betal nemt og sikkert for dit medlemskab i Sindal Padel- & Tennisklub.”, selectedTitle: “Din valgte betaling”, selectedText: “Du har valgt {plan}-kontingent. Klik på betalingsknappen for at gå videre.”, paymentInfo: “Sikker betaling med kort, MobilePay eller bankoverførsel.”, payButton: “Gå til betaling”, mostSelected: “Mest valgt”, }; const plans = [ { name: “Junior”, price: “400 kr.”, period: “pr. år”, description: “For junior-medlemmer, der vil spille padel og tennis i klubben.”, features: [“Junior-medlemskab”, “Adgang til klubfællesskabet”, “Mulighed for padel og tennis”], highlight: false, }, { name: “Senior”, price: “800 kr.”, period: “pr. år”, description: “For voksne medlemmer, der ønsker et aktivt medlemskab i klubben.”, features: [“Senior-medlemskab”, “Adgang til klubaktiviteter”, “Padel og tennis for voksne”], highlight: true, }, { name: “Familie”, price: “1.700 kr.”, period: “pr. år”, description: “For familier, der ønsker et samlet medlemskab i klubben.”, features: [“Familie-medlemskab”, “Samlet betaling for familien”, “Fællesskab for både børn og voksne”], highlight: false, }, ]; export default function Kontingentbetaling() { const [selected, setSelected] = useState(“Senior”); return (

{content.badge}

{content.title}

{content.subtitle}

{plans.map((plan, index) => ( setSelected(plan.name)} className={`relative cursor-pointer rounded-3xl bg-white p-6 shadow-lg ring-1 transition hover:-translate-y-1 hover:shadow-xl ${ plan.highlight ? “ring-emerald-300 md:scale-105” : “ring-slate-200” } ${selected === plan.name ? “outline outline-4 outline-emerald-100” : “”}`} > {plan.highlight && (

{content.mostSelected}

)}

{plan.name}

{plan.description}

{plan.price} {plan.period}

{plan.features.map((feature) => (
• {feature}
))}

Vælg {plan.name} ))}

{content.selectedTitle}

{content.selectedText.replace(“{plan}”, selected).split(selected)[0]} {selected} {content.selectedText.replace(“{plan}”, selected).split(selected)[1]}

{content.paymentInfo}

{content.payButton}

); }