import Link from 'next/link';
import { getSubscriptionPlans, getCommissionPlan } from '@/lib/catalog';
import { ROUTES } from '@/lib/routes';
import { getSiteSettings, formatPrice } from '@/lib/site-settings';

// Shared with both the Become a Vendor page and the Home page, so plan
// details only need to be updated in one place (src/lib/catalog.ts).
export async function VendorPlansSection() {
  const [subscriptionPlans, commissionPlan, settings] = await Promise.all([
    getSubscriptionPlans(),
    getCommissionPlan(),
    getSiteSettings(),
  ]);

  return (
    <section className="py-16">
      <div className="container-page">
        <h2 className="section-title">Choose the Plan That Works for You</h2>

        <div className="mt-8 grid gap-4 md:grid-cols-2">
          <div className="rounded-lg bg-navy-800 p-6 text-white">
            <div className="flex items-start gap-4">
              <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-white/30">
                <svg viewBox="0 0 24 24" className="h-5 w-5" fill="none" stroke="currentColor" strokeWidth={1.8}><path d="M3 9.5 12 4l9 5.5v9L12 24l-9-5.5v-9Z" /></svg>
              </span>
              <div>
                <h3 className="font-serif text-lg font-semibold">1. Subscription Plans <span className="font-sans text-sm font-normal text-navy-100/70">(You Handle the Sales)</span></h3>
                <p className="mt-1 text-sm text-navy-100/80">List your products, manage your store and handle your own sales. Pay a monthly subscription based on the number of listings you need.</p>
              </div>
            </div>
          </div>
          <div className="rounded-lg border border-gold-200 bg-gold-50 p-6">
            <div className="flex items-start gap-4">
              <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-gold-500 text-gold-600">
                <svg viewBox="0 0 24 24" className="h-5 w-5" fill="none" stroke="currentColor" strokeWidth={1.8}><path d="M11 13a4 4 0 1 0-4-4M9 13h6l3 3-2 2-2-2m-3-3-3 3 2 2 2-2" /></svg>
              </span>
              <div>
                <h3 className="font-serif text-lg font-semibold text-navy-800">2. Commission Plan <span className="font-sans text-sm font-normal text-navy-600">(We Handle the Sales)</span></h3>
                <p className="mt-1 text-sm text-navy-600">We list, market and sell your products for you. You get more time to focus on what you do best – creating amazing products.</p>
              </div>
            </div>
          </div>
        </div>

        <div className="mt-10 grid gap-8 lg:grid-cols-[1fr_320px]">
          {/* Subscription plan cards */}
          <div>
            <h3 className="text-center font-serif text-xl font-semibold text-navy-800 lg:text-left">Subscription Plans</h3>
            <p className="mt-1 text-center text-sm text-navy-600 lg:text-left">Choose a plan based on how many products you want to list.</p>

            <div className="mt-6 grid gap-5 sm:grid-cols-2 xl:grid-cols-4">
              {subscriptionPlans.map((plan) => (
                <div
                  key={plan.key}
                  className={`relative flex flex-col rounded-lg border bg-white p-5 ${
                    plan.highlight ? 'border-gold-500 shadow-lg' : 'border-navy-100'
                  }`}
                >
                  {plan.highlight && (
                    <span className="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-gold-500 px-3 py-0.5 text-[10px] font-bold uppercase text-navy-800">
                      Popular
                    </span>
                  )}
                  <span className="flex h-10 w-10 items-center justify-center rounded-full bg-beige text-gold-600">
                    <svg viewBox="0 0 24 24" className="h-5 w-5" fill="none" stroke="currentColor" strokeWidth={1.8}>
                      <path d="M3 21h18M5 21V9l7-6 7 6v12M9 21v-6h6v6" />
                    </svg>
                  </span>
                  <h4 className="mt-3 font-serif text-base font-semibold text-navy-800">{plan.name}</h4>
                  <p className="text-xs font-medium text-brown-500">{plan.tagline}</p>
                  <p className="mt-3">
                    <span className="text-2xl font-bold text-navy-800">{plan.price > 0 ? formatPrice(plan.price, settings.currency) : formatPrice(0, settings.currency)}</span>
                    <span className="text-xs text-navy-500"> {plan.price > 0 ? plan.period : '/month'}</span>
                  </p>
                  <ul className="mt-4 flex-1 space-y-2 text-xs text-navy-600">
                    {plan.features.map((feature) => (
                      <li key={feature} className="flex items-start gap-2">
                        <span className="mt-0.5 text-gold-600" aria-hidden="true">&#10003;</span>
                        <span>{feature}</span>
                      </li>
                    ))}
                  </ul>
                  <Link
                    href={`${ROUTES.vendorSignup}?plan=${plan.key}&type=subscription`}
                    className={`mt-5 rounded-md py-2 text-center text-sm font-semibold ${
                      plan.highlight
                        ? 'bg-gold-500 text-navy-800 hover:bg-gold-600'
                        : 'border border-gold-500 text-gold-600 hover:bg-gold-50'
                    }`}
                  >
                    {plan.cta}
                  </Link>
                </div>
              ))}
            </div>
            <p className="mt-4 text-center text-xs text-navy-500 lg:text-left">All subscription plans include store management, product listings and customer communication tools.</p>
          </div>

          {/* Commission plan */}
          <div>
            <h3 className="text-center font-serif text-xl font-semibold text-navy-800">Commission Plan</h3>
            <p className="mt-1 text-center text-sm text-navy-600">We sell for you and you earn more.</p>

            <div className="mt-6 rounded-lg border border-navy-100 bg-beige p-6 text-center">
              <p className="text-4xl font-bold text-gold-600">{commissionPlan.rate}%</p>
              <p className="text-sm font-semibold text-navy-800">
                Commission
                <br />
                on each sale
              </p>

              <ul className="mt-5 space-y-2 text-left text-xs text-navy-600">
                {commissionPlan.features.map((feature) => (
                  <li key={feature} className="flex items-start gap-2">
                    <span className="mt-0.5 text-gold-600" aria-hidden="true">&#10003;</span>
                    <span>{feature}</span>
                  </li>
                ))}
              </ul>

              <Link
                href={`${ROUTES.vendorSignup}?plan=commission&type=commission`}
                className="mt-6 block rounded-md bg-navy-800 py-2.5 text-center text-sm font-semibold text-white hover:bg-navy-700"
              >
                Choose Commission Plan
              </Link>
              <p className="mt-3 text-[11px] text-navy-500">{commissionPlan.rate}% commission will be deducted from the final selling price of each product.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}