import Link from "next/link";
import { Button } from "@/src/components/ui/button";
import { Card, CardContent } from "@/src/components/ui/card";
import { Badge } from "@/src/components/ui/badge";
import { ProductDetailTabs } from "./product-detail-tabs";
import { Download, CheckCircle2 } from "lucide-react";
import type { Metadata } from "next";
import Image from "next/image";

export const metadata: Metadata = {
  title: "Premium Basmati Rice - Export Quality from India",
  description:
    "Premium Basmati Rice export from India. Long grain, aromatic rice with COA, FSSAI certification. Bulk orders welcome. FOB/CIF pricing available.",
  keywords: [
    "basmati rice export",
    "Indian rice export",
    "premium basmati",
    "rice supplier India",
    "bulk rice export",
    "FSSAI certified rice",
  ],
  openGraph: {
    title: "Premium Basmati Rice - Export Quality",
    description:
      "Premium Basmati Rice export from India. Long grain, aromatic rice with full certification.",
    type: "website",
  },
};

export default function ProductDetail() {
  return (
    <div className="bg-[#ffffff]">
      {/* Breadcrumb */}
      <section className="bg-[#F5F7FA] py-4">
        <div className="max-w-360 mx-auto px-6">
          <div className="flex items-center gap-2 text-sm text-gray-600">
            <Link href="/" className="hover:text-[#0B1C2D]">
              Home
            </Link>
            <span>/</span>
            <Link href="/products" className="hover:text-[#0B1C2D]">
              Products
            </Link>
            <span>/</span>
            <Link
              href="/products/agricultural-products"
              className="hover:text-[#0B1C2D]"
            >
              Agricultural Products
            </Link>
            <span>/</span>
            <span className="text-[#0B1C2D] font-medium">
              Premium Basmati Rice
            </span>
          </div>
        </div>
      </section>

      {/* Product Detail */}
      <section className="py-12">
        <div className="max-w-360 mx-auto px-6">
          <div className="grid lg:grid-cols-2 gap-12">
            {/* Image Gallery */}
            <div>
              <div className="relative h-125 rounded-lg overflow-hidden bg-gray-100 mb-4">
                <Image
                  src="/images/home-product-1.jpg"
                  alt="Sample Image"
                  width={500}
                  height={300}
                  className="w-full h-full object-cover"
                />
              </div>
              <div className="grid grid-cols-4 gap-4">
                {[1, 2, 3, 4].map((i) => (
                  <div
                    key={i}
                    className="h-24 rounded-lg overflow-hidden bg-gray-100 cursor-pointer hover:opacity-75 transition-opacity"
                  >
                    <Image
                      src="/images/home-product-1.jpg"
                      alt="Sample Image"
                      width={500}
                      height={300}
                      className="w-full h-full object-cover"
                    />
                  </div>
                ))}
              </div>
            </div>

            {/* Product Info */}
            <div>
              <Badge className="mb-4 bg-[#B8860B]/10 text-[#B8860B] hover:bg-[#B8860B]/20">
                Agricultural Products
              </Badge>
              <h1 className="text-4xl font-bold text-[#0B1C2D] mb-4">
                Premium Basmati Rice
              </h1>
              <p className="text-gray-600 mb-6 leading-relaxed">
                We export high-grade Basmati Rice with long grain, rich aroma,
                and superior cooking quality suitable for international markets.
                Sourced from certified farms with complete traceability.
              </p>

              <div className="grid grid-cols-2 gap-4 mb-8">
                <Card className="border-2">
                  <CardContent className="p-4">
                    <div className="text-sm text-gray-600 mb-1">HS Code</div>
                    <div className="font-bold text-[#0B1C2D]">1006.30.10</div>
                  </CardContent>
                </Card>
                <Card className="border-2">
                  <CardContent className="p-4">
                    <div className="text-sm text-gray-600 mb-1">MOQ</div>
                    <div className="font-bold text-[#0B1C2D]">1 Container</div>
                  </CardContent>
                </Card>
                <Card className="border-2">
                  <CardContent className="p-4">
                    <div className="text-sm text-gray-600 mb-1">
                      Delivery Terms
                    </div>
                    <div className="font-bold text-[#0B1C2D]">FOB / CIF</div>
                  </CardContent>
                </Card>
                <Card className="border-2">
                  <CardContent className="p-4">
                    <div className="text-sm text-gray-600 mb-1">
                      Payment Terms
                    </div>
                    <div className="font-bold text-[#0B1C2D]">LC / TT</div>
                  </CardContent>
                </Card>
              </div>

              <div className="flex flex-wrap gap-4 mb-8">
                <Link href="/contact" className="flex-1">
                  <Button
                    className="w-full bg-[#B8860B] hover:bg-[#9A7209] text-[#ffffff] cursor-pointer"
                    size="lg"
                  >
                    Request Quote
                  </Button>
                </Link>
                <Link href="/contact" className="flex-1">
                  <Button
                    variant="outline"
                    className="w-full border-[#0B1C2D] text-[#0B1C2D] hover:bg-[#0B1C2D] hover:text-[#ffffff] cursor-pointer"
                    size="lg"
                  >
                    Request Sample
                  </Button>
                </Link>
              </div>

              <Button
                variant="ghost"
                className="w-full border border-gray-300 hover:bg-gray-50"
              >
                <Download className="mr-2" size={20} />
                Download Specification Sheet
              </Button>

              <div className="mt-8 p-6 bg-[#F5F7FA] rounded-lg">
                <h3 className="font-bold text-[#0B1C2D] mb-4 flex items-center gap-2">
                  <CheckCircle2 className="text-[#B8860B]" size={20} />
                  Certifications Available
                </h3>
                <div className="flex flex-wrap gap-2">
                  <Badge variant="secondary">FSSAI Certified</Badge>
                  <Badge variant="secondary">ISO 9001</Badge>
                  <Badge variant="secondary">Phytosanitary Certificate</Badge>
                  <Badge variant="secondary">Certificate of Origin</Badge>
                </div>
              </div>
            </div>
          </div>

          {/* Tabs Section */}
          <div className="mt-16">
            <ProductDetailTabs />
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 bg-[#F5F7FA]">
        <div className="max-w-360 mx-auto px-6">
          <Card className="bg-linear-to-r from-[#0B1C2D] to-[#1a3a52] border-0 text-[#ffffff]">
            <CardContent className="p-12 text-center">
              <h2 className="text-3xl font-bold mb-4">
                Ready to Import Premium Basmati Rice?
              </h2>
              <p className="text-gray-300 mb-8 max-w-2xl mx-auto">
                Get a customized quotation with detailed specifications,
                pricing, and shipping options.
              </p>
              <div className="flex flex-wrap gap-4 justify-center">
                <Link href="/contact">
                  <Button
                    size="lg"
                    className="bg-[#B8860B] hover:bg-[#9A7209] text-[#ffffff] cursor-pointer"
                  >
                    Request Detailed Quote
                  </Button>
                </Link>
                <Link href="/products">
                  <Button
                    size="lg"
                    variant="outline"
                    className="bg-[#ffffff]/10 border-[#ffffff] text-[#ffffff] hover:bg-[#ffffff] hover:text-[#0B1C2D] cursor-pointer"
                  >
                    View More Products
                  </Button>
                </Link>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>
    </div>
  );
}