
import Image from "next/image";
import React from 'react';
import OptimizedImage from "../global/optimized-image";

export interface PolygonProps {
    size: string;
    position: string;
    color: string;
}

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

export interface CardData {
    title: string;
    description: string;
    image: ImageData;
    polygons?: PolygonProps[];
}

const Polygon: React.FC<PolygonProps> = ({ size, position, color }) => {
    return (
        <div className={`absolute z-0 rounded-2xl ${color} ${size} ${position}`} />
    );
};

const cardData: CardData = {
    title: "QUI SUIS-JE ?",
    description: "Stéphane, guide de canyoning diplômé d'État basé entre le Jura et l'Ain. Depuis plus de 20 ans, je parcours les canyons d'Europe et connais parfaitement les gorges de Saint-Claude, d'Ambérieu-en-Bugey et de la Région des Lacs. Passionné d'écologie, je vous ferai découvrir la richesse des écosystèmes jurassiens et aindinois : lynx, chamois, faucons pèlerins et une flore exceptionnelle.",
    image: {
        src: "/images/stef.jpg",
        alt: "Stéphane - Guide de canyoning professionnel dans le Jura et l'Ain"
    },
    polygons: [
        { size: "w-20 h-20", position: "-right-10 -top-10", color: "bg-secondary" },
        { size: "w-12 h-12", position: "right-20 -top-20", color: "bg-accent" },
        { size: "w-16 h-16", position: "-left-8 bottom-10", color: "bg-primary" }
    ]
};

export default function Profile() {
    return (
        <section className="w-full section-padding max-w-6xl mx-auto p-4 sm:p-6 min-h-[calc(100vh-4rem)] flex items-center bg-transparent z-20">
            <div className="relative w-full">
                <div className="relative rounded-2xl shadow-xl">
                    <div className="p-4 sm:p-6 md:p-8 lg:p-12 relative z-20 bg-background">
                        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 sm:gap-8 md:gap-12 items-center">
                            <div className="relative flex justify-center items-center">
                                <div className="relative z-20 w-full max-w-[280px] sm:max-w-[400px] md:max-w-[500px] aspect-square">
                                    <OptimizedImage 
                                        src={cardData.image.src}
                                        alt={cardData.image.alt}
                                        containerClassName="relative w-full h-full z-0"
                                        className="object-cover rounded-2xl"
                                        priority
                                    />
                                    <div className="block">
                                        {cardData.polygons?.map((polygon, index) => (
                                            <Polygon key={index} {...polygon} />
                                        ))}
                                    </div>
                                </div>
                            </div>
                            <div className="space-y-4 sm:space-y-6">
                                <h1 className="font-hardcore text-center lg:text-left pt-10 md:pt-0 text-3xl sm:text-4xl md:text-6xl lg:text-7xl">
                                    {cardData.title}
                                </h1>
                                <div className="w-16 sm:w-24 h-1 bg-secondary rounded-full hidden lg:flex" />
                                <div className="w-full">
                                    <p className="text-base sm:text-lg text-foreground leading-relaxed text-center lg:text-left">
                                        {cardData.description}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};