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";

export default function CustomPinHeaders() {
  const { openQuote } = useQuote();
  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." }
  ];

  return (
    <>
      <SEO
        title="Custom Pin Headers from China | Flexible MOQ | Zeakka"
        description="High-quality custom pin headers from China. All pitch sizes (1.0mm, 1.27mm, 2.0mm, 2.54mm). Fast sampling, flexible MOQ, competitive pricing."
        keywords="pin headers, custom pin headers, pin header manufacturer, through-hole, SMT"
      />
      <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">
                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.
              </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}
              >
                Get a Quote
              </Button>
              <Button size="lg" variant="outline" className="border-white text-white hover:bg-white/10" onClick={openQuote}>
                Request Free Samples
              </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>20+ Years Interconnect Expertise</span>
                </div>
                <div className="flex items-center gap-2">
                  <CheckCircle2 className="w-5 h-5" />
                  <span>Fast Sampling (5-7 Days)</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">
                Pin Header Types
              </h2>
              <p className="text-lg text-muted-foreground">
                All the following types are available in 1.0mm, 1.27mm, 2.0mm and 2.54mm
              </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">
              Why Choose Zeakka?
            </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">Fast Sampling</h3>
                <p className="text-slate-600 leading-relaxed">
                  Get samples in 3-5 days. Iterate quickly without long lead times. Validate your design before committing to production.
                </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">Flexible MOQ</h3>
                <p className="text-slate-600 leading-relaxed">
                  We work with multiple manufacturers to be flexible with your order quantities. Whether you need 2000 units or 100,000, we find the right supplier for your volume.
                </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">Competitive Pricing</h3>
                <p className="text-slate-600 leading-relaxed">
                  We leverage relationships with multiple manufacturers to get you the best price for your volume. No factory markups. Direct pricing.
                </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">
              Frequently Asked Questions
            </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">
              Ready to Get Started?
            </h2>
            <p className="text-lg md:text-xl text-blue-50 mb-8 leading-relaxed max-w-2xl mx-auto">
              Fast sampling. Flexible MOQ. Competitive pricing. Get a quote today—we'll respond within 24 hours.
            </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}
              >
                Get a Quote
              </Button>
              <Button 
                size="lg" 
                variant="outline"
                className="border-white text-white hover:bg-white/10 font-semibold"
                onClick={openQuote}
              >
                Contact Us
              </Button>
            </div>
          </div>
        </section>


      </div>
    </>
  );
}