---
import BaseLayout from "../layouts/BaseLayout.astro";

const links = [
  {
    title: "Aussi Vite Que Nécessaire",
    url: "https://avqn.ch",
    icon: "🌐",
  },
  {
    title: "LinkedIn",
    url: "https://www.linkedin.com/in/emmbernard",
    icon: "💼",
  },
  {
    title: "YouTube",
    url: "https://www.youtube.com/@emmanuelflux",
    icon: "🎥",
  },
];
---

<BaseLayout>
  <!-- Main Container: Full screen height, centered content but with a grid layout -->
  <main
    class="min-h-screen w-full flex items-center justify-center p-4 sm:p-8 bg-white selection:bg-black selection:text-white"
  >
    <!-- Grid Wrapper: Max width restriction for large screens, grid on desktop -->
    <div
      class="w-full max-w-6xl grid grid-cols-1 lg:grid-cols-12 border border-black"
    >
      <!-- LEFT COLUMN: Profile & Bio (Spans 5 cols) -->
      <div
        class="lg:col-span-5 p-8 sm:p-12 border-b lg:border-b-0 lg:border-r border-black flex flex-col justify-between min-h-[500px]"
      >
        <!-- Header / Avatar -->
        <div>
          <div
            class="w-48 mb-8 bg-gradient-to-br from-[#FFE4D9] to-[#FFD6CC] rounded-3xl overflow-hidden shadow-2xl shadow-rose-900/20"
          >
            <img
              src="https://cdn.avqn.ch/photos/manu/manu-left.webp"
              alt="Emmanuel Bernard"
              class="w-full h-auto object-cover grayscale object-top mix-blend-multiply"
            />
          </div>

          <h1
            class="text-4xl sm:text-5xl font-extrabold tracking-tighter text-black mb-4 uppercase leading-[0.9]"
          >
            Emmanuel<br />Bernard
          </h1>
        </div>

        <!-- Body -->
        <div class="space-y-6">
          <h2
            class="text-xl font-bold border-l-4 border-black pl-4 py-1 leading-snug"
          >
            Consultant-formateur<br />AI Automation &<br />Expert n8n à Lausanne
          </h2>

          <p
            class="text-lg text-black font-medium leading-relaxed max-w-sm text-balance"
          >
            Avec 20 ans d'expérience technique, j'accompagne les équipes et
            agences pour automatiser leurs processus et prototyper leurs idées
            grâce à l'IA.
          </p>
        </div>
      </div>

      <!-- RIGHT COLUMN: Links Broken Grid (Spans 7 cols) -->
      <div class="lg:col-span-7 grid grid-cols-1 sm:grid-cols-2">
        <!-- Link Block 1: Agency Site -->
        <a
          href="https://avqn.ch"
          target="_blank"
          rel="noopener noreferrer"
          class="group relative sm:col-span-2 border-b border-black p-8 sm:p-12 hover:bg-black hover:text-white transition-colors duration-300 flex flex-col justify-center min-h-[240px]"
        >
          <span
            class="text-sm font-bold uppercase tracking-widest mb-2 opacity-60 group-hover:opacity-80"
            >AVQN.CH</span
          >
          <span
            class="text-3xl sm:text-4xl font-black uppercase leading-none tracking-tighter mb-4"
            >Aussi Vite<br />Que Nécessaire</span
          >
          <p
            class="text-sm sm:text-base font-medium max-w-sm mt-auto border-l-2 border-current pl-3 opacity-90"
          >
            Découvrez mes services en<br />AI Automation et n8n
          </p>
          <div class="absolute top-6 right-6">
            <span class="text-4xl font-light">↗</span>
          </div>
        </a>

        <!-- Link Block 2: LinkedIn -->
        <a
          href="https://www.linkedin.com/in/emmbernard"
          target="_blank"
          rel="noopener noreferrer"
          class="group relative border-b sm:border-b-0 sm:border-r border-black p-8 hover:bg-black hover:text-white transition-colors duration-300 flex flex-col justify-between min-h-[200px]"
        >
          <div class="absolute top-6 right-6">
            <span class="text-2xl font-light">↗</span>
          </div>
          <div class="mt-auto">
            <span class="block text-2xl font-bold mb-1">LinkedIn</span>
            <span class="text-xs uppercase opacity-60">Connectons-nous</span>
          </div>
        </a>

        <!-- Link Block 3: YouTube -->
        <a
          href="https://www.youtube.com/@emmanuelflux"
          target="_blank"
          rel="noopener noreferrer"
          class="group relative p-8 hover:bg-black hover:text-white transition-colors duration-300 flex flex-col justify-between min-h-[200px]"
        >
          <div class="absolute top-6 right-6">
            <span class="text-2xl font-light">↗</span>
          </div>
          <div class="mt-auto">
            <span class="block text-2xl font-bold mb-1">YouTube</span>
            <span class="text-xs uppercase opacity-60">Tutoriels & Démos</span>
          </div>
        </a>

        <!-- Optional Filler / Deco Block (To complete grid if needed, or footer) -->
        <div
          class="sm:col-span-2 border-t border-black bg-gray-50 p-6 flex items-center justify-between text-xs font-mono uppercase tracking-widest text-black/50"
        >
          <span>© {new Date().getFullYear()} Emmanuel Bernard</span>
          <span>Lausanne, CH</span>
        </div>
      </div>
    </div>
  </main>
</BaseLayout>