"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { Zap, Award } from "lucide-react";

export default function AboutPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Services", id: "services" },
    { name: "About", id: "about" },
    { name: "Reviews", id: "reviews" },
    { name: "Contact", id: "contact" },
  ];

  const navButton = {
    text: "Call Now",
    href: "tel:+15194441234",
  };

  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="compact"
      sizing="mediumLargeSizeMediumTitles"
      background="noise"
      cardStyle="soft-shadow"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={navItems}
          button={navButton}
          brandName="Local Electric"
        />
      </div>

      {/* About Section */}
      <div id="why-choose" data-section="why-choose">
        <TextSplitAbout
          title="About Local Electric"
          description={[
            "Chris has been serving homeowners in London, Ontario for years with a simple philosophy: be honest, show up on time, and do quality work. He's not here to upsell you or push unnecessary services. Local Electric specializes in residential electrical work and treats your home with the same care he'd give his own.",
            "Every project is handled with professionalism and respect. From quick repairs to complex renovations, we take pride in clean workmanship and clear communication. You'll know what needs to be done and why — no surprises, no pressure, just honest expertise. Our mission is to build lasting relationships with London homeowners through integrity, reliability, and exceptional service.",
          ]}
          buttons={[{ text: "Schedule a Consultation", href: "/contact" }]}
          showBorder={false}
          useInvertedBackground={false}
        />
      </div>

      {/* Trust Bar Section */}
      <div id="trust-bar" data-section="trust-bar">
        <SocialProofOne
          title="Our Commitment to Excellence"
          description="What sets Local Electric apart from the rest"
          tag="Our Values"
          tagIcon={Award}
          names={[
            "✓ Honest, transparent pricing with no hidden costs",
            "✓ Fast response times — typically 30 minutes or less",
            "✓ Professional workmanship on every single job",
            "✓ Available on weekends and for emergencies",
            "✓ Licensed, insured, and fully compliant with code",
            "✓ Real relationships built on trust and reliability",
          ]}
          textboxLayout="default"
          useInvertedBackground={true}
          speed={35}
          showCard={true}
        />
      </div>

      {/* CTA Section */}
      <div id="cta" data-section="cta">
        <ContactCTA
          tag="Ready to Work Together?"
          tagIcon={Zap}
          title="Let's Discuss Your Electrical Needs"
          description="Contact Local Electric today for a free consultation. We'll assess your project and provide honest, straightforward guidance on the best solution for your home."
          buttons={[
            { text: "Call (519) 444-1234", href: "tel:+15194441234" },
            { text: "Request a Consultation", href: "/contact" },
          ]}
          background={{ variant: "noise" }}
          useInvertedBackground={false}
        />
      </div>

      {/* Footer */}
      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Local Electric"
          columns={[
            {
              items: [
                { label: "Home", href: "/" },
                { label: "Services", href: "/services" },
                { label: "About", href: "/about" },
              ],
            },
            {
              items: [
                { label: "Reviews", href: "/reviews" },
                { label: "Contact", href: "/contact" },
                { label: "Emergency Service", href: "tel:+15194441234" },
              ],
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "License & Insurance", href: "#" },
              ],
            },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}