import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { ChevronDown, CheckCircle2, Package, Zap, Globe } from "lucide-react";
import { useQuote } from "@/contexts/QuoteContext";
import { SEO } from "@/components/SEO";
import { StructuredData, generateFAQSchema } from "@/components/StructuredData";
import { useState } from "react";
import { usePageTranslation } from "@/hooks/usePageTranslation";
import { useLocale } from "@/contexts/LocaleContext";
import { getProductPageText } from "@/lib/productPageTranslations";
import { getProductSectionText } from "@/lib/productSectionTranslations";
import { HreflangLinks } from "@/components/HreflangLinks";

export default function CustomPinHeaders() {
  const { locale } = useLocale();
  const t = (key: keyof typeof import('@/lib/productPageTranslations').productPageTranslations.en) => 
    getProductPageText(locale as any, key);
  const s = (key: keyof typeof import('@/lib/productSectionTranslations').productSectionTranslations.en) =>
    getProductSectionText(locale as any, key);
  const { openQuote } = useQuote();
  const { translation } = usePageTranslation('custom-pin-headers', {
    title: "Custom Pin Headers from China | Flexible MOQ | Zeakka",
    metaDescription: "High-quality custom pin headers from China. All pitch sizes (1.0mm, 1.27mm, 2.0mm, 2.54mm). Fast sampling, flexible MOQ, competitive pricing.",
    content: "Flexible MOQ. Competitive pricing. All pitch sizes available (1.0mm, 1.27mm, 2.0mm, 2.54mm). From through-hole to SMT, straight to right-angle configurations.",
  });
  const [openFaq, setOpenFaq] = useState<string | null>(null);

  const pinHeaderTypes = [
    {
      title: "Single row, single wafer, straight, through-hole",
      image: "https://wp.zeakka.com/wp-content/uploads/single-row-single-wafer-straight-through-hole-pin-header.png",
    },
    {
      title: "Single row, single wafer, right angle, through-hole",
      image: "https://wp.zeakka.com/wp-content/uploads/single-row-single-wafer-right-angle-through-hole-pin-header.png.webp",
    },
    {
      title: "Single row, single wafer, straight, SMT",
      image: "https://wp.zeakka.com/wp-content/uploads/single-row-single-wafer-straight-SMT-pin-header.png.webp",
    },
    {
      title: "Single row, single wafer, right angle, SMT",
      image: "https://wp.zeakka.com/wp-content/uploads/single-row-single-wafer-right-angle-SMT-pin-header.png.webp",
    },
    {
      title: "Dual row, single wafer, straight, through-hole",
      image: "https://wp.zeakka.com/wp-content/uploads/dual-row-single-wafer-straight-through-hole-pin-header.png.webp",
    },
    {
      title: "Dual row, single wafer, right angle, through-hole",
      image: "https://wp.zeakka.com/wp-content/uploads/dual-row-single-wafer-right-angle-through-hole-pin-header.png.webp",
    },
    {
      title: "Dual row, single wafer, straight, SMT",
      image: "https://wp.zeakka.com/wp-content/uploads/dual-row-single-wafer-straight-SMT-pin-header.png.webp",
    },
    {
      title: "Dual row, single wafer, right angle, SMT",
      image: "https://wp.zeakka.com/wp-content/uploads/dual-row-single-wafer-right-angle-SMT-pin-header.png.webp",
    },
    {
      title: "Single row, dual wafer, straight, through-hole",
      image: "https://wp.zeakka.com/wp-content/uploads/single-row-dual-wafer-straight-through-hole-pin-header.png.webp",
    },
    {
      title: "Single row, dual wafer, right angle, through-hole",
      image: "https://wp.zeakka.com/wp-content/uploads/single-row-dual-wafer-right-angle-through-hole-pin-header.png.webp",
    },
    {
      title: "Single row, dual wafer, straight, SMT",
      image: "https://wp.zeakka.com/wp-content/uploads/single-row-dual-wafer-straight-SMT-pin-header.png.webp",
    },
    {
      title: "Single row, dual wafer, right angle, SMT",
      image: "https://wp.zeakka.com/wp-content/uploads/single-row-dual-wafer-right-angle-SMT-pin-header.png.webp",
    },
    {
      title: "Dual row, dual wafer, straight, through-hole",
      image: "https://wp.zeakka.com/wp-content/uploads/dual-row-dual-wafer-straight-through-hole-pin-header.png.webp",
    },
    {
      title: "Dual row, dual wafer, right angle, through-hole",
      image: "https://wp.zeakka.com/wp-content/uploads/dual-row-dual-wafer-right-angle-through-hole-pin-header.png.webp",
    },
    {
      title: "Dual row, dual wafer, straight, SMT",
      image: "https://wp.zeakka.com/wp-content/uploads/dual-row-dual-wafer-straight-SMT-pin-header.png.webp",
    },
    {
      title: "Dual row, dual wafer, right angle, SMT",
      image: "https://wp.zeakka.com/wp-content/uploads/dual-row-dual-wafer-right-angle-SMT-pin-header.png.webp",
    },
    {
      title: "Shrouded male pin headers (also known as box headers)",
      image: "https://wp.zeakka.com/wp-content/uploads/top-entry-SMT-box-header-1.png.webp",
    },
    {
      title: "Shrouded IDC ejector pin headers",
      image: "https://wp.zeakka.com/wp-content/uploads/ejector-pin-header.png.webp",
    },
  ];

  const faqItems = [
    {
      question: "How to work with us?",
      answer: "Step 1: Inquiry and quote. Send us your drawings or descriptions of the assemblies you would like to make, and quantities. We will quote according to your specifications.\n\nStep 2: Samples preparing. We will make samples according to your specifications and send them to you for your inspections.\n\nStep 3: Contract. Once samples approved, you may want bulk order. Place your order and we will make a contract (or proforma invoice) with lead time and payment information.\n\nStep 4: Production. When prepayment is confirmed, we will start production.\n\nStep 5: Delivery. For small cargo, you can authorize us to use your DHL/FedEx/UPS/TNT account for shipping, or you can pay us shipping cost and we will do the shipping. It's always cheaper to use shipping agents in China. For big cargo, by sea or by train is more economical but takes more time.\n\nStep 6: After-sales service.",
    },
    {
      question: "What is the standard package of pin headers?",
      answer: "Through-hole type: inner package is PE bag.\n\nSMT type: inner package is tape & reel with pick and place cap for automatic assembling machine",
    },
    {
      question: "What's the MOQ (Minimum Order Quantity) of custom pin headers?",
      answer: "The MOQ is 2000-10000pcs according to the specifications.",
    },
    {
      question: "How many pieces can I get for free samples?",
      answer: "About 20 pieces for free samples. You will be responsible for shipping.",
    },
    {
      question: "How long does it take for me to receive the samples?",
      answer: "It takes about a week to arrange the samples. And it usually takes about a week for shipping.",
    },
    {
      question: "What's the standard lead time for bulk order?",
      answer: "It depends on the specification, and quantity of your order. 98%+ of our orders of custom pin headers are finished in 20 working days.",
    },
    {
      question: "What's the HS code for pin headers?",
      answer: "HS code is 853690.",
    },
  ];

  const faqData = [
    { question: "What pitch sizes are available for custom pin headers?", answer: "We offer pin headers in all standard pitch sizes: 1.0mm, 1.27mm, 2.0mm, and 2.54mm. Custom pitches can be discussed for larger orders." },
    { question: "Do you offer both through-hole and SMT pin headers?", answer: "Yes, we provide both through-hole and SMT (surface mount) pin headers to meet different assembly requirements." },
    { question: "What is the minimum order quantity (MOQ) for custom pin headers?", answer: "Our flexible MOQ starts from 1000 pieces. For specific requirements or smaller quantities, please contact our sales team." },
    { question: "Can I get free samples of custom pin headers?", answer: "Yes, we offer free samples to qualified customers. Please submit your sample request through our quote form." },
    { question: "What is the typical lead time for custom pin headers?", answer: "Standard lead time is 5-7 days for sampling and 2-3 weeks for production orders, depending on complexity." },
    { question: "Do you provide technical support for pin header design?", answer: "Yes, our engineering team provides DFM (Design for Manufacturability) feedback and technical support throughout the project." },
    { question: "What materials and certifications do your pin headers have?", answer: "We use high-quality materials with UL certifications and RoHS compliance. Specific material and certification requirements can be discussed based on your application." }
  ];

  const slugMap = {
    en: '/custom-pin-headers',
    es: '/es/cabezales-de-pines-personalizados',
    de: '/de/stiftleisten-nach-mass',
  };

  return (
    <>
      <SEO
        title={translation.title}
        description={translation.metaDescription}
        keywords="pin headers, custom pin headers, pin header manufacturer, through-hole, SMT"
      />
      <HreflangLinks pageKey="custom-pin-headers" slugMap={slugMap} />
      <StructuredData data={generateFAQSchema(faqData)} />
      <div className="min-h-screen bg-slate-50">
        {/* Hero Section */}
        <section className="relative bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 overflow-hidden py-16 md:py-20">
          {/* Background placeholder */}
          <div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 via-transparent to-cyan-500/10 pointer-events-none" />
          <div className="absolute top-0 right-0 w-96 h-96 bg-blue-500/5 rounded-full blur-3xl" />
          <div className="absolute bottom-0 left-0 w-96 h-96 bg-cyan-500/5 rounded-full blur-3xl" />
          <div className="container relative z-10">
            <div className="max-w-3xl mx-auto text-center text-white">
              <h1 className="text-4xl md:text-5xl font-bold mb-6 leading-tight">
                Quality Custom Pin Headers from China
              </h1>
              <p className="text-lg md:text-xl mb-8 text-slate-300 leading-relaxed">
                {translation.content}
              </p>

              {/* CTAs */}
              <div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
              <Button 
                size="lg" 
                className="bg-blue-600 hover:bg-blue-700 text-white"
                onClick={openQuote}
              >
                {s("getAQuote")}
              </Button>
              <Button size="lg" variant="outline" className="border-white text-white hover:bg-white/10" onClick={openQuote}>
                {s("requestFreeSamples")}
              </Button>
              </div>

              {/* Trust Badges */}
              <div className="flex flex-col sm:flex-row gap-6 justify-center text-sm text-slate-400">
                <div className="flex items-center gap-2">
                  <CheckCircle2 className="w-5 h-5" />
                  <span>{s("yearsExpertise")}</span>
                </div>
                <div className="flex items-center gap-2">
                  <CheckCircle2 className="w-5 h-5" />
                  <span>{s("fastSampling")}</span>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Pin Header Types Section */}
        <section className="py-16 md:py-24 bg-white">
          <div className="container mx-auto px-4">
            <div className="text-center mb-12">
              <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
                {s("pinHeaderTypes")}
              </h2>
              <p className="text-lg text-muted-foreground">
                {s("pinHeaderTypesSubtitle")}
              </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              {pinHeaderTypes.map((item, index) => (
                <Card key={index} className="p-0 border border-border hover:border-blue-300 transition-all hover:shadow-lg overflow-hidden flex flex-col h-full">
                  <div className="w-full bg-slate-100 flex-shrink-0 h-48 flex items-center justify-center">
                    <img 
                      src={item.image} 
                      alt={item.title}
                      loading="lazy"
                      className="w-full h-full object-contain p-4 hover:scale-105 transition-transform duration-300"
                    />
                  </div>
                  <div className="px-4 py-1 flex-grow flex items-center">
                    <p className="text-sm text-foreground font-medium">{item.title}</p>
                  </div>
                </Card>
              ))}
            </div>
          </div>
        </section>

        {/* Core Value Propositions */}
        <section className="py-16 md:py-20 bg-slate-50">
          <div className="container mx-auto px-4">
            <h2 className="text-3xl md:text-4xl font-bold text-center mb-12 text-slate-900">
              {s("whyChooseZeakka")}
            </h2>

            <div className="grid md:grid-cols-3 gap-8">
              {/* Fast Sampling */}
              <Card className="p-8 hover:shadow-lg transition-shadow">
                <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-6">
                  <Zap className="w-6 h-6 text-blue-600" />
                </div>
                <h3 className="text-xl font-bold mb-4 text-slate-900">{s("fastSamplingTitle")}</h3>
                <p className="text-slate-600 leading-relaxed">
                  {s("fastSamplingDesc")}
                </p>
              </Card>

              {/* Flexible MOQ */}
              <Card className="p-8 hover:shadow-lg transition-shadow">
                <div className="w-12 h-12 bg-teal-100 rounded-lg flex items-center justify-center mb-6">
                  <Package className="w-6 h-6 text-teal-600" />
                </div>
                <h3 className="text-xl font-bold mb-4 text-slate-900">{s("flexibleMoqTitle")}</h3>
                <p className="text-slate-600 leading-relaxed">
                  {s("flexibleMoqDesc")}
                </p>
              </Card>

              {/* Competitive Pricing */}
              <Card className="p-8 hover:shadow-lg transition-shadow">
                <div className="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mb-6">
                  <Globe className="w-6 h-6 text-orange-600" />
                </div>
                <h3 className="text-xl font-bold mb-4 text-slate-900">{s("competitivePricingTitle")}</h3>
                <p className="text-slate-600 leading-relaxed">
                  {s("competitivePricingDesc")}
                </p>
              </Card>
            </div>
          </div>
        </section>

        {/* FAQ Section */}
        <section className="py-16 md:py-24 bg-white">
          <div className="container mx-auto px-4 max-w-3xl">
            <h2 className="text-3xl md:text-4xl font-bold text-center mb-12 text-slate-900">
              {s("frequentlyAskedQuestions")}
            </h2>

            <div className="space-y-4">
              {faqItems.map((item, index) => (
                <Collapsible
                  key={index}
                  open={openFaq === item.question}
                  onOpenChange={() =>
                    setOpenFaq(openFaq === item.question ? null : item.question)
                  }
                >
                  <CollapsibleTrigger className="w-full">
                    <div className="flex items-center justify-between p-4 bg-slate-50 hover:bg-slate-100 rounded-lg transition-colors">
                      <h3 className="text-lg font-semibold text-slate-900 text-left">
                        {item.question}
                      </h3>
                      <ChevronDown
                        className={`w-5 h-5 text-slate-600 transition-transform ${
                          openFaq === item.question ? "rotate-180" : ""
                        }`}
                      />
                    </div>
                  </CollapsibleTrigger>
                  <CollapsibleContent className="p-4 bg-white border border-slate-200 border-t-0 rounded-b-lg">
                    <p className="text-slate-600 whitespace-pre-line leading-relaxed">
                      {item.answer}
                    </p>
                  </CollapsibleContent>
                </Collapsible>
              ))}
            </div>
          </div>
        </section>

        {/* CTA Section */}
        <section className="py-20 md:py-28 bg-gradient-to-r from-blue-600 to-cyan-500">
          <div className="container max-w-4xl mx-auto px-4 text-center">
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
              {s("readyToGetStarted")}
            </h2>
            <p className="text-lg md:text-xl text-blue-50 mb-8 leading-relaxed max-w-2xl mx-auto">
              {s("ctaSubtitle")}
            </p>
            
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Button 
                size="lg" 
                className="bg-white text-blue-600 hover:bg-slate-100 font-semibold"
                onClick={openQuote}
              >
                {s("getAQuote")}
              </Button>
              <Button 
                size="lg" 
                variant="outline"
                className="border-white text-white hover:bg-white/10 font-semibold"
                onClick={openQuote}
              >
                {s("contactUs")}
              </Button>
            </div>
          </div>
        </section>


      </div>
    </>
  );
}