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/manufacturing-hero.png" },
    { name: "Fence Wheels", desc: "Smooth movement for gate panels", img: "/assets/temp-fence-panel.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">
        <h1 className="inner-banner-title">Fence <span>Rentals.</span></h1>
        <div className="inner-banner-breadcrumbs">
          <Link href="/">Home</Link>
          <span>/</span>
          Rentals
        </div>
      </section>

      {/* ── INTRO SECTION (REDESIGNED) ── */}
      <section className="section rental-intro">
        <div className="container">
          <div className="about-story-layout">
            <div className="about-story-text">
              <div className="section-eyebrow">FENCE RENTALS</div>
              <h2 className="section-h2">
                Temporary Fence Rentals for <span>Construction, Events, and Security</span>
              </h2>
              <p>
                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' }}>
                <span style={{ fontSize: '15px', fontWeight: 700, color: 'var(--navy)' }}>Installation support for temporary fences is available for select projects</span>
              </div>
            </div>

            <div className="about-image-column">
              <div className="about-image-wrapper">
                <Image
                  src="/assets/about-fencing.png"
                  alt="Industrial fencing installation experts"
                  fill
                  className="about-image-cover"
                />
              </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 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 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 <span>VG Fence Rentals</span></h2>
          
          <ul className="rental-timeline">
            <li className="rental-timeline-item">
              <div className="timeline-icon">
                <svg width="24" height="24" 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="24" height="24" 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="24" height="24" 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="24" height="24" 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="24" height="24" 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 white">Secure Your <span>Temporary Fencing</span> Today</h2>
            <Link href="/contact" className="btn-primary">Request a Quote</Link>
          </div>
        </div>
      </section>

    </div>
  );
}