import type { Metadata } from "next";
import Link from "next/link";
import {
  ArrowRight,
  BadgeIndianRupee,
  ClipboardCheck,
  FileCheck2,
  Gavel,
  Landmark,
  MapPinned,
  PackageCheck,
  ReceiptText,
  Store,
  Truck,
} from "lucide-react";
import { getServerUser } from "@/lib/auth/server";
import PageHeader from "@/components/ui/PageHeader";

export const metadata: Metadata = {
  title: "Sell on Biznie – Become a Seller",
  description:
    "List your steel and raw materials free, quote on live buyer requirements across India, and get paid within 7 days of acceptance.",
};

/*
  Public "Become Seller" landing page (4.8): what selling on Biznie involves,
  before anyone is asked to log in. Every line here must match how the
  platform works — free listing, a commission agreed at onboarding, payment
  within 7 days of the buyer's acceptance (the same promise as the About
  page), and the documents the onboarding form actually asks for.
*/

const BENEFITS = [
  { icon: Gavel, title: "Live buyer requirements", text: "Verified buyers post what they need; you quote your ex-works rate and see where you rank." },
  { icon: MapPinned, title: "Buyers across India", text: "Reach buyers outside your city. Biznie adds freight, so buyers compare landed (F.O.R) prices." },
  { icon: BadgeIndianRupee, title: "Paid within 7 days", text: "Payment within 7 days of the buyer accepting the material, subject to the transaction terms." },
  { icon: ReceiptText, title: "Orders on record", text: "Orders, invoices, dispatch and your ledger in one dashboard — and through Biznie AI." },
];

const STEPS = [
  { icon: Store, title: "Apply", text: "Business details, contact person, bank account and your documents — about 10 minutes." },
  { icon: ClipboardCheck, title: "Verification", text: "Our team reviews your KYC, usually within 48 hours." },
  { icon: PackageCheck, title: "List products", text: "Pick products from the Biznie catalog and set your price, sizes, grades and loading point." },
  { icon: Gavel, title: "Quote and win", text: "Answer live requirements with your ex-works rate; buyers book the best landed offer." },
  { icon: Truck, title: "Dispatch and get paid", text: "Load, invoice and dispatch from your dashboard; get paid after the buyer accepts." },
];

const DOCUMENTS = [
  "GST certificate (GSTIN)",
  "PAN of the business",
  "Business registration certificate",
  "Address proof of the business premises",
  "Cancelled cheque for the payout account",
];

const FAQS = [
  {
    q: "What does it cost to sell on Biznie?",
    a: "Listing your products is free. Biznie earns a commission on confirmed orders; the rate is agreed with you during onboarding and shown on each order.",
  },
  {
    q: "When do I get paid?",
    a: "Within 7 days of the buyer accepting the delivered material, subject to the transaction terms of the order.",
  },
  {
    q: "Who arranges transport?",
    a: "You quote ex-works. Freight to the buyer's city is added by Biznie, so buyers compare landed prices across sellers.",
  },
  {
    q: "Do I need all documents to apply?",
    a: "You can start the application without them, but verification is completed only after the documents above are uploaded.",
  },
  {
    q: "I already buy on Biznie. Do I need a new account?",
    a: "No. Apply from your existing account; once approved you can switch between buying and selling from the dashboard.",
  },
];

