import prisma from "@/lib/db";
export const revalidate = 5;
import Image from "next/image";
import Link from "next/link";
import { ArrowRight, Cpu, Code, Globe, Zap, Github, Linkedin, Mail, ExternalLink, Sparkles } from "lucide-react";
import HomeAnimations from "@/components/HomeAnimations";
import { stripHtml, getDirectDriveLink } from "@/lib/text";

export default async function Home() {
    let featuredProjects: any[] = [];
    let profile: any = null;

    try {
        featuredProjects = await prisma.project.findMany({
            where: { featured: true },
            take: 3,
            include: { category: true }
        });
        profile = await (prisma as any).profile.findFirst();
    } catch (error) {
        console.error("Database connection error in Home page:", error);
    }

    const expertise = [
        {
            icon: <Cpu size={32} />,
            title: "Systèmes Embarqués",
            desc: "Architecture firmware robuste et conception hardware optimisée pour l'IoT industriel et grand public.",
            points: ["ESP32 / STM32", "Firmware C/C++", "Conception PCB"]
        },
        {
            icon: <Code size={32} />,
            title: "Écosystèmes Cloud",
            desc: "Développement de plateformes full-stack scalables intégrant le monitoring temps réel et l'IA.",
            points: ["Next.js / TypeScript", "Node.js / Go", "Cloud Architecture"]
        },
        {
            icon: <Globe size={32} />,
            title: "Impact Industriel",
            desc: "Accompagner la transformation digitale en Afrique par des solutions hardware/software souveraines.",
            points: ["Smart Agriculture", "Énergie Connectée", "Tech for Good"]
        },
    ];

    return (
        <main style={{ overflow: "hidden" }}>
            {/* ---- HERO SECTION ---- */}
            <section style={{
                position: "relative",
                minHeight: "100vh",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                background: "var(--background)",
                padding: "8rem 0 4rem"
            }}>
                {/* Abstract Background Elements */}
                <div style={{ position: "absolute", top: "10%", left: "5%", width: "40vw", height: "40vw", background: "radial-gradient(circle, rgba(99,102,241,0.1) 0%, transparent 70%)", filter: "blur(60px)", zIndex: 0 }} />
                <div style={{ position: "absolute", bottom: "10%", right: "5%", width: "35vw", height: "35vw", background: "radial-gradient(circle, rgba(139,92,246,0.08) 0%, transparent 70%)", filter: "blur(60px)", zIndex: 0 }} />

                <div className="container" style={{ position: "relative", zIndex: 1 }}>
                    <div className="hero-grid">
                        <HomeAnimations type="hero-text" className="hero-text-item">
                            <div className="hero-text-content">
                                <div className="badge badge-primary" style={{ marginBottom: "1.5rem" }}>
                                    <Sparkles size={14} style={{ marginRight: 6 }} /> Tech for Africa's Future
                                </div>
                                <h1 className="hero-title">
                                    Architecturer l'innovation <br />
                                    <span className="text-gradient"> hardware & digitale.</span>
                                </h1>
                                <p className="hero-desc">
                                    {stripHtml(profile?.bio || "Expert en ingénierie embarquée et technologies cloud. Je bâtis des solutions intelligentes pour transformer l'industrie africaine.")}
                                </p>
                                <div className="hero-actions">
                                    <Link href="/projects" className="btn btn-primary">
                                        Voir mes travaux <ArrowRight size={20} />
                                    </Link>
                                    <Link href="/contact" className="btn btn-outline">
                                        Démarrer un projet
                                    </Link>
                                </div>
                            </div>

                            <div className="hero-stats">
                                <div className="stat-item">
                                    <span className="stat-num">8+</span>
                                    <span className="stat-label">Années d'exp.</span>
                                </div>
                                <div className="stat-divider" />
                                <div className="stat-item">
                                    <span className="stat-num">20+</span>
                                    <span className="stat-label">Projets livrés</span>
                                </div>
                                <div className="stat-divider" />
                                <div className="stat-item">
                                    <span className="stat-num">100%</span>
                                    <span className="stat-label">Engagement local</span>
                                </div>
                            </div>
                        </HomeAnimations>

                        <HomeAnimations type="hero-image" className="hero-image-item">
                            <div className="hero-image-wrapper">
                                <div className="animate-float" style={{ position: "relative", zIndex: 2, width: "100%" }}>
                                    <div className="hero-image-container">
                                        <Image
                                            src={getDirectDriveLink(profile?.avatar) || "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?auto=format&fit=crop&q=80&w=800"}
                                            alt="Sergio Hounkpessode"
                                            fill
                                            style={{ objectFit: "cover" }}
                                            priority
                                        />
                                    </div>

                                    {/* Floating Card Info */}
                                    <div className="glass floating-badge">
                                        <p style={{ fontSize: "0.875rem", fontWeight: 700, marginBottom: "0.25rem" }}>Meta Lab Africa</p>
                                        <p style={{ fontSize: "0.75rem", color: "var(--muted-foreground)" }}>Accélérateur d'innovation technologique au Bénin.</p>
                                    </div>
                                </div>

                                {/* Decorative Circles */}
                                <div className="decorative-circle" />
                            </div>
                        </HomeAnimations>
                    </div>
                </div>
            </section>

            {/* ---- EXPERTISE SECTION ---- */}
            <section className="section" style={{ background: "var(--muted)" }}>
                <div className="container">
                    <div style={{ textAlign: "center", maxWidth: "48rem", margin: "0 auto 5.5rem" }}>
                        <h2 style={{ fontSize: "clamp(2.25rem, 5vw, 3.5rem)", marginBottom: "1.5rem" }}>Une expertise multi-dimensionnelle.</h2>
                        <p style={{ fontSize: "1.125rem", color: "var(--muted-foreground)" }}>
                            Je combine la rigueur de l'ingénierie électronique avec la flexibilité du cloud pour créer des systèmes robustes et scalables.
                        </p>
                    </div>

                    <div className="grid-auto" style={{ gap: "2.5rem" }}>
                        {expertise.map((exp, i) => (
                            <div key={i} className="card service-card" style={{ padding: "3rem", display: "flex", flexDirection: "column" }}>
                                <div style={{
                                    width: 60,
                                    height: 60,
                                    background: "var(--primary-light)",
                                    borderRadius: "14px",
                                    display: "flex",
                                    alignItems: "center",
                                    justifyContent: "center",
                                    color: "var(--primary)",
                                    marginBottom: "2rem",
                                    transition: "all 0.3s ease"
                                }} className="expertise-icon">
                                    {exp.icon}
                                </div>
                                <h3 style={{ fontSize: "1.5rem", marginBottom: "1.25rem", fontWeight: 800 }}>{exp.title}</h3>
                                <p style={{ color: "var(--muted-foreground)", marginBottom: "2.5rem", fontSize: "1.05rem", lineHeight: 1.7, flex: 1 }}>{exp.desc}</p>
                                <div style={{ display: "flex", flexWrap: "wrap", gap: "0.6rem", paddingTop: "1.5rem", borderTop: "1px solid var(--border)" }}>
                                    {exp.points.map(p => (
                                        <span key={p} style={{ fontSize: "0.75rem", fontWeight: 900, color: "var(--primary)", textTransform: "uppercase", letterSpacing: "0.05em" }}>{p}</span>
                                    ))}
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* ---- SELECTED PROJECTS SECTION ---- */}
            <section className="section">
                <div className="container">
                    <div className="flex-between" style={{ marginBottom: "5rem", flexWrap: "wrap", gap: "2rem" }}>
                        <div>
                            <h2 style={{ fontSize: "clamp(2.25rem, 5vw, 3.5rem)", marginBottom: "0.75rem" }}>Derniers travaux</h2>
                            <p style={{ fontSize: "1.125rem", color: "var(--muted-foreground)" }}>Découvrez comment je transforme des idées complexes en réalités technologiques.</p>
                        </div>
                        <Link href="/projects" className="btn btn-outline" style={{ fontWeight: 700 }}>
                            Voir tout le portfolio <ExternalLink size={18} style={{ marginLeft: 8 }} />
                        </Link>
                    </div>

                    <div className="grid-auto" style={{ gap: "3rem" }}>
                        {featuredProjects.map((project: any) => (
                            <Link key={project.id} href={`/projects/${project.id}`} className="card project-card-home" style={{ padding: 0, overflow: "hidden", display: "block" }}>
                                <div style={{ position: "relative", height: "24rem" }}>
                                    <Image
                                        src={getDirectDriveLink(project.image) || "https://images.unsplash.com/photo-1581092160562-40aa08e78837?auto=format&fit=crop&q=80&w=800"}
                                        alt={project.title}
                                        fill
                                        style={{ objectFit: "cover", transition: "transform 1s cubic-bezier(0.4, 0, 0.2, 1)" }}
                                        className="project-image"
                                    />
                                    <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(15,23,42,0.9) 0%, rgba(15,23,42,0.2) 60%, transparent 100%)" }} />
                                    <div style={{ position: "absolute", bottom: "2rem", left: "2rem", right: "2rem" }}>
                                        <div className="badge badge-primary" style={{ marginBottom: "0.75rem", background: "rgba(255,255,255,0.1)", backdropFilter: "blur(10px)", color: "white", border: "1px solid rgba(255,255,255,0.2)" }}>
                                            {project.category?.name || "Innovation"}
                                        </div>
                                        <h3 style={{ color: "white", fontSize: "1.85rem", fontWeight: 900, letterSpacing: "-0.01em" }}>{project.title}</h3>
                                    </div>
                                </div>
                            </Link>
                        ))}
                    </div>
                </div>
            </section>

            {/* ---- CTA SECTION ---- */}
            <section className="section" style={{ paddingBottom: "10rem" }}>
                <div className="container">
                    <div className="card glass" style={{
                        padding: "5rem 2rem",
                        textAlign: "center",
                        background: "linear-gradient(135deg, var(--primary), var(--secondary))",
                        color: "white",
                        border: "none",
                        overflow: "hidden",
                        position: "relative"
                    }}>
                        <div style={{ position: "absolute", top: "-5rem", left: "-5rem", width: "20rem", height: "20rem", background: "rgba(255,255,255,0.1)", borderRadius: "50%" }} />
                        <div style={{ position: "absolute", bottom: "-5rem", right: "-5rem", width: "15rem", height: "15rem", background: "rgba(255,255,255,0.1)", borderRadius: "50%" }} />

                        <div style={{ position: "relative", zIndex: 1, maxWidth: "40rem", margin: "0 auto" }}>
                            <h2 style={{ fontSize: "clamp(2.5rem, 6vw, 4rem)", marginBottom: "1.5rem", color: "white" }}>Prêt à innover ?</h2>
                            <p style={{ fontSize: "1.25rem", opacity: 0.9, marginBottom: "3rem" }}>
                                Qu'il s'agisse d'un prototype hardware ou d'une infrastructure digitale, collaborons pour donner vie à votre vision.
                            </p>
                            <div style={{ display: "flex", justifyContent: "center", gap: "1.5rem", flexWrap: "wrap" }}>
                                <Link href="/contact" className="btn" style={{ background: "white", color: "var(--primary)", fontSize: "1.1rem" }}>
                                    Parlons de votre projet
                                </Link>
                                <Link href="/services" className="btn" style={{ background: "rgba(255,255,255,0.1)", border: "1px solid rgba(255,255,255,0.3)", color: "white" }}>
                                    Mes services
                                </Link>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <style>{`
                .service-card:hover .expertise-icon {
                    background: var(--primary) !important;
                    color: white !important;
                    transform: scale(1.1) rotate(5deg);
                }
                
                .project-card-home:hover .project-image {
                    transform: scale(1.1);
                }
            `}</style>
        </main>
    );
}