import Layout from "@/components/Layout";
import HeroConversion from "@/components/HeroConversion";
import RentalInquiryBanner from "@/components/RentalInquiryBanner";
import HowItWorksSection from "@/components/HowItWorksSection";
import ServicesPreview from "@/components/ServicesPreview";
import SocialProofSection from "@/components/SocialProofSection";
import GlobalSiteSchema from "@/components/GlobalSiteSchema";
import FAQSchema from "@/components/FAQSchema";
import HomepageCTAForm from "@/components/HomepageCTAForm";
import HomepageTestimonials from "@/components/HomepageTestimonials";
import BlogPreview from "@/components/BlogPreview";
import ConsultationCTA from "@/components/ConsultationCTA";
import WeddingStylesGallery from "@/components/WeddingStylesGallery";
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui/accordion";
import { Button } from "@/components/ui/button";
import { Link } from "react-router-dom";

const Index = () => {
  const faqItems = [
    {
      question: "Do you ship nationwide?",
      answer: "Yes! We ship luxury faux wedding flowers to all 50 states via FedEx or UPS. Most orders arrive within 3–5 business days in custom protective packaging."
    },
    {
      question: "How far in advance should I book?",
      answer: "We recommend 3–6 months before your wedding for custom designs. Rush orders with 4–6 weeks notice are also available."
    },
    {
      question: "What if something arrives damaged?",
      answer: "Every order ships in custom protective packaging. If anything arrives less than perfect, contact us immediately and we'll make it right—100% satisfaction guaranteed."
    },
    {
      question: "Can you help with color matching?",
      answer: "Absolutely! Use our free Color Match tool or send us your inspiration photos. We'll help you find the perfect palette for your wedding vision."
    }
  ];

  return (
    <Layout
      title="Silk Wedding Bouquets & Faux Flower Rentals Shipped Nationwide | Forever Flowers by Val"
      description="Handcrafted silk wedding bouquets, artificial bridal bouquets, bridesmaid bouquets, boutonnieres & faux wedding flower rentals. Wedding flower packages ship to all 50 states."
      keywords="silk wedding bouquets, faux wedding flower rentals, artificial bridal bouquets, bridesmaid bouquets, wedding flower packages, wedding bouquets boutonnieres"
      canonical="/"
    >
      <div className="min-h-screen bg-gradient-to-b from-pink-50 to-white">
        <main id="main-content" role="main">
          <GlobalSiteSchema />

          {/* A) Hero */}
          <HeroConversion />
          <RentalInquiryBanner />

          {/* B) How It Works */}
          <HowItWorksSection />

          {/* C) Collections / Packages Preview */}
          <ServicesPreview />

          {/* C2) Wedding Styles */}
          <WeddingStylesGallery />

          {/* Consultation CTA */}
          <ConsultationCTA />

          {/* D) Reviews + Bride Photos */}
          <SocialProofSection />

          {/* E) FAQ */}
          <section className="py-14 md:py-20 px-4 bg-white">
            <div className="max-w-3xl mx-auto">
              <div className="text-center mb-8">
                <h2 className="text-2xl md:text-3xl font-serif text-pink-900 mb-2">
                  Frequently Asked Questions
                </h2>
              </div>

              <Accordion type="single" collapsible className="space-y-3">
                {faqItems.map((faq, index) => (
                  <AccordionItem 
                    key={index} 
                    value={`item-${index}`}
                    className="bg-gradient-to-r from-pink-50 to-white border border-pink-200 rounded-lg px-6 shadow-sm"
                  >
                    <AccordionTrigger className="text-left text-base font-semibold text-gray-900 hover:text-rose-700">
                      {faq.question}
                    </AccordionTrigger>
                    <AccordionContent className="text-gray-700 leading-relaxed pt-1 text-sm">
                      {faq.answer}
                    </AccordionContent>
                  </AccordionItem>
                ))}
              </Accordion>
            </div>
          </section>

          <FAQSchema faqItems={faqItems} />

          {/* G) Blog Preview */}
          <BlogPreview />

          {/* F) Final CTA Form */}
          <HomepageTestimonials />
          <section className="py-14 md:py-20 px-4 bg-gradient-to-b from-pink-50 to-white">
            <div className="max-w-2xl mx-auto text-center mb-8">
              <h2 className="text-2xl md:text-3xl font-serif text-pink-900 mb-2">
                Let's Design Your Dream Wedding Flowers
              </h2>
              <p className="text-gray-600 mb-6">
                Check availability and pricing for your wedding date.
              </p>
              <Button
                asChild
                className="bg-[#D0576B] hover:bg-[#B94D5F] text-white font-bold py-6 px-10 text-lg md:text-xl rounded-xl shadow-2xl ring-2 ring-white/40 transition-all duration-300 hover:scale-[1.02] focus-visible:ring-4 focus-visible:ring-rose-200"
              >
                <Link to="/quote" aria-label="Request a free wedding flowers quote">
                  Request a Free Quote →
                </Link>
              </Button>
            </div>
            <HomepageCTAForm />
            <p className="mt-8 text-center text-sm md:text-base font-serif italic text-gray-600 max-w-2xl mx-auto">
              Prefer to reach out directly? Email us at{" "}
              <a
                href="mailto:info@foreverflowersbyval.com"
                className="text-rose-700 hover:text-rose-900 underline underline-offset-2"
              >
                info@foreverflowersbyval.com
              </a>{" "}
              and we'll get back to you within 24 hours.
            </p>
          </section>
        </main>
      </div>
    </Layout>
  );
};

export default Index;