"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroSplitDualMedia from "@/components/sections/hero/HeroSplitDualMedia";
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import BlogCardThree from "@/components/sections/blog/BlogCardThree";
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import { Sparkles, Award, Wrench, CheckCircle, Star, HelpCircle, Image as ImageIcon, Camera, FileText, Calendar, ThumbsUp } from "lucide-react";

export default function HomePage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Services", id: "services" },
    { name: "Our Process", id: "process" },
    { name: "Projects", id: "projects" },
    { name: "Reviews", id: "reviews" },
    { name: "About", id: "about" },
  ];

  const footerColumns = [
    {
      title: "Services",      items: [
        { label: "Residential Roofing", href: "#services" },
        { label: "Roof Repairs", href: "#services" },
        { label: "Storm Damage", href: "#services" },
        { label: "Commercial Roofing", href: "#services" },
        { label: "Property Manager Program", href: "#property-manager" },
      ],
    },
    {
      title: "Company",      items: [
        { label: "About Us", href: "/about" },
        { label: "Our Process", href: "#process" },
        { label: "Projects", href: "#projects" },
        { label: "Reviews", href: "#reviews" },
        { label: "Contact", href: "/contact" },
      ],
    },
    {
      title: "Legal",      items: [
        { label: "Privacy Policy", href: "#" },
        { label: "Terms of Service", href: "#" },
        { label: "Warranty Information", href: "#" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="mediumLargeSizeLargeTitles"
      background="floatingGradient"
      cardStyle="inset"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          navItems={navItems}
          brandName="Five Star Roofing"
          button={{
            text: "Get Free Inspection",            href: "#contact"}}
          buttonClassName="px-4 py-2 rounded-full font-semibold hover:shadow-lg transition-all"
          buttonTextClassName="font-bold"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitDualMedia
          title="Five-Star Roofing, Without the Stress"
          description="I treat you like a person, not a job. You get a clean, professional process from inspection to final walkthrough—so you can relax knowing it's handled."
          background={{ variant: "plain" }}
          tag="Premium Roofing Service"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          buttons={[
            { text: "Get a Free Roof Inspection", href: "#contact" },
            { text: "Call Now", href: "tel:+1234567890" },
          ]}
          buttonAnimation="slide-up"
          mediaItems={[
            {
              imageSrc: "http://img.b2bpic.net/free-photo/long-shot-men-working-together-roof_23-2149343674.jpg?_wi=1",              imageAlt: "Professional roofing crew on site"},
            {
              imageSrc: "http://img.b2bpic.net/free-photo/specialist-technician-professional-engineer-with-laptop-tablet-maintenance-checking-installing-solar-roof-panel-factory-rooftop-sunlight-engineers-team-survey-check-solar-panel-roof_609648-2202.jpg?_wi=1",              imageAlt: "Detailed roof inspection process"},
          ]}
          mediaAnimation="blur-reveal"
          rating={5}
          ratingText="5.0 Rating | Fast Response | Clean Sites | Photo Updates"
          className="min-h-screen"
          titleClassName="text-5xl md:text-7xl"
          descriptionClassName="text-lg md:text-xl max-w-2xl"
          ratingClassName="flex items-center gap-2"
        />
      </div>

      <div id="values" data-section="values">
        <FeatureCardOne
          title="Why Homeowners & Property Managers Stay With Us"
          description="Three core principles that define Five Star Roofing's commitment to excellence and customer care"
          tag="Our Foundation"
          tagIcon={Award}
          tagAnimation="slide-up"
          features={[
            {
              title: "Human-First Service",              description: "You're not another ticket—you're taken care of. We treat every client with the respect and attention they deserve.",              imageSrc: "http://img.b2bpic.net/free-photo/people-working-call-center_23-2149288167.jpg?_wi=1",              imageAlt: "Professional customer service team"},
            {
              title: "Organized & Professional Systems",              description: "Clear timelines, clean communication, no chaos. We manage every detail so you don't have to worry.",              imageSrc: "http://img.b2bpic.net/free-photo/business-people-meeting_53876-25158.jpg?_wi=1",              imageAlt: "Business team meeting and planning"},
            {
              title: "Problems Found Before They Grow",              description: "We catch issues you didn't even know existed. Preventative care saves you money and stress down the road.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-female-engineer-hand-controling-robot-arm-welding-machine-industrial-40-modern-factory-backgroundsmart-female-engineer-inspect-quality-control-factory_609648-856.jpg?_wi=1",              imageAlt: "Quality control and inspection process"},
          ]}
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground={false}
          cardTitleClassName="text-4xl md:text-5xl"
          cardDescriptionClassName="text-lg text-gray-600"
        />
      </div>

      <div id="services" data-section="services">
        <ProductCardTwo
          title="Our Services"
          description="Comprehensive roofing solutions for every need"
          tag="Premium Services"
          tagIcon={Wrench}
          tagAnimation="slide-up"
          products={[
            {
              id: "1",              brand: "Residential",              name: "Roof Replacement & Upgrades",              price: "Full Assessment Required",              rating: 5,
              reviewCount: "200+",              imageSrc: "http://img.b2bpic.net/free-photo/closeup-roof-house-made-wooden-tiles_169016-24747.jpg?_wi=1",              imageAlt: "Residential roof replacement project"},
            {
              id: "2",              brand: "Repairs",              name: "Repairs & Leak Detection",              price: "Fast, Accurate Service",              rating: 5,
              reviewCount: "180+",              imageSrc: "http://img.b2bpic.net/free-photo/male-worker-operating-machinery-factory_107420-96043.jpg?_wi=1",              imageAlt: "Leak detection and repair process"},
            {
              id: "3",              brand: "Insurance Support",              name: "Storm Damage & Insurance Claims",              price: "Complete Documentation",              rating: 5,
              reviewCount: "150+",              imageSrc: "http://img.b2bpic.net/free-photo/view-abandoned-decaying-house-nature_23-2150166560.jpg?_wi=1",              imageAlt: "Storm damage assessment and documentation"},
            {
              id: "4",              brand: "Commercial",              name: "Commercial Roofing Solutions",              price: "Low-Disruption Service",              rating: 5,
              reviewCount: "120+",              imageSrc: "http://img.b2bpic.net/free-photo/agricultural-silo_146671-19121.jpg?_wi=1",              imageAlt: "Commercial roofing project"},
            {
              id: "5",              brand: "Property Mgmt",              name: "Property Manager Program",              price: "Multi-Property Support",              rating: 5,
              reviewCount: "95+",              imageSrc: "http://img.b2bpic.net/free-photo/indoor-objects-company-background-papers_1304-2624.jpg?_wi=1",              imageAlt: "Property manager scheduling and reporting"},
          ]}
          textboxLayout="default"
          gridVariant="two-columns-alternating-heights"
          animationType="slide-up"
          useInvertedBackground={false}
          textBoxTitleClassName="text-4xl md:text-5xl"
          textBoxDescriptionClassName="text-lg text-gray-600"
        />
      </div>

      <div id="process" data-section="process">
        <MetricCardThree
          title="The Five Star Process"
          description="Your journey from worry to complete peace of mind in five simple steps"
          tag="Our Proven System"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          metrics={[
            { id: "1", icon: Camera, title: "Inspection & Photos", value: "Same-Day Options" },
            { id: "2", icon: FileText, title: "Clear Plan & Quote", value: "No Surprises" },
            { id: "3", icon: Calendar, title: "Schedule & Prep", value: "You Know What's Next" },
            { id: "4", icon: Wrench, title: "Install/Repair", value: "Clean & Professional" },
            { id: "5", icon: ThumbsUp, title: "Final Walkthrough", value: "Warranty Included" },
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          textBoxTitleClassName="text-4xl md:text-5xl"
          textBoxDescriptionClassName="text-lg text-gray-600"
        />
      </div>

      <div id="reviews" data-section="reviews">
        <TestimonialCardOne
          title="What Our Customers Say"
          description="Real feedback from homeowners and property managers who trust Five Star Roofing"
          tag="Customer Testimonials"
          tagIcon={Star}
          tagAnimation="slide-up"
          testimonials={[
            {
              id: "1",              name: "Sarah Mitchell",              role: "Homeowner",              company: "Residential Client",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg?_wi=1",              imageAlt: "Sarah Mitchell testimonial"},
            {
              id: "2",              name: "James Rodriguez",              role: "Property Manager",              company: "Multi-Unit Management",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg?_wi=1",              imageAlt: "James Rodriguez testimonial"},
            {
              id: "3",              name: "Emily Chen",              role: "Business Owner",              company: "Commercial Building",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg?_wi=2",              imageAlt: "Emily Chen testimonial"},
            {
              id: "4",              name: "Michael Thompson",              role: "Homeowner",              company: "Insurance Claim Support",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg?_wi=2",              imageAlt: "Michael Thompson testimonial"},
            {
              id: "5",              name: "Lisa Anderson",              role: "Property Manager",              company: "Portfolio of 50+ Units",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg?_wi=3",              imageAlt: "Lisa Anderson testimonial"},
            {
              id: "6",              name: "David Park",              role: "Homeowner",              company: "Storm Recovery",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg?_wi=3",              imageAlt: "David Park testimonial"},
          ]}
          textboxLayout="default"
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground={false}
          textBoxTitleClassName="text-4xl md:text-5xl"
          textBoxDescriptionClassName="text-lg text-gray-600"
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout
          title="Managing Multiple Properties? We're Built for That."
          description={[
            "Our Property Manager Program is designed specifically for busy professionals managing multiple units. We handle everything—from priority scheduling to comprehensive photo documentation and detailed reporting.",            "Priority scheduling across your entire portfolio. Photo documentation and visual reporting for every project. Preventative inspections on a regular cadence. Simple invoicing with consistent communication and transparent pricing. No surprises, no complications.",            "Join dozens of property managers who've streamlined their roofing operations with Five Star."]}
          buttons={[
            { text: "Request a Property Manager Quote", href: "/contact" },
          ]}
          showBorder={true}
          useInvertedBackground={false}
          titleClassName="text-3xl md:text-4xl"
          descriptionClassName="text-base md:text-lg leading-relaxed"
        />
      </div>

      <div id="projects" data-section="projects">
        <BlogCardThree
          title="Project Gallery"
          description="Real projects completed for satisfied homeowners and businesses"
          tag="Our Work"
          tagIcon={ImageIcon}
          tagAnimation="slide-up"
          blogs={[
            {
              id: "1",              category: "Leak Repair",              title: "Leak Repair & Flashing Correction",              excerpt: "Precision flashing installation that stopped a persistent leak and restored peace of mind.",              imageSrc: "http://img.b2bpic.net/free-photo/old-rusty-metallic-surface_23-2148846057.jpg",              imageAlt: "Leak repair project",              authorName: "Five Star Team",              authorAvatar: "http://img.b2bpic.net/free-photo/portrait-businessman-office-2_1262-1488.jpg",              date: "2025-01-15"},
            {
              id: "2",              category: "Replacement",              title: "Full Roof Replacement with Architectural Shingles",              excerpt: "Complete roof replacement with premium materials and architectural shingles for superior durability.",              imageSrc: "http://img.b2bpic.net/free-photo/man-walking-roof_1321-1041.jpg",              imageAlt: "Full roof replacement project",              authorName: "Five Star Team",              authorAvatar: "http://img.b2bpic.net/free-photo/portrait-businessman-office-2_1262-1488.jpg",              date: "2025-01-10"},
            {
              id: "3",              category: "Storm Damage",              title: "Storm Damage Assessment & Insurance Documentation",              excerpt: "Professional assessment and thorough documentation to support your insurance claim.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-working-alternative-energy_23-2149311503.jpg?_wi=1",              imageAlt: "Storm damage assessment project",              authorName: "Five Star Team",              authorAvatar: "http://img.b2bpic.net/free-photo/portrait-businessman-office-2_1262-1488.jpg",              date: "2025-01-05"},
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          textBoxTitleClassName="text-4xl md:text-5xl"
          textBoxDescriptionClassName="text-lg text-gray-600"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Find answers to common questions about our roofing services"
          tag="Support"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          faqs={[
            {
              id: "1",              title: "How fast can you come out for an inspection?",              content: "We offer same-day and next-day inspection options for most emergencies. For routine inspections, we typically schedule within 3-5 business days. Call us directly for urgent situations."},
            {
              id: "2",              title: "Do you provide photos of the issues?",              content: "Absolutely. We provide comprehensive photo documentation of all findings during inspection. For every project, we take before, during, and after photos so you can see exactly what was done."},
            {
              id: "3",              title: "What does the inspection include?",              content: "Our thorough inspection covers structural integrity, flashing condition, drainage systems, existing damage, and potential issues. We'll give you a detailed report with photos and clear recommendations."},
            {
              id: "4",              title: "Do you help with insurance claims?",              content: "Yes. We provide professional documentation, photos, and detailed assessments to support your insurance claim. We work directly with your insurance company when needed."},
            {
              id: "5",              title: "How long does a roof replacement take?",              content: "Most residential replacements take 1-3 days depending on roof size and complexity. We'll give you a specific timeline during the initial consultation."},
            {
              id: "6",              title: "What warranties do you offer?",              content: "We provide a 10-year workmanship warranty on all installations, plus manufacturer warranties on materials (typically 25-40 years depending on shingles chosen)."},
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/young-support-customer-woman-talking-into-headset-microphone-with-call-center-customer-while-working-startup-company-office-caucasian-female-consultant-providing-telemarketing-service_482257-28282.jpg?_wi=1"
          imageAlt="Customer support representative helping homeowner"
          mediaAnimation="blur-reveal"
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          mediaPosition="left"
          textBoxTitleClassName="text-4xl md:text-5xl"
          textBoxDescriptionClassName="text-lg text-gray-600"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={footerColumns}
          copyrightText="© 2025 Five Star Roofing. All rights reserved. Licensed | Insured | Bonded."
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
}