import Link from "next/link";
import { Badge } from "@/src/components/ui/badge";
import { Button } from "@/src/components/ui/button";
import { Card, CardContent } from "@/src/components/ui/card";
import { FileText, CreditCard, Ship, CheckCircle2, Settings } from "lucide-react";
import type { Metadata } from "next";
import Image from "next/image";

export const metadata: Metadata = {
  title: "For Buyers - Import from India Guide | Payment & Shipping Terms",
  description:
    "Complete buyer guide for importing from India. Learn about payment terms (LC, TT), shipping terms (FOB, CIF, EXW), required export documents, and our quality assurance process.",
  keywords: [
    "import from India",
    "buyer guide India",
    "payment terms import",
    "LC payment",
    "FOB shipping",
    "CIF terms",
    "export documents India",
    "quality assurance",
  ],
  alternates: {
    canonical: "/for-buyers",
  },
  openGraph: {
    title: "For Buyers - Import from India Guide",
    description:
      "Complete guide for importing from India. Payment terms, shipping options, and quality assurance.",
    type: "website",
  },
};

export default function ForBuyers() {
  const paymentTerms = [
    { title: "Letter of Credit (LC)", description: "Secure payment through internationally recognized banks with full documentation" },
    { title: "Telegraphic Transfer (TT)", description: "Direct bank transfer with advance payment or payment against documents" },
    { title: "Advance Payment", description: "Partial or full advance payment as mutually agreed" },
  ];

  const shippingTerms = [
    { term: "FOB", full: "Free on Board", description: "Seller delivers goods on board vessel. Buyer pays freight and insurance." },
    { term: "CIF", full: "Cost, Insurance & Freight", description: "Seller pays for freight and insurance to destination port." },
    { term: "EXW", full: "Ex Works", description: "Buyer collects goods from seller's premises and handles all shipping." },
  ];

  const documents = [
    "Commercial Invoice", "Packing List", "Bill of Lading / Airway Bill", "Certificate of Origin",
    "Phytosanitary Certificate (if applicable)", "Quality Certificate (COA)", "MSDS (Material Safety Data Sheet)",
    "Fumigation Certificate (when required)", "Insurance Certificate", "Export License / IEC Certificate",
  ];

  return (
    <div className="bg-[#ffffff]">
      <section className="relative h-175 md:h-150 flex items-center bg-[#0B1C2D]">
        <div className="absolute inset-0 bg-linear-to-r from-[#0B1C2D] to-[#1a3a52] pointer-events-none"></div>
        <div className="relative z-10 max-w-360 mx-auto px-6 w-full">
          <Badge className="mb-4 bg-[#ffffff]/10 text-[#ffffff] hover:bg-[#ffffff]/20">
            For Buyers
          </Badge>
          <h1 className="text-5xl font-bold text-[#ffffff] mb-6">
            {"Import from India – Buyer Information Guide"}
          </h1>
          <p className="text-xl text-gray-300 max-w-3xl">
            Complete guide for buyers importing from India including payment
            terms, documentation, shipping options and quality control process
          </p>
        </div>
      </section>

      <section className="py-20">
        <div className="max-w-360 mx-auto px-6">
          <div className="flex items-center gap-3 mb-8">
            <div className="w-12 h-12 bg-[#B8860B]/10 rounded-lg flex items-center justify-center">
              <CreditCard className="text-[#B8860B]" size={24} />
            </div>
            <div>
              <h2 className="text-3xl font-bold text-[#0B1C2D]">
                Payment Terms
              </h2>
              <p className="text-gray-600">
                Flexible payment options for international buyers
              </p>
            </div>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            {paymentTerms.map((term, index) => (
              <Card
                key={index}
                className="border-2 hover:border-[#B8860B] transition-colors"
              >
                <CardContent className="p-6">
                  <h3 className="font-bold text-[#0B1C2D] mb-3">
                    {term.title}
                  </h3>
                  <p className="text-gray-600 text-sm leading-relaxed">
                    {term.description}
                  </p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      <section className="py-20 bg-[#F5F7FA]">
        <div className="max-w-360 mx-auto px-6">
          <div className="flex items-center gap-3 mb-8">
            <div className="w-12 h-12 bg-[#B8860B]/10 rounded-lg flex items-center justify-center">
              <Ship className="text-[#B8860B]" size={24} />
            </div>
            <div>
              <h2 className="text-3xl font-bold text-[#0B1C2D]">
                Shipping Terms (Incoterms)
              </h2>
              <p className="text-gray-600">
                International commercial terms for export shipments
              </p>
            </div>
          </div>
          <div className="grid md:grid-cols-3 gap-8">
            {shippingTerms.map((term, index) => (
              <Card key={index} className="border-0 shadow-lg">
                <CardContent className="p-6">
                  <div className="text-3xl font-bold text-[#B8860B] mb-2">
                    {term.term}
                  </div>
                  <h3 className="font-bold text-[#0B1C2D] mb-3">{term.full}</h3>
                  <p className="text-gray-600 text-sm leading-relaxed">
                    {term.description}
                  </p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      <section className="py-20">
        <div className="max-w-360 mx-auto px-6">
          <div className="flex items-center gap-3 mb-8">
            <div className="w-12 h-12 bg-[#B8860B]/10 rounded-lg flex items-center justify-center">
              <FileText className="text-[#B8860B]" size={24} />
            </div>
            <div>
              <h2 className="text-3xl font-bold text-[#0B1C2D]">
                Export Documentation
              </h2>
              <p className="text-gray-600">
                Complete documentation support for customs clearance
              </p>
            </div>
          </div>
          <Card className="border-0 shadow-lg">
            <CardContent className="p-8">
              <div className="grid md:grid-cols-2 gap-x-8 gap-y-4">
                {documents.map((doc, index) => (
                  <div key={index} className="flex items-center gap-3">
                    <CheckCircle2
                      className="text-[#B8860B] shrink-0"
                      size={20}
                    />
                    <span className="text-gray-700">{doc}</span>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

      <section className="py-20 bg-[#F5F7FA]">
        <div className="max-w-360 mx-auto px-6">
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <div>
              <div className="flex items-center gap-3 mb-6">
                <div className="w-12 h-12 bg-[#B8860B]/10 rounded-lg flex items-center justify-center">
                  <Settings className="text-[#B8860B]" size={24} />
                </div>
                <h2 className="text-3xl font-bold text-[#0B1C2D]">
                  Quality Inspection Process
                </h2>
              </div>
              <div className="space-y-6">
                <div>
                  <h3 className="font-bold text-[#0B1C2D] mb-2">
                    Pre-Shipment Inspection
                  </h3>
                  <p className="text-gray-600 leading-relaxed">
                    Third-party inspection available to verify product quality,
                    quantity, and compliance before shipment.
                  </p>
                </div>
                <div>
                  <h3 className="font-bold text-[#0B1C2D] mb-2">
                    Quality Certifications
                  </h3>
                  <p className="text-gray-600 leading-relaxed">
                    All products come with quality certificates (COA) and
                    compliance documentation as per destination country
                    requirements.
                  </p>
                </div>
                <div>
                  <h3 className="font-bold text-[#0B1C2D] mb-2">
                    SGS / Bureau Veritas Inspection
                  </h3>
                  <p className="text-gray-600 leading-relaxed">
                    {
                      "International inspection agencies can be arranged for buyer's peace of mind."
                    }
                  </p>
                </div>
              </div>
            </div>
            <div className="relative h-100 rounded-lg overflow-hidden shadow-lg">
              <Image
                src="/images/buyer-1.jpg"
                alt="Sample Image"
                width={500}
                height={300}
                className="w-full h-full object-cover"
              />
            </div>
          </div>
        </div>
      </section>

      <section className="py-20">
        <div className="max-w-360 mx-auto px-6">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-[#0B1C2D] mb-4">
              Customization Options
            </h2>
            <p className="text-gray-600 max-w-2xl mx-auto">
              We offer flexible customization to meet your specific requirements
            </p>
          </div>
          <div className="grid md:grid-cols-4 gap-6">
            {[
              {
                title: "Private Labeling",
                description: "Custom branding and packaging",
              },
              {
                title: "Product Specifications",
                description: "Tailor products to your needs",
              },
              {
                title: "Packaging Design",
                description: "Custom packaging solutions",
              },
              {
                title: "Quality Standards",
                description: "Meet specific quality requirements",
              },
            ].map((option, index) => (
              <Card
                key={index}
                className="text-center border-2 hover:border-[#B8860B] transition-colors"
              >
                <CardContent className="p-6">
                  <h3 className="font-bold text-[#0B1C2D] mb-2">
                    {option.title}
                  </h3>
                  <p className="text-gray-600 text-sm">{option.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      <section className="py-20 bg-[#0B1C2D] text-[#ffffff]">
        <div className="max-w-360 mx-auto px-6 text-center">
          <h2 className="text-4xl font-bold mb-4">
            Ready to Start Importing from India?
          </h2>
          <p className="text-gray-300 mb-8 max-w-2xl mx-auto">
            Our trade desk is ready to assist with product sourcing, compliance,
            and logistics.
          </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 a 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"
              >
                Browse Products
              </Button>
            </Link>
          </div>
        </div>
      </section>
    </div>
  );
}