"use client";
import Link from "next/link";
import { Shield, Clock } from "lucide-react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

export default function StormDamagePage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="largeSmall"
      background="noiseDiagonalGradient"
      cardStyle="inset"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "/" },
            { name: "Services", id: "/services" },
            { name: "Storm Damage", id: "/storm-damage" },
            { name: "Projects", id: "/projects" },
            { name: "Contact", id: "/contact" }
          ]}
          brandName="Viking Construction"
          bottomLeftText="Licensed & Insured"
          bottomRightText="Fast Response • Insurance Support"
        />
      </div>

      {/* Storm Damage & Insurance Information */}
      <div id="storm-insurance" data-section="storm-insurance">
        <TextSplitAbout
          title="Storm Damage & Insurance Made Simple"
          description={[
            "Storm damage doesn't just mean roof repairs—it means navigating insurance, protecting your home, and getting clear answers fast.",
            "I document damage professionally with photos and detailed scope notes that insurers respect. I help identify hail and wind impacts, coordinate supplements when needed, and support you through the entire claim process.",
            "You won't feel lost or overwhelmed. I handle the technical details so you can focus on getting your home back to normal."
          ]}
          buttons={[
            { text: "Schedule Storm Inspection", href: "/contact" }
          ]}
          showBorder={true}
          useInvertedBackground={false}
          ariaLabel="Storm damage and insurance support section"
        />
      </div>

      {/* Storm Response Process */}
      <div id="storm-process" data-section="storm-process">
        <MetricCardTwo
          metrics={[
            {
              id: "1",
              value: "24 Hours",
              description: "Emergency response time for urgent storm damage"
            },
            {
              id: "2",
              value: "Free",
              description: "Storm damage inspections with detailed photo reports"
            },
            {
              id: "3",
              value: "Full Support",
              description: "Insurance claim coordination and documentation"
            }
          ]}
          title="Storm Damage Response"
          description="Fast, professional storm damage assessment and insurance support when you need it most."
          gridVariant="uniform-all-items-equal"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          ariaLabel="Storm damage response metrics"
        />
      </div>

      {/* Contact for Storm Services */}
      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Storm Emergency"
          title="Need Immediate Storm Damage Assessment?"
          description="Don't wait when storm damage threatens your home. Get a professional inspection and clear documentation for your insurance claim."
          tagIcon={Shield}
          tagAnimation="slide-up"
          background={{ variant: "gradient-bars" }}
          useInvertedBackground={false}
          imageSrc="http://img.b2bpic.net/free-photo/family-legal-advisor-explaining-document-details-mature-father-adult-daughter_74855-9879.jpg"
          imageAlt="Storm damage assessment and insurance support"
          mediaAnimation="slide-up"
          mediaPosition="right"
          inputPlaceholder="Enter your email for quick response"
          buttonText="Request Emergency Inspection"
          termsText="24/7 emergency response available. We prioritize storm damage calls."
          ariaLabel="Storm damage emergency contact form"
        />
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          columns={[
            {
              items: [
                { label: "Home", href: "/" },
                { label: "Services", href: "/services" },
                { label: "Storm Damage", href: "/storm-damage" },
                { label: "Projects", href: "/projects" }
              ]
            },
            {
              items: [
                { label: "About Us", href: "/about" },
                { label: "Inspections", href: "/services" },
                { label: "Starlink Mounting", href: "/services" },
                { label: "Contact", href: "/contact" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "/privacy" },
                { label: "Terms of Service", href: "/terms" },
                { label: "Warranty Info", href: "/warranty" },
                { label: "Insurance FAQ", href: "/faq" }
              ]
            },
            {
              items: [
                { label: "Call Us", href: "tel:1-800-ROOFING" },
                { label: "Text Us", href: "sms:1-800-ROOFING" },
                { label: "Email Support", href: "mailto:support@vikingconstruction.com" },
                { label: "24/7 Emergency", href: "tel:1-800-ROOFING" }
              ]
            }
          ]}
          logoText="Viking Construction"
          ariaLabel="Site footer with navigation and contact links"
        />
      </div>
    </ThemeProvider>
  );
}