"use client";

import Link from 'next/link';
import Image from 'next/image';
import { useState, useEffect } from 'react';
import TestimonialSlider1 from '@/components/slider/TestimonialSlider1';
import GoogleReviewsBranding from '@/components/GoogleReviewsBranding';

export default function AboutPage() {
  const [openFaq, setOpenFaq] = useState<number | null>(null);


  const faqs = [
    { question: "Do you offer contractor pricing?", answer: "Yes! We provide dedicated contractor accounts with specialized pricing. You need to create an account and verify your business details to unlock these rates." },
    { question: "Do you offer installation services?", answer: "While our primary focus is supplying high-quality materials, we do provide installation support for select projects based on their size and scope." },
    { question: "Where are your materials sourced from?", answer: "We source professional-grade materials focused on durability, specifically suited for Canada's diverse climate, including robust galvanized and black finish options." },
    { question: "Do you offer delivery across Ontario?", answer: "Yes, we provide reliable delivery services across Ontario for both residential and commercial projects. Delivery times depend on the order size and location." },
    { question: "Can I order custom gate sizes?", answer: "Absolutely. We specialize in custom gate fabrication. You can provide us with your specific dimensions and requirements, and we will manufacture them to fit your project perfectly." },
  ];

  return (
    <div className="about-page-wrapper">
      {/* Inner Banner */}
      <section className="inner-banner fade-up">
        <div className="inner-banner-content">
          <h1 className="section-h2">Your Trusted <span>Fencing</span> Partner</h1>
          <div className="banner-breadcrumb" style={{ marginTop: '30px', marginBottom: '0' }}>
            <Link href="/">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
              Home
            </Link>
            <span className="separator">/</span>
            <span>About Us</span>
          </div>
        </div>
      </section>

      {/* Our Story Section */}
      <section className="about-section section">
        <div className="container about-story-container">
          <div className="about-story-layout">
            <div>
              <div className="section-eyebrow">Our Story</div>
              <h2 className="section-h2 about-story-h2">Your Trusted <span>Fencing </span>Partner</h2>
              <div className="about-story-text">
                <p>
                  At VG Fence, we are dedicated to providing high-quality fencing and railing materials to contractors, property managers, event organizers, and homeowners. With years of experience in the industry, we have built a reputation as a reliable supplier for both commercial and residential projects.
                </p>
                <p>
                  We stock and supply a comprehensive range of fence products, including chain link fences, temporary fencing, ornamental fences, wood fence hardware, gates, railings, deck products, and privacy screens. All our materials are available in galvanized and black finishes, ensuring durability and long-lasting performance. 
                </p>
                <p>
                  While our focus is primarily on material supply, we also provide installation support for select projects, based on size and scope.
                </p>
                <div style={{ marginTop: '40px' }}>
                  <Link href="/products" className="btn-primary">Learn More</Link>
                </div>
              </div>
            </div>

            <div className="about-image-column">
              <div className="about-image-wrapper">
                <Image
                  src="/assets/about-fencing.png"
                  alt="Quality modern fencing in a beautiful garden"
                  fill
                  className="about-image-cover"
                />
              </div>
              <div className="floating-card about-floating-card" style={{ padding: '30px', maxWidth: '450px' }}>
                <div className="section-eyebrow" style={{ color: 'var(--orange)', marginBottom: '12px' }}>Our Mission</div>
                <div className="about-floating-card-text" style={{ fontSize: '15px', lineHeight: '1.6', fontWeight: '500' }}>
                  To supply premium fencing and railing materials that combine quality, durability, and convenience, helping every project — large or small — succeed. 
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Mission Section */}
      {/* <section className="section about-mission-section">
        <div className="container about-mission-container">
          <div className="section-eyebrow about-mission-eyebrow">Our Mission</div>
          <h2 className="section-h2 about-mission-h2">Empowering <span>Success.</span></h2>
          <div className="about-mission-card">
            <p className="about-mission-text">
              "To supply premium fencing and railing materials that combine quality, durability, and convenience,
              helping every project — large or small — succeed."
            </p>
          </div>
        </div>
      </section> */}

      {/* Testimonial Section (Slider) */}
      <section className="section testimonials-section" style={{ background: 'var(--navy)', position: 'relative', overflow: 'hidden' }}>
        <div className="container about-testimonial-container">
          <div className="section-eyebrow about-testimonial-eyebrow">Google Reviews</div>
          <h2 className="section-h2 about-testimonial-h2">What Our Clients <span>Say.</span></h2>
          <div style={{ marginBottom: '40px' }}>
            <GoogleReviewsBranding centered />
          </div>

          <TestimonialSlider1 />

          <div style={{ marginTop: '40px' }}>
            <Link 
              href="https://www.google.com/search?sca_esv=6bb65fbe9023ef87&sxsrf=ANbL-n7Ve21NawyEFVl0VCb-UwWxayNm3A:1776516772856&si=AL3DRZEsmMGCryMMFSHJ3StBhOdZ2-6yYkXd_doETEE1OR-qOTPu8cN1oNUaKv4BbC8Z5S1BLRCdnCt5Nb6lKq1rerL_NXx8OrNRKd02CSVf6yuKHtX_YpWGoFVyHFR27ursRTkGKr3U5Uqzch13z9mC5g--Y6I0hA%3D%3D&q=VG+Fence+Products+Reviews&sa=X&ved=2ahUKEwi62LvZuPeTAxU_SGwGHZJiC4QQ0bkNegQIKRAH&cshid=1776516821214282&biw=1366&bih=633&dpr=1" 
              target="_blank" 
              rel="noopener noreferrer" 
              className="btn-primary"
            >
              Review us on Google
            </Link>
          </div>
        </div>
      </section>

      {/* FAQ Section (Accordion) */}
      <section className="section faq-section">
        <div className="container about-faq-container">
          <div className="section-eyebrow about-faq-eyebrow">FAQ</div>
          <h2 className="section-h2 about-faq-h2">Frequently Asked <span>Questions.</span></h2>

          <div className="faq-accordion">
            {faqs.map((faq, idx) => (
              <div className="faq-item" key={idx}>
                <div 
                  className="faq-header" 
                  onClick={() => setOpenFaq(openFaq === idx ? null : idx)}
                >
                  <div className="faq-question">{faq.question}</div>
                  <div className={`faq-icon ${openFaq === idx ? 'open' : ''}`}>
                    &#9662;
                  </div>
                </div>
                <div className={`faq-answer-collapse ${openFaq === idx ? 'open' : ''}`}>
                  <div className="faq-answer-inner">
                    {faq.answer}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      {/* <section className="cta-section section-padding about-cta-section">
        <h2 className="cta-h2">Ready to <span>Build?</span></h2>
        <p className="cta-sub about-cta-sub">Explore Ontario's most reliable inventory of fencing products.</p>
        <div className="cta-btns">
          <Link href="/products" className="btn-primary">View Full Catalog</Link>
          <Link href="/contact" className="btn-white-outline">Contact Us</Link>
        </div>
      </section> */}
    </div>
  );
}