"use client";

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

export default function ManufacturingPage() {
  return (
    <div className="about-page-wrapper">
      <section className="inner-banner">
        <h1 className="inner-banner-title">Job Order <span>Manufacturing.</span></h1>
        <div className="inner-banner-breadcrumbs">
          <Link href="/">Home</Link>
          <span>/</span>
          Manufacturing
        </div>
      </section>

      {/* Intro Section */}
      <section className="about-section section">
        <div className="container about-story-container">
          <div className="about-story-layout">
            <div>
              <div className="section-eyebrow">Our Capabilities</div>
              <h2 className="section-h2 about-story-h2">Bulk & Job Order <span>Manufacturing</span></h2>
              <div className="about-story-text">
                <p>
                  VG Fence specializes in bulk and job order manufacturing for contractors, developers, and businesses.
                </p>
                <p>
                  From residential and commercial gates to brackets or custom metal components, we handle production from start to finish — ensuring high-quality, durable products delivered on time.
                </p>
                <div style={{ marginTop: '40px' }}>
                  <Link href="/contact" className="btn-primary">
                    Get a custom quote today for your next project →
                  </Link>
                </div>
              </div>
            </div>

            <div className="about-image-column">
              <div className="about-image-wrapper">
                <Image
                  src="/assets/manufacturing-hero.png"
                  alt="Industrial metal fabrication and manufacturing"
                  fill
                  className="about-image-cover"
                />
              </div>
              <div className="floating-card about-floating-card">
                <div className="about-floating-card-100">Fence Solutions</div>
                {/* <div className="about-floating-card-text">Fence Solutions</div> */}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Services Grid */}
      <section className="section" style={{ background: 'var(--gray-100)' }}>
        <div className="container">
          <div style={{ textAlign: 'center', marginBottom: '80px' }}>
            <div className="section-eyebrow center">What We Build</div>
            <h2 className="section-h2">Specialized <span>Production.</span></h2>
          </div>
          
          <div className="mfg-grid">
            {/* Gates */}
            <div className="mfg-card">
              <div style={{ padding: '12px', background: 'rgba(221,107,32,0.1)', borderRadius: '12px', width: '48px', height: '48px', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: '24px' }}>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--orange)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M12 3v18"/><path d="M3 12h18"/></svg>
              </div>
              <h3 className="section-h2">Residential & <span>Commercial Gates</span></h3>
              <ul className="service-list">
                <li>Sliding, swing, and decorative gates</li>
                <li>Custom sizes and finishes</li>
                <li>Galvanized or powder-coated for durability</li>
                <li>Factory-fabricated for precise fit and fast installation</li>
              </ul>
            </div>

            {/* Components */}
            <div className="mfg-card">
              <div style={{ padding: '12px', background: 'rgba(221,107,32,0.1)', borderRadius: '12px', width: '48px', height: '48px', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: '24px' }}>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--orange)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
              </div>
              <h3 className="section-h2">Brackets, Rails & <span>Metal Components</span></h3>
              <ul className="service-list">
                <li>Fence brackets, mounting hardware, rail supports</li>
                <li>Custom metal components for all types of projects</li>
                <li>Bulk manufacturing for contractors and developers</li>
                <li>High-quality steel with consistent dimensions</li>
              </ul>
            </div>

            {/* Bulk Orders */}
            <div className="mfg-card">
              <div style={{ padding: '12px', background: 'rgba(221,107,32,0.1)', borderRadius: '12px', width: '48px', height: '48px', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: '24px' }}>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--orange)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 9h18v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9Z"/><path d="m3 9 2.45-4.91A2 2 0 0 1 7.24 3h9.52a2 2 0 0 1 1.79 1.09L21 9"/><path d="M12 3v6"/></svg>
              </div>
              <h3 className="section-h2">Bulk & <span>Job Orders</span></h3>
              <ul className="service-list">
                <li>Large-scale production for commercial or municipal projects</li>
                <li>Pre-assembled material bundles for faster execution</li>
                <li>Optional customization for dimensions and finishes</li>
                <li>Competitive pricing for bulk quantities</li>
              </ul>
            </div>

            {/* Fabrication */}
            <div className="mfg-card">
              <div style={{ padding: '12px', background: 'rgba(221,107,32,0.1)', borderRadius: '12px', width: '48px', height: '48px', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: '24px' }}>
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--orange)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76Z"/></svg>
              </div>
              <h3 className="section-h2">Full Fabrication <span>Works</span></h3>
              <ul className="service-list">
                <li>Cutting, bending, welding, and finishing</li>
                <li>Custom fabrication for any size requirement</li>
                <li>Assistance with finishing touches for panels and accessories</li>
                <li>Ensures every product meets durability standards</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="cta-section about-cta-section">
        <div className="container">
          <h2 className="cta-h2">Get Your <span>Custom Quote</span> Today</h2>
          <p className="cta-sub">
            Fill out our job order & fabrication request form or call <strong style={{ color: 'var(--navy)' }}>226-888-7999</strong> to discuss your bulk and custom fabrication needs.
          </p>
          <div className="cta-btns">
            <Link href="/contact" className="btn-primary">Contact Us Now</Link>
            <a href="tel:2268887999" className="btn-white-outline">Call Us Today</a>
          </div>
        </div>
      </section>
    </div>
  );
}