export default function MohammedMarouaziSite() {
  const services = [
    {
      title: "Contenu réseaux sociaux",
      text: "Reels, TikTok, Instagram et capsules verticales conçus pour capter l’attention rapidement."
    },
    {
      title: "Films corporatifs",
      text: "Des vidéos élégantes pour présenter votre entreprise, votre mission et votre équipe avec crédibilité."
    },
    {
      title: "Mini-documentaires",
      text: "Des récits humains et authentiques qui créent un lien émotionnel fort avec votre audience."
    },
    {
      title: "Publicités web",
      text: "Des campagnes visuelles modernes, pensées pour les plateformes numériques et votre image de marque."
    },
    {
      title: "Coaching caméra",
      text: "Un accompagnement pour gagner en naturel, en présence et en confiance devant l’objectif."
    },
    {
      title: "Photographie professionnelle",
      text: "Portraits, branding personnel, événements et images corporatives soignées."
    }
  ]

  const strengths = [
    "Réalisateur de films de fiction et documentaires primés",
    "Expertise en storytelling et direction d’acteurs",
    "Approche humaine, sensible et émotionnelle",
    "Esthétique cinématographique haut de gamme",
    "Contenu adapté aux plateformes sociales modernes",
    "Vision artistique alliée à une exigence professionnelle"
  ]

  return (
    <main className="min-h-screen bg-black text-white font-sans">
      {/* HERO */}
      <section className="relative overflow-hidden border-b border-white/10">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(255,255,255,0.14),transparent_32%),linear-gradient(to_bottom,#000,#111,#000)]" />

        <div className="relative mx-auto grid min-h-screen max-w-7xl items-center gap-14 px-6 py-20 md:grid-cols-[1.05fr_0.95fr]">
          <div>
            <p className="mb-5 text-sm font-medium uppercase tracking-[0.28em] text-zinc-400">
              Réalisateur • Vidéographe • Créateur de contenu
            </p>

            <h1 className="mb-7 max-w-4xl text-5xl font-bold leading-[0.95] md:text-7xl">
              Mohammed Marouazi
            </h1>

            <p className="mb-7 max-w-2xl text-xl leading-relaxed text-zinc-300">
              Une image cinématographique au service des marques, des entreprises
              et des histoires humaines.
            </p>

            <p className="mb-10 max-w-2xl leading-relaxed text-zinc-400">
              Réalisateur de films de fiction et documentaires, Mohammed crée des
              vidéos authentiques, modernes et émotionnelles, avec une approche
              profondément humaine du storytelling visuel.
            </p>

            <div className="flex flex-wrap gap-3">
              <a
                href="mailto:info@centreletoileducanada.com?subject=Demande%20d'offre%20de%20service"
                className="rounded-lg bg-white px-6 py-3 font-semibold text-black transition hover:-translate-y-0.5 hover:bg-zinc-200"
              >
                Demander une offre
              </a>

              <a
                href="https://wa.me/14389225705"
                target="_blank"
                rel="noreferrer"
                className="rounded-lg border border-white/20 px-6 py-3 font-semibold text-white transition hover:-translate-y-0.5 hover:bg-white/10"
              >
                WhatsApp
              </a>
            </div>
          </div>

          <div className="relative">
            <div className="aspect-[4/5] overflow-hidden rounded-lg border border-white/10 bg-zinc-950 shadow-2xl">
              <div className="flex h-full flex-col justify-end bg-[linear-gradient(to_top,rgba(0,0,0,0.92),rgba(0,0,0,0.25),rgba(255,255,255,0.08))] p-8">
                <p className="mb-3 text-sm uppercase tracking-[0.25em] text-zinc-400">
                  Vision cinématographique
                </p>

                <h2 className="mb-4 text-3xl font-bold">
                  L’émotion avant tout
                </h2>

                <p className="max-w-md leading-relaxed text-zinc-300">
                  Films publicitaires, contenus corporatifs et récits documentaires
                  réalisés avec une esthétique cinéma sobre, forte et mémorable.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ABOUT */}
      <section className="bg-zinc-950 px-6 py-24">
        <div className="mx-auto max-w-5xl">
          <p className="mb-4 text-sm font-medium uppercase tracking-[0.25em] text-zinc-500">
            Signature
          </p>

          <h2 className="mb-8 text-4xl font-bold md:text-5xl">
            Une présence visuelle distinctive
          </h2>

          <div className="grid gap-8 text-lg leading-relaxed text-zinc-300 md:grid-cols-2">
            <p>
              Fort d’une carrière en fiction et documentaire, Mohammed développe
              une approche qui mélange réalisme humain, émotion et précision
              cinématographique.
            </p>

            <p className="text-zinc-400">
              Chaque projet est pensé comme une expérience visuelle complète :
              intention claire, rythme maîtrisé, image forte et message durable.
            </p>
          </div>
        </div>
      </section>

      {/* SERVICES */}
      <section className="bg-black px-6 py-24">
        <div className="mx-auto max-w-7xl">
          <div className="mb-14 max-w-3xl">
            <p className="mb-4 text-sm font-medium uppercase tracking-[0.25em] text-zinc-500">
              Services
            </p>

            <h2 className="mb-6 text-4xl font-bold md:text-5xl">
              Création vidéo pour marques, institutions et entrepreneurs
            </h2>

            <p className="text-lg leading-relaxed text-zinc-400">
              Des contenus pensés pour inspirer confiance, augmenter votre
              visibilité et donner une vraie profondeur à votre image.
            </p>
          </div>

          <div className="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
            {services.map((service) => (
              <article
                key={service.title}
                className="rounded-lg border border-white/10 bg-zinc-950 p-7 transition hover:-translate-y-1 hover:border-white/25"
              >
                <h3 className="mb-4 text-2xl font-semibold">
                  {service.title}
                </h3>

                <p className="leading-relaxed text-zinc-400">
                  {service.text}
                </p>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* WHY */}
      <section className="bg-zinc-950 px-6 py-24">
        <div className="mx-auto grid max-w-7xl gap-12 md:grid-cols-[0.9fr_1.1fr]">
          <div>
            <p className="mb-4 text-sm font-medium uppercase tracking-[0.25em] text-zinc-500">
              Pourquoi Mohammed
            </p>

            <h2 className="text-4xl font-bold md:text-5xl">
              Votre image mérite plus qu’une simple vidéo.
            </h2>
          </div>

          <div>
            <ul className="grid gap-4 md:grid-cols-2">
              {strengths.map((item) => (
                <li
                  key={item}
                  className="rounded-lg border border-white/10 bg-black p-5 text-zinc-300"
                >
                  {item}
                </li>
              ))}
            </ul>

            <p className="mt-8 text-lg leading-relaxed text-zinc-400">
              L’objectif est de créer des images qui inspirent confiance,
              émotion et crédibilité, tout en renforçant votre présence numérique.
            </p>
          </div>
        </div>
      </section>

      {/* CONTACT */}
      <section className="border-t border-white/10 bg-black px-6 py-24">
        <div className="mx-auto max-w-5xl text-center">
          <p className="mb-4 text-sm font-medium uppercase tracking-[0.25em] text-zinc-500">
            Contact
          </p>

          <h2 className="mb-6 text-4xl font-bold md:text-5xl">
            Discutons de votre prochain projet
          </h2>

          <p className="mx-auto mb-12 max-w-2xl text-lg leading-relaxed text-zinc-400">
            Pour une offre de service, une collaboration ou une demande
            d’information, contactez Mohammed directement.
          </p>

          <div className="grid gap-5 md:grid-cols-3">
            <a
              href="tel:+14389225705"
              className="rounded-lg border border-white/10 bg-zinc-950 p-6 transition hover:border-white/25"
            >
              <p className="mb-2 text-sm uppercase tracking-[0.2em] text-zinc-500">
                Téléphone
              </p>
              <p className="text-xl font-semibold">438 922 5705</p>
            </a>

            <a
              href="https://wa.me/14389225705"
              target="_blank"
              rel="noreferrer"
              className="rounded-lg border border-white/10 bg-zinc-950 p-6 transition hover:border-white/25"
            >
              <p className="mb-2 text-sm uppercase tracking-[0.2em] text-zinc-500">
                WhatsApp
              </p>
              <p className="text-xl font-semibold">438 922 5705</p>
            </a>

            <a
              href="mailto:info@centreletoileducanada.com"
              className="rounded-lg border border-white/10 bg-zinc-950 p-6 transition hover:border-white/25"
            >
              <p className="mb-2 text-sm uppercase tracking-[0.2em] text-zinc-500">
                Email
              </p>
              <p className="break-all text-lg font-semibold">
                info@centreletoileducanada.com
              </p>
            </a>
          </div>
        </div>
      </section>

      <footer className="border-t border-white/10 px-6 py-8 text-center text-sm text-zinc-600">
        © 2026 Mohammed Marouazi — Réalisateur • Vidéographe • Créateur de contenu
      </footer>
    </main>
  )
}