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

export const metadata: Metadata = {
  title: "Download WordPress Theme | Diverse Stationery",
  description: "Download the Diverse Stationery WordPress theme — a professional, mobile-first e-commerce theme for South African stationery retailers.",
};

const FEATURES = [
  { icon: "🛍️", title: "Full E-commerce Layout", text: "Homepage hero, category grid, product cards, single-product pages & cart drawer." },
  { icon: "📖", title: "Catalogue & Price List", text: "Built-in magazine-style catalogue plus a printable, PDF-ready price list template." },
  { icon: "🎨", title: "On-Brand Design", text: "Teal #0E9C8E & tan #C9B79C palette with the interlocking SD logo baked in as SVG." },
  { icon: "🧩", title: "Custom Products", text: "\"Products\" post type with price, sale price, SKU, brand, rating & best-seller fields." },
  { icon: "🌱", title: "Auto Demo Data", text: "Seeds 12 products across 6 categories + creates the Catalogue & Price List pages on activation." },
  { icon: "🛒", title: "WooCommerce Ready", text: "Works standalone, or plug in WooCommerce for real checkout & SA payment gateways." },
  { icon: "📱", title: "Mobile-First", text: "Sticky mobile nav, slide-out cart, responsive grids & one-tap WhatsApp." },
  { icon: "⚙️", title: "Customiser Options", text: "Edit announcement, hero text, contact details, WhatsApp number & shipping threshold." },
];

const STRUCTURE = [
  "style.css", "functions.php", "front-page.php", "header.php", "footer.php",
  "single-ds_product.php", "archive-ds_product.php", "template-catalogue.php",
  "template-price-list.php", "search.php", "404.php", "inc/ (post-types, customizer, sample-data)",
  "template-parts/product-card.php", "assets/js/main.js", "screenshot.png", "README.txt",
];