export default async function SellPage() {
  const user = await getServerUser();
  const isSeller = !!user && (user.type === "seller" || !!user.is_buyer_and_seller);

  const cta = isSeller
    ? { href: "/seller/products", label: "Go to my products" }
    : { href: "/profile/become-seller", label: user ? "Start my application" : "Sign in to apply" };

  return (
    <div className="min-h-screen bg-white">
      <PageHeader
        title="Sell on Biznie"
        subtitle="List free, quote on live buyer requirements across India, and get paid within 7 days of acceptance."
      />

      <section className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
        <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
          {BENEFITS.map(({ icon: Icon, title, text }) => (
            <div key={title} className="rounded-2xl border border-gray-100 bg-white p-6 shadow-sm">
              <span className="mb-4 inline-flex h-11 w-11 items-center justify-center rounded-xl bg-red-50 text-[#CC1414]">
                <Icon size={22} aria-hidden />
              </span>
              <h2 className="font-bold text-gray-900">{title}</h2>
              <p className="mt-1 text-sm leading-relaxed text-gray-600">{text}</p>
            </div>
          ))}
        </div>
        <div className="mt-8 flex flex-wrap items-center gap-3">
          <Link
            href={cta.href}
            className="inline-flex items-center gap-2 rounded-xl bg-[#CC1414] px-6 py-3 text-sm font-semibold text-white hover:bg-[#A50E0E]"
          >
            {cta.label} <ArrowRight size={16} aria-hidden />
          </Link>
          <Link href="/contact" className="rounded-xl border border-gray-200 px-6 py-3 text-sm font-semibold text-gray-700 hover:bg-gray-50">
            Talk to our team
          </Link>
        </div>
      </section>

      <section className="bg-gray-50 py-12">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <h2 className="text-2xl font-black text-gray-900">How it works</h2>
          <ol className="mt-6 grid gap-4 md:grid-cols-5">
            {STEPS.map(({ icon: Icon, title, text }, i) => (
              <li key={title} className="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-gray-100">
                <div className="mb-3 flex items-center gap-2">
                  <span className="flex h-7 w-7 items-center justify-center rounded-full bg-[#CC1414] text-xs font-bold text-white">{i + 1}</span>
                  <Icon size={18} className="text-[#CC1414]" aria-hidden />
                </div>
                <h3 className="font-bold text-gray-900">{title}</h3>
                <p className="mt-1 text-sm leading-relaxed text-gray-600">{text}</p>
              </li>
            ))}
          </ol>
        </div>
      </section>

      <section className="mx-auto grid max-w-7xl gap-6 px-4 py-12 sm:px-6 md:grid-cols-2 lg:px-8">
        <div className="rounded-2xl border border-gray-100 p-6 shadow-sm">
          <h2 className="mb-1 flex items-center gap-2 text-lg font-bold text-gray-900">
            <FileCheck2 size={20} className="text-[#CC1414]" aria-hidden /> Documents for KYC
          </h2>
          <p className="mb-4 text-sm text-gray-500">Keep these ready as PDF or photos.</p>
          <ul className="space-y-2 text-sm text-gray-700">
            {DOCUMENTS.map((d) => (
              <li key={d} className="flex items-start gap-2">
                <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-[#CC1414]" />
                {d}
              </li>
            ))}
          </ul>
        </div>
        <div className="rounded-2xl border border-gray-100 p-6 shadow-sm">
          <h2 className="mb-4 flex items-center gap-2 text-lg font-bold text-gray-900">
            <Landmark size={20} className="text-[#CC1414]" aria-hidden /> Fees and settlement
          </h2>
          <dl className="space-y-3 text-sm">
            <div>
              <dt className="font-semibold text-gray-900">Listing</dt>
              <dd className="text-gray-600">Free — no listing or subscription fee.</dd>
            </div>
            <div>
              <dt className="font-semibold text-gray-900">Commission</dt>
              <dd className="text-gray-600">On confirmed orders only, at the rate agreed during onboarding; shown on every order.</dd>
            </div>
            <div>
              <dt className="font-semibold text-gray-900">Settlement</dt>
              <dd className="text-gray-600">Within 7 days of the buyer&apos;s acceptance, to your verified bank account, subject to the transaction terms.</dd>
            </div>
          </dl>
        </div>
      </section>

      <section className="bg-gray-50 py-12">
        <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
          <h2 className="mb-6 text-2xl font-black text-gray-900">Questions sellers ask</h2>
          <div className="space-y-3">
            {FAQS.map(({ q, a }) => (
              <details key={q} className="group rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-100">
                <summary className="cursor-pointer list-none font-semibold text-gray-900 marker:hidden">
                  {q}
                </summary>
                <p className="mt-2 text-sm leading-relaxed text-gray-600">{a}</p>
              </details>
            ))}
          </div>
          <div className="mt-8 text-center">
            <Link
              href={cta.href}
              className="inline-flex items-center gap-2 rounded-xl bg-[#CC1414] px-6 py-3 text-sm font-semibold text-white hover:bg-[#A50E0E]"
            >
              {cta.label} <ArrowRight size={16} aria-hidden />
            </Link>
          </div>
        </div>
      </section>
    </div>
  );
}