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 { getCars } from "@/lib/db";
import CarCard from "@/components/CarCard";
import FAQSection from "@/components/FAQSection";
import {
  Plane,
  Clock,
  CheckCircle,
  MapPin,
  Phone,
  Star,
  ArrowRight,
  Shield,
  CreditCard,
} from "lucide-react";

export const metadata: Metadata = {
  title: "Location Voiture Aéroport Marrakech-Menara | Setocar",
  description:
    "Location de voiture à l'aéroport de Marrakech-Menara (RAK). Livraison directe à l'arrivée. Prix à partir de 200 MAD/jour. Réservation rapide via WhatsApp.",
  keywords: [
    "location voiture aeroport marrakech menara",
    "car rental marrakech airport",
    "rent a car marrakech airport",
    "aeroport marrakech rak voiture",
    "navette aeroport marrakech",
  ],
  alternates: {
    canonical: "https://www.setocar.com/locations/marrakech-airport",
  },
  openGraph: {
    title: "Location Voiture Aéroport Marrakech-Menara | Setocar",
    description:
      "Service de livraison voiture à l'aéroport Marrakech-Menara. Gratuit dès 3 jours de location.",
    url: "https://www.setocar.com/locations/marrakech-airport",
  },
};

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "Service",
  name: "Location Voiture Aéroport Marrakech-Menara",
  url: "https://www.setocar.com/locations/marrakech-airport",
  description:
    "Service de location de voiture avec livraison à l'aéroport international de Marrakech-Menara (RAK).",
  provider: {
    "@type": "LocalBusiness",
    name: "Setocar",
    url: "https://www.setocar.com",
  },
  areaServed: {
    "@type": "Airport",
    name: "Aéroport de Marrakech-Menara",
    iataCode: "RAK",
    sameAs: "https://www.wikidata.org/wiki/Q836505",
  },
};

const WHATSAPP_NUMBER = "212651621512";

const steps = [
  {
    number: "01",
    title: "Réservez via WhatsApp",
    desc: "Envoyez-nous un message avec vos dates d'arrivée et le véhicule souhaité. Confirmation en moins de 10 minutes.",
    icon: <Phone size={28} color="#e85c1a" />,
  },
  {
    number: "02",
    title: "Vol & Arrivée à RAK",
    desc: "Atterrissez à l'aéroport Marrakech-Menara (RAK). Notre équipe suit votre vol en temps réel.",
    icon: <Plane size={28} color="#e85c1a" />,
  },
  {
    number: "03",
    title: "Récupérez votre voiture",
    desc: "Notre agent vous attend dans le hall des arrivées avec votre nom. Formalités rapides (10 min).",
    icon: <CheckCircle size={28} color="#e85c1a" />,
  },
  {
    number: "04",
    title: "Partez à l'aventure !",
    desc: "Votre voiture est prête, assurée, GPS intégré. Explorez Marrakech et ses environs en liberté.",
    icon: <MapPin size={28} color="#e85c1a" />,
  },
];

