import { useState } from "react";
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 } from "lucide-react";
import { useQuote } from "@/contexts/QuoteContext";
import { SEO } from "@/components/SEO";
import { StructuredData, generateFAQSchema } from "@/components/StructuredData";

export default function FemaleHeaders() {
  const { openQuote } = useQuote();
  const [openFaq, setOpenFaq] = useState<string | null>(null);

  const femaleHeaderTypes = [
    {
      title: "Single row, straight, through-hole",
      image: "https://wp.zeakka.com/wp-content/uploads/single-row-straight-through-hole-female-header.png.webp",
    },
    {
      title: "Single row, right angle, through-hole",
      image: "https://wp.zeakka.com/wp-content/uploads/single-row-right-angle-through-hole-female-header.png.webp",
    },
    {
      title: "Single row, straight, SMT",
      image: "https://wp.zeakka.com/wp-content/uploads/single-row-top-entry-SMT-female-header.png.webp",
    },
    {
      title: "Single row, right angle, SMT",
      image: "https://wp.zeakka.com/wp-content/uploads/single-row-side-entry-SMT-female-header.png.webp",
    },
    {
      title: "Single row, additional wafer",
      image: "https://wp.zeakka.com/wp-content/uploads/single-row-straight-through-hole-dual-wafer-female-header.png.webp",
    },
    {
      title: "Dual row, straight, through-hole",
      image: "https://wp.zeakka.com/wp-content/uploads/dual-row-straight-through-hole-female-header.png.webp",
    },
    {
      title: "Dual row, right angle, through-hole",
      image: "https://wp.zeakka.com/wp-content/uploads/dual-row-right-angle-through-hole-female-header.png.webp",
    },
    {
      title: "Dual row, straight, SMT",
      image: "https://wp.zeakka.com/wp-content/uploads/dual-row-top-entry-SMT-female-header.png.webp",
    },
    {
      title: "Dual row, right angle, SMT",
      image: "https://wp.zeakka.com/wp-content/uploads/dual-row-side-entry-SMT-female-header.png.webp",
    },
    {
      title: "Dual row, additional wafer",
      image: "https://wp.zeakka.com/wp-content/uploads/dual-row-straight-through-hole-dual-wafer-female-header.png.webp",
    },
    {
      title: "Triple row female headers",
      image: "https://wp.zeakka.com/wp-content/uploads/triple-row-straight-through-hoe-female-header.png.webp",
    },
    {
      title: "U-shape female headers",
      image: "https://wp.zeakka.com/wp-content/uploads/U-type-female-headers.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 female 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 female 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 female headers are finished in 2-3 weeks.",
    },
    {
      question: "What's the HS code for female headers?",
      answer: "HS code is 853690.",
    },
  ];

  const faqDataForSchema = faqItems.map(item => ({
    question: item.question,
    answer: item.answer
  }));

  return (
    <>
      <SEO
        title="Female Headers from China | Wholesale Price | Zeakka"
        description="Standard and custom female headers at pitch 1.0mm, 1.27mm, 2.0mm, and 2.54mm. Single-row and dual-row, through-hole and SMT types. Premium quality, free samples, 2-3 weeks lead time."
        keywords="female headers, custom female headers, female header manufacturer, through-hole, SMT"
      />
      <StructuredData data={generateFAQSchema(faqDataForSchema)} />
      <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 Female Headers from China
              </h1>
              <p className="text-lg md:text-xl mb-8 text-slate-300 leading-relaxed">
                Standard and custom female headers at pitch 1.0mm, 1.27mm, 2.0mm, and 2.54mm. Single-row and dual-row, through-hole and SMT types.
              </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>Manufacturer Wholesale Price</span>
                </div>
                <div className="flex items-center gap-2">
                  <CheckCircle2 className="w-5 h-5" />
                  <span>Premium Quality</span>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Female 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">
                Female 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">
              {femaleHeaderTypes.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">
              {/* Premium Quality */}
              <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">
                  <CheckCircle2 className="w-6 h-6 text-blue-600" />
                </div>
                <h3 className="text-xl font-bold mb-4 text-slate-900">Premium Quality</h3>
                <p className="text-slate-600 leading-relaxed">
                  Strict quality control at every stage. All products meet international standards and customer specifications.
                </p>
              </Card>

              {/* Free Samples Support */}
              <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">Free Samples Support</h3>
                <p className="text-slate-600 leading-relaxed">
                  Get free samples to evaluate our products before placing bulk orders. We support your validation process.
                </p>
              </Card>

              {/* Fast Lead Time */}
              <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">
                  <Zap className="w-6 h-6 text-orange-600" />
                </div>
                <h3 className="text-xl font-bold mb-4 text-slate-900">2-3 Weeks Lead Time</h3>
                <p className="text-slate-600 leading-relaxed">
                  Fast production and delivery. Most orders completed within 2-3 weeks, getting your products to market quickly.
                </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">
              Premium quality female headers. Wholesale pricing. Free samples. 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>
    </>
  );
}