import type { Metadata } from "next";
import { prisma } from "@/lib/db";
import { siteConfig } from "@/lib/config";
import { SellForm } from "@/components/sell/SellForm";

export const metadata: Metadata = {
  title: "Sell your device",
  description:
    "Get a fair quote for your used laptop, desktop, monitor, components, TV or sound system. Quick evaluation and instant cash.",
};

export default async function SellPage() {
  const categories = await prisma.category.findMany({
    orderBy: { sortOrder: "asc" },
    select: { id: true, name: true },
  });

  const steps = [
    { icon: "📝", title: "Tell us about it", text: "Fill the form with details and photos." },
    { icon: "💬", title: "Get a quote", text: "We evaluate and share a fair price." },
    { icon: "🤝", title: "Get paid", text: "Accept and receive instant cash." },
  ];

  return (
    <div className="mx-auto max-w-4xl px-4 py-8">
      <div className="rounded-2xl bg-gradient-to-r from-accent-600 to-emerald-700 px-6 py-10 text-white">
        <h1 className="text-2xl font-bold sm:text-3xl">
          Sell your old electronics for cash
        </h1>
        <p className="mt-2 max-w-xl text-emerald-50">
          Laptops, desktops, monitors, RAM, storage, TVs, sound systems and
          accessories. Quick evaluation, fair price, zero hassle.
        </p>
      </div>

      <div className="mt-8 grid gap-4 sm:grid-cols-3">
        {steps.map((s, i) => (
          <div
            key={s.title}
            className="rounded-xl border border-slate-200 bg-white p-5"
          >
            <div className="text-2xl">{s.icon}</div>
            <p className="mt-2 text-xs font-semibold uppercase tracking-wide text-slate-400">
              Step {i + 1}
            </p>
            <p className="font-semibold text-slate-800">{s.title}</p>
            <p className="text-sm text-slate-500">{s.text}</p>
          </div>
        ))}
      </div>

      <div className="mt-8">
        <h2 className="mb-4 text-lg font-bold text-slate-900">
          Tell us what you&apos;re selling
        </h2>
        <SellForm categories={categories} />
      </div>

      <p className="mt-6 text-center text-sm text-slate-500">
        Prefer to talk? Call{" "}
        <a href={`tel:${siteConfig.phone}`} className="font-medium text-brand-600">
          {siteConfig.phone}
        </a>{" "}
        or{" "}
        <a
          href={`https://wa.me/${siteConfig.whatsapp}`}
          target="_blank"
          rel="noopener noreferrer"
          className="font-medium text-brand-600"
        >
          message us on WhatsApp
        </a>
        .
      </p>
    </div>
  );
}