"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import { Award, CheckCircle } from "lucide-react";

export default function AboutPage() {
  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="about-story" data-section="about-story">
        <TextSplitAbout
          title="About Five Star Roofing"
          description={[
            "Five Star Roofing was founded on a simple principle: treat every customer like they matter. We're not a corporate roofing company—we're a team of professionals who believe your home deserves excellent care.",            "With over 15 years of combined experience, we've completed thousands of roofing projects for homeowners, property managers, and businesses across the region. Our reputation is built on reliability, transparency, and craftsmanship.",            "We're licensed, insured, and bonded. But more importantly, we're committed to making your roofing experience stress-free from start to finish."]}
          buttons={[
            { text: "Our Services", href: "/services" },
          ]}
          showBorder={true}
          useInvertedBackground={false}
          titleClassName="text-3xl md:text-4xl"
          descriptionClassName="text-base md:text-lg leading-relaxed"
        />
      </div>

      <div id="core-values" data-section="core-values">
        <FeatureCardOne
          title="Our Core Values"
          description="The principles that guide every decision we make"
          tag="What We Stand For"
          tagIcon={Award}
          tagAnimation="slide-up"
          features={[
            {
              title: "Integrity First",              description: "We stand behind our work with honest assessments, transparent pricing, and no hidden charges. What you see is what you get.",              imageSrc: "http://img.b2bpic.net/free-photo/business-people-meeting_53876-25158.jpg?_wi=3",              imageAlt: "Integrity and transparent business practices"},
            {
              title: "Quality Craftsmanship",              description: "Every nail, shingle, and flashing is installed to exacting standards. We use only premium materials and proven techniques.",              imageSrc: "http://img.b2bpic.net/free-photo/long-shot-men-working-together-roof_23-2149343674.jpg?_wi=3",              imageAlt: "Professional craftsmanship and quality work"},
            {
              title: "Customer Care",              description: "You're not a ticket number to us. We listen, we communicate, and we make sure you feel valued throughout the entire process.",              imageSrc: "http://img.b2bpic.net/free-photo/people-working-call-center_23-2149288167.jpg?_wi=3",              imageAlt: "Customer care and professional service"},
          ]}
          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="team-credentials" data-section="team-credentials">
        <FeatureCardOne
          title="Our Team & Credentials"
          description="Licensed professionals with years of roofing expertise and industry certifications"
          tag="Professional Excellence"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          features={[
            {
              title: "Licensed & Insured",              description: "Full licensing in all jurisdictions we serve, plus comprehensive general liability and workers compensation insurance.",              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=3",              imageAlt: "Professional licensing and credentials"},
            {
              title: "Continuous Training",              description: "Our team stays current with the latest roofing techniques, materials, and safety standards through ongoing professional development.",              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=3",              imageAlt: "Professional training and development"},
            {
              title: "Manufacturer Certified",              description: "We're certified installers for leading roofing manufacturers, ensuring your warranty coverage is honored and your project uses genuine materials.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-working-alternative-energy_23-2149311503.jpg?_wi=3",              imageAlt: "Manufacturer certification and partnership"},
          ]}
          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="footer" data-section="footer">
        <FooterBaseReveal
          columns={footerColumns}
          copyrightText="© 2025 Five Star Roofing. All rights reserved. Licensed | Insured | Bonded."
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
}