import React from 'react';
import { Check } from 'lucide-react';

const offersData = [
    {
        id: "core",
        title: "Core Transformation",
        description: "Complete digital overhaul for established brands seeking dominance.",
        price: "€5,000+",
        features: ["SEO & Keywords", "Copywriting", "Conversion Opt.", "Lead Gen", "Custom CMS", "Analytics"],
        buttonText: "Get Started",
        isPopular: true,
        cardClasses: "min-h-[500px] md:min-h-0 md:h-full border-white/10 relative group hover:border-[var(--color-accent)]/50",
        buttonClasses: "bg-white text-black hover:bg-[var(--color-accent)]",
    },
    {
        id: "essential",
        title: "Essential Presence",
        description: "For emerging businesses needing a professional foothold.",
        price: "€2,500+",
        features: ["SEO & Keywords", "Copywriting", "Conversion Opt."],
        buttonText: "Select Plan",
        isPopular: false,
        cardClasses: "min-h-[450px] md:min-h-0 md:h-[85%] border-white/5 hover:bg-white/5",
        buttonClasses: "border border-white/20 text-white hover:bg-white/10",
    },
    {
        id: "basic",
        title: "Basic Website",
        description: "For small businesses needing a professional online presence.",
        price: "€600+",
        features: ["Web Design", "Custom CMS", "Analytics"],
        buttonText: "Claim Now",
        isPopular: false,
        cardClasses: "min-h-[400px] md:min-h-0 md:h-[75%] border-white/5 bg-[var(--color-accent)]/5",
        buttonClasses: "border border-[var(--color-accent)] text-[var(--color-accent)] hover:bg-[var(--color-accent)] hover:text-black",
    },
    {
        id: "free",
        title: "Free Audit",
        description: "Detailed analysis of your current digital standing.",
        price: "Free",
        features: ["SEO Report", "UX Review"],
        buttonText: "Claim Now",
        isPopular: false,
        cardClasses: "min-h-[400px] md:min-h-0 md:h-[75%] border-white/5 bg-[var(--color-accent)]/5",
        buttonClasses: "border border-[var(--color-accent)] text-[var(--color-accent)] hover:bg-[var(--color-accent)] hover:text-black",
    }
];

export default function OfferSection() {
    return (
        <section className="relative min-h-screen bg-neutral-950 text-white py-20 overflow-hidden flex flex-col justify-center">
            <div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-10 pointer-events-none"></div>

            <div className="container mx-auto px-4 mb-8 md:mb-12 relative z-10">
                <h2 className="text-4xl md:text-6xl font-bold text-center">Our <span className="text-[var(--color-accent)]">Offers</span></h2>
            </div>

            <div className="w-full max-w-7xl mx-auto px-4 xl:px-0 relative z-10">

                <div className="flex flex-col md:flex-row gap-8 md:gap-10 w-full md:h-[60vh] md:items-center justify-center">

                    {offersData.map((offer) => (
                        <div key={offer.id} className={`offer-card w-full md:flex-1 p-8 glass rounded-3xl border flex flex-col justify-between transition-colors ${offer.cardClasses}`}>
                            {offer.isPopular && (
                                <div className="absolute -top-4 -right-2 md:-right-4 bg-[var(--color-accent)] text-black font-bold px-4 py-1 rounded-full text-sm transform rotate-6 shadow-lg shadow-[var(--color-accent)]/20">
                                    MOST POPULAR
                                </div>
                            )}
                            <div>
                                <h3 className="text-2xl md:text-3xl font-bold mb-4">{offer.title}</h3>
                                <p className="text-neutral-400 mb-6 text-sm md:text-base">{offer.description}</p>
                                <ul className="space-y-3">
                                    {offer.features.map((feature, index) => (
                                        <li key={index} className="flex items-center gap-2 text-sm md:text-base">
                                            <Check className="text-[var(--color-accent)] shrink-0" size={18} />
                                            <span>{feature}</span>
                                        </li>
                                    ))}
                                </ul>
                            </div>
                            <div className="mt-8">
                                <div className="text-2xl md:text-3xl font-bold mb-2">{offer.price}</div>
                                <button className={`w-full py-4 font-bold rounded-xl transition-colors cursor-pointer ${offer.buttonClasses}`}>
                                    {offer.buttonText}
                                </button>
                            </div>
                        </div>
                    ))}

                </div>
            </div>
        </section>
    );
}