import React from "react";
import { Link } from "react-router-dom";
import TemplatePage from "@/components/TemplatePage"; // assumes TemplatePage exists as discussed

/**
 * IBrandBiz — Products Page (Pre‑Login)
 * Sections:
 *  - Brand Kits
 *  - Website Templates
 *  - Social Media Kits
 *  - Stock Images
 *  - Brand Assets
 *
 * Brand palette:
 *  #5cccdc, #f99f1b, #05445e, #189ab4, #75e6da, #d4f1f4, #03222e
 */

export default function ProductsPage() {
  return (
    <TemplatePage
      title="Everything You Need to Build Your Brand"
      subtitle="Pick a product category to start fast and grow with confidence."
    >
      <main className="mx-auto max-w-6xl px-6 py-12 text-[#03222e]">
        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          <ProductCard
            eyebrow="Brand Kits"
            title="Complete Identity Packages"
            desc="Logos, color palettes, type styles, and usage guides — bundled and ready to apply across your business."
            bullets={[
              "Multiple logo variations",
              "Color + typography guidance",
              "Export-ready files (PNG/SVG/PDF)",
            ]}
            href="/brand-kits"
            gradient="from-[#75e6da] to-[#5cccdc]"
          />

          <ProductCard
            eyebrow="Website Templates"
            title="Professional Sites, Ready to Launch"
            desc="Modern, responsive templates that look great on every device. Choose, customize, and go live."
            bullets={[
              "Clean, conversion‑focused layouts",
              "Responsive by default",
              "Easy to customize",
            ]}
            href="/website-templates"
            gradient="from-[#d4f1f4] to-[#189ab4]"
          />

          <ProductCard
            eyebrow="Social Media Kits"
            title="Cohesive Posts & Profiles"
            desc="On‑brand templates for posts, stories, banners, and ads — sized for every major platform."
            bullets={[
              "Formats for IG, FB, X, TikTok",
              "Editable captions & overlays",
              "Batch export options",
            ]}
            href="/social-media-kits"
            gradient="from-[#fef3c7] to-[#f99f1b]"
          />

          <ProductCard
            eyebrow="Stock Images"
            title="High‑Quality Visuals"
            desc="Curated photography to power your brand visuals across web, print, and social."
            bullets={[
              "Commercial‑use friendly",
              "Collections by industry",
              "Hi‑res, web‑ready versions",
            ]}
            href="/stock-images"
            gradient="from-[#d4f1f4] to-[#75e6da]"
          />

          <ProductCard
            eyebrow="Brand Assets"
            title="Business‑Ready Templates"
            desc="Reusable files for decks, proposals, letterheads, packaging, signage, and more."
            bullets={[
              "Presentation & document kits",
              "Print & packaging templates",
              "Easy brand swap‑ins",
            ]}
            href="/brand-assets"
            gradient="from-[#e2e8f0] to-[#5cccdc]"
          />
        </div>

        {/* Helpful note / micro‑trust */}
        <div className="mt-12 rounded-3xl border border-slate-200 bg-slate-50 p-6 text-slate-700">
          <p>
            Looking for guidance on what to choose first? Start with a <span className="font-semibold text-[#05445e]">Brand Kit</span>, secure your <span className="font-semibold text-[#05445e]">Website Template</span> and <span className="font-semibold text-[#05445e]">Domain</span>, then amplify with a <span className="font-semibold text-[#05445e]">Social Media Kit</span>.
          </p>
        </div>
      </main>

      {/* Final CTA */}
      <section className="mx-auto max-w-6xl px-6 pb-16 pt-10 text-center">
        <h2 className="text-2xl sm:text-3xl font-bold">Ready to build something amazing?</h2>
        <p className="mt-3 text-slate-600 max-w-2xl mx-auto">
          Make your first impression your best — choose a starting point and get moving.
        </p>
        <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
          <CTA href="/brand-kits" label="Explore Brand Kits" />
          <CTA href="/website-templates" variant="outline" label="Browse Website Templates" />
          <CTA href="/social-media-kits" variant="ghost" label="Get Social Media Kits" />
        </div>
      </section>
    </TemplatePage>
  );
}

/* ========================= Components ========================= */

type CTAProps = {
  href: string;
  label: string;
  variant?: "solid" | "outline" | "ghost";
};

function CTA({ href, label, variant = "solid" }: CTAProps) {
  const base =
    "inline-flex items-center justify-center rounded-2xl px-5 py-3 text-sm font-semibold transition focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2";
  const styles: Record<NonNullable<CTAProps["variant"]>, string> = {
    solid:
      "bg-[#189ab4] text-white shadow hover:bg-[#05445e] focus-visible:ring-[#5cccdc]",
    outline:
      "border border-slate-300 text-[#03222e] hover:bg-slate-100 focus-visible:ring-[#5cccdc]",
    ghost:
      "text-[#05445e] hover:bg-slate-100 focus-visible:ring-[#5cccdc]",
  };
  return (
    <Link to={href} className={`${base} ${styles[variant]}`}>{label}</Link>
  );
}

type ProductCardProps = {
  eyebrow: string;
  title: string;
  desc: string;
  bullets: string[];
  href: string;
  gradient: string; // tailwind gradient string like "from[#..] to[#..]"
};

function ProductCard({ eyebrow, title, desc, bullets, href, gradient }: ProductCardProps) {
  return (
    <div className="group rounded-3xl border border-slate-200 overflow-hidden bg-white shadow-sm hover:shadow-md transition">
      <div className={`h-2 w-full bg-gradient-to-r ${gradient}`} />
      <div className="p-6">
        <p className="text-xs uppercase tracking-wider text-slate-500 font-semibold">{eyebrow}</p>
        <h3 className="mt-2 text-xl font-bold">{title}</h3>
        <p className="mt-3 text-sm text-slate-600">{desc}</p>
        <ul className="mt-4 space-y-2 text-sm text-slate-700">
          {bullets.map((b, i) => (
            <li key={i} className="flex gap-2">
              <span className="mt-1 inline-block h-2.5 w-2.5 rounded-full bg-[#189ab4] group-hover:bg-[#05445e]" />
              <span>{b}</span>
            </li>
          ))}
        </ul>
        <div className="mt-6">
          <CTA href={href} label={`Explore ${eyebrow}`} />
        </div>
      </div>
    </div>
  );
}
