import type { Metadata } from "next";
import Link from "next/link";
import { timeline, savoirFaire, team } from "@/lib/content";

export const metadata: Metadata = {
  title: "À propos de nous — Fabricant Boulanger",
  description: "L'histoire, le savoir-faire et l'équipe de JLS, fabricant boulanger artisanal à Weyersheim.",
};

export default function AProposPage() {
  return (
    <div>
      <div className="mx-auto max-w-6xl px-6 py-20">
        <p className="font-display text-sm uppercase tracking-[0.35em] text-gold">À propos de nous</p>
        <h1 className="mt-4 max-w-2xl font-display text-4xl font-semibold text-cream text-balance sm:text-5xl">
          Une équipe d&rsquo;artisans boulangers diplômés
        </h1>
      </div>

      {/* Histoire — signature timeline ribbon */}
      <section id="histoire" className="border-t border-surface-2/80 bg-surface py-20">
        <div className="mx-auto max-w-6xl px-6">
          <h2 className="font-display text-3xl text-cream">Notre histoire</h2>
          <div className="mt-10 flex snap-x gap-4 overflow-x-auto pb-4">
            {timeline.map((t, i) => (
              <div
                key={t.year}
                className="relative min-w-[260px] snap-start rounded-2xl border p-6"
                style={{
                  borderColor: i % 2 === 0 ? "var(--amber)" : "var(--gold)",
                  background: "var(--surface-2)",
                }}
              >
                <span
                  className="font-display text-2xl font-semibold"
                  style={{ color: i % 2 === 0 ? "var(--amber-light)" : "var(--gold-light)" }}
                >
                  {t.year}
                </span>
                <h3 className="mt-2 font-display text-lg text-cream">{t.title}</h3>
                <p className="mt-2 text-sm leading-relaxed text-cream-dim">{t.text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Savoir-faire */}
      <section id="savoir-faire" className="mx-auto max-w-6xl px-6 py-20">
        <h2 className="font-display text-3xl text-cream">Notre savoir-faire</h2>
        <div className="mt-10 grid gap-6 sm:grid-cols-3">
          {savoirFaire.map((s) => (
            <div key={s.title} className="rounded-2xl border border-surface-2 bg-surface p-6">
              <h3 className="font-display text-lg text-gold-light">{s.title}</h3>
              <p className="mt-3 text-sm leading-relaxed text-cream-dim">{s.text}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Équipe */}
      <section id="equipe" className="border-t border-surface-2/80 bg-surface py-20">
        <div className="mx-auto max-w-6xl px-6">
          <h2 className="font-display text-3xl text-cream">Notre équipe</h2>
          
          {/* Organigramme */}
          <div className="mt-12 flex flex-col items-center">
            {/* Chef */}
            <div className="flex flex-col items-center">
              <div className="h-16 w-16 rounded-full border-2 border-gold bg-surface-2" />
              <h3 className="mt-3 font-display text-xl text-cream">Julien</h3>
              <p className="text-sm text-gold-light">Chef</p>
            </div>
            
            {/* Lignes de connexion vers les branches */}
            <div className="mt-6 flex w-full max-w-4xl justify-between">
              <div className="h-12 w-0.5 bg-gradient-to-b from-gold to-transparent" />
              <div className="h-12 w-0.5 bg-gradient-to-b from-gold to-transparent" />
              <div className="h-12 w-0.5 bg-gradient-to-b from-gold to-transparent" />
            </div>
            
            {/* 3 Branches */}
            <div className="mt-4 grid w-full max-w-4xl grid-cols-3 gap-8">
              {/* Production du pain */}
              <div className="flex flex-col items-center">
                <h4 className="font-display text-lg text-gold-light mb-4">Production du pain</h4>
                <div className="space-y-4 w-full">
                  {team.filter(m => m.role === "Production du pain").map((m) => (
                    <div key={m.name} className="flex flex-col items-center">
                      <div className="h-12 w-12 rounded-full border border-gold/40 bg-surface-2" />
                      <p className="mt-2 text-sm text-cream">{m.name}</p>
                    </div>
                  ))}
                </div>
              </div>
              
              {/* Production des sandwichs */}
              <div className="flex flex-col items-center">
                <h4 className="font-display text-lg text-gold-light mb-4">Production des sandwichs</h4>
                <div className="space-y-4 w-full">
                  {team.filter(m => m.role === "Production des sandwichs").map((m) => (
                    <div key={m.name} className="flex flex-col items-center">
                      <div className="h-12 w-12 rounded-full border border-gold/40 bg-surface-2" />
                      <p className="mt-2 text-sm text-cream">{m.name}</p>
                    </div>
                  ))}
                </div>
              </div>
              
              {/* Livraison/Entretien/Gestion */}
              <div className="flex flex-col items-center">
                <h4 className="font-display text-lg text-gold-light mb-4">Livraison/Entretien/Gestion</h4>
                <div className="space-y-4 w-full">
                  {team.filter(m => m.role === "Livraison/Entretien/Gestion").map((m) => (
                    <div key={m.name} className="flex flex-col items-center">
                      <div className="h-12 w-12 rounded-full border border-gold/40 bg-surface-2" />
                      <p className="mt-2 text-sm text-cream">{m.name}</p>
                    </div>
                  ))}
                </div>
              </div>
            </div>
            
            <p className="mt-8 text-center text-xs text-cream-dim/60">
              Photos de l&rsquo;équipe à venir.
            </p>
          </div>
        </div>
      </section>

      {/* Passer commande */}
      <section className="mx-auto max-w-6xl px-6 py-20 text-center">
        <h2 className="font-display text-3xl text-cream text-balance">
          Prêt à explorer notre catalogue en ligne ?
        </h2>
        <Link
          href="/nos-produits"
          className="mt-8 inline-block rounded-full bg-gold px-7 py-3 font-medium text-bg transition-transform hover:scale-[1.03]"
        >
          Passer commande
        </Link>
      </section>
    </div>
  );
}