import type { Metadata } from "next";
import Link from "next/link";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import WhatsAppButton from "@/components/WhatsAppButton";
import { 
  Plane, 
  Car, 
  UserCheck, 
  CalendarDays, 
  ShieldCheck, 
  MapPin, 
  Clock, 
  Phone
} from "lucide-react";

export const metadata: Metadata = {
  title: "Nos Services | Setocar Location de Voitures Marrakech",
  description: "Découvrez nos services haut de gamme à Marrakech : location courte et longue durée, transfert aéroport, mise à disposition avec chauffeur privé. Réservation instantanée.",
  alternates: {
    canonical: "https://www.setocar.com/services",
  },
};

const WA = "212651621512";
const PHONE = "0651621512";

export default function ServicesPage() {
  const services = [
    {
      icon: <Car size={36} color="#e85c1a" />,
      title: "Location Courte Durée",
      description: "Des véhicules récents, parfaitement entretenus pour vos séjours, week-ends ou déplacements professionnels à Marrakech. Profitez de notre kilométrage illimité et d'une assurance tous risques incluse.",
      benefits: ["Large choix de véhicules", "Kilométrage illimité", "Assurance tous risques", "Assistance 24/7"],
      link: "/cars",
      linkText: "Voir notre flotte",
    },
    {
      icon: <Plane size={36} color="#e85c1a" />,
      title: "Transfert Aéroport VIP",
      description: "Commencez votre voyage sans stress. Notre chauffeur vous attend dès votre arrivée à l'aéroport de Marrakech Menara (RAK) avec une pancarte à votre nom.",
      benefits: ["Accueil personnalisé", "Pas d'attente", "Véhicules confortables", "Disponibilité 24/7"],
      link: "/marrakech-airport",
      linkText: "Réserver un transfert",
    },
    {
      icon: <UserCheck size={36} color="#e85c1a" />,
      title: "Location avec Chauffeur",
      description: "Profitez de votre séjour en toute sérénité avec notre service de mise à disposition. Un chauffeur professionnel, discret et expérimenté pour vos déplacements privés ou professionnels.",
      benefits: ["Chauffeurs professionnels", "Discrétion absolue", "Connaissance de la ville", "Flexibilité totale"],
      link: `https://wa.me/${WA}?text=${encodeURIComponent("Bonjour Setocar! Je souhaite des informations sur la location de voiture avec chauffeur.")}`,
      linkText: "Demander un devis",
      isExternal: true,
    },
    {
      icon: <CalendarDays size={36} color="#e85c1a" />,
      title: "Location Longue Durée (LLD)",
      description: "Des solutions sur-mesure pour les entreprises et les particuliers ayant besoin d'un véhicule pour plusieurs mois. Profitez de tarifs préférentiels et d'un entretien complet inclus.",
      benefits: ["Tarifs dégressifs", "Entretien inclus", "Véhicule de remplacement", "Sans engagement bancaire"],
      link: `https://wa.me/${WA}?text=${encodeURIComponent("Bonjour Setocar! Je souhaite des informations sur la Location Longue Durée (LLD).")}`,
      linkText: "Contactez-nous",
      isExternal: true,
    },
  ];

  return (
    <>
      <Navbar />

      {/* Hero Section */}
      <section
        style={{
          padding: "10rem 1.5rem 6rem",
          background: "#111520",
          position: "relative",
          overflow: "hidden",
        }}
      >
        <div style={{ maxWidth: "1280px", margin: "0 auto", textAlign: "center", position: "relative", zIndex: 2 }}>
          <h1
            style={{
              fontFamily: "var(--font-playfair), var(--font-oswald)",
              fontSize: "clamp(2.5rem, 5vw, 4rem)",
              color: "white",
              marginBottom: "1rem",
              lineHeight: 1.1,
            }}
          >
            Nos <span style={{ color: "#e85c1a" }}>Services</span> Premium
          </h1>
          <p
            style={{
              color: "rgba(255,255,255,0.7)",
              fontSize: "1.1rem",
              maxWidth: "600px",
              margin: "0 auto 2rem",
              lineHeight: 1.6,
            }}
          >
            Plus qu'une simple location de voiture, nous vous offrons une expérience de mobilité complète et sur-mesure à Marrakech.
          </p>
        </div>
      </section>

      {/* Services Grid */}
      <section style={{ padding: "4rem 1.5rem 6rem", background: "#1c2133" }}>
        <div style={{ maxWidth: "1280px", margin: "0 auto" }}>
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
              gap: "2rem",
            }}
          >
            {services.map((service, index) => (
              <div
                key={index}
                style={{
                  background: "#111520",
                  borderRadius: "1.5rem",
                  padding: "2.5rem",
                  border: "1px solid #2a3050",
                  transition: "all 0.3s ease",
                  display: "flex",
                  flexDirection: "column",
                  height: "100%",
                }}
              >
                <div style={{ marginBottom: "1.5rem" }}>
                  <div
                    style={{
                      width: "80px",
                      height: "80px",
                      background: "rgba(232,92,26,0.1)",
                      borderRadius: "1.25rem",
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      marginBottom: "1.5rem",
                    }}
                  >
                    {service.icon}
                  </div>
                  <h2
                    style={{
                      fontFamily: "var(--font-playfair), var(--font-oswald)",
                      fontSize: "1.8rem",
                      color: "white",
                      marginBottom: "1rem",
                    }}
                  >
                    {service.title}
                  </h2>
                  <p style={{ color: "rgba(255,255,255,0.7)", lineHeight: 1.6, marginBottom: "2rem" }}>
                    {service.description}
                  </p>
                </div>

                <div style={{ marginTop: "auto" }}>
                  <h3 style={{ color: "white", fontSize: "1rem", marginBottom: "1rem", fontWeight: 600 }}>Avantages inclus :</h3>
                  <ul style={{ listStyle: "none", padding: 0, margin: "0 0 2rem 0" }}>
                    {service.benefits.map((benefit, i) => (
                      <li key={i} style={{ display: "flex", alignItems: "center", gap: "0.5rem", marginBottom: "0.5rem", color: "rgba(255,255,255,0.8)", fontSize: "0.9rem" }}>
                        <ShieldCheck size={16} color="#e85c1a" />
                        {benefit}
                      </li>
                    ))}
                  </ul>

                  {service.isExternal ? (
                    <a
                      href={service.link}
                      target="_blank"
                      rel="noopener noreferrer"
                      style={{
                        display: "inline-flex",
                        alignItems: "center",
                        justifyContent: "center",
                        width: "100%",
                        padding: "1rem",
                        background: "#e85c1a",
                        color: "white",
                        textDecoration: "none",
                        fontWeight: 600,
                        borderRadius: "0.75rem",
                      }}
                      className="hover-btn-orange"
                    >
                      {service.linkText}
                    </a>
                  ) : (
                    <Link
                      href={service.link}
                      style={{
                        display: "inline-flex",
                        alignItems: "center",
                        justifyContent: "center",
                        width: "100%",
                        padding: "1rem",
                        background: "#e85c1a",
                        color: "white",
                        textDecoration: "none",
                        fontWeight: 600,
                        borderRadius: "0.75rem",
                      }}
                      className="hover-btn-orange"
                    >
                      {service.linkText}
                    </Link>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section style={{ padding: "6rem 1.5rem", background: "#111520", textAlign: "center" }}>
        <div style={{ maxWidth: "800px", margin: "0 auto" }}>
          <h2
            style={{
              fontFamily: "var(--font-playfair), var(--font-oswald)",
              fontSize: "2.5rem",
              color: "white",
              marginBottom: "1.5rem",
            }}
          >
            Besoin d'un service spécifique ?
          </h2>
          <p style={{ color: "rgba(255,255,255,0.7)", fontSize: "1.1rem", marginBottom: "2rem", lineHeight: 1.6 }}>
            Notre équipe est à votre disposition 24h/24 et 7j/7 pour répondre à toutes vos demandes de mobilité.
          </p>
          <div style={{ display: "flex", gap: "1rem", justifyContent: "center", flexWrap: "wrap" }}>
            <a
              href={`https://wa.me/${WA}?text=Bonjour%20Setocar!`}
              target="_blank"
              rel="noopener noreferrer"
              style={{
                display: "inline-flex",
                alignItems: "center",
                gap: "0.5rem",
                padding: "1rem 2rem",
                background: "#25d366",
                color: "white",
                textDecoration: "none",
                fontWeight: 700,
                borderRadius: "2rem",
                transition: "all 0.3s ease",
              }}
            >
              <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
              </svg>
              Contact WhatsApp
            </a>
            <a
              href={`tel:${PHONE}`}
              style={{
                display: "inline-flex",
                alignItems: "center",
                gap: "0.5rem",
                padding: "1rem 2rem",
                background: "#1c2133",
                color: "white",
                textDecoration: "none",
                fontWeight: 700,
                borderRadius: "2rem",
                border: "1px solid #2a3050",
                transition: "all 0.3s ease",
              }}
            >
              <Phone size={20} color="#e85c1a" />
              Appeler Setocar
            </a>
          </div>
        </div>
      </section>

      <style>{`
        .hover-btn-orange {
          transition: background 0.3s !important;
        }
        .hover-btn-orange:hover {
          background: #d04b12 !important;
        }
      `}</style>
      <Footer />
      <WhatsAppButton />
    </>
  );
}
