/** Shopify CDN: Minification failed

Line 9:18 Unexpected "\"react\""
Line 10:19 Expected ":"
Line 10:95 Unexpected "\"lucide-react\""
Line 13:8 Expected ":"

**/
import React from "react";
import { ArrowRight, Shield, Truck, BadgePercent, Recycle, Instagram, Youtube, Facebook } from "lucide-react";

export default function MilitaryDawnMockup() {
  return (
    <div className="min-h-screen bg-[#0f1112] text-[#e6e6e6]">
      {/* Top bar */}
      <div className="text-xs tracking-widest uppercase bg-[#161a1b] text-[#a5b08e] py-2 text-center">UK Orders £60+ Ship Free</div>

      {/* Header */}
      <header className="sticky top-0 z-40 backdrop-blur supports-[backdrop-filter]:bg-[#0f1112]/80 bg-[#0f1112] border-b border-white/5">
        <div className="max-w-6xl mx-auto px-4 py-4 flex items-center justify-between">
          <div className="font-black text-xl tracking-widest text-[#c6d2a2]">BLACKDOG TACTICAL</div>
          <nav className="hidden md:flex gap-8 text-sm uppercase tracking-wider text-[#c2c7c9]">
            <a href="#" className="hover:text-white">New</a>
            <a href="#" className="hover:text-white">Apparel</a>
            <a href="#" className="hover:text-white">Outerwear</a>
            <a href="#" className="hover:text-white">Accessories</a>
            <a href="#" className="hover:text-white">Sale</a>
          </nav>
          <div className="flex items-center gap-4 text-sm">
            <button className="px-4 py-2 rounded-2xl bg-[#c6d2a2] text-[#0f1112] font-semibold uppercase tracking-wider hover:opacity-90">Shop Now</button>
          </div>
        </div>
      </header>

      {/* Hero */}
      <section className="relative">
        <div className="absolute inset-0">
          <div className="w-full h-full bg-[url('https://images.unsplash.com/photo-1483721310020-03333e577078?q=80&w=2070&auto=format&fit=crop')] bg-cover bg-center" />
          <div className="absolute inset-0 bg-gradient-to-b from-black/60 via-[#0f1112]/70 to-[#0f1112]" />
        </div>
        <div className="relative max-w-6xl mx-auto px-4 py-28">
          <div className="max-w-xl">
            <p className="text-[#c6d2a2] uppercase tracking-[0.3em] text-xs mb-3">AW25 • Field-Tested</p>
            <h1 className="text-4xl md:text-6xl font-black leading-[1.05]">Built for Night Ops</h1>
            <p className="mt-4 text-[#c2c7c9] max-w-md">Hardwearing outerwear and urban-ready apparel in gunmetal, olive, and blackout. Engineered fabrics. Zero shine.</p>
            <div className="mt-8 flex gap-3">
              <a className="inline-flex items-center gap-2 px-5 py-3 rounded-none bg-white text-[#0f1112] font-bold uppercase tracking-wider">
                Shop Outerwear <ArrowRight size={18} />
              </a>
              <a className="inline-flex items-center gap-2 px-5 py-3 rounded-none border border-white/20 text-white font-semibold uppercase tracking-wider hover:bg-white/10">
                New Drops
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* Badges / USPs */}
      <section className="border-y border-white/5 bg-[#101314]">
        <div className="max-w-6xl mx-auto px-4 py-8 grid grid-cols-2 md:grid-cols-4 gap-6">
          {[
            { Icon: Shield, title: "Duty-Grade Fabrics", text: "Ripstop • Cordura • DWR" },
            { Icon: Truck, title: "Fast Dispatch", text: "UK 24–48H Fulfilment" },
            { Icon: BadgePercent, title: "Bundle & Save", text: "Kits for Field & Gym" },
            { Icon: Recycle, title: "Responsible Sourcing", text: "ISO & BSCI Partners" },
          ].map(({ Icon, title, text }) => (
            <div key={title} className="flex items-start gap-3">
              <span className="p-2 rounded-lg bg-white/5"><Icon /></span>
              <div>
                <div className="font-bold tracking-wide">{title}</div>
                <div className="text-sm text-[#a1a6a8]">{text}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Product grid mock */}
      <section className="max-w-6xl mx-auto px-4 py-12">
        <div className="flex items-end justify-between">
          <h2 className="text-2xl font-black uppercase tracking-wider">Featured Loadout</h2>
          <a className="text-sm uppercase tracking-wider border-b border-white/30">View All</a>
        </div>
        <div className="mt-6 grid grid-cols-2 md:grid-cols-4 gap-4">
          {[1,2,3,4].map((i) => (
            <div key={i} className="group bg-[#121516] border border-white/5 rounded-2xl overflow-hidden">
              <div className="aspect-[4/5] bg-[url('https://images.unsplash.com/photo-1554068865-24cecd4e34b8?q=80&w=1974&auto=format&fit=crop')] bg-cover bg-center group-hover:opacity-90 transition" />
              <div className="p-4">
                <div className="flex items-center justify-between">
                  <h3 className="font-semibold">Ghost Field Jacket</h3>
                  <span className="text-[#c6d2a2] font-bold">£129</span>
                </div>
                <p className="text-sm text-[#a1a6a8]">Blackout • Ripstop • DWR</p>
                <button className="mt-3 w-full px-4 py-2 bg-[#c6d2a2] text-[#0f1112] font-bold uppercase tracking-wider rounded-none">Add to Loadout</button>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Banner */}
      <section className="relative max-w-6xl mx-auto px-4 pb-12">
        <div className="rounded-2xl overflow-hidden border border-white/5">
          <div className="relative">
            <div className="aspect-[21/7] bg-[url('https://images.unsplash.com/photo-1481887328591-3e277f9473dc?q=80&w=2070&auto=format&fit=crop')] bg-cover bg-center" />
            <div className="absolute inset-0 bg-gradient-to-r from-[#0f1112] via-transparent to-[#0f1112]" />
            <div className="absolute inset-0 p-8 md:p-12 flex items-center">
              <div className="max-w-md">
                <p className="text-[#c6d2a2] uppercase tracking-[0.3em] text-xs mb-2">Limited Drop</p>
                <h3 className="text-2xl md:text-4xl font-black">Night Ops Capsule</h3>
                <p className="text-[#c2c7c9] mt-2">Stealth thermals, modular vests, blackout caps. Micro-batched, no restock.</p>
                <button className="mt-5 inline-flex items-center gap-2 px-5 py-3 rounded-none bg-white text-[#0f1112] font-bold uppercase tracking-wider">Shop the Drop <ArrowRight size={18}/></button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-white/5 bg-[#0e1011]">
        <div className="max-w-6xl mx-auto px-4 py-12 grid grid-cols-2 md:grid-cols-4 gap-8 text-sm">
          <div>
            <div className="font-black text-lg tracking-widest text-[#c6d2a2]">BLACKDOG</div>
            <p className="mt-2 text-[#a1a6a8]">Rugged apparel for night runners & urban rangers. Field-tested. Zero shine.</p>
          </div>
          <div>
            <div className="font-bold uppercase tracking-wider mb-2">Shop</div>
            <ul className="space-y-1 text-[#c2c7c9]">
              <li>Outerwear</li>
              <li>Bottoms</li>
              <li>Tees</li>
              <li>Accessories</li>
            </ul>
          </div>
          <div>
            <div className="font-bold uppercase tracking-wider mb-2">Support</div>
            <ul className="space-y-1 text-[#c2c7c9]">
              <li>Shipping</li>
              <li>Returns</li>
              <li>Size Guide</li>
              <li>Contact</li>
            </ul>
          </div>
          <div>
            <div className="font-bold uppercase tracking-wider mb-2">Follow</div>
            <div className="flex gap-3">
              <Instagram />
              <Youtube />
              <Facebook />
            </div>
            <p className="text-[#a1a6a8] mt-3">© 2025 Blackdog Tactical</p>
          </div>
        </div>
      </footer>
    </div>
  );
}