import Image from "next/image"
import { Badge } from "@/components/ui/badge"

export const metadata = {
  title: "Matériaux & Entretien",
  description:
    "Néoprène, PU, Gore-Tex et matériaux d'innovation : les textiles techniques de VALABEL, leurs propriétés et comment en prendre soin.",
}

// Bannière image avec dégradé sombre pour cohérence avec le thème dark
function MatBanner({
  src,
  alt,
  priority = false,
}: {
  src: string
  alt: string
  priority?: boolean
}) {
  return (
    <div className="relative aspect-[16/7] w-full overflow-hidden bg-[var(--surface)] mb-8">
      <Image
        src={src}
        alt={alt}
        fill
        priority={priority}
        sizes="(max-width: 768px) 100vw, 768px"
        className="object-cover"
      />
      <div className="absolute inset-0 bg-gradient-to-t from-[var(--bg)] via-transparent to-transparent opacity-80" />
      <div className="absolute inset-0 bg-[var(--bg)] opacity-20" />
    </div>
  )
}

const IMG = (id: string) =>
  `https://images.unsplash.com/photo-${id}?w=1600&q=80&auto=format&fit=crop`

export default function MateriauxPage() {
  return (
    <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8 py-16">
      {/* Header */}
      <div className="mb-10">
        <p className="font-mono text-xs uppercase tracking-widest text-[var(--accent)] mb-3">
          Savoir-faire
        </p>
        <h1 className="text-4xl md:text-5xl font-heading font-bold uppercase tracking-tight text-[var(--text)]">
          Matériaux & Entretien
        </h1>
        <p className="mt-6 text-[var(--text-secondary)] leading-relaxed max-w-xl">
          VALABEL travaille des matériaux techniques, choisis pour leur
          performance et leur durabilité. Chaque pièce indique sa matière. Voici
          ce qu&rsquo;il faut savoir pour en tirer le meilleur, longtemps.
        </p>
      </div>

      {/* Hero */}
      <MatBanner
        src={IMG("1593250816874-8edf4f732edb")}
        alt="Textile technique VALABEL en gros plan"
        priority
      />

      {/* ── Néoprène ─────────────────────────────────────────────── */}
      <section className="border-t border-[var(--border)] pt-12 mb-16">
        <MatBanner
          src={IMG("1543053976-476d89a9a0d7")}
          alt="Texture de néoprène technique noir"
        />
        <div className="flex items-center gap-3 mb-6">
          <Badge variant="accent">Néoprène</Badge>
          <span className="font-mono text-xs text-[var(--text-muted)] uppercase tracking-widest">
            Mousse technique
          </span>
        </div>

        <h2 className="text-2xl font-heading font-bold uppercase tracking-tight text-[var(--text)] mb-4">
          Qu&rsquo;est-ce que le néoprène ?
        </h2>
        <div className="space-y-4 text-[var(--text-secondary)] leading-relaxed">
          <p>
            Le néoprène est une mousse synthétique issue du monde nautique et de
            la plongée. Structuré, isolant et résistant à l&rsquo;eau, il donne
            aux pièces une tenue et un volume caractéristiques, une main douce et
            une protection thermique que les tissus conventionnels ne peuvent pas
            offrir.
          </p>
          <p>
            C&rsquo;est un matériau technique et durable, au rendu mat et à la
            structure dense. Il définit la silhouette VALABEL : sculpturale,
            protectrice, futuriste.
          </p>
        </div>

        <h3 className="mt-8 mb-4 font-heading text-lg font-semibold text-[var(--text)]">
          Entretien du néoprène
        </h3>
        <ul className="space-y-3">
          {[
            "Lave à la main à l'eau froide ou tiède, avec un savon doux. Évite les détergents agressifs et l'assouplissant.",
            "Ne pas essorer ni tordre. Presse délicatement pour retirer l'excès d'eau.",
            "Sèche à plat, à température ambiante, à l'abri du soleil direct. Jamais de sèche-linge ni de source de chaleur.",
            "Range à plat ou sur un cintre large. Évite les plis marqués prolongés.",
          ].map((tip, i) => (
            <li key={i} className="flex gap-3 text-[var(--text-secondary)]">
              <span className="font-mono text-xs text-[var(--accent)] mt-1 shrink-0">
                {String(i + 1).padStart(2, "0")}
              </span>
              <span className="leading-relaxed">{tip}</span>
            </li>
          ))}
        </ul>
      </section>

      {/* ── PU ───────────────────────────────────────────────────── */}
      <section className="border-t border-[var(--border)] pt-12 mb-16">
        <MatBanner
          src={IMG("1548883354-94bcfe321cbb")}
          alt="Veste imperméable en PU"
        />
        <div className="flex items-center gap-3 mb-6">
          <Badge variant="accent">PU</Badge>
          <span className="font-mono text-xs text-[var(--text-muted)] uppercase tracking-widest">
            Polyuréthane · imperméable
          </span>
        </div>

        <h2 className="text-2xl font-heading font-bold uppercase tracking-tight text-[var(--text)] mb-4">
          Qu&rsquo;est-ce que le PU ?
        </h2>
        <div className="space-y-4 text-[var(--text-secondary)] leading-relaxed">
          <p>
            Le PU (polyuréthane) est un enduit souple appliqué sur des textiles
            tissés ou tricotés pour créer des pièces totalement imperméables. Il
            est durable, sans PFAS ni PVC, deux familles de substances nocives
            pour l&rsquo;environnement.
          </p>
          <p>
            Contrairement aux imperméables classiques où la membrane est à
            l&rsquo;intérieur, sur une pièce PU la protection est en surface. Le
            tissu ne nécessite donc aucun traitement déperlant supplémentaire.
            Les coutures sont thermosoudées pour rester étanches, et la surface
            lisse laisse l&rsquo;eau glisser sans s&rsquo;infiltrer.
          </p>
        </div>

        <h3 className="mt-8 mb-4 font-heading text-lg font-semibold text-[var(--text)]">
          Entretien du PU
        </h3>
        <ul className="space-y-3">
          {[
            "Suspends la pièce dès ton retour. Ne la laisse pas pliée dans un sac : le PU garderait des plis permanents.",
            "Nettoyage facile : essuie les taches avec un chiffon doux, ou rince simplement la boue à l'eau.",
            "Après la pluie ou un lavage, sèche à température ambiante. Retourne la pièce sur l'envers pour un séchage plus rapide.",
            "Jamais de séchoir, de radiateur ni de source de chaleur : le PU se dessèche, vieillit plus vite et risque de craquer.",
            "Évite une exposition prolongée au soleil, surtout au rangement. Près d'une fenêtre, la matière peut se décolorer, sécher, craquer ou devenir collante.",
          ].map((tip, i) => (
            <li key={i} className="flex gap-3 text-[var(--text-secondary)]">
              <span className="font-mono text-xs text-[var(--accent)] mt-1 shrink-0">
                {String(i + 1).padStart(2, "0")}
              </span>
              <span className="leading-relaxed">{tip}</span>
            </li>
          ))}
        </ul>
      </section>

      {/* ── Gore-Tex ─────────────────────────────────────────────── */}
      <section className="border-t border-[var(--border)] pt-12 mb-16">
        <MatBanner
          src={IMG("1572822130825-2177012dbd87")}
          alt="Veste technique de montagne imperméable et respirante"
        />
        <div className="flex items-center gap-3 mb-6">
          <Badge variant="accent">Gore-Tex</Badge>
          <span className="font-mono text-xs text-[var(--text-muted)] uppercase tracking-widest">
            Membrane · imperméable & respirante
          </span>
        </div>

        <h2 className="text-2xl font-heading font-bold uppercase tracking-tight text-[var(--text)] mb-4">
          Qu&rsquo;est-ce que le Gore-Tex ?
        </h2>
        <div className="space-y-4 text-[var(--text-secondary)] leading-relaxed">
          <p>
            Le Gore-Tex est une membrane technique laminée entre les couches
            d&rsquo;un textile. Sa structure microporeuse compte des milliards de
            pores par centimètre carré, trop petits pour laisser passer une goutte
            d&rsquo;eau, mais assez larges pour évacuer la vapeur : la pièce est à
            la fois <span className="text-[var(--text)]">imperméable</span>,{" "}
            <span className="text-[var(--text)]">coupe-vent</span> et{" "}
            <span className="text-[var(--text)]">respirante</span>.
          </p>
          <p>
            C&rsquo;est la référence du vêtement technique haut de gamme : rester
            au sec sous la pluie sans transformer la pièce en sauna. Là où le PU
            protège par sa surface, le Gore-Tex protège par sa membrane, tout en
            laissant le corps respirer.
          </p>
          <p className="text-sm text-[var(--text-muted)]">
            Note : la membrane Gore-Tex classique repose sur de l&rsquo;ePTFE, un
            fluoropolymère. VALABEL privilégie la nouvelle génération{" "}
            <span className="text-[var(--text-secondary)]">Gore-Tex ePE</span>{" "}
            (polyéthylène expansé), sans PFC, pour rester fidèle à notre exigence
            environnementale.
          </p>
        </div>

        <h3 className="mt-8 mb-4 font-heading text-lg font-semibold text-[var(--text)]">
          Entretien du Gore-Tex
        </h3>
        <ul className="space-y-3">
          {[
            "Lavage en machine à 40°C, cycle doux, avec une lessive liquide. Évite l'assouplissant et la javel qui bouchent la membrane.",
            "Rince deux fois pour éliminer tout résidu de lessive.",
            "Sèche en machine à température modérée, ou repasse à basse température avec un linge protecteur : la chaleur douce réactive le traitement déperlant de surface.",
            "Referme les fermetures éclair et les velcros avant lavage pour protéger le tissu.",
          ].map((tip, i) => (
            <li key={i} className="flex gap-3 text-[var(--text-secondary)]">
              <span className="font-mono text-xs text-[var(--accent)] mt-1 shrink-0">
                {String(i + 1).padStart(2, "0")}
              </span>
              <span className="leading-relaxed">{tip}</span>
            </li>
          ))}
        </ul>
      </section>

      {/* ── Matériaux d'innovation ──────────────────────────────── */}
      <section className="border-t border-[var(--border)] pt-12 mb-16">
        <div className="flex items-center gap-3 mb-6">
          <Badge variant="upcoming">R&amp;D</Badge>
          <span className="font-mono text-xs text-[var(--text-muted)] uppercase tracking-widest">
            En exploration
          </span>
        </div>
        <h2 className="text-2xl font-heading font-bold uppercase tracking-tight text-[var(--text)] mb-4">
          Matériaux d&rsquo;innovation
        </h2>
        <p className="text-[var(--text-secondary)] leading-relaxed mb-12 max-w-xl">
          Notre laboratoire matières explore en permanence des textiles de
          nouvelle génération. Certains rejoindront nos prochains drops, d&rsquo;autres
          nourrissent notre R&amp;D. Un aperçu de ce qui vient.
        </p>

        {MATERIAL_GROUPS.map((group) => (
          <div key={group.title} className="mb-12 last:mb-0">
            <MatBanner src={IMG(group.image)} alt={group.title} />
            <h3 className="font-mono text-xs uppercase tracking-widest text-[var(--accent)] mb-6">
              {group.title}
            </h3>
            <div className="space-y-6">
              {group.items.map((m) => (
                <div
                  key={m.name}
                  className="border border-[var(--border)] bg-[var(--surface)] p-5"
                >
                  <div className="flex items-baseline justify-between gap-3 mb-2">
                    <h4 className="font-heading text-base font-semibold uppercase tracking-wide text-[var(--text)]">
                      {m.name}
                    </h4>
                    <span className="font-mono text-[10px] uppercase tracking-widest text-[var(--text-muted)] shrink-0">
                      {m.tag}
                    </span>
                  </div>
                  <p className="text-sm text-[var(--text-secondary)] leading-relaxed mb-3">
                    {m.desc}
                  </p>
                  <p className="text-xs text-[var(--text-muted)] leading-relaxed">
                    <span className="font-mono uppercase tracking-widest text-[var(--accent)]">
                      Entretien&nbsp;·&nbsp;
                    </span>
                    {m.care}
                  </p>
                </div>
              ))}
            </div>
          </div>
        ))}
      </section>

      {/* ── Engagement ───────────────────────────────────────────── */}
      <section className="border-t border-[var(--border)] pt-12">
        <h2 className="text-xl font-heading font-bold uppercase tracking-tight text-[var(--text)] mb-4">
          Notre engagement
        </h2>
        <p className="text-[var(--text-secondary)] leading-relaxed">
          Nos matériaux sont sélectionnés autant pour leur performance que pour
          leur impact : sans PFAS ni PVC dès que possible, fibres régénérées,
          alternatives bio-sourcées. Chez VALABEL, durabilité rime avec longévité :
          plus une pièce dure, moins elle pèse sur la planète. En prendre soin,
          c&rsquo;est prolonger sa vie.
        </p>
      </section>
    </div>
  )
}