export default function WordPressThemePage() {
  return (
    <div className="min-h-screen bg-slate-100 text-slate-900 font-sans">
      {/* Header */}
      <header className="bg-white border-b border-slate-200 sticky top-0 z-40">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-3 flex items-center justify-between">
          <Link href="/" className="flex items-center gap-2.5">
            <svg viewBox="0 0 120 120" className="w-10 h-10" xmlns="http://www.w3.org/2000/svg">
              <path fillRule="evenodd" clipRule="evenodd" fill="#0E9C8E" d="M26 50 L70 50 C98 50 115 63.5 115 78.5 C115 93.5 98 107 70 107 L26 107 Z M45 64 L69 64 C88 64 99 70 99 78.5 C99 87 88 93 69 93 L45 93 Z" />
              <path fill="#3A3E42" d="M26 50 L45 50 L45 64 Z" />
              <path fill="none" stroke="#C9B79C" strokeWidth={15} strokeLinecap="round" strokeLinejoin="round" d="M90 25 C90 15.5 78 12 63 13 C47 14 36 20.5 37 31 C38 41 52 44.5 65 47.5 C79.5 50.5 91 53.5 90 64 C89 74 76 77.5 61 76.5 C47 75.5 37.5 70.5 36 62.5" />
            </svg>
            <span className="flex flex-col leading-none">
              <span className="font-black text-lg tracking-tight" style={{ color: "#0E9C8E" }}>DIVERSE</span>
              <span className="font-black tracking-[0.16em] text-[10px]" style={{ color: "#C9B79C" }}>STATIONERY</span>
            </span>
          </Link>
          <Link href="/" className="text-sm font-bold text-slate-600 hover:text-teal-700">← Back to Shop</Link>
        </div>
      </header>

      {/* Hero */}
      <section className="bg-gradient-to-br from-slate-900 via-teal-950 to-slate-900 text-white">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-14 lg:py-20 grid lg:grid-cols-12 gap-10 items-center">
          <div className="lg:col-span-7 space-y-5">
            <span className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-teal-500/20 border border-teal-400/30 text-teal-200 text-xs font-semibold">
              WordPress Theme &bull; v1.0.0
            </span>
            <h1 className="text-3xl sm:text-5xl font-black tracking-tight leading-tight">
              Diverse Stationery{" "}
              <span className="bg-gradient-to-r from-teal-300 to-emerald-200 bg-clip-text text-transparent">WordPress Theme</span>
            </h1>
            <p className="text-slate-300 text-base sm:text-lg max-w-2xl">
              A production-ready, mobile-first e-commerce WordPress theme that mirrors this store — logo, brand colours, catalogue, printable price list and cart included. Install in minutes.
            </p>
            <div className="flex flex-wrap gap-3 pt-2">
              <a
                href="/downloads/diverse-stationery.zip"
                download
                className="px-7 py-4 bg-gradient-to-r from-amber-500 to-amber-600 hover:from-amber-600 hover:to-amber-700 text-slate-950 font-black rounded-2xl shadow-lg flex items-center gap-2 transition-all"
              >
                ⬇️ Download Theme (.zip)
              </a>
              <a
                href="/downloads/diverse-stationery.zip"
                className="px-6 py-4 bg-white/10 hover:bg-white/20 text-white font-bold rounded-2xl border border-white/20 backdrop-blur-sm transition-all flex items-center gap-2"
              >
                View File
              </a>
            </div>
            <p className="text-xs text-slate-400 pt-1">Compatible with WordPress 6.0+ &bull; PHP 7.4+ &bull; WooCommerce-ready</p>
          </div>

          <div className="lg:col-span-5">
            <div className="rounded-3xl overflow-hidden border border-white/15 shadow-2xl bg-white/5 backdrop-blur-md p-2">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img src="/downloads/theme-preview.png" alt="Diverse Stationery WordPress theme preview" className="w-full rounded-2xl" />
            </div>
          </div>
        </div>
      </section>

      {/* Features */}
      <section className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-14">
        <div className="text-center mb-10">
          <span className="text-xs font-bold uppercase tracking-wider text-teal-700 bg-teal-100 px-3 py-1 rounded-full">What&apos;s Included</span>
          <h2 className="text-2xl sm:text-3xl font-black text-slate-900 mt-3">Everything you need to launch</h2>
        </div>
        <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
          {FEATURES.map((f) => (
            <div key={f.title} className="bg-white rounded-2xl border border-slate-200 p-5 shadow-sm hover:shadow-md transition-shadow">
              <div className="text-3xl">{f.icon}</div>
              <h3 className="font-extrabold text-slate-900 text-sm mt-3">{f.title}</h3>
              <p className="text-xs text-slate-500 mt-1 leading-relaxed">{f.text}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Install steps + structure */}
      <section className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 pb-16 grid lg:grid-cols-2 gap-8">
        <div className="bg-white rounded-3xl border border-slate-200 p-7 shadow-sm">
          <h3 className="font-black text-slate-900 text-lg mb-4">📥 How to Install</h3>
          <ol className="space-y-3 text-sm text-slate-700">
            {[
              "Download diverse-stationery.zip using the button above.",
              "In WordPress: Appearance → Themes → Add New → Upload Theme.",
              "Select the .zip file and click Install Now, then Activate.",
              "Demo products, categories, and the Catalogue & Price List pages are created automatically.",
              "Go to Settings → Permalinks and click Save once (for pretty product URLs).",
              "Edit content under Products, and branding under Appearance → Customize.",
            ].map((step, i) => (
              <li key={i} className="flex gap-3">
                <span className="w-6 h-6 rounded-full bg-teal-600 text-white text-xs font-black flex items-center justify-center shrink-0">{i + 1}</span>
                <span>{step}</span>
              </li>
            ))}
          </ol>
        </div>

        <div className="bg-white rounded-3xl border border-slate-200 p-7 shadow-sm">
          <h3 className="font-black text-slate-900 text-lg mb-4">🗂️ Theme Files</h3>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
            {STRUCTURE.map((file) => (
              <code key={file} className="text-[11px] bg-slate-50 border border-slate-200 rounded-lg px-2.5 py-1.5 text-slate-600 font-mono truncate">
                {file}
              </code>
            ))}
          </div>
          <div className="mt-5 p-4 bg-teal-50 border border-teal-200 rounded-2xl text-xs text-teal-900">
            <strong>WooCommerce:</strong> Activate WooCommerce and the theme automatically switches to real products, cart & checkout with SA gateways (Ozow, PayFast, PayGate).
          </div>
        </div>
      </section>

      <footer className="bg-slate-950 text-slate-400 py-8 text-center text-xs">
        <p>&copy; {new Date().getFullYear()} Diverse Stationery Co. &bull; WordPress Theme v1.0.0 &bull; Proudly built for South Africa 🇿🇦</p>
      </footer>
    </div>
  );
}