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

export const metadata: Metadata = {
  title: "Notre savoir-faire — Fabricant Boulanger",
  description: "Découvrez notre processus de fabrication artisanal : pain et maltiz à fermentation lente (12 à 72h) façonnés à Weyersheim.",
};

export default function SavoirFairePage() {
  return (
    <div>
      {/* Hero */}
      <div className="mx-auto max-w-6xl px-6 py-20 text-center">
        <p className="font-display text-sm uppercase tracking-[0.35em] text-gold">Notre savoir-faire</p>
        <h1 className="mt-4 max-w-2xl mx-auto font-display text-4xl font-semibold text-cream text-balance sm:text-5xl">
          Notre savoir-faire artisanal
        </h1>
        <p className="mt-6 max-w-2xl mx-auto text-lg text-cream-dim">
          Chez Fabricant Boulanger, chaque produit est le fruit d&rsquo;un savoir-faire artisanal transmit avec passion.
          Nos pains et maltiz bénéficient d&rsquo;une fermentation lente, entre 12 et 72 heures, pour un goût unique et une conservation optimale.
        </p>
      </div>

      {/* Fabrication du pain */}
      <section className="border-t border-surface-2/80 bg-surface py-20">
        <div className="mx-auto max-w-6xl px-6">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <h2 className="font-display text-3xl text-cream">La fabrication du pain</h2>
              <p className="mt-4 text-cream-dim">
                Un processus artisanal en plusieurs étapes, respectant les traditions de la boulangerie.
              </p>
            </div>
            <div className="space-y-6">
              <div className="rounded-2xl border border-surface-2 bg-surface-2 p-6">
                <span className="inline-block rounded-full bg-gold/20 px-3 py-1 text-xs font-medium text-gold-light">Étape 1</span>
                <h3 className="mt-3 font-display text-xl text-cream">Le pétrissage</h3>
                <p className="mt-2 text-sm leading-relaxed text-cream-dim">
                  Nous sélectionnons avec soin nos farines et ingrédients. Le pétrissage est effectué lentement pour développer le réseau de gluten et obtenir une pâte homogène et élastique, essentielle à une bonne structure du pain.
                </p>
              </div>
              <div className="rounded-2xl border border-surface-2 bg-surface-2 p-6">
                <span className="inline-block rounded-full bg-gold/20 px-3 py-1 text-xs font-medium text-gold-light">Étape 2</span>
                <h3 className="mt-3 font-display text-xl text-cream">Le façonnage</h3>
                <p className="mt-2 text-sm leading-relaxed text-cream-dim">
                  Chaque pâton est pesé, divisé et façonné selon la forme souhaitée : baguette, pain rond, pain long, ou spécialités. Cette étape demande précision et expérience pour garantir une cuisson uniforme.
                </p>
              </div>
              <div className="rounded-2xl border border-surface-2 bg-surface-2 p-6">
                <span className="inline-block rounded-full bg-gold/20 px-3 py-1 text-xs font-medium text-gold-light">Étape 3</span>
                <h3 className="mt-3 font-display text-xl text-cream">La fermentation lente (12 à 72h)</h3>
                <p className="mt-2 text-sm leading-relaxed text-cream-dim">
                  C&rsquo;est le cœur de notre savoir-faire. Nos pains reposent longuement pour développer leurs arômes. Cette fermentation lente, à température contrôlée, permet une meilleure digestibilité et une saveur plus profonde. Plus la fermentation est longue, plus le pain sera goûteux et se conservera longtemps.
                </p>
              </div>
              <div className="rounded-2xl border border-surface-2 bg-surface-2 p-6">
                <span className="inline-block rounded-full bg-gold/20 px-3 py-1 text-xs font-medium text-gold-light">Étape 4</span>
                <h3 className="mt-3 font-display text-xl text-cream">La cuisson</h3>
                <p className="mt-2 text-sm leading-relaxed text-cream-dim">
                  Nos pains sont cuits dans notre fournil de Weyersheim, dans des fours à sole traditionnels. La cuisson est surveillée pour obtenir une croûte croustillante et dorée, tout en préservant un moelleux intérieur. Chaque fournée est un moment unique.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Fabrication des maltiz */}
      <section className="mx-auto max-w-6xl px-6 py-20">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          <div className="lg:order-2">
            <h2 className="font-display text-3xl text-cream">La fabrication des maltiz</h2>
            <p className="mt-4 text-cream-dim">
              Nos maltiz, spécialités alsaciennes, allient tradition et créativité pour des sandwichs gourmands.
            </p>
          </div>
          <div className="space-y-6 lg:order-1">
            <div className="rounded-2xl border border-surface-2 bg-surface-2 p-6">
              <span className="inline-block rounded-full bg-gold/20 px-3 py-1 text-xs font-medium text-gold-light">Étape 1</span>
              <h3 className="mt-3 font-display text-xl text-cream">Le pétrissage et la préparation</h3>
              <p className="mt-2 text-sm leading-relaxed text-cream-dim">
                La pâte des maltiz est préparée avec les mêmes exigences que nos pains : farines de qualité, hydratation parfaite et pétrissage soigné. Pour les versions garnies, nous préparons également les ingrédients frais qui composeront chaque recette.
              </p>
            </div>
            <div className="rounded-2xl border border-surface-2 bg-surface-2 p-6">
              <span className="inline-block rounded-full bg-gold/20 px-3 py-1 text-xs font-medium text-gold-light">Étape 2</span>
              <h3 className="mt-3 font-display text-xl text-cream">Le façonnage et le garnissage</h3>
              <p className="mt-2 text-sm leading-relaxed text-cream-dim">
                La pâte est divisée, pesée et façonnée en forme de petit pain. Chaque maltiz est préparé avec soin pour garantir un équilibre parfait des saveurs.
              </p>
            </div>
            <div className="rounded-2xl border border-surface-2 bg-surface-2 p-6">
              <span className="inline-block rounded-full bg-gold/20 px-3 py-1 text-xs font-medium text-gold-light">Étape 3</span>
              <h3 className="mt-3 font-display text-xl text-cream">Le trempage</h3>
              <p className="mt-2 text-sm leading-relaxed text-cream-dim">
                Après le façonnage et avant la cuisson, les maltiz sont trempées dans un mélange qui leur donne leur aspect caractéristique. Cette étape apporte également une saveur supplémentaire et contribue à la texture unique de notre produit.
              </p>
            </div>
            <div className="rounded-2xl border border-surface-2 bg-surface-2 p-6">
              <span className="inline-block rounded-full bg-gold/20 px-3 py-1 text-xs font-medium text-gold-light">Étape 4</span>
              <h3 className="mt-3 font-display text-xl text-cream">La cuisson</h3>
              <p className="mt-2 text-sm leading-relaxed text-cream-dim">
                Les maltiz sont cuites dans notre fournil avec la même attention que nos pains. La cuisson est adaptée pour obtenir une texture moelleuse à l&rsquo;intérieur et une croûte légèrement croustillante, le tout en préservant la fraîcheur des garnitures.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* La différence artisanale */}
      <section className="border-t border-surface-2/80 bg-surface py-20">
        <div className="mx-auto max-w-6xl px-6 text-center">
          <h2 className="font-display text-3xl text-cream">Pourquoi une fermentation longue ?</h2>
          <div className="mt-10 grid md:grid-cols-3 gap-8">
            <div className="rounded-2xl border border-surface-2 bg-surface-2 p-6">
              <h3 className="font-display text-xl text-gold-light">Des arômes développés</h3>
              <p className="mt-3 text-sm leading-relaxed text-cream-dim">
                Plus la fermentation est longue, plus les enzymes et micro-organismes ont le temps de transformer les sucres et protéines, créant des arômes complexes et une saveur riche et profonde.
              </p>
            </div>
            <div className="rounded-2xl border border-surface-2 bg-surface-2 p-6">
              <h3 className="font-display text-xl text-gold-light">Une meilleure conservation</h3>
              <p className="mt-3 text-sm leading-relaxed text-cream-dim">
                La fermentation lente permet une meilleure conservation naturelle du pain. Nos produits se conservent parfaitement à 4°C pendant plusieurs jours.
              </p>
            </div>
            <div className="rounded-2xl border border-surface-2 bg-surface-2 p-6">
              <h3 className="font-display text-xl text-gold-light">Une meilleure digestibilité</h3>
              <p className="mt-3 text-sm leading-relaxed text-cream-dim">
                La longue fermentation permet une meilleure dégradation du gluten et des autres composants, rendant nos produits plus digestes, même pour les estomacs sensibles.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Nos sandwichs */}
      <section className="mx-auto max-w-6xl px-6 py-20 text-center">
        <h2 className="font-display text-3xl text-cream">Nos sandwichs faits main</h2>
        <p className="mt-6 max-w-2xl mx-auto text-lg text-cream-dim">
          Chaque sandwich est préparé artisanalement dans notre atelier. Nous sélectionnons des ingrédients frais de qualité, que nous assemblons à la main avec soin. Que ce soit nos baguettes traditionnelles ou nos maltiz, chaque produit est garni avec attention pour offrir une expérience gustative optimale.
        </p>
        <p className="mt-4 max-w-2xl mx-auto text-cream-dim">
          Notre engagement : des recettes équilibrées, des portions généreuses, et une fraîcheur préservée grâce à notre savoir-faire artisanal et à nos méthodes de conservation adaptées.
        </p>
      </section>

      {/* CTA */}
      <section className="mx-auto max-w-6xl px-6 py-20 text-center">
        <h2 className="font-display text-3xl text-cream text-balance">
          Des questions sur notre savoir-faire ?
        </h2>
        <p className="mt-4 text-cream-dim">
          N&rsquo;hésitez pas à nous contacter pour en savoir plus sur nos méthodes de fabrication.
        </p>
        <Link
          href="/contact"
          className="mt-8 inline-block rounded-full bg-gold px-7 py-3 font-medium text-bg transition-transform hover:scale-[1.03]"
        >
          Nous contacter
        </Link>
      </section>
    </div>
  );
}