export default function MarrakechAirportPage() {
  const cars = getCars();
  const topCars = cars.slice(0, 3);

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <Navbar />

      {/* Hero */}
      <section
        style={{
          background: "#111520",
          padding: "8rem 1.5rem 5rem",
          position: "relative",
          overflow: "hidden",
        }}
      >
        {/* Decorative elements */}
        <div
          style={{
            position: "absolute",
            top: "10%",
            right: "5%",
            fontSize: "12rem",
            opacity: 0.04,
            pointerEvents: "none",
            lineHeight: 1,
            color: "white"
          }}
        >
          ✈
        </div>

        <div style={{ maxWidth: "900px", margin: "0 auto", textAlign: "center", position: "relative", zIndex: 1 }}>
          <div
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: "0.5rem",
              background: "rgba(232,92,26,0.15)",
              border: "1px solid rgba(232,92,26,0.4)",
              padding: "0.5rem 1.25rem",
              borderRadius: "2rem",
              marginBottom: "1.75rem",
            }}
          >
            <Plane size={16} color="#e85c1a" />
            <span style={{ color: "#e85c1a", fontSize: "0.85rem", fontWeight: 600 }}>
              Aéroport Marrakech-Menara (RAK) · Livraison gratuite dès 3 jours
            </span>
          </div>

          <h1
            style={{
              fontFamily: "var(--font-playfair), var(--font-oswald)",
              fontSize: "clamp(2rem, 5vw, 3.8rem)",
              color: "white",
              lineHeight: 1.1,
              marginBottom: "1.25rem",
              fontWeight: 800,
            }}
          >
            Location voiture{" "}
            <span style={{ color: "#e85c1a" }}>Aéroport Marrakech</span>
            <br />Menara — Sans attente
          </h1>

          <p
            style={{
              color: "rgba(255,255,255,0.82)",
              fontSize: "1.1rem",
              lineHeight: 1.7,
              marginBottom: "2.5rem",
              maxWidth: "650px",
              margin: "0 auto 2.5rem",
            }}
          >
            Votre voiture vous attend dès la sortie des bagages. Livraison directe à l&apos;aéroport
            Marrakech-Menara, disponible 7j/7 et 24h/24. Réservez en 2 minutes sur WhatsApp.
          </p>

          <div style={{ display: "flex", gap: "1rem", justifyContent: "center", flexWrap: "wrap" }}>
            <a
              href={`https://wa.me/${WHATSAPP_NUMBER}?text=Bonjour%20Setocar!%20Je%20souhaite%20une%20livraison%20à%20l%27aéroport%20de%20Marrakech-Menara.`}
              target="_blank"
              rel="noopener noreferrer"
              style={{
                display: "inline-flex",
                alignItems: "center",
                gap: "0.75rem",
                padding: "1rem 2rem",
                background: "#25d366",
                borderRadius: "0.75rem",
                color: "white",
                textDecoration: "none",
                fontWeight: 700,
                fontSize: "1rem",
                boxShadow: "0 4px 20px rgba(37,211,102,0.3)",
              }}
            >
              <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>
              Réserver livraison aéroport
            </a>
            <Link href="/cars" style={{
              display: "inline-flex",
              alignItems: "center",
              gap: "0.5rem",
              padding: "1rem 2rem",
              background: "rgba(255,255,255,0.1)",
              backdropFilter: "blur(8px)",
              border: "1px solid rgba(255,255,255,0.25)",
              borderRadius: "0.75rem",
              color: "white",
              textDecoration: "none",
              fontWeight: 700,
              fontSize: "1rem",
            }}>
              Voir nos voitures <ArrowRight size={18} />
            </Link>
          </div>

          {/* Trust badges */}
          <div
            style={{
              display: "flex",
              flexWrap: "wrap",
              gap: "1.5rem",
              justifyContent: "center",
              marginTop: "3rem",
            }}
          >
            {[
              { icon: "⭐", text: "4.9/5 sur Google" },
              { icon: "✈", text: "Service aéroport 24h/7j" },
              { icon: "🆓", text: "Livraison gratuite dès 3 jours" },
              { icon: "⚡", text: "Confirmation en 10 minutes" },
            ].map((b) => (
              <div
                key={b.text}
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: "0.5rem",
                  color: "rgba(255,255,255,0.85)",
                  fontSize: "0.85rem",
                  fontWeight: 500,
                }}
              >
                <span>{b.icon}</span> {b.text}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* How it works */}
      <section style={{ padding: "5rem 1.5rem", background: "#111520" }}>
        <div style={{ maxWidth: "1280px", margin: "0 auto" }}>
          <div style={{ textAlign: "center", marginBottom: "3.5rem" }}>
            <span
              style={{
                display: "inline-block",
                background: "rgba(232,92,26,0.1)",
                color: "#e85c1a",
                padding: "0.35rem 1rem",
                borderRadius: "2rem",
                fontSize: "0.8rem",
                fontWeight: 700,
                textTransform: "uppercase",
                letterSpacing: "0.1em",
                marginBottom: "1rem",
              }}
            >
              Comment ça marche
            </span>
            <h2 style={{
              fontFamily: "var(--font-playfair), var(--font-oswald)",
              fontSize: "clamp(2rem, 4vw, 2.5rem)",
              color: "white",
              marginBottom: "1rem"
            }}>
              Récupérez votre voiture en 4 étapes
            </h2>
            <div style={{ width: "60px", height: "4px", background: "#e85c1a", margin: "0 auto" }} />
          </div>

          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
              gap: "1.5rem",
              position: "relative",
            }}
          >
            {steps.map((step, i) => (
              <div
                key={step.number}
                style={{
                  background: "#1c2133",
                  borderRadius: "1.25rem",
                  padding: "2rem",
                  position: "relative",
                  border: "1px solid #2a3050",
                  transition: "all 0.3s ease",
                }}
                className="card-hover"
              >
                <div
                  style={{
                    position: "absolute",
                    top: "1.25rem",
                    right: "1.25rem",
                    fontFamily: "var(--font-playfair)",
                    fontSize: "3rem",
                    fontWeight: 900,
                    color: "rgba(255,255,255,0.05)",
                    lineHeight: 1,
                  }}
                >
                  {step.number}
                </div>
                <div
                  style={{
                    width: 56,
                    height: 56,
                    borderRadius: "50%",
                    background: "rgba(232,92,26,0.1)",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    marginBottom: "1.25rem",
                  }}
                >
                  {step.icon}
                </div>
                <h3
                  style={{
                    fontFamily: "var(--font-playfair), var(--font-oswald)",
                    fontSize: "1.1rem",
                    color: "white",
                    marginBottom: "0.75rem",
                  }}
                >
                  {step.title}
                </h3>
                <p style={{ color: "rgba(255,255,255,0.7)", fontSize: "0.88rem", lineHeight: 1.7 }}>{step.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Airport Info */}
      <section style={{ padding: "5rem 1.5rem", background: "#1c2133", borderTop: "1px solid #2a3050", borderBottom: "1px solid #2a3050" }}>
        <div style={{ maxWidth: "1280px", margin: "0 auto" }}>
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "1fr 1fr",
              gap: "3rem",
              alignItems: "center",
            }}
          >
            <div>
              <h2
                style={{
                  fontFamily: "var(--font-playfair), var(--font-oswald)",
                  fontSize: "clamp(1.6rem, 3vw, 2.2rem)",
                  color: "white",
                  marginBottom: "1.5rem",
                }}
              >
                Aéroport Marrakech-Menara (RAK)
              </h2>
              <p style={{ color: "rgba(255,255,255,0.8)", lineHeight: 1.8, marginBottom: "1.5rem" }}>
                L&apos;aéroport international de Marrakech-Menara est le 2ème aéroport du Maroc et accueille
                des millions de voyageurs chaque année. Notre service de livraison de voiture est disponible
                pour tous les vols, à toute heure.
              </p>

              <div style={{ display: "flex", flexDirection: "column", gap: "1rem", marginBottom: "2rem" }}>
                {[
                  {
                    icon: <Plane size={20} color="#e85c1a" />,
                    title: "Code IATA",
                    text: "RAK — Marrakech-Menara International Airport",
                  },
                  {
                    icon: <MapPin size={20} color="#e85c1a" />,
                    title: "Distance du centre-ville",
                    text: "5 km (environ 10 minutes en voiture)",
                  },
                  {
                    icon: <Clock size={20} color="#e85c1a" />,
                    title: "Service Setocar",
                    text: "Disponible 7j/7, 00h00–24h00",
                  },
                  {
                    icon: <Shield size={20} color="#e85c1a" />,
                    title: "Point de rencontre",
                    text: "Hall des arrivées — Panneau Setocar",
                  },
                ].map((item) => (
                  <div
                    key={item.title}
                    style={{
                      display: "flex",
                      gap: "1rem",
                      alignItems: "flex-start",
                      padding: "1rem",
                      background: "#141926",
                      borderRadius: "0.75rem",
                      border: "1px solid #2a3050",
                    }}
                  >
                    <div
                      style={{
                        width: 40,
                        height: 40,
                        borderRadius: "0.5rem",
                        background: "rgba(232,92,26,0.1)",
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                        flexShrink: 0,
                      }}
                    >
                      {item.icon}
                    </div>
                    <div>
                      <p style={{ fontWeight: 700, color: "white", fontSize: "0.88rem" }}>{item.title}</p>
                      <p style={{ color: "rgba(255,255,255,0.65)", fontSize: "0.85rem" }}>{item.text}</p>
                    </div>
                  </div>
                ))}
              </div>

              <a
                href={`https://wa.me/${WHATSAPP_NUMBER}?text=Bonjour!%20J%27arrive%20à%20l%27aéroport%20de%20Marrakech%20et%20je%20souhaite%20louer%20une%20voiture.`}
                target="_blank"
                rel="noopener noreferrer"
                style={{
                  display: "inline-flex",
                  alignItems: "center",
                  gap: "0.75rem",
                  padding: "1rem 2rem",
                  background: "#25d366",
                  borderRadius: "0.75rem",
                  color: "white",
                  textDecoration: "none",
                  fontWeight: 700,
                  boxShadow: "0 4px 15px rgba(37,211,102,0.3)",
                }}
              >
                <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>
                Réserver ma voiture aéroport
              </a>
            </div>

            {/* Map */}
            <div
              style={{
                borderRadius: "1.5rem",
                overflow: "hidden",
                border: "1px solid #2a3050",
                height: "450px",
              }}
            >
              <iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3399.5123!2d-8.0363!3d31.6069!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xdafee5a3e5ee5c3%3A0xa52cb8e76e938d42!2sMarrakesh-Menara%20Airport!5e0!3m2!1sfr!2sma!4v1700000000001"
                width="100%"
                height="100%"
                style={{ border: 0 }}
                allowFullScreen
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                title="Aéroport Marrakech-Menara - Setocar livraison voiture"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Featured Cars */}
      <section style={{ padding: "5rem 1.5rem", background: "#111520" }}>
        <div style={{ maxWidth: "1280px", margin: "0 auto" }}>
          <div style={{ textAlign: "center", marginBottom: "3rem" }}>
            <h2 style={{
              fontFamily: "var(--font-playfair), var(--font-oswald)",
              fontSize: "clamp(2rem, 4vw, 2.5rem)",
              color: "white",
              marginBottom: "1rem"
            }}>Voitures disponibles à l&apos;aéroport</h2>
            <div style={{ width: "60px", height: "4px", background: "#e85c1a", margin: "0 auto" }} />
          </div>
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
              gap: "1.5rem",
              marginBottom: "2.5rem",
            }}
          >
            {topCars.map((car) => (
              <CarCard key={car.id} car={car} />
            ))}
          </div>
          <div style={{ textAlign: "center" }}>
            <Link href="/cars" style={{
              display: "inline-flex",
              alignItems: "center",
              gap: "0.5rem",
              padding: "1rem 2rem",
              background: "rgba(255,255,255,0.1)",
              backdropFilter: "blur(8px)",
              border: "1px solid rgba(255,255,255,0.25)",
              borderRadius: "0.75rem",
              color: "white",
              textDecoration: "none",
              fontWeight: 700,
              fontSize: "1rem",
            }}>
              Voir toute la flotte <ArrowRight size={18} />
            </Link>
          </div>
        </div>
      </section>

      <FAQSection />
      <Footer />
      <WhatsAppButton />
    </>
  );
}