import Link from 'next/link';
import Image from 'next/image';

export default function AboutPage() {
  return (
    <div style={{ minHeight: '100vh', background: 'var(--white)' }}>
      {/* Inner Banner */}
      <section className="hero" style={{ minHeight: '350px', display: 'flex', alignItems: 'center', paddingTop: '130px' }}>
        <div className="hero-pattern"></div>
        <div className="hero-left" style={{ padding: '0', width: '100%' }}>
          <div className="hero-eyebrow">About VG Fence</div>
          <h1 className="hero-h1" style={{ marginBottom: '16px' }}>Your Trusted <em>Fencing</em> Partner.</h1>
          <p className="hero-sub" style={{ maxWidth: '600px', marginBottom: '0' }}>
            Ontario's dedicated supplier for professional-grade fencing and railing materials.
            Reliability built with every post and panel.
          </p>
        </div>
      </section>

      {/* Our Story Section */}
      <section className="section">
        <div className="container" style={{ maxWidth: '1200px', margin: '0 auto', padding: '0 20px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: '80px', alignItems: 'center' }} className="about-layout">
            <div>
              <div className="section-eyebrow">Our Story</div>
              <h2 className="section-h2" style={{ marginBottom: '32px' }}>A Reputation Built on <span>Reliability.</span></h2>
              <div style={{ fontSize: '17px', color: 'var(--gray-600)', lineHeight: 1.8, display: 'flex', flexDirection: 'column', gap: '20px' }}>
                <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.
                </p>
                <p>
                  All our materials are available in galvanized and black finishes, ensuring durability
                  and long-lasting performance in Canada's diverse climate.
                </p>
                <p style={{ fontStyle: 'italic', color: 'var(--gray-500)', fontSize: '15px' }}>
                  While our focus is primarily on material supply, we also provide installation support for
                  select projects, based on size and scope.
                </p>
              </div>
            </div>

            <div style={{ position: 'relative' }}>
              <div style={{ position: 'relative', width: '100%', height: '500px', borderRadius: '20px', overflow: 'hidden', boxShadow: '0 30px 60px rgba(0,0,0,.1)' }}>
                <Image
                  src="/placeholder.jpg"
                  alt="Quality Fencing"
                  fill
                  style={{ objectFit: 'cover' }}
                />
              </div>
              <div style={{ position: 'absolute', bottom: '-30px', left: '-30px', background: 'var(--navy)', padding: '32px', borderRadius: '12px', color: 'var(--white)', maxWidth: '280px', zIndex: 2 }}>
                <div style={{ fontSize: '40px', fontWeight: 800, color: 'var(--orange)', marginBottom: '8px', fontFamily: 'var(--font-display)' }}>100%</div>
                <div style={{ fontSize: '13px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.1em', lineHeight: 1.4 }}>Professional Grade Materials In Stock</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Mission Section */}
      <section className="section" style={{ background: 'var(--cream)' }}>
        <div className="container" style={{ maxWidth: '800px', margin: '0 auto', padding: '0 20px', textAlign: 'center' }}>
          <div className="section-eyebrow" style={{ margin: '0 auto 16px', justifyContent: 'center' }}>Our Mission</div>
          <h2 className="section-h2" style={{ marginBottom: '32px' }}>Empowering <span>Success.</span></h2>
          <div style={{ background: 'var(--white)', padding: '64px 15px', borderRadius: '20px', boxShadow: '0 10px 30px rgba(0,0,0,.03)' }}>
            <p style={{ fontSize: '24px', color: 'var(--navy)', lineHeight: 1.6, fontWeight: 500, fontFamily: 'var(--font-body)' }}>
              "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 */}
      <section className="section testimonials-section">
        <div className="container" style={{ maxWidth: '1200px', margin: '0 auto', padding: '0 20px', textAlign: 'center' }}>
          <div className="section-eyebrow" style={{ margin: '0 auto 16px', justifyContent: 'center' }}>Testimonials</div>
          <h2 className="section-h2" style={{ color: 'var(--white)' }}>What Our Partners <span>Say.</span></h2>

          <div className="testimonials-grid">
            <div className="testimonial-card">
              <div className="testimonial-quote">"VG Fence consistently delivers high-quality materials on time. Their contractor pricing allows me to stay competitive, and their inventory is unmatched."</div>
              <div className="testimonial-author">Mark S.</div>
              <div className="testimonial-role">Local Fence Contractor</div>
            </div>
            <div className="testimonial-card">
              <div className="testimonial-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."</div>
              <div className="testimonial-author">Sarah L.</div>
              <div className="testimonial-role">Property Manager</div>
            </div>
            <div className="testimonial-card">
              <div className="testimonial-quote">"The team at VG Fence is incredibly knowledgeable. They helped us select the right ornamental fencing for our latest residential development."</div>
              <div className="testimonial-author">David K.</div>
              <div className="testimonial-role">Construction Manager</div>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ Section */}
      <section className="section faq-section">
        <div className="container" style={{ maxWidth: '1200px', margin: '0 auto', padding: '0 20px', textAlign: 'center' }}>
          <div className="section-eyebrow" style={{ margin: '0 auto 16px', justifyContent: 'center' }}>FAQ</div>
          <h2 className="section-h2">Frequently Asked <span>Questions.</span></h2>

          <div className="faq-list" style={{ textAlign: 'left' }}>
            <div className="faq-item">
              <div className="faq-question">Do you offer contractor pricing?</div>
              <div className="faq-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.</div>
            </div>
            <div className="faq-item">
              <div className="faq-question">Do you offer installation services?</div>
              <div className="faq-answer">While our primary focus is supplying high-quality materials, we do provide installation support for select projects based on their size and scope.</div>
            </div>
            <div className="faq-item">
              <div className="faq-question">Where are your materials sourced from?</div>
              <div className="faq-answer">We source professional-grade materials focused on durability, specifically suited for Canada's diverse climate, including robust galvanized and black finish options.</div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="cta-section section-padding" style={{ textAlign: 'center', background: 'var(--navy)', color: 'var(--white)' }}>
        <h2 className="cta-h2">Ready to <span>Build?</span></h2>
        <p className="cta-sub" style={{ opacity: .7 }}>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>
  );
}
