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

export const metadata = {
  title: "Fence Rentals | VG Fence Products",
  description: "Temporary fence rentals for construction sites, events, and security perimeters. Flexible rental terms and quick delivery.",
};

export default function RentalsPage() {
  const products = [
    { name: "Temporary Fence Panels", desc: "Durable and easy to assemble", img: "/assets/temp-fence-panel.png" },
    { name: "Temporary Fence Gates", desc: "Single or double swing gates", img: "/assets/about-fencing.png" },
    { name: "Fence Wheels", desc: "Smooth movement for gate panels", img: "/assets/manufacturing-hero.png" },
    { name: "Wind Bracing", desc: "Prevent fence panels from tipping", img: "/assets/about-fencing.png" },
    { name: "Fence Bases", desc: "Concrete, rubber, or plastic bases for stability", img: "/assets/manufacturing-hero.png" },
    { name: "Fence Clamps & Accessories", desc: "Secure connections for panels", img: "/assets/about-fencing.png" },
    { name: "Sandbags / Ballast", desc: "Extra stability for windy or busy areas", img: "/assets/manufacturing-hero.png" },
    { name: "Debris & Safety Netting", desc: "Optional add-ons for construction sites", img: "/assets/about-fencing.png" },
  ];

  const applications = [
    { id: 1, title: "Construction Sites", desc: "Keep workers and equipment secure" },
    { id: 2, title: "Events and Festivals", desc: "Crowd control and perimeter fencing" },
    { id: 3, title: "Sports and Film Production", desc: "Temporary barriers for staff and public safety" },
    { id: 4, title: "Short-Term and Long-Term Projects", desc: "Flexible rental periods" },
  ];

  return (
    <div className="rentals-page">
      {/* ── INNER BANNER ── */}
      <section className="inner-banner fade-up">
        <div className="inner-banner-content">
          <h1 className="section-h2">Fence <span>Rentals</span></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>Rentals</span>
          </div>
        </div>
      </section>

      {/* ── INTRO SECTION (REDESIGNED) ── */}
      <section className="section rental-intro">
        <div className="container">
          <div className="about-story-layout" style={{ alignItems: 'center' }}>
            <div className="about-story-text" style={{ textAlign: 'left' }}>
              <div className="section-eyebrow">FENCE RENTALS</div>
              <h2 className="section-h2" style={{ fontSize: '48px', lineHeight: '1.1', marginBottom: '30px' }}>
                Temporary Fence Rentals for <span>Construction, Events, and Security</span>
              </h2>
              <p style={{ fontSize: '16px', color: 'var(--gray-600)', lineHeight: '1.8', marginBottom: '24px' }}>
                VG Fence provides high-quality temporary fencing solutions for contractors, event organizers, and property managers. Our rentals are flexible, reliable, and designed to secure construction sites, public events, and temporary perimeters. 
              </p>
              
              <div style={{ display: 'flex', alignItems: 'center', gap: '15px', padding: '15px 20px', background: 'rgba(232,87,42,0.05)', borderLeft: '4px solid var(--orange)', borderRadius: '4px', marginBottom: '32px' }}>
                {/* <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--orange)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg> */}
                <span style={{ fontSize: '15px', fontWeight: 700, color: 'var(--navy)' }}>Installation support for temporary fences is available for select projects</span>
              </div>
              
              {/* <div className="progress-container">
                <div className="circular-progress">
                  <span className="progress-value">85%</span>
                </div>
                <div className="progress-info">
                  <h4>Satisfied Customer</h4>
                  <p>Reliable support for contractors and event managers across Ontario projects.</p>
                </div>
              </div> */}
            </div>

            <div className="about-image-column">
              <div className="about-image-wrapper" style={{ padding: '15px', background: 'var(--white)', boxShadow: '0 30px 60px rgba(0,0,0,0.1)', borderRadius: '4px' }}>
                <Image
                  src="/assets/about-fencing.png"
                  alt="Industrial fencing installation experts"
                  fill
                  style={{ objectFit: 'cover', borderRadius: '2px' }}
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── PRODUCTS SECTION ── */}
      <section className="section rental-products" style={{ background: 'var(--gray-100)' }}>
        <div className="container">
          <div style={{ textAlign: 'center', marginBottom: '60px' }}>
            <div className="section-eyebrow" style={{ justifyContent: 'center' }}>Equipment List</div>
            <h2 className="section-h2">Products & Equipment <span>Available</span></h2>
          </div>
          
          <div className="rental-grid">
            {products.map((p, i) => (
              <div key={i} className="rental-item-card">
                <div className="rental-item-img">
                  <Image src={p.img} alt={p.name} fill style={{ objectFit: 'cover' }} />
                </div>
                <div className="rental-item-body">
                  <h3 className="rental-item-name">{p.name}</h3>
                  <p className="rental-item-desc">{p.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── APPLICATIONS SECTION ── */}
      <section className="section rental-apps">
        <div className="container">
          <div style={{ textAlign: 'center', marginBottom: '60px' }}>
            <div className="section-eyebrow" style={{ justifyContent: 'center' }}>Tailored Solutions</div>
            <h2 className="section-h2">Applications</h2>
          </div>

          <div className="app-grid">
            {applications.map((app) => (
              <div key={app.id} className="app-card">
                <div className="app-num">{app.id}</div>
                <div className="app-content">
                  <h3 className="app-title">{app.title}</h3>
                  <p className="app-desc">{app.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── WHY CHOOSE SECTION (IMAGE + TIMELINE) ── */}
      <section className="rental-why-section fade-up">
        <div className="rental-why-img">
          <Image 
            src="/assets/fence-rentals-hero.png" 
            alt="VG Fence Temporary Fencing" 
            fill 
            style={{ objectFit: 'cover' }} 
          />
        </div>
        <div className="rental-why-content">
          <h2 className="rental-why-title">Why Choose VG Fence Rentals</h2>
          
          <ul className="rental-timeline">
            <li className="rental-timeline-item">
              <div className="timeline-icon">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2v20"/><path d="m5 15 7-7 7 7"/></svg>
              </div>
              <div className="timeline-text">Flexible rental terms (daily, weekly, monthly)</div>
            </li>
            <li className="rental-timeline-item">
              <div className="timeline-icon">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7L22 14v-2a2 2 0 0 0-2-2h-6Z"/><path d="M7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/></svg>
              </div>
              <div className="timeline-text">Durable and professional-grade materials</div>
            </li>
            <li className="rental-timeline-item">
              <div className="timeline-icon">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="1" y="3" width="15" height="13"/><polyline points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>
              </div>
              <div className="timeline-text">Quick delivery & setup support available</div>
            </li>
            <li className="rental-timeline-item">
              <div className="timeline-icon">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
              </div>
              <div className="timeline-text">Galvanized or black finishes</div>
            </li>
            <li className="rental-timeline-item">
              <div className="timeline-icon">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
              </div>
              <div className="timeline-text">Reliable support for contractors and event managers</div>
            </li>
          </ul>

          <div style={{ marginTop: '60px', borderTop: '1px solid rgba(255,255,255,0.1)', paddingTop: '40px' }}>
            <h2 className="section-h2" style={{ color: 'var(--white)', fontSize: '32px', marginBottom: '30px' }}>Secure Your <span>Temporary Fencing</span> Today</h2>
            <Link href="/contact" className="btn-primary">Request a Quote</Link>
          </div>
        </div>
      </section>

    </div>
  );
}