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";
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 FemaleHeaders() {
  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('female-headers', {
    title: "Female Headers | Custom Connector Solutions",
    metaDescription: "High-quality female headers for interconnect applications. All pitch sizes available. 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 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
  }));

  const slugMap = {
    en: '/female-headers',
    es: '/es/conectores-hembra',
    de: '/de/buchsenleisten',
  };

  return (
    <>
      <SEO
        title={translation.title}
        description={translation.metaDescription}
        keywords="female headers, custom female headers, female header manufacturer, through-hole, SMT"
      />
      <HreflangLinks pageKey="female-headers" slugMap={slugMap} />
      <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">
                {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("manufacturerPrice")}</span>
                </div>
                <div className="flex items-center gap-2">
                  <CheckCircle2 className="w-5 h-5" />
                  <span>{s("premiumQuality")}</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">
                {s("femaleHeaderTypes")}
              </h2>
              <p className="text-lg text-muted-foreground">
                {s("femaleHeaderTypesSubtitle")}
              </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">
              {s("whyChooseZeakka")}
            </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">{s("premiumQuality")}</h3>
                <p className="text-slate-600 leading-relaxed">
                  {locale === 'es' ? 'Control de calidad estricto en cada etapa. Todos los productos cumplen con los estándares internacionales y las especificaciones del cliente.' : locale === 'de' ? 'Strenge Qualitätskontrolle in jeder Phase. Alle Produkte erfüllen internationale Standards und Kundenspezifikationen.' : '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">{locale === 'es' ? 'Soporte de Muestras Gratis' : locale === 'de' ? 'Kostenlose Muster' : 'Free Samples Support'}</h3>
                <p className="text-slate-600 leading-relaxed">
                  {locale === 'es' ? 'Obtenga muestras gratuitas para evaluar nuestros productos antes de realizar pedidos al por mayor. Apoyamos su proceso de validación.' : locale === 'de' ? 'Erhalten Sie kostenlose Muster, um unsere Produkte zu bewerten, bevor Sie Großbestellungen aufgeben. Wir unterstützen Ihren Validierungsprozess.' : '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">{locale === 'es' ? 'Tiempo de Entrega 2-3 Semanas' : locale === 'de' ? '2-3 Wochen Lieferzeit' : '2-3 Weeks Lead Time'}</h3>
                <p className="text-slate-600 leading-relaxed">
                  {locale === 'es' ? 'Producción y entrega rápidas. La mayoría de los pedidos se completan en 2-3 semanas, llevando sus productos al mercado rápidamente.' : locale === 'de' ? 'Schnelle Produktion und Lieferung. Die meisten Bestellungen werden innerhalb von 2-3 Wochen abgeschlossen, sodass Ihre Produkte schnell auf den Markt kommen.' : '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">
              {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">
              {locale === 'es' ? 'Conectores hembra de calidad premium. Precios mayoristas. Muestras gratuitas. Obtenga una cotización hoy—responderemos en 24 horas.' : locale === 'de' ? 'Premium-Qualität Buchsenleisten. Großhandelspreise. Kostenlose Muster. Fordern Sie noch heute ein Angebot an – wir antworten innerhalb von 24 Stunden.' : '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}
              >
                {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>
    </>
  );
}