"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import AboutMetric from '@/components/sections/about/AboutMetric';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Award, Clock, CheckCircle, DollarSign } from 'lucide-react';

export default function AboutPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="small"
      sizing="large"
      background="circleGradient"
      cardStyle="solid"
      primaryButtonStyle="flat"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Y&B Roofing Inc."
          navItems={[
            { name: "Home", id: "/" },
            { name: "Services", id: "/services" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <AboutMetric
          title="Built on Integrity. Known for Results. At Y&B Roofing Inc., we believe your roof deserves more than a quick fix. It deserves precision craftsmanship, honest pricing, and a team that shows up when others won't."
          useInvertedBackground={false}
          metricsAnimation="slide-up"
          metrics={[
            { icon: Award, label: "Years Experience", value: "15+" },
            { icon: Clock, label: "Projects Completed", value: "1000+" },
            { icon: CheckCircle, label: "Satisfied Customers", value: "98%" },
            { icon: DollarSign, label: "Licensed & Insured", value: "100%" }
          ]}
        />
      </div>

      <div id="why-yb" data-section="why-yb">
        <MetricCardFourteen
          title="Why Homeowners Trust Y&B Roofing. Fast response even in winter. Honest, transparent pricing. Clear communication start to finish. Skilled, professional crew. Clean job sites. Repairs done properly—not temporarily."
          tag="Commitment to Excellence"
          tagAnimation="blur-reveal"
          useInvertedBackground={true}
          metricsAnimation="slide-up"
          metrics={[
            {
              id: "1",              value: "Winter Ready",              description: "Available year-round, including harsh winter months when others won't work."
            },
            {
              id: "2",              value: "Transparent Pricing",              description: "No hidden fees. Fair estimates. No inflated quotes—just honest roofing."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get Started"
          title="Your Roof Protects Everything. Let's Protect Your Roof."
          description="Schedule your free inspection today. Our team is ready to help with fast, honest, professional service."
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
          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"
          imageAlt="Professional roofing team ready to help"
          mediaAnimation="slide-up"
          mediaPosition="right"
          inputPlaceholder="Enter your email for a free inspection quote"
          buttonText="Schedule Inspection"
          termsText="We'll contact you within 24 hours. We respect your privacy and never share your information."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="Y&B Roofing Inc."
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Terms of Service", href: "#" }}
        />
      </div>
    </ThemeProvider>
  );
}