"use client";

import Link from 'next/link';
import Image from 'next/image';
import { useState, useEffect } from 'react';

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

  const testimonials = [
    { quote: "VG Fence consistently delivers high-quality materials on time. Their contractor pricing allows me to stay competitive, and their inventory is unmatched.", author: "Mark S.", role: "Local Fence Contractor" },
    { quote: "Their galvanized and black finish railings are top-notch. It's rare to find a supplier that combines durability with such an aesthetic appeal.", author: "Sarah L.", role: "Property Manager" },
    { quote: "The team at VG Fence is incredibly knowledgeable. They helped us select the right ornamental fencing for our latest residential development.", author: "David K.", role: "Construction Manager" }
  ];

  const nextTestimonial = () => setTestIndex((prev) => (prev + 1) % testimonials.length);
  const prevTestimonial = () => setTestIndex((prev) => (prev - 1 + testimonials.length) % testimonials.length);

  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." },
  ];

  // Auto-slide effect
  useEffect(() => {
    const interval = setInterval(() => {
      nextTestimonial();
    }, 5000); // Change slide every 5 seconds
    
    return () => clearInterval(interval);
  }, [testIndex]); // Reset timer when index changes (manual navigation)

  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">
        <div className="container about-testimonial-container">
          <div className="section-eyebrow about-testimonial-eyebrow">Testimonials</div>
          <h2 className="section-h2 about-testimonial-h2">What Our Partners <span>Say.</span></h2>

          <div className="testimonials-slider">
            <div className="slider-inner" style={{ transform: `translateX(-${testIndex * 100}%)` }}>
              {testimonials.map((test, idx) => (
                <div className="slide" key={idx}>
                  <div className="testimonial-card about-testimonial-card-inner">
                    <div className="testimonial-quote about-testimonial-quote">{test.quote}</div>
                    <div className="testimonial-author about-testimonial-author">{test.author}</div>
                    <div className="testimonial-role about-testimonial-role">{test.role}</div>
                  </div>
                </div>
              ))}
            </div>
            <div className="slider-controls">
              <button className="slider-btn" onClick={prevTestimonial}>&#8592;</button>
              <button className="slider-btn" onClick={nextTestimonial}>&#8594;</button>
            </div>
          </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>
  );
}