const MATERIAL_GROUPS: {
  title: string
  image: string
  items: { name: string; tag: string; desc: string; care: string }[]
}[] = [
  {
    title: "Performance & résistance",
    image: "1637004732258-4b792ce8f474",
    items: [
      {
        name: "Dyneema",
        tag: "UHMWPE",
        desc: "Fibre jusqu'à 15× plus résistante que l'acier à poids égal, ultra-légère et naturellement imperméable. La référence absolue du techwear indestructible.",
        care: "Lavage main à l'eau froide, savon doux. Séchage à l'air libre, jamais de sèche-linge ni de chaleur directe qui altèrent la fibre.",
      },
      {
        name: "Cordura",
        tag: "Nylon haute ténacité",
        desc: "Nylon tissé serré, très résistant à l'abrasion et aux déchirures. Idéal pour les zones d'usure, cargos et accessoires à l'esprit utilitaire.",
        care: "Machine à froid, cycle doux, sans javel. Séchage à l'air. Le traitement déperlant se réactive à basse chaleur si besoin.",
      },
      {
        name: "Econyl",
        tag: "Nylon régénéré",
        desc: "Nylon recyclé à partir de déchets océaniques (filets de pêche, textiles). Mêmes performances qu'un nylon vierge, empreinte réduite. Le lien à l'océan, jusque dans la matière.",
        care: "Machine à froid, lessive douce, sans assouplissant. Séchage à l'air, à l'abri du soleil direct.",
      },
    ],
  },
  {
    title: "Réflexion & lumière",
    image: "1541423408854-5df732b6f6d1",
    items: [
      {
        name: "3M Scotchlite",
        tag: "Rétroréfléchissant",
        desc: "Micro-billes de verre qui renvoient la lumière droit vers sa source. La pièce s'embrase dans le faisceau des phares : détail futuriste de jour, signal de sécurité la nuit.",
        care: "Lave sur l'envers, à froid, cycle doux. Ne repasse jamais les zones réfléchissantes : la chaleur écrase le micro-billage.",
      },
      {
        name: "Film prismatique",
        tag: "Microprismes",
        desc: "Réflexion par micro-prismes plutôt que par billes : rendu plus brillant, plus net et plus structuré. Un éclat quasi métallique sous la lumière.",
        care: "Lavage main ou machine à froid, sur l'envers, cycle doux. Aucun repassage direct, aucune source de chaleur sur le film.",
      },
      {
        name: "Fil réfléchissant tissé",
        tag: "Reflective yarn",
        desc: "Fil réfléchissant intégré directement au tissage. La réflexion n'est plus une bande rapportée mais parcourt toute la matière, pour un rendu subtil et intégral.",
        care: "Machine à froid, cycle doux, sur l'envers. Séchage à l'air libre, sans repassage sur les fils réfléchissants.",
      },
      {
        name: "Photoluminescent",
        tag: "Glow · phosphorescent",
        desc: "Pigment qui emmagasine la lumière le jour et la restitue dans l'obscurité. La pièce brille seule, sans source lumineuse, plusieurs heures durant.",
        care: "Charge à la lumière avant usage. Lavage doux à froid, sans javel qui neutralise le pigment. Séchage à l'ombre.",
      },
      {
        name: "Iridescent / Holographique",
        tag: "Color-shift",
        desc: "Surface qui décompose la lumière et change de teinte selon l'angle et l'éclairage. Un jeu chromatique mouvant, signature visuelle forte, très futuriste.",
        care: "Lavage main à froid, sur l'envers, sans frotter. Pas de chaleur ni de repassage : le film optique se ternit.",
      },
      {
        name: "Électroluminescent (EL)",
        tag: "Lumière active",
        desc: "Panneaux ou fils qui émettent leur propre lumière, alimentés par une pile discrète. La pièce ne reflète plus la lumière : elle en produit.",
        care: "Retire le module d'alimentation avant lavage. Lavage main à froid, sans essorer. Séchage à plat.",
      },
    ],
  },
  {
    title: "Technologies actives",
    image: "1555589228-135c25ae8cf5",
    items: [
      {
        name: "Thermochromique / Photochromique",
        tag: "Couleur réactive",
        desc: "Pigments qui changent de couleur selon la température ou l'exposition aux UV. La pièce devient vivante, réagit à l'environnement et à la lumière.",
        care: "Lavage main à froid, sans chaleur. Évite l'exposition prolongée au soleil et aux hautes températures qui usent le pigment. Séchage à l'ombre.",
      },
      {
        name: "Outlast (PCM)",
        tag: "Thermorégulation",
        desc: "Matériau à changement de phase issu de la recherche spatiale (NASA). Absorbe, stocke et restitue la chaleur du corps pour maintenir une température stable.",
        care: "Machine à froid, cycle doux, sans assouplissant qui bouche les microcapsules. Séchage à basse température.",
      },
      {
        name: "Graphène",
        tag: "Enduit conducteur",
        desc: "Enduit d'un seul atome d'épaisseur, conducteur thermique et électrique, antibactérien. Répartit la chaleur et dissipe l'humidité.",
        care: "Machine à froid, cycle doux, sans javel. Séchage à l'air libre.",
      },
      {
        name: "Aerogel",
        tag: "Isolation extrême",
        desc: "L'isolant le plus léger au monde, surnommé « fumée solide ». Une chaleur extrême pour une épaisseur minimale, encapsulé dans la doublure.",
        care: "Nettoyage localisé, sans tordre ni essorer. Séchage à plat. Suis toujours l'étiquette de la pièce.",
      },
      {
        name: "Nanocoating hydrophobe",
        tag: "Effet lotus",
        desc: "Traitement nanométrique où l'eau perle et roule sans s'infiltrer, entraînant la saleté avec elle. Surface quasi auto-nettoyante.",
        care: "Lavage doux, sans assouplissant. Évite les frottements abrasifs répétés qui usent le traitement. Basse chaleur pour le réactiver.",
      },
    ],
  },
  {
    title: "Bio & next-gen",
    image: "1550824730-05ededc35e7a",
    items: [
      {
        name: "Mylo / Reishi",
        tag: "Cuir de mycélium",
        desc: "« Cuir » cultivé à partir de mycélium de champignon. Toucher et tenue du cuir, sans animal ni tannage lourd.",
        care: "Essuie avec un chiffon légèrement humide. Pas de machine ni de trempage. Nourris comme un cuir avec un soin adapté.",
      },
      {
        name: "Piñatex",
        tag: "Cuir d'ananas",
        desc: "Textile végétal issu des fibres de feuilles d'ananas, sous-produit agricole valorisé. Alternative légère et durable au cuir.",
        care: "Essuie avec un chiffon doux et sec. Garde au sec, évite le trempage prolongé.",
      },
      {
        name: "Tyvek",
        tag: "Non-tissé ultraléger",
        desc: "Non-tissé résistant au look papier technique, à la fois léger et solide. Une esthétique future-utility immédiatement reconnaissable.",
        care: "Essuie ou lavage main à froid en douceur. Séchage à l'air. Jamais de repassage ni de chaleur : la matière fond.",
      },
    ],
  },
  {
    title: "Connecté & Web3",
    image: "1597092430960-9724170fcbbe",
    items: [
      {
        name: "Fibres conductives",
        tag: "E-textile",
        desc: "Fils conducteurs intégrés au tissu : vêtements chauffants, capteurs ou éclairage embarqués. Le pont entre le textile et l'électronique.",
        care: "Retire tout module électronique avant lavage. Lavage main à froid, sans essorer. Séchage à plat.",
      },
      {
        name: "Puce NFC / RFID",
        tag: "Authenticité numérique",
        desc: "Puce tissée dans la pièce, reliée à un certificat d'authenticité numérique. Le socle physique de notre écosystème Web3 et de la traçabilité des drops.",
        care: "Lavage doux. Évite de plier ou d'écraser fortement la zone de la puce de façon répétée.",
      },
    ],
  },
]