import type { Metadata } from "next";
import Link from "next/link";
import ProductCard from "@/components/ProductCard";

export const metadata: Metadata = {
  title: "Pour nos collectivités — Fabricant Boulanger",
  description: "Découvrez notre offre de pains et viennoiseries dédiée aux collectivités.",
};

function ProductCardSimple({ p }: { p: { name: string; description: string; gencod: string; weight: string; dlc: string } }) {
  return (
    <div className="flex flex-col rounded-2xl border border-surface-2 bg-surface transition-colors hover:border-gold/50">
      <div className="flex w-full items-center justify-between gap-4 p-6 text-left">
        <h3 className="font-display text-lg text-cream">{p.name}</h3>
      </div>
      <div className="px-6 pb-6">
        <p className="mt-3 text-center text-sm leading-relaxed text-cream-dim">{p.description}</p>
        {(p.weight || p.dlc) && (
          <div className="mt-4 flex justify-center gap-4 text-xs text-cream-dim/70">
            {p.weight && <span className="rounded-full bg-surface-2 px-3 py-1">{p.weight}</span>}
            {p.dlc && <span className="rounded-full bg-surface-2 px-3 py-1">DLC {p.dlc}</span>}
          </div>
        )}
      </div>
    </div>
  );
}

// Produits avec illustration
const produitsAvecImage = [
  {
    name: "Pain long",
    description: "Pain long artisanal, idéal pour les repas collectifs.",
    gencod: "",
    weight: "",
    dlc: "",
  },
  {
    name: "Baguette",
    description: "Baguette française, croustillante et savoureuse.",
    gencod: "",
    weight: "",
    dlc: "",
  },
  {
    name: "Brioches",
    description: "Disponibles avec pépites de chocolat ou raisins secs, noisettes, amandes et autres garnitures sur demande.",
    gencod: "",
    weight: "",
    dlc: "",
  },
];

// Produits sans illustration (personnalisables selon vos besoins)
const produitsSansImage = [
  {
    name: "Pains spéciaux",
    description: "Pains aux céréales, complets, de seigle, ou autres recettes sur demande.",
    gencod: "",
    weight: "Variable selon demande",
    dlc: "",
  },
  {
    name: "Bretzel",
    description: "Bretzel alsacien traditionnel, salé.",
    gencod: "",
    weight: "",
    dlc: "",
  },
  {
    name: "Pain burger",
    description: "Pain à burger moelleux, spécialement conçu pour les burgers.",
    gencod: "",
    weight: "",
    dlc: "",
  },
];

export default function CollectivitesPage() {
  return (
    <div className="mx-auto max-w-6xl px-6 py-20">
      <p className="font-display text-sm uppercase tracking-[0.35em] text-gold">Nos produits</p>
      <h1 className="mt-4 font-display text-4xl font-semibold text-cream text-balance sm:text-5xl">
        Pour nos collectivités
      </h1>
      
      <div className="mt-10 space-y-6 text-cream-dim">
        <p>
          En plus de tous nos sandwichs, les collectivités ont accès à d&rsquo;autres produits.
        </p>
        
        <p>
          Nous proposons une gamme complète de pains et viennoiseries adaptées aux besoins des collectivités. 
          Certains produits ont un visuel générique, tandis que d&rsquo;autres, plus spécifiques ou personnalisables, 
          sont présentés sous forme de liste détaillée.
        </p>
      </div>

      {/* Produits avec illustration */}
      <section className="mt-16">
        <h2 className="font-display text-2xl text-cream">Nos pains et viennoiseries standards</h2>
        <div className="mt-6 grid gap-5 sm:grid-cols-2 lg:grid-cols-3 items-start">
          {produitsAvecImage.map((p, index) => (
            <ProductCardSimple key={index} p={p} />
          ))}
        </div>
      </section>

      {/* Produits sans illustration */}
      <section className="mt-16">
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
          <div>
            <h2 className="font-display text-2xl text-cream">Nos produits personnalisables</h2>
            <p className="mt-2 max-w-xl text-sm text-cream-dim">
              Ces produits sont disponibles sur demande et peuvent être adaptés à vos besoins spécifiques.
            </p>
          </div>
          <Link
            href="/contact"
            className="rounded-full bg-gold px-6 py-2 text-center font-medium text-bg transition-transform hover:scale-[1.03] sm:shrink-0"
          >
            Nous contacter
          </Link>
        </div>
        <div className="mt-6 grid gap-5 sm:grid-cols-2 lg:grid-cols-3 items-start">
          {produitsSansImage.map((p, index) => (
            <div key={index} className="flex flex-col rounded-2xl border border-surface-2 bg-surface">
              <div className="p-6">
                <h3 className="font-display text-lg text-cream">{p.name}</h3>
                <p className="mt-2 text-sm leading-relaxed text-cream-dim">{p.description}</p>
                {(p.weight || p.dlc) && (
                  <div className="mt-4 flex gap-4 text-xs text-cream-dim/70">
                    {p.weight && <span className="rounded-full bg-surface-2 px-3 py-1">{p.weight}</span>}
                    {p.dlc && <span className="rounded-full bg-surface-2 px-3 py-1">DLC {p.dlc}</span>}
                  </div>
                )}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Autres produits - contact */}
      <section className="mt-16 rounded-2xl border border-dashed border-gold/40 bg-surface p-8 text-center">
        <h2 className="font-display text-xl text-cream">
          Autres produits sur demande
        </h2>
        <p className="mx-auto mt-2 max-w-lg text-sm text-cream-dim">
          Nous proposons également d&rsquo;autres produits selon vos besoins. 
          Contactez-nous pour discuter de vos besoins spécifiques en pains, viennoiseries ou produits de boulangerie.
        </p>
        <Link
          href="/contact"
          className="mt-6 inline-block rounded-full bg-gold px-6 py-2 font-medium text-bg transition-transform hover:scale-[1.03]"
        >
          Nous contacter
        </Link>
      </section>
    </div>
  );
}