import React, { useMemo, useState } from "react";
import {
  ShoppingCart,
  Menu,
  X,
  Plus,
  Minus,
  Truck,
  ShieldCheck,
  CreditCard,
  Smartphone,
  BadgeEuro,
  CheckCircle2,
  Instagram,
  Music2,
  Mail,
  MapPin,
  Play,
  CalendarDays,
  Image as ImageIcon,
  Newspaper,
  Disc3,
  Youtube,
  Facebook,
} from "lucide-react";

export default function BandMerchSite() {
  const products = [
    {
      id: 1,
      name: "T-Shirt Ritual Tour",
      price: 25,
      tag: "Best seller",
      image:
        "https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?auto=format&fit=crop&w=1200&q=80",
      desc: "T-shirt oficial com visual dark, algodão premium e edição limitada.",
      sizes: ["S", "M", "L", "XL"],
    },
    {
      id: 2,
      name: "Hoodie Black Ceremony",
      price: 45,
      tag: "Nova coleção",
      image:
        "https://images.unsplash.com/photo-1503342217505-b0a15ec3261c?auto=format&fit=crop&w=1200&q=80",
      desc: "Hoodie pesado, confortável e com presença forte de palco.",
      sizes: ["M", "L", "XL"],
    },
    {
      id: 3,
      name: "Boné Eclipse",
      price: 20,
      tag: "Acessório",
      image:
        "https://images.unsplash.com/photo-1521369909029-2afed882baee?auto=format&fit=crop&w=1200&q=80",
      desc: "Boné ajustável bordado a preto com detalhe frontal premium.",
      sizes: ["Único"],
    },
    {
      id: 4,
      name: "Pack Signed Relic",
      price: 60,
      tag: "Limitado",
      image:
        "https://images.unsplash.com/photo-1516280440614-37939bbacd81?auto=format&fit=crop&w=1200&q=80",
      desc: "Pack autografado com t-shirt, poster, pulseira e item exclusivo.",
      sizes: ["M", "L", "XL"],
    },
  ];

  const news = [
    {
      title: "Novo single lançado com videoclipe oficial",
      text: "Apresentação do novo tema com estreia mundial no YouTube e Spotify.",
    },
    {
      title: "Data nova adicionada à tour",
      text: "Mais uma noite confirmada para reforçar a agenda ao vivo da banda.",
    },
    {
      title: "Edição limitada de merch disponível",
      text: "Coleção especial disponível até esgotar, pensada para os fãs mais fiéis.",
    },
  ];

  const timeline = [
    { year: "2022", title: "Formação da banda", text: "Primeiras composições, conceito visual e identidade sonora." },
    { year: "2023", title: "Primeiro EP", text: "Lançamento independente e construção da base de fãs." },
    { year: "2024", title: "Primeiros festivais", text: "Entrada em palcos maiores e exposição nacional." },
    { year: "2026", title: "Nova era", text: "Tour, vídeos, merch e posicionamento de marca mais forte." },
  ];

  const releases = [
    { title: "Ashes of the Sun", type: "Single", year: "2026" },
    { title: "Dark Bloom", type: "EP", year: "2025" },
    { title: "Black Veins", type: "Single", year: "2024" },
  ];

  const videos = [
    { title: "Official Music Video", duration: "04:12" },
    { title: "Live Session", duration: "07:48" },
    { title: "Behind The Scenes", duration: "03:36" },
  ];

  const gallery = [
    "https://images.unsplash.com/photo-1501386761578-eac5c94b800a?auto=format&fit=crop&w=1200&q=80",
    "https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?auto=format&fit=crop&w=1200&q=80",
    "https://images.unsplash.com/photo-1507874457470-272b3c8d8ee2?auto=format&fit=crop&w=1200&q=80",
    "https://images.unsplash.com/photo-1506157786151-b8491531f063?auto=format&fit=crop&w=1200&q=80",
  ];

  const shows = [
    { date: "03 Maio 2026", city: "Porto", venue: "Hard Club" },
    { date: "17 Maio 2026", city: "Lisboa", venue: "Music Station" },
    { date: "07 Junho 2026", city: "Coimbra", venue: "Salão Central" },
    { date: "21 Junho 2026", city: "Braga", venue: "Arena Live" },
  ];

  const [mobileMenu, setMobileMenu] = useState(false);
  const [selectedSizes, setSelectedSizes] = useState({ 1: "M", 2: "L", 3: "Único", 4: "L" });
  const [cart, setCart] = useState([
    { productId: 1, quantity: 1, size: "M" },
    { productId: 3, quantity: 1, size: "Único" },
  ]);
  const [paymentMethod, setPaymentMethod] = useState("mbway");
  const [coupon, setCoupon] = useState("");
  const [couponApplied, setCouponApplied] = useState(false);

  const addToCart = (productId) => {
    const size = selectedSizes[productId] || "M";
    setCart((prev) => {
      const existing = prev.find((item) => item.productId === productId && item.size === size);
      if (existing) {
        return prev.map((item) =>
          item.productId === productId && item.size === size ? { ...item, quantity: item.quantity + 1 } : item
        );
      }
      return [...prev, { productId, quantity: 1, size }];
    });
  };

  const updateQty = (productId, size, delta) => {
    setCart((prev) =>
      prev
        .map((item) =>
          item.productId === productId && item.size === size ? { ...item, quantity: Math.max(0, item.quantity + delta) } : item
        )
        .filter((item) => item.quantity > 0)
    );
  };

  const cartDetailed = useMemo(
    () =>
      cart.map((item) => {
        const product = products.find((p) => p.id === item.productId);
        return { ...item, product };
      }),
    [cart]
  );

  const subtotal = cartDetailed.reduce((acc, item) => acc + item.product.price * item.quantity, 0);
  const discount = couponApplied ? Math.round(subtotal * 0.1 * 100) / 100 : 0;
  const shipping = subtotal - discount >= 50 ? 0 : 4.9;
  const total = Math.max(0, subtotal - discount + shipping);

  return (
    <div className="min-h-screen bg-black text-white">
      <header className="sticky top-0 z-50 border-b border-white/10 bg-black/80 backdrop-blur-xl">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4 lg:px-10">
          <div className="flex items-center gap-3">
            <div className="rounded-2xl border border-red-500/30 bg-red-500/10 p-2 text-red-300">
              <Music2 className="h-6 w-6" />
            </div>
            <div>
              <p className="text-[10px] uppercase tracking-[0.35em] text-zinc-500">Official site</p>
              <h1 className="text-lg font-black tracking-[0.2em]">SPIDER MOTHER EARTH</h1>
            </div>
          </div>

          <nav className="hidden items-center gap-6 text-xs font-bold uppercase tracking-[0.18em] lg:flex">
            <a href="#start" className="text-zinc-400 hover:text-white">Start</a>
            <a href="#articles" className="text-zinc-400 hover:text-white">Articles</a>
            <a href="#timeline" className="text-zinc-400 hover:text-white">Timeline</a>
            <a href="#music" className="text-zinc-400 hover:text-white">Music</a>
            <a href="#videos" className="text-zinc-400 hover:text-white">Videos</a>
            <a href="#gallery" className="text-zinc-400 hover:text-white">Gallery</a>
            <a href="#biography" className="text-zinc-400 hover:text-white">Biography</a>
            <a href="#store" className="text-zinc-400 hover:text-white">Store</a>
            <a href="#contacts" className="text-zinc-400 hover:text-white">Contacts</a>
          </nav>

          <div className="flex items-center gap-3">
            <button className="relative rounded-2xl border border-white/10 bg-white/5 p-3">
              <ShoppingCart className="h-5 w-5" />
              <span className="absolute -right-2 -top-2 rounded-full bg-red-600 px-2 py-0.5 text-[10px] font-bold">
                {cart.reduce((a, b) => a + b.quantity, 0)}
              </span>
            </button>
            <button className="rounded-2xl border border-white/10 bg-white/5 p-3 lg:hidden" onClick={() => setMobileMenu(!mobileMenu)}>
              {mobileMenu ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
            </button>
          </div>
        </div>

        {mobileMenu && (
          <div className="border-t border-white/10 px-6 py-4 lg:hidden">
            <div className="grid gap-3 text-xs font-bold uppercase tracking-[0.18em]">
              {[
                ["#start", "Start"],
                ["#articles", "Articles"],
                ["#timeline", "Timeline"],
                ["#music", "Music"],
                ["#videos", "Videos"],
                ["#gallery", "Gallery"],
                ["#biography", "Biography"],
                ["#store", "Store"],
                ["#contacts", "Contacts"],
              ].map(([href, label]) => (
                <a key={href} href={href} onClick={() => setMobileMenu(false)} className="text-zinc-300">
                  {label}
                </a>
              ))}
            </div>
          </div>
        )}
      </header>

      <section id="start" className="relative overflow-hidden border-b border-white/10">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(220,38,38,0.22),transparent_35%),radial-gradient(circle_at_bottom_right,rgba(255,255,255,0.06),transparent_30%)]" />
        <div className="absolute inset-0 opacity-20" style={{ backgroundImage: "url('https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?auto=format&fit=crop&w=1800&q=80')", backgroundSize: 'cover', backgroundPosition: 'center' }} />
        <div className="absolute inset-0 bg-gradient-to-b from-black/40 via-black/70 to-black" />

        <div className="relative mx-auto max-w-7xl px-6 py-20 lg:px-10 lg:py-28">
          <div className="grid items-end gap-12 lg:grid-cols-[1.2fr_0.8fr]">
            <div>
              <p className="mb-5 inline-flex rounded-full border border-red-500/20 bg-red-500/10 px-4 py-2 text-[11px] font-bold uppercase tracking-[0.28em] text-red-300">
                Dark rock / cinematic / official merchandise
              </p>
              <h2 className="max-w-4xl text-5xl font-black uppercase leading-[0.9] sm:text-6xl lg:text-8xl">
                The web presence
                <span className="block text-red-500">this band deserves</span>
              </h2>
              <p className="mt-6 max-w-2xl text-base leading-8 text-zinc-300 lg:text-lg">
                Uma homepage muito mais forte, com identidade pesada, storytelling, lançamentos, vídeos, galeria,
                agenda ao vivo e loja com pagamentos. Feita para parecer banda séria, não apenas um site montado.
              </p>
              <div className="mt-8 flex flex-wrap gap-4">
                <a href="#music" className="rounded-2xl bg-red-600 px-6 py-3 text-sm font-black uppercase tracking-[0.12em] shadow-lg shadow-red-950/60 hover:opacity-95">
                  Hear the noise
                </a>
                <a href="#store" className="rounded-2xl border border-white/10 bg-white/5 px-6 py-3 text-sm font-black uppercase tracking-[0.12em] hover:bg-white/10">
                  Visit the store
                </a>
              </div>
            </div>

            <div className="grid gap-4 sm:grid-cols-2">
              <div className="rounded-3xl border border-white/10 bg-white/5 p-5 backdrop-blur-md">
                <p className="text-xs uppercase tracking-[0.3em] text-zinc-500">Latest</p>
                <h3 className="mt-3 text-2xl font-black uppercase">New era 2026</h3>
                <p className="mt-3 text-sm leading-7 text-zinc-300">Novo visual, novo single, novos vídeos e loja pronta para monetizar a atenção dos fãs.</p>
              </div>
              <div className="rounded-3xl border border-white/10 bg-white/5 p-5 backdrop-blur-md">
                <p className="text-xs uppercase tracking-[0.3em] text-zinc-500">Store</p>
                <h3 className="mt-3 text-2xl font-black uppercase">Real checkout</h3>
                <p className="mt-3 text-sm leading-7 text-zinc-300">MB WAY, Multibanco, cartão e PayPal preparados para integração real no teu servidor.</p>
              </div>
              <div className="rounded-3xl border border-white/10 bg-white/5 p-5 backdrop-blur-md sm:col-span-2">
                <div className="flex flex-wrap gap-3 text-xs font-bold uppercase tracking-[0.18em] text-zinc-300">
                  <span className="rounded-full border border-white/10 px-3 py-2">Spotify</span>
                  <span className="rounded-full border border-white/10 px-3 py-2">YouTube</span>
                  <span className="rounded-full border border-white/10 px-3 py-2">Instagram</span>
                  <span className="rounded-full border border-white/10 px-3 py-2">Bandcamp</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section id="articles" className="mx-auto max-w-7xl px-6 py-16 lg:px-10">
        <div className="mb-10 flex items-end justify-between gap-6">
          <div>
            <p className="text-xs font-bold uppercase tracking-[0.35em] text-red-400">Articles</p>
            <h2 className="mt-2 text-4xl font-black uppercase">News & updates</h2>
          </div>
          <p className="max-w-2xl text-sm leading-7 text-zinc-400">O site que enviaste tem menu e presença básica; aqui elevamos com secção editorial mais forte para comunicar lançamentos, datas e novidades.</p>
        </div>
        <div className="grid gap-6 lg:grid-cols-3">
          {news.map((item) => (
            <article key={item.title} className="rounded-3xl border border-white/10 bg-zinc-950 p-6 transition hover:border-red-500/30 hover:bg-zinc-900">
              <div className="mb-4 inline-flex rounded-2xl border border-white/10 bg-white/5 p-3 text-red-400">
                <Newspaper className="h-5 w-5" />
              </div>
              <h3 className="text-2xl font-black leading-tight">{item.title}</h3>
              <p className="mt-4 text-sm leading-7 text-zinc-400">{item.text}</p>
              <button className="mt-6 text-xs font-bold uppercase tracking-[0.18em] text-red-400">Read more</button>
            </article>
          ))}
        </div>
      </section>

      <section id="timeline" className="border-y border-white/10 bg-zinc-950">
        <div className="mx-auto max-w-7xl px-6 py-16 lg:px-10">
          <div className="mb-10">
            <p className="text-xs font-bold uppercase tracking-[0.35em] text-red-400">Timeline</p>
            <h2 className="mt-2 text-4xl font-black uppercase">The rise of the band</h2>
          </div>
          <div className="grid gap-6 lg:grid-cols-4">
            {timeline.map((item) => (
              <div key={item.year} className="rounded-3xl border border-white/10 bg-black p-6">
                <p className="text-4xl font-black text-red-500">{item.year}</p>
                <h3 className="mt-4 text-xl font-black uppercase">{item.title}</h3>
                <p className="mt-3 text-sm leading-7 text-zinc-400">{item.text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section id="music" className="mx-auto max-w-7xl px-6 py-16 lg:px-10">
        <div className="mb-10">
          <p className="text-xs font-bold uppercase tracking-[0.35em] text-red-400">Music</p>
          <h2 className="mt-2 text-4xl font-black uppercase">Latest releases</h2>
        </div>
        <div className="grid gap-6 lg:grid-cols-[0.95fr_1.05fr]">
          <div className="rounded-[2rem] border border-white/10 bg-[linear-gradient(135deg,rgba(220,38,38,0.14),rgba(255,255,255,0.03))] p-8">
            <p className="text-xs uppercase tracking-[0.3em] text-zinc-400">Now playing</p>
            <h3 className="mt-3 text-4xl font-black uppercase">Ashes of the Sun</h3>
            <p className="mt-4 max-w-xl text-sm leading-7 text-zinc-300">Uma área de destaque maior para single ou álbum, com embed de Spotify, Apple Music, Bandcamp ou player interno.</p>
            <div className="mt-8 flex flex-wrap gap-3">
              <button className="rounded-2xl bg-red-600 px-5 py-3 text-sm font-black uppercase tracking-[0.14em]">Play now</button>
              <button className="rounded-2xl border border-white/10 bg-white/5 px-5 py-3 text-sm font-black uppercase tracking-[0.14em]">Open on Spotify</button>
            </div>
          </div>
          <div className="grid gap-4">
            {releases.map((item) => (
              <div key={item.title} className="flex items-center justify-between rounded-3xl border border-white/10 bg-zinc-950 p-5">
                <div className="flex items-center gap-4">
                  <div className="rounded-2xl bg-white/5 p-3 text-red-400"><Disc3 className="h-5 w-5" /></div>
                  <div>
                    <p className="text-lg font-black uppercase">{item.title}</p>
                    <p className="text-sm text-zinc-400">{item.type} • {item.year}</p>
                  </div>
                </div>
                <button className="rounded-2xl border border-white/10 bg-white/5 px-4 py-2 text-xs font-bold uppercase tracking-[0.15em]">Listen</button>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section id="videos" className="border-y border-white/10 bg-white/[0.02]">
        <div className="mx-auto max-w-7xl px-6 py-16 lg:px-10">
          <div className="mb-10">
            <p className="text-xs font-bold uppercase tracking-[0.35em] text-red-400">Videos</p>
            <h2 className="mt-2 text-4xl font-black uppercase">Watch the visuals</h2>
          </div>
          <div className="grid gap-6 lg:grid-cols-3">
            {videos.map((video, index) => (
              <div key={video.title} className="group overflow-hidden rounded-3xl border border-white/10 bg-zinc-950">
                <div className="relative aspect-video bg-[linear-gradient(135deg,rgba(220,38,38,0.2),rgba(255,255,255,0.02))]">
                  <div className="absolute inset-0 flex items-center justify-center">
                    <div className="rounded-full border border-white/15 bg-black/60 p-5 text-red-400 shadow-2xl shadow-red-950/40">
                      <Play className="h-8 w-8 fill-current" />
                    </div>
                  </div>
                  <div className="absolute bottom-4 right-4 rounded-full bg-black/70 px-3 py-1 text-xs font-bold">{video.duration}</div>
                </div>
                <div className="p-5">
                  <p className="text-lg font-black uppercase">{video.title}</p>
                  <p className="mt-2 text-sm text-zinc-400">Vídeo {index + 1} com embed real do YouTube/Vimeo na versão final.</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section id="gallery" className="mx-auto max-w-7xl px-6 py-16 lg:px-10">
        <div className="mb-10">
          <p className="text-xs font-bold uppercase tracking-[0.35em] text-red-400">Gallery</p>
          <h2 className="mt-2 text-4xl font-black uppercase">Images with impact</h2>
        </div>
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          {gallery.map((src, i) => (
            <div key={src} className={`group relative overflow-hidden rounded-3xl border border-white/10 ${i === 0 ? 'md:col-span-2 md:row-span-2' : ''}`}>
              <img src={src} alt={`gallery-${i}`} className="h-full min-h-[240px] w-full object-cover transition duration-700 group-hover:scale-105" />
              <div className="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent" />
              <div className="absolute bottom-4 left-4 rounded-2xl bg-black/60 px-3 py-2 text-xs font-bold uppercase tracking-[0.15em] text-white">
                <ImageIcon className="mr-2 inline h-4 w-4 text-red-400" /> Live shot
              </div>
            </div>
          ))}
        </div>
      </section>

      <section id="biography" className="border-y border-white/10 bg-zinc-950">
        <div className="mx-auto grid max-w-7xl gap-8 px-6 py-16 lg:grid-cols-[0.9fr_1.1fr] lg:px-10">
          <div className="rounded-3xl border border-white/10 bg-[linear-gradient(135deg,rgba(220,38,38,0.15),rgba(255,255,255,0.02))] p-8">
            <p className="text-xs font-bold uppercase tracking-[0.35em] text-red-300">Biography</p>
            <h2 className="mt-3 text-4xl font-black uppercase">Dark, visceral, memorable</h2>
          </div>
          <div className="rounded-3xl border border-white/10 bg-black p-8">
            <p className="leading-8 text-zinc-300">
              Esta secção substitui a biografia simples por um texto mais premium, com origem da banda, influências,
              conceito visual, discografia, energia ao vivo e posicionamento artístico. A ideia é fazer o visitante sentir
              que entrou num projeto sério, atual e com identidade bem definida.
            </p>
          </div>
        </div>
      </section>

      <section id="tour" className="mx-auto max-w-7xl px-6 py-16 lg:px-10">
        <div className="mb-10">
          <p className="text-xs font-bold uppercase tracking-[0.35em] text-red-400">Live dates</p>
          <h2 className="mt-2 text-4xl font-black uppercase">Upcoming shows</h2>
        </div>
        <div className="grid gap-4">
          {shows.map((show) => (
            <div key={`${show.date}-${show.city}`} className="grid items-center gap-4 rounded-3xl border border-white/10 bg-zinc-950 p-5 md:grid-cols-[180px_1fr_auto]">
              <div className="flex items-center gap-3 text-red-400"><CalendarDays className="h-5 w-5" /> <span className="font-black">{show.date}</span></div>
              <div>
                <h3 className="text-xl font-black uppercase">{show.city}</h3>
                <p className="text-zinc-400">{show.venue}</p>
              </div>
              <button className="rounded-2xl border border-white/10 bg-white/5 px-5 py-3 text-xs font-bold uppercase tracking-[0.16em] hover:bg-white/10">Reserve</button>
            </div>
          ))}
        </div>
      </section>

      <section id="store" className="border-y border-white/10 bg-white/[0.02]">
        <div className="mx-auto max-w-7xl px-6 py-16 lg:px-10">
          <div className="mb-10">
            <p className="text-xs font-bold uppercase tracking-[0.35em] text-red-400">Store</p>
            <h2 className="mt-2 text-4xl font-black uppercase">Official merchandise</h2>
            <p className="mt-4 max-w-2xl text-sm leading-7 text-zinc-400">Aqui entra a parte que faltava ao site de referência: uma loja séria e bonita, já pensada para vender mesmo.</p>
          </div>

          <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-4">
            {products.map((product) => (
              <div key={product.id} className="group overflow-hidden rounded-3xl border border-white/10 bg-black">
                <div className="relative aspect-[4/5] overflow-hidden">
                  <img src={product.image} alt={product.name} className="h-full w-full object-cover transition duration-700 group-hover:scale-105" />
                  <span className="absolute left-4 top-4 rounded-full bg-red-600 px-3 py-1 text-[11px] font-bold uppercase tracking-[0.15em] text-white">{product.tag}</span>
                </div>
                <div className="p-5">
                  <div className="flex items-start justify-between gap-4">
                    <h3 className="text-lg font-black uppercase leading-tight">{product.name}</h3>
                    <span className="rounded-full bg-white/10 px-3 py-1 text-sm font-bold">{product.price}€</span>
                  </div>
                  <p className="mt-3 text-sm leading-7 text-zinc-400">{product.desc}</p>
                  <div className="mt-4 flex flex-wrap gap-2">
                    {product.sizes.map((size) => (
                      <button
                        key={size}
                        onClick={() => setSelectedSizes((prev) => ({ ...prev, [product.id]: size }))}
                        className={`rounded-xl border px-3 py-2 text-[11px] font-bold uppercase tracking-[0.12em] ${selectedSizes[product.id] === size ? 'border-red-400 bg-red-500/15 text-white' : 'border-white/10 bg-white/5 text-zinc-300'}`}
                      >
                        {size}
                      </button>
                    ))}
                  </div>
                  <button onClick={() => addToCart(product.id)} className="mt-5 w-full rounded-2xl bg-white px-4 py-3 text-xs font-black uppercase tracking-[0.15em] text-black transition hover:opacity-90">
                    Add to cart
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section id="checkout" className="mx-auto max-w-7xl px-6 py-16 lg:px-10">
        <div className="mb-10">
          <p className="text-xs font-bold uppercase tracking-[0.35em] text-red-400">Checkout</p>
          <h2 className="mt-2 text-4xl font-black uppercase">Payment preview</h2>
        </div>

        <div className="grid gap-8 xl:grid-cols-[1.1fr_0.9fr]">
          <div className="space-y-6">
            <div className="rounded-3xl border border-white/10 bg-zinc-950 p-6">
              <h3 className="text-2xl font-black uppercase">Shipping details</h3>
              <div className="mt-6 grid gap-4 md:grid-cols-2">
                <input className="rounded-2xl border border-white/10 bg-black px-4 py-3 outline-none placeholder:text-zinc-600" placeholder="First name" />
                <input className="rounded-2xl border border-white/10 bg-black px-4 py-3 outline-none placeholder:text-zinc-600" placeholder="Last name" />
                <input className="rounded-2xl border border-white/10 bg-black px-4 py-3 outline-none placeholder:text-zinc-600 md:col-span-2" placeholder="Email" />
                <input className="rounded-2xl border border-white/10 bg-black px-4 py-3 outline-none placeholder:text-zinc-600 md:col-span-2" placeholder="Address" />
                <input className="rounded-2xl border border-white/10 bg-black px-4 py-3 outline-none placeholder:text-zinc-600" placeholder="Postal code" />
                <input className="rounded-2xl border border-white/10 bg-black px-4 py-3 outline-none placeholder:text-zinc-600" placeholder="City" />
              </div>
            </div>

            <div className="rounded-3xl border border-white/10 bg-zinc-950 p-6">
              <h3 className="text-2xl font-black uppercase">Payment methods</h3>
              <div className="mt-6 grid gap-3">
                {[
                  { id: "mbway", label: "MB WAY", icon: Smartphone, desc: "Pagamento imediato no telemóvel." },
                  { id: "multibanco", label: "Multibanco", icon: BadgeEuro, desc: "Entidade e referência para pagamento." },
                  { id: "card", label: "Card", icon: CreditCard, desc: "Visa, Mastercard e outros cartões." },
                  { id: "paypal", label: "PayPal", icon: ShieldCheck, desc: "Checkout rápido com conta PayPal." },
                ].map((method) => {
                  const Icon = method.icon;
                  const active = paymentMethod === method.id;
                  return (
                    <button
                      key={method.id}
                      onClick={() => setPaymentMethod(method.id)}
                      className={`flex items-start gap-4 rounded-2xl border p-4 text-left ${active ? 'border-red-400 bg-red-500/10' : 'border-white/10 bg-black'}`}
                    >
                      <div className="rounded-xl bg-white/5 p-3"><Icon className="h-5 w-5" /></div>
                      <div>
                        <p className="font-black uppercase">{method.label}</p>
                        <p className="mt-1 text-sm text-zinc-400">{method.desc}</p>
                      </div>
                    </button>
                  );
                })}
              </div>
            </div>
          </div>

          <div className="h-fit rounded-3xl border border-white/10 bg-zinc-950 p-6 xl:sticky xl:top-24">
            <h3 className="text-2xl font-black uppercase">Order summary</h3>
            <div className="mt-6 space-y-4">
              {cartDetailed.map((item) => (
                <div key={`${item.productId}-${item.size}`} className="rounded-2xl border border-white/10 bg-black p-4">
                  <div className="flex items-start justify-between gap-4">
                    <div>
                      <p className="font-black uppercase">{item.product.name}</p>
                      <p className="mt-1 text-sm text-zinc-400">Size: {item.size}</p>
                      <p className="mt-1 text-sm text-zinc-400">{item.product.price}€ each</p>
                    </div>
                    <div className="flex items-center gap-2 rounded-2xl border border-white/10 bg-white/5 px-2 py-1">
                      <button onClick={() => updateQty(item.productId, item.size, -1)} className="p-1 text-zinc-300"><Minus className="h-4 w-4" /></button>
                      <span className="min-w-6 text-center text-sm font-bold">{item.quantity}</span>
                      <button onClick={() => updateQty(item.productId, item.size, 1)} className="p-1 text-zinc-300"><Plus className="h-4 w-4" /></button>
                    </div>
                  </div>
                </div>
              ))}
            </div>

            <div className="mt-6 rounded-2xl border border-white/10 bg-black p-4">
              <p className="mb-3 text-xs font-bold uppercase tracking-[0.3em] text-zinc-500">Coupon</p>
              <div className="flex gap-2">
                <input value={coupon} onChange={(e) => setCoupon(e.target.value)} placeholder="SME10" className="w-full rounded-2xl border border-white/10 bg-zinc-950 px-4 py-3 outline-none placeholder:text-zinc-600" />
                <button onClick={() => setCouponApplied(coupon.trim().toUpperCase() === "SME10")} className="rounded-2xl bg-white px-4 py-3 text-xs font-black uppercase tracking-[0.12em] text-black">Apply</button>
              </div>
              {couponApplied && <p className="mt-3 text-sm text-emerald-400">Coupon SME10 applied successfully.</p>}
            </div>

            <div className="mt-6 space-y-3 border-t border-white/10 pt-6 text-sm">
              <div className="flex items-center justify-between text-zinc-300"><span>Subtotal</span><span>{subtotal.toFixed(2)}€</span></div>
              <div className="flex items-center justify-between text-zinc-300"><span>Discount</span><span>-{discount.toFixed(2)}€</span></div>
              <div className="flex items-center justify-between text-zinc-300"><span>Shipping</span><span>{shipping === 0 ? 'Free' : `${shipping.toFixed(2)}€`}</span></div>
              <div className="flex items-center justify-between border-t border-white/10 pt-4 text-lg font-black uppercase"><span>Total</span><span>{total.toFixed(2)}€</span></div>
            </div>

            <button className="mt-6 w-full rounded-2xl bg-red-600 px-5 py-4 text-xs font-black uppercase tracking-[0.16em] shadow-lg shadow-red-950/60 hover:opacity-95">
              Complete payment
            </button>
            <p className="mt-4 text-xs leading-6 text-zinc-500">Pré-visualização do checkout. A ligação real ao gateway entra depois no teu servidor.</p>
          </div>
        </div>
      </section>

      <section id="contacts" className="border-t border-white/10 bg-zinc-950">
        <div className="mx-auto max-w-7xl px-6 py-16 lg:px-10">
          <div className="grid gap-8 lg:grid-cols-[0.9fr_1.1fr]">
            <div>
              <p className="text-xs font-bold uppercase tracking-[0.35em] text-red-400">Contacts</p>
              <h2 className="mt-2 text-4xl font-black uppercase">Booking, press & support</h2>
              <p className="mt-4 max-w-xl text-sm leading-7 text-zinc-400">Fecho mais profissional com redes, booking, contacto da banda e suporte de loja no mesmo ecossistema.</p>
            </div>
            <div className="grid gap-4 md:grid-cols-2">
              <div className="rounded-3xl border border-white/10 bg-black p-5"><Mail className="mb-4 h-5 w-5 text-red-400" /><p className="font-black uppercase">booking@band.com</p></div>
              <div className="rounded-3xl border border-white/10 bg-black p-5"><Instagram className="mb-4 h-5 w-5 text-red-400" /><p className="font-black uppercase">@spidermotherearth</p></div>
              <div className="rounded-3xl border border-white/10 bg-black p-5"><Youtube className="mb-4 h-5 w-5 text-red-400" /><p className="font-black uppercase">YouTube Channel</p></div>
              <div className="rounded-3xl border border-white/10 bg-black p-5"><Facebook className="mb-4 h-5 w-5 text-red-400" /><p className="font-black uppercase">Official Facebook</p></div>
            </div>
          </div>
        </div>
      </section>

      <footer className="border-t border-white/10 px-6 py-8 text-center text-xs uppercase tracking-[0.2em] text-zinc-500">
        © 2026 Spider Mother Earth — Official website, media and merchandise.
      </footer>
    </div>
  );
}