import Image from 'next/image';
import Link from 'next/link';
import type { Metadata } from 'next';
import { ROUTES } from '@/lib/routes';
import { getCategories } from '@/lib/catalog';
import { WhyVendorSection } from '@/components/vendor/why-vendor-section';
import { CategoryShowcase } from '@/components/vendor/category-showcase';
import { GetStartedChecklist } from '@/components/vendor/get-started-checklist';
import { ConnectFlowSection } from '@/components/vendor/connect-flow-section';
import { VendorFaq } from '@/components/vendor/vendor-faq';

export const metadata: Metadata = { title: 'Become a Vendor' };

const HERO_BULLETS = [
  { label: 'Authentic Makers', icon: 'M12 21s-6-5.686-6-10a6 6 0 1 1 12 0c0 4.314-6 10-6 10Z' },
  { label: 'Your Own Storefront', icon: 'M3 21h18M5 21V9l7-6 7 6v12M9 21v-6h6v6' },
  { label: 'Direct Customer Enquiries', icon: 'M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10Z' },
];

const STEPS = [
  { n: 1, title: 'Create an Account', text: 'Sign up as a vendor with your details.' },
  { n: 2, title: 'Complete Your Profile', text: 'Add your store info and business details.' },
  { n: 3, title: 'Add Your Products', text: 'List your amazing handcrafted products.' },
  { n: 4, title: 'Submit for Review', text: 'We review your shop and product information.' },
  { n: 5, title: 'Start Receiving Enquiries', text: 'Customers discover and contact you directly.' },
];

export default async function BecomeVendorPage() {
  const categories = await getCategories();

  return (
    <>
      {/* Hero */}
      <section className="bg-beige">
        <div className="container-page grid items-center gap-10 py-14 lg:grid-cols-2">
          <div>
            <p className="text-xs font-semibold uppercase tracking-widest text-gold-600">For Sri Lankan Artisans &amp; Makers</p>
            <h1 className="mt-2 text-3xl font-serif font-bold text-navy-800 sm:text-4xl">
              Your Craft Deserves
              <br />
              a <span className="text-gold-500">Wider</span> Audience
            </h1>
            <p className="mt-4 max-w-lg text-navy-600">
              Create your artisan storefront, showcase your handmade products, and connect directly with customers.
            </p>

            <div className="mt-6 flex flex-wrap gap-4">
              <Link href={`${ROUTES.vendorSignup}?plan=free&type=subscription`} className="btn-primary">
                Apply to Become a Vendor
              </Link>
              <Link href={`${ROUTES.login}?redirect=${ROUTES.vendorDashboard}`} className="btn-dark bg-transparent text-navy-800 ring-1 ring-inset ring-navy-800 hover:bg-navy-800 hover:text-white">
                Vendor Login
              </Link>
            </div>

            <div className="mt-8 flex flex-wrap gap-x-6 gap-y-3">
              {HERO_BULLETS.map((bullet) => (
                <div key={bullet.label} className="flex items-center gap-2">
                  <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-navy-800 text-gold-400">
                    <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth={1.8}>
                      <path d={bullet.icon} />
                    </svg>
                  </span>
                  <span className="text-xs font-semibold text-navy-800">{bullet.label}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="relative overflow-hidden rounded-xl">
            <Image
              src="/images/srilankan-artisan-bg.jpg"
              alt="An artisan weaving a traditional basket by hand"
              width={700}
              height={520}
              className="aspect-[4/3] w-full object-cover shadow-lg"
            />
            <p className="absolute bottom-4 right-4 rounded-md bg-navy-900/60 px-3 py-1.5 text-right font-serif text-xs italic text-white">
              Our Crafts, Our Stories, Sri Lanka
            </p>
          </div>
        </div>
      </section>

      <WhyVendorSection />

      {/* How to get started */}
      <section className="py-16">
        <div className="container-page">
          <h2 className="section-title">How to Become a Vendor</h2>

          <div className="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-5">
            {STEPS.map((step) => (
              <div key={step.n} className="flex flex-col items-center gap-3 text-center">
                <span className="flex h-12 w-12 items-center justify-center rounded-full bg-gold-500 text-sm font-bold text-navy-800">{step.n}</span>
                <h4 className="text-sm font-semibold text-navy-800">{step.title}</h4>
                <p className="text-xs text-navy-600">{step.text}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CategoryShowcase categories={categories} />

      <GetStartedChecklist />

      <ConnectFlowSection />

      <VendorFaq />

      {/* Bottom CTA */}
      <section className="bg-navy-800">
        <div className="container-page flex flex-col items-center justify-between gap-6 py-12 text-center md:flex-row md:text-left">
          <div>
            <h3 className="text-2xl font-serif font-bold text-white">Ready to Share Your Craft?</h3>
            <p className="mt-2 text-navy-100/80">Join a growing platform created to showcase Sri Lankan artisans and makers.</p>
          </div>
          <div className="flex shrink-0 flex-col items-center gap-2 md:items-end">
            <Link href={`${ROUTES.vendorSignup}?plan=free&type=subscription`} className="btn-primary">Apply to Become a Vendor</Link>
            <Link href={`${ROUTES.login}?redirect=${ROUTES.vendorDashboard}`} className="text-xs font-semibold text-gold-400 hover:text-gold-300">
              Already registered? Vendor Login
            </Link>
          </div>
        </div>
      </section>
    </>
  );
}