import prisma from "@/lib/db";
export const revalidate = 5;
import Link from "next/link";
import Image from "next/image";
import { ArrowRight as ArrowRightIcon, Briefcase as BriefcaseIcon, CheckCircle2 as CheckIcon, Zap, Shield, Cpu } from "lucide-react";
import { Metadata } from "next";
import { stripHtml, getDirectDriveLink } from "@/lib/text";

export const metadata: Metadata = {
    title: "Services & Solutions | Sergio Hounkpessode",
    description: "Solutions sur mesure en systèmes embarqués, IoT et développement industriel pour transformer vos idées en réalité.",
};

export default async function ServicesPage() {
    let services: any[] = [];

    try {
        const prismaObj = prisma as any;
        if (prismaObj.service) {
            services = await prismaObj.service.findMany({
                orderBy: { createdAt: "asc" }
            });
        }
    } catch (err) {
        console.error("Error fetching services:", err);
    }

    return (
        <main style={{ paddingTop: "10rem", paddingBottom: "10rem", background: "var(--background)" }}>
            <div className="container">
                {/* Header Section */}
                <div style={{ textAlign: "center", marginBottom: "8rem" }}>
                    <div className="badge badge-primary" style={{ marginBottom: "1.5rem" }}>
                        Expertises & Solutions
                    </div>
                    <h1 style={{ fontSize: "clamp(3rem, 6vw, 4.5rem)", marginBottom: "2rem", fontWeight: 900 }}>
                        Innover pour le <span className="text-gradient">Présent & le Futur.</span>
                    </h1>
                    <p style={{ color: "var(--muted-foreground)", fontSize: "1.25rem", maxWidth: "48rem", margin: "0 auto", lineHeight: 1.8 }}>
                        Ingénierie de précision en systèmes embarqués, déploiement IoT à l'échelle et architecture logicielle pour l'industrie 4.0.
                    </p>
                </div>

                {/* Services Section */}
                {services.length === 0 ? (
                    <div className="card" style={{ textAlign: "center", padding: "8rem 2rem", background: "var(--muted)", border: "1px dashed var(--border)" }}>
                        <div style={{ width: 80, height: 80, background: "var(--background)", borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 2rem", boxShadow: "var(--card-shadow)" }}>
                            <Zap size={40} className="text-primary" />
                        </div>
                        <h3 style={{ fontSize: "1.75rem", marginBottom: "1rem", fontWeight: 800 }}>Définition des offres en cours...</h3>
                        <p style={{ color: "var(--muted-foreground)", fontSize: "1.1rem" }}>Revenez bientôt pour découvrir mes solutions techniques sur mesure.</p>
                    </div>
                ) : (
                    <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(340px, 1fr))", gap: "3.5rem" }}>
                        {services.map((service: any) => (
                            <div key={service.id} className="card service-card-enhanced" style={{ display: "flex", flexDirection: "column", height: "100%", padding: 0, overflow: "hidden" }}>
                                <div style={{ position: "relative", height: "20rem", overflow: "hidden" }}>
                                    {service.images?.[0] ? (
                                        <Image src={getDirectDriveLink(service.images[0])} alt={service.title} fill style={{ objectFit: "cover", transition: "transform 0.8s ease" }} className="service-img" />
                                    ) : (
                                        <div style={{ height: "100%", background: "var(--muted)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--muted-foreground)" }}>
                                            <Cpu size={100} strokeWidth={1} opacity={0.3} />
                                        </div>
                                    )}
                                    <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 70%)" }} />
                                    <div style={{ position: "absolute", bottom: "2rem", left: "2.5rem", right: "2.5rem" }}>
                                        <h3 style={{ color: "white", fontSize: "1.8rem", fontWeight: 900 }}>{service.title}</h3>
                                    </div>
                                </div>
                                <div style={{ padding: "3rem", flex: 1, display: "flex", flexDirection: "column" }}>
                                    <p style={{ color: "var(--muted-foreground)", lineHeight: 1.8, marginBottom: "3rem", fontSize: "1.05rem" }}>
                                        {stripHtml(service.description).slice(0, 180)}...
                                    </p>

                                    <div style={{ marginTop: "auto" }}>
                                        <Link href={`/services/${service.id}`} className="btn btn-primary" style={{ width: "100%", justifyContent: "center", padding: "1.1rem" }}>
                                            Détails & Consultation <ArrowRightIcon size={20} style={{ marginLeft: "0.75rem" }} />
                                        </Link>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                )}

                {/* Why Choose Section (Proof Points) */}
                <div style={{ marginTop: "12rem" }}>
                    <div style={{ textAlign: "center", marginBottom: "6rem" }}>
                        <h2 style={{ fontSize: "2.5rem", marginBottom: "1.5rem", fontWeight: 800 }}>Pourquoi me choisir ?</h2>
                        <p style={{ color: "var(--muted-foreground)", fontSize: "1.1rem" }}>Une valeur ajoutée technique à chaque étape de votre projet.</p>
                    </div>

                    <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: "4rem" }}>
                        {[
                            { icon: <Shield size={28} />, title: "Fiabilité Industrielle", desc: "Conception robuste répondant aux normes les plus strictes pour des environnements exigeants." },
                            { icon: <Zap size={28} />, title: "Déploiement Agile", desc: "Méthodologie itérative permettant de valider les concepts rapidement avant la production." },
                            { icon: <Cpu size={28} />, title: "Expertise Full-Stack", desc: "De la conception hardware PCB à l'interface Cloud, une maîtrise totale de la chaîne." }
                        ].map((point, i) => (
                            <div key={i} style={{ textAlign: "center" }}>
                                <div style={{ width: 64, height: 64, borderRadius: "1.25rem", background: "var(--primary-light)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--primary)", margin: "0 auto 2rem", transform: "rotate(-5deg)", boxShadow: "0 10px 20px -5px rgba(99, 102, 241, 0.2)" }}>
                                    {point.icon}
                                </div>
                                <h4 style={{ fontSize: "1.4rem", marginBottom: "1.25rem", fontWeight: 800 }}>{point.title}</h4>
                                <p style={{ color: "var(--muted-foreground)", fontSize: "1rem", lineHeight: 1.8 }}>{point.desc}</p>
                            </div>
                        ))}
                    </div>
                </div>

                {/* Call To Action */}
                <div style={{ marginTop: "12rem", borderRadius: "3rem", background: "linear-gradient(135deg, var(--primary), var(--secondary))", padding: "6rem 4rem", textAlign: "center", color: "white", position: "relative", overflow: "hidden" }}>
                    <div style={{ position: "absolute", top: "-20%", left: "-10%", width: "40%", height: "80%", background: "rgba(255,255,255,0.1)", borderRadius: "50%", filter: "blur(60px)" }} />
                    <div style={{ position: "relative", zIndex: 1 }}>
                        <h2 style={{ fontSize: "clamp(2rem, 5vw, 3.5rem)", marginBottom: "2rem", fontWeight: 900 }}>Prêt à transformer votre vision ?</h2>
                        <p style={{ fontSize: "1.25rem", marginBottom: "3.5rem", opacity: 0.9, maxWidth: "40rem", margin: "0 auto 3.5rem" }}>
                            Analysons ensemble vos besoins techniques et trouvons la solution optimale pour votre entreprise.
                        </p>
                        <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", gap: "1.5rem" }}>
                            <Link href="/contact" className="btn" style={{ background: "white", color: "var(--primary)", minWidth: "200px", padding: "1.25rem 2.5rem" }}>Démarrer un projet</Link>
                            <Link href="/projects" className="btn" style={{ background: "rgba(255,255,255,0.1)", color: "white", border: "1px solid rgba(255,255,255,0.2)", minWidth: "200px", padding: "1.25rem 2.5rem" }}>Voir mes réalisations</Link>
                        </div>
                    </div>
                </div>
            </div>

            <style>{`
                .service-card-enhanced { transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); border: 1.5px solid var(--border); }
                .service-card-enhanced:hover { transform: translateY(-12px); border-color: var(--primary); box-shadow: var(--card-shadow-hover); }
                .service-card-enhanced:hover .service-img { transform: scale(1.1); }
            `}</style>
        </main>
    );
}