import Card, { CardData } from "@/components/tarification/card";
import OptimizedImage from "../global/optimized-image";
import Link from "next/link";
import { ImageModal } from "@/components/global/fullscreen-image";
import { useState } from "react";

interface ImageData {
    src: string;
    alt: string;
}

const localisationClass = "text-accent font-bold";

const tarificationData: CardData[] = [
    {
        title: "Sorties initiation",
        description: <ul className="list-disc list-inside">
            <li><Link target="_blank" href="https://maps.app.goo.gl/M4UcVu3E9Vc5Mgwm8">Grosdar 📍 <span className={localisationClass}> Saint-Claude Jura</span></Link></li>
            <li><Link target="_blank" href="https://maps.app.goo.gl/R8DYKPjqUcLpFNBf8">Chaley 📍 <span className={localisationClass}> Amberieux en bugey Ain</span></Link></li>
            <li><Link target="_blank" href="https://maps.app.goo.gl/cGfmwWgjwXfK26UC7">Malvaux 📍 <span className={localisationClass}> Région des Lacs Jura</span></Link></li>
        </ul>,
        image: {
            src: "/gallery/1.webp",
            alt: "Canyoning initiation dans le Jura - Canyon de Grosdar à Saint-Claude",
        },
        details: {
            title: "Tarifs et informations",
            content: "Yes. It's animated by default, but you can disable it if you prefer."
        },
        reverse: false,
    },
    {
        title: "Sorties Aventure",
        description: <ul className="list-disc list-inside">
            <li><Link target="_blank" href="https://maps.app.goo.gl/AATpgCHsFUR1hKrT7">Coiserette 📍 <span className={localisationClass}> Saint-Claude Jura</span></Link></li>
            <li><Link target="_blank" href="https://maps.app.goo.gl/a8ECvh8Rspo9KgPr8">Rhéby 📍 <span className={localisationClass}> Amberieux en bugey Ain</span></Link></li>
            <li><Link target="_blank" href="https://maps.app.goo.gl/b73whWfPjwyJyesu7">Langouette 📍 <span className={localisationClass}> Région des Lacs Jura</span></Link></li>
        </ul>,
        image: {
            src: "/gallery/10.webp",
            alt: "Canyoning aventure dans l'Ain - Canyon de Rhéby à Ambérieu-en-Bugey",
        },
        details: {
            title: "Tarifs et informations",
            content: "Yes. It's animated by default, but you can disable it if you prefer."
        },
        reverse: true,
    }
];

const prices = {
    headers: ["Formule", "Tarifs"],
    rows: [
        ["Demi-journée", "50€/pers"],
        ["Journée", "85€/pers"],
    ]
}

export default function Tarification() {
    const [selectedImage, setSelectedImage] = useState<ImageData | null>(null);

    return (
        <section className="section-padding" id="sorties">
            <div>
                <h1 className="main-title">SORTIES CANYONING<br />JURA & AIN</h1>
                <div className="flex justify-center">
                    <p className="main-description">
                    Découvrez nos canyons dans le Jura (Saint-Claude, Région des Lacs) et l&apos;Ain (Ambérieu-en-Bugey). 
                    Sorties adaptées à tous niveaux, du débutant au confirmé. Matériel professionnel fourni.
                    </p>
                </div>
            </div>
            {tarificationData.map((card, index) => (
                <Card key={index} cardData={card} onImageClick={() => setSelectedImage(card.image)} />
            ))}
            <div className="flex justify-center py-20">
                <div className="w-[1400px]">
                    <div>
                        <h2 className="text-3xl md:text-5xl font-bold uppercase text-center pb-2">Tarifs Canyoning Jura et Ain</h2>
                        <p className="text-center pb-10">Je vous fourni le matériel essentiel (combinaison néoprène, casque, baudrier et chaussons). 
                        Encadrement professionnel diplômé d&apos;État.</p>
                        <div className="flex justify-center">
                            <table className="table-auto border-collapse border border-muted-foreground text-lg">
                                {prices.headers && (
                                    <thead>
                                        <tr>
                                            {prices.headers.map((header, index) => (
                                                <th key={index} className="px-8 py-4 border border-muted-foreground text-left font-bold text-xl">{header}</th>
                                            ))}
                                        </tr>
                                    </thead>
                                )}
                                <tbody>
                                    {prices.rows.map((row, index) => (
                                        <tr key={index}>
                                            {row.map((cell, index) => (
                                                <td key={index} className="px-8 py-4 border border-muted-foreground text-lg">{cell}</td>
                                            ))}
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                        </div>
                        <p className="mt-4 text-center">Pour réserver et pour plus d&apos;informations <Link href="#contact" className="text-accent">me contacter.</Link></p>
                    </div>
                    {/* <p className="mt-2 text-center text-sm text-muted-foreground">*Tarifs réduits pour les chômeurs, étudiants (sur présentation d'un justificatif) et groupes à partir de 5 personnes.</p> */}
                </div>
            </div>
            <div id="map" className="flex justify-center py-20">
                <OptimizedImage 
                    src="/images/map.png"
                    alt="Carte des sorties canyoning dans le Jura et l'Ain - Localisation des canyons Saint-Claude, Ambérieu-en-Bugey, Région des Lacs"
                    fill
                    className="rounded-lg object-cover"
                    containerClassName="w-[350px] h-[350px] sm:w-[450px] sm:h-[450px] lg:w-[700px] lg:h-[700px] relative"
                />
            </div>
            <div className="flex justify-center">
                <hr className="w-[80%] text-foreground opacity-30 border-2 rounded"/>
            </div>
            
            <ImageModal
                image={selectedImage as ImageData}
                isOpen={!!selectedImage}
                onClose={() => setSelectedImage(null)}
            />
        </section>
    )
}
