"use client";

import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import axios from 'axios';
import './tempfence-rental.css';

export default function TemporaryFenceRentalClient() {
  const [activeSection, setActiveSection] = useState('panels');
  const [openFaq, setOpenFaq] = useState<number | null>(null);
  const [formData, setFormData] = useState({
    name: '',
    phone: '',
    email: '',
    type: '',
    city: '',
    panels: '',
    requirements: ''
  });
  const [formStatus, setFormStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');

  useEffect(() => {
    // Scroll reveal observer
    const revealObs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('visible');
        }
      });
    }, { threshold: 0.08 });

    document.querySelectorAll('.reveal').forEach(el => revealObs.observe(el));

    // Subnav scrollspy observer
    const sysIds = ['panels', 'construction', 'events', 'accessories', 'how-it-works', 'territory', 'quote-section'];
    const navObs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          setActiveSection(e.target.id);
        }
      });
    }, { threshold: 0.3 });

    sysIds.forEach(id => {
      const el = document.getElementById(id);
      if (el) navObs.observe(el);
    });

    return () => {
      revealObs.disconnect();
      navObs.disconnect();
    };
  }, []);

  const handleNavClick = (e: React.MouseEvent<HTMLAnchorElement>, id: string) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) {
      // Offset for sticky navs (approx 90px main header + 52px model nav + padding)
      const offset = 160;
      const bodyRect = document.body.getBoundingClientRect().top;
      const elementRect = el.getBoundingClientRect().top;
      const elementPosition = elementRect - bodyRect;
      const offsetPosition = elementPosition - offset;

      window.scrollTo({
        top: offsetPosition,
        behavior: 'smooth'
      });
      setActiveSection(id);
    }
  };

  const toggleFaq = (idx: number) => {
    setOpenFaq(openFaq === idx ? null : idx);
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!formData.email || !formData.email.includes('@')) {
      alert('Please enter a valid email address.');
      return;
    }

    setFormStatus('submitting');

    const emailData = {
      name: formData.name,
      phone: formData.phone,
      email: formData.email,
      service: formData.type || "Temporary Fence Rental Quote",
      message: `
        <b>Company / Contact Name:</b> ${formData.name}<br />
        <b>Phone:</b> ${formData.phone}<br />
        <b>Email:</b> ${formData.email}<br />
        <b>Rental / Purchase Type:</b> ${formData.type}<br />
        <b>Site City / Location:</b> ${formData.city}<br />
        <b>Approx. Panels Needed:</b> ${formData.panels}<br />
        <b>Additional Needs:</b> ${formData.requirements}
      `,
      to: "info@vgfenceproducts.com",
      senderName: "VG Fence Temporary Fence Rental Page Form",
    };

    try {
      await axios.post("https://mailserver.metatronnest.com/send", emailData, {
        headers: { "Content-Type": "application/json" },
      });
      setFormStatus('success');
    } catch (error) {
      console.error("❌ Error sending temporary fence quote request:", error);
      setFormStatus('error');
    }
  };

  return (
    <div className="tempfence-rental-page">
      {/* BREADCRUMB */}
      {/* <nav className="breadcrumb" aria-label="Breadcrumb">
        <Link href="/">Home</Link>
        <span>›</span>
        <Link href="/services">Services</Link>
        <span>›</span>
        <span>Temporary Fence Rental &amp; Event Fence</span>
      </nav> */}

      {/* HERO */}
      <section className="hero">
        <div className="hero-grid-bg"></div>
        <div className="hero-fence-deco"></div>
        <div className="hero-accent"></div>
        <div className="hero-inner">
          <div className="hero-eyebrow">Temporary fence rental · Events &amp; Construction · KWC Ontario</div>
          <h1>
            Any site. Any event.<br />
            <em>Fence it fast.</em>
          </h1>
          <p className="hero-desc">
            <strong>Temporary fence rental and sales</strong> for construction sites, demolition projects, emergency scenes, and events of every size — from beer gardens and weddings to festivals and film sets. Panels, gates, screens, and all accessories delivered across <strong>250km from Kitchener–Waterloo.</strong>
          </p>
          <div className="hero-badges">
            <span className="badge badge-fill">Rental Available</span>
            <span className="badge">Purchase Available</span>
            <span className="badge">Construction &amp; Events</span>
            <span className="badge">6×10 &amp; 6×5 Panels</span>
            <span className="badge">Same-Day KWC</span>
          </div>
          <div className="hero-stats">
            <div><div className="stat-val">3</div><div className="stat-label">Primary use categories</div></div>
            <div><div className="stat-val">12+</div><div className="stat-label">Event types served</div></div>
            <div><div className="stat-val">250km</div><div className="stat-label">Ontario delivery radius</div></div>
          </div>
        </div>
      </section>

      {/* JUMP NAV */}
      <div className="model-nav">
        <a 
          className={`model-nav-item ${activeSection === 'panels' ? 'active' : ''}`} 
          href="#panels"
          onClick={(e) => handleNavClick(e, 'panels')}
        >
          Panels &amp; Gates
        </a>
        <a 
          className={`model-nav-item ${activeSection === 'construction' ? 'active' : ''}`} 
          href="#construction"
          onClick={(e) => handleNavClick(e, 'construction')}
        >
          Construction
        </a>
        <a 
          className={`model-nav-item ${activeSection === 'events' ? 'active' : ''}`} 
          href="#events"
          onClick={(e) => handleNavClick(e, 'events')}
        >
          Events
        </a>
        <a 
          className={`model-nav-item ${activeSection === 'accessories' ? 'active' : ''}`} 
          href="#accessories"
          onClick={(e) => handleNavClick(e, 'accessories')}
        >
          Accessories
        </a>
        <a 
          className={`model-nav-item ${activeSection === 'how-it-works' ? 'active' : ''}`} 
          href="#how-it-works"
          onClick={(e) => handleNavClick(e, 'how-it-works')}
        >
          How it works
        </a>
        <a 
          className={`model-nav-item ${activeSection === 'territory' ? 'active' : ''}`} 
          href="#territory"
          onClick={(e) => handleNavClick(e, 'territory')}
        >
          Territory
        </a>
        <a 
          className={`model-nav-item ${activeSection === 'quote-section' ? 'active' : ''}`} 
          href="#quote-section"
          onClick={(e) => handleNavClick(e, 'quote-section')}
        >
          Get a quote
        </a>
      </div>

      {/* INTRO */}
      <section className="intro">
        <div className="reveal">
          <div className="section-eyebrow">About this service</div>
          <h2 className="sh">The right fence.<br /><span>Ready when you need it.</span></h2>
        </div>
        <div className="intro-grid">
          <div className="intro-text reveal">
            <p><strong>VG Fence Products supplies temporary fence panels, gates, screens, and all hardware</strong> for construction sites, demolition projects, emergency situations, residential renovations, and events of every scale across Waterloo Region and Ontario. Whether you're securing a job site perimeter for six months or setting up a beer garden for the weekend, we have the inventory and the delivery reach to get it there on time.</p>
            <p>We offer both <strong>rental and outright purchase</strong> depending on your project and budget. Rental is the smart choice for single-use and short-term needs. Purchase makes sense for contractors and event companies who want their own permanent inventory. Either way, we stock the panels, the accessories, and the knowledge to set your project up right.</p>
            <p>For urgent construction emergencies and time-sensitive events in the <strong>Kitchener–Waterloo–Cambridge area</strong>, same-day delivery and setup may be available — contact us directly to confirm availability and get fence moving.</p>
            <ul className="check-list">
              <li>6×10 standard panels — construction, perimeters, large events</li>
              <li>6×5 compact panels — small jobs, events, single-entry gate setups, fits in a pickup</li>
              <li>Single, double vehicle access, and pedestrian gates</li>
              <li>Privacy screens — black and green mesh (sale), custom printed (sale)</li>
              <li>Orange safety fence, snow fence, and all site accessories</li>
              <li>Steel bases, plastic feet, sandbags, clamps, top connectors, T bars</li>
              <li>Rental or purchase — short-term to long-term</li>
              <li>Delivery, setup, and pickup across 250km in Ontario</li>
            </ul>
          </div>
          <div className="highlight-cards reveal">
            <div className="hcard">
              <div className="hcard-title">Construction &amp; site security</div>
              <div className="hcard-desc">Secure construction perimeters, demolition zones, utility trenches, and emergency scenes. Our panels meet the site safety requirements contractors and site supervisors need to control access and protect the public.</div>
            </div>
            <div className="hcard">
              <div className="hcard-title">Events — beer gardens to festivals</div>
              <div className="hcard-desc">Crowd control, VIP zones, beer gardens, stage perimeters, equipment enclosures, and entry channelling for events of any size. The 6×5 compact panel is the event favourite — lightweight, repositionable, and quick to set up.</div>
            </div>
            <div className="hcard">
              <div className="hcard-title">Rental or buy — your call</div>
              <div className="hcard-desc">Need it for a weekend event? Rent it. Running a multi-month construction site? Purchase and manage your own inventory. We supply both — and we'll help you work out which makes more economic sense for your situation.</div>
            </div>
          </div>
        </div>
      </section>

      {/* PANELS & GATES */}
      <section className="model-section bg-white" id="panels">
        <div className="model-layout reveal">
          <div>
            <div className="model-accent-strip"></div>
            <div className="model-label">Panels &amp; gates</div>
            <div className="model-name">Fence Panels<br />&amp; Gates</div>
            <div className="model-tagline">2 panel sizes · 3 gate types · rental or purchase</div>
            <div className="tag-row"><span className="rental-tag">Rental available</span><span className="sale-tag">Purchase available</span></div>
            <p className="model-desc">Heavy-gauge galvanized steel mesh panels in two sizes, paired with three gate configurations to suit any access requirement. The 6×10 handles large perimeters; the 6×5 compact handles small jobs, events, and truck-transport delivery without a flatdeck.</p>

            <div className="specs-block">
              <div className="specs-title">Panel sizes</div>
              <div className="spec-row"><span className="spec-key">Standard panel</span><span className="spec-val orange">6′ × 10′ galvanized steel mesh</span></div>
              <div className="spec-row"><span className="spec-key">Compact panel</span><span className="spec-val orange">6′ × 5′ — fits in pickup truck</span></div>
              <div className="spec-row"><span className="spec-key">Best for 6×5</span><span className="spec-val">Events, small sites, single entry</span></div>
              <div className="spec-row"><span className="spec-key">Material</span><span className="spec-val">Hot-dip galvanized steel</span></div>
            </div>

            <div className="specs-block">
              <div className="specs-title">Gate options</div>
              <div className="spec-row"><span className="spec-key">Single gate</span><span className="spec-val">Walk-through access</span></div>
              <div className="spec-row"><span className="spec-key">Double gate</span><span className="spec-val">Vehicle access — wide opening</span></div>
              <div className="spec-row"><span className="spec-key">Pedestrian gate</span><span className="spec-val">Controlled foot traffic entry</span></div>
              <div className="spec-row"><span className="spec-key">Gate wheels</span><span className="spec-val">Available for double / heavy gates</span></div>
            </div>

            <div style={{ marginTop: '18px', background: 'rgba(232,87,42,.07)', border: '1.5px solid rgba(232,87,42,.2)', borderRadius: '10px', padding: '16px 20px' }}>
              <div style={{ fontFamily: 'var(--fd)', fontSize: '12px', fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--orange)', marginBottom: '6px' }}>6×5 compact panel — event &amp; contractor tip</div>
              <div style={{ fontSize: '13px', color: 'var(--gray-600)', lineHeight: '1.7' }}>The 6×5 panel is half the width of a standard panel but the same 6-foot height. It fits in a standard pickup truck bed without a flatdeck — making it the practical choice for small-scale events, residential renovations, and any job where you need fence without a delivery truck. It also works as a single-entry gate frame on its own.</div>
            </div>
          </div>
          <div>
            <div className="photo-area" style={{ minHeight: '340px' }}>
              <svg className="photo-icon" width="48" height="48" viewBox="0 0 48 48" fill="none">
                <rect x="4" y="10" width="40" height="30" rx="4" stroke="#B0ADA6" strokeWidth="2" />
                <circle cx="17" cy="22" r="5" stroke="#B0ADA6" strokeWidth="2" />
                <path d="M4 34 L14 24 L22 32 L30 22 L44 34" stroke="#B0ADA6" strokeWidth="2" fill="none" />
              </svg>
              <div className="photo-label">Panels &amp; gates in use</div>
              <div className="photo-sub">Upload product image here</div>
            </div>
            <div className="photo-row">
              <div className="photo-area" style={{ minHeight: '160px' }}>
                <svg className="photo-icon" width="32" height="32" viewBox="0 0 48 48" fill="none">
                  <rect x="4" y="10" width="40" height="30" rx="4" stroke="#B0ADA6" strokeWidth="2" />
                  <circle cx="17" cy="22" r="5" stroke="#B0ADA6" strokeWidth="2" />
                  <path d="M4 34 L14 24 L22 32 L30 22 L44 34" stroke="#B0ADA6" strokeWidth="2" fill="none" />
                </svg>
                <div className="photo-sub" style={{ fontSize: '11px' }}>6×5 compact — event setup</div>
              </div>
              <div className="photo-area" style={{ minHeight: '160px' }}>
                <svg className="photo-icon" width="32" height="32" viewBox="0 0 48 48" fill="none">
                  <rect x="4" y="10" width="40" height="30" rx="4" stroke="#B0ADA6" strokeWidth="2" />
                  <circle cx="17" cy="22" r="5" stroke="#B0ADA6" strokeWidth="2" />
                  <path d="M4 34 L14 24 L22 32 L30 22 L44 34" stroke="#B0ADA6" strokeWidth="2" fill="none" />
                </svg>
                <div className="photo-sub" style={{ fontSize: '11px' }}>Double gate — vehicle access</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CONSTRUCTION USE CASES */}
      <section className="usecase-section" id="construction">
        <div className="reveal">
          <div className="section-eyebrow">Construction &amp; site security</div>
          <h2 className="sh">Built for the<br /><span>toughest sites.</span></h2>
        </div>
        <div className="usecase-grid reveal">

          <div className="usecase-card">
            <div className="usecase-icon">
              <svg viewBox="0 0 20 20" fill="none">
                <rect x="2" y="8" width="16" height="10" rx="1.5" fill="#E8572A" opacity=".7" />
                <path d="M5 8 L5 5 L15 5 L15 8" stroke="#E8572A" strokeWidth="1.5" fill="none" strokeLinecap="round" />
                <path d="M7 5 L10 2 L13 5" stroke="#E8572A" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none" />
              </svg>
            </div>
            <div className="usecase-name">Construction &amp; demolition sites</div>
            <div className="usecase-desc">Secure active construction and demolition perimeters, control pedestrian and vehicle access, and meet Ontario site safety requirements. Standard 6×10 panels for full site runs with vehicle and pedestrian gate options.</div>
          </div>

          <div className="usecase-card">
            <div className="usecase-icon">
              <svg viewBox="0 0 20 20" fill="none">
                <path d="M3 17 L3 5 L10 2 L17 5 L17 17" stroke="#E8572A" strokeWidth="1.5" fill="none" strokeLinejoin="round" />
                <rect x="7" y="11" width="6" height="6" rx="1" fill="#E8572A" opacity=".4" />
              </svg>
            </div>
            <div className="usecase-name">Residential renovation &amp; pool installation</div>
            <div className="usecase-desc">Backyard renovation, deck removal, pool excavation, and landscaping projects where neighbours, children, and property access need to be safely managed during the build. The 6×5 compact panel is ideal here.</div>
          </div>

          <div className="usecase-card">
            <div className="usecase-icon">
              <svg viewBox="0 0 20 20" fill="none">
                <circle cx="10" cy="10" r="7" stroke="#E8572A" strokeWidth="1.5" fill="none" />
                <path d="M10 6 L10 10 L13 13" stroke="#E8572A" strokeWidth="1.5" strokeLinecap="round" />
                <path d="M4 4 L7 7" stroke="#E8572A" strokeWidth="1.2" strokeLinecap="round" opacity=".5" />
              </svg>
            </div>
            <div className="usecase-name">Emergency &amp; disaster scenes</div>
            <div className="usecase-desc">Gas line breaks, structural failures, sinkholes, flooding, and other public safety emergencies where a rapid site perimeter is needed. Same-day setup available in the KWC area for qualifying emergency situations.</div>
          </div>

          <div className="usecase-card">
            <div className="usecase-icon">
              <svg viewBox="0 0 20 20" fill="none">
                <rect x="2" y="12" width="16" height="6" rx="1.5" fill="#E8572A" opacity=".5" />
                <rect x="5" y="4" width="10" height="9" rx="1" fill="#E8572A" opacity=".3" />
                <path d="M8 4 L8 2 M12 4 L12 2" stroke="#E8572A" strokeWidth="1.5" strokeLinecap="round" />
              </svg>
            </div>
            <div className="usecase-name">Utility &amp; road work</div>
            <div className="usecase-desc">Utility trenching, road resurfacing, and municipal infrastructure work where pedestrian separation and public exclusion zones are required by safety regulations and site management plans.</div>
          </div>

          <div className="usecase-card">
            <div className="usecase-icon">
              <svg viewBox="0 0 20 20" fill="none">
                <rect x="3" y="3" width="14" height="14" rx="2" stroke="#E8572A" strokeWidth="1.5" fill="none" />
                <path d="M3 8 L17 8" stroke="#E8572A" strokeWidth="1" opacity=".5" />
                <path d="M8 8 L8 17" stroke="#E8572A" strokeWidth="1" opacity=".5" />
              </svg>
            </div>
            <div className="usecase-name">Tool &amp; equipment enclosures</div>
            <div className="usecase-desc">Secure portable enclosures for tools, machinery, propane tanks, and high-value materials on open job sites. Temporary fence panels form a quick, reliable compound that deters theft and restricts unauthorized access.</div>
          </div>

          <div className="usecase-card">
            <div className="usecase-icon">
              <svg viewBox="0 0 20 20" fill="none">
                <path d="M2 14 L2 8 L10 4 L18 8 L18 14" stroke="#E8572A" strokeWidth="1.5" fill="none" strokeLinejoin="round" />
                <path d="M7 14 L7 10 L13 10 L13 14" stroke="#E8572A" strokeWidth="1.2" fill="none" />
              </svg>
            </div>
            <div className="usecase-name">Propane compounds</div>
            <div className="usecase-desc">Secure, visible enclosures for propane cylinder storage at construction sites, events, and seasonal operations. Temporary fence panels provide the separation and access control required for safe propane handling.</div>
          </div>

        </div>
      </section>

      {/* EVENTS — NAVY SECTION */}
      <section className="events-section" id="events">
        <div className="reveal">
          <div className="section-eyebrow" style={{ color: 'rgba(255,255,255,.5)' }}>Event fence rental</div>
          <h2 className="sh sh-white">Every event needs<br /><span>the right fence.</span></h2>
          <p style={{ fontSize: '15px', color: 'rgba(255,255,255,.6)', lineHeight: 1.7, maxWidth: '600px', marginTop: '16px', marginBottom: '48px' }}>From beer gardens to film sets, our 6×5 and 6×10 temporary fence panels with privacy screens and branded fence wraps create professional, safe, and organised event spaces across Ontario.</p>
        </div>
        <div className="events-grid reveal">

          <div className="event-pill">
            <div className="event-pill-icon">🍺</div>
            <div className="event-pill-name">Beer Gardens</div>
            <div className="event-pill-desc">Licensed area perimeters, entry control points, and AGCO-compliant enclosures for outdoor beer and wine gardens.</div>
          </div>

          <div className="event-pill">
            <div className="event-pill-icon">🎵</div>
            <div className="event-pill-name">Concerts</div>
            <div className="event-pill-desc">Stage perimeters, crowd control barriers, backstage security zones, and VIP area separation for live music events.</div>
          </div>

          <div className="event-pill">
            <div className="event-pill-icon">🎪</div>
            <div className="event-pill-name">Festivals</div>
            <div className="event-pill-desc">Full-site perimeter fencing, entry channelling, internal zone separation, and branded printed screens for outdoor festivals.</div>
          </div>

          <div className="event-pill">
            <div className="event-pill-icon">🏆</div>
            <div className="event-pill-name">Sporting Events</div>
            <div className="event-pill-desc">Field boundary fencing, spectator barriers, athlete staging zones, and crowd management for outdoor sporting competitions.</div>
          </div>

          <div className="event-pill">
            <div className="event-pill-icon">🎬</div>
            <div className="event-pill-name">Film Sets</div>
            <div className="event-pill-desc">Location perimeter security, restricted access zones, equipment staging, and crowd management for on-location film and production shoots.</div>
          </div>

          <div className="event-pill">
            <div className="event-pill-icon">🎊</div>
            <div className="event-pill-name">Corporate Events</div>
            <div className="event-pill-desc">Outdoor corporate gathering perimeters, breakout zone separation, catering enclosures, and parking lot barriers for private corporate functions.</div>
          </div>

          <div className="event-pill">
            <div className="event-pill-icon">💍</div>
            <div className="event-pill-name">Weddings</div>
            <div className="event-pill-desc">Outdoor reception perimeters, ceremony area separation, parking management, and decorative fence lines for private wedding events.</div>
          </div>

          <div className="event-pill">
            <div className="event-pill-icon">🌲</div>
            <div className="event-pill-name">Seasonal Tree Sales</div>
            <div className="event-pill-desc">Christmas tree lot perimeters, seasonal market enclosures, customer flow management, and storage compound security for seasonal retail operations.</div>
          </div>

          <div className="event-pill">
            <div className="event-pill-icon">🏘️</div>
            <div className="event-pill-name">Community Events</div>
            <div className="event-pill-desc">Municipal fairs, farmers markets, community fundraisers, school events, and public gatherings requiring safe crowd management and zone separation.</div>
          </div>

          <div className="event-pill">
            <div className="event-pill-icon">🏪</div>
            <div className="event-pill-name">Trade Shows</div>
            <div className="event-pill-desc">Outdoor trade show perimeters, exhibitor zone separation, equipment staging enclosures, and access control for B2B and public trade events.</div>
          </div>

          <div className="event-pill">
            <div className="event-pill-icon">🔧</div>
            <div className="event-pill-name">Equipment Enclosures</div>
            <div className="event-pill-desc">Secure tool and equipment storage compounds for events, construction sites, and seasonal operations where portable on-site security is required.</div>
          </div>

          <div className="event-pill">
            <div className="event-pill-icon">🎡</div>
            <div className="event-pill-name">Amusement &amp; Fairs</div>
            <div className="event-pill-desc">Midway perimeters, ride safety barriers, queue management fencing, and secure operator areas for fairs, carnivals, and travelling amusement events.</div>
          </div>

        </div>

        {/* PRIVACY SCREENS callout inside events section */}
        <div className="reveal" style={{ marginTop: '48px', background: 'rgba(255,255,255,.05)', border: '1px solid rgba(255,255,255,.12)', borderRadius: '12px', padding: '32px 36px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '48px', alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: 'var(--fd)', fontSize: '12px', fontWeight: 700, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--orange)', marginBottom: '12px' }}>Event add-on — privacy &amp; branding screens</div>
            <div style={{ fontFamily: 'var(--fd)', fontSize: '28px', fontWeight: 800, textTransform: 'uppercase', color: 'var(--white)', lineHeight: '.95', marginBottom: '14px' }}>Turn your fence<br />into a <span style={{ color: 'var(--orange)' }}>brand asset.</span></div>
            <p style={{ fontSize: '14px', color: 'rgba(255,255,255,.65)', lineHeight: 1.75 }}>Black and green mesh privacy screens attach to any temporary fence panel — for AGCO beer garden compliance, VIP area privacy, and site screening. Custom full-colour printed fence screens with your event logo, sponsor graphics, or developer branding are available on request.</p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
            <div style={{ background: 'rgba(255,255,255,.06)', border: '1px solid rgba(255,255,255,.1)', borderRadius: '8px', padding: '14px 18px' }}>
              <div style={{ fontFamily: 'var(--fd)', fontSize: '13px', fontWeight: 700, textTransform: 'uppercase', color: 'var(--white)', marginBottom: '3px' }}>Black mesh privacy screen</div>
              <div style={{ fontSize: '12px', color: 'rgba(255,255,255,.5)' }}>Attaches to any panel — sale only</div>
            </div>
            <div style={{ background: 'rgba(255,255,255,.06)', border: '1px solid rgba(255,255,255,.1)', borderRadius: '8px', padding: '14px 18px' }}>
              <div style={{ fontFamily: 'var(--fd)', fontSize: '13px', fontWeight: 700, textTransform: 'uppercase', color: 'var(--white)', marginBottom: '3px' }}>Green mesh privacy screen</div>
              <div style={{ fontSize: '12px', color: 'rgba(255,255,255,.5)' }}>Attaches to any panel — sale only</div>
            </div>
            <div style={{ background: 'rgba(232,87,42,.15)', border: '1px solid rgba(232,87,42,.3)', borderRadius: '8px', padding: '14px 18px' }}>
              <div style={{ fontFamily: 'var(--fd)', fontSize: '13px', fontWeight: 700, textTransform: 'uppercase', color: 'var(--orange)', marginBottom: '3px' }}>Custom printed fence screen</div>
              <div style={{ fontSize: '12px', color: 'rgba(255,255,255,.5)' }}>Full colour · Logo &amp; branding · Sale</div>
            </div>
          </div>
        </div>
      </section>

      {/* ACCESSORIES */}
      <section className="acc-section" id="accessories">
        <div className="reveal">
          <div className="section-eyebrow">Hardware &amp; accessories</div>
          <h2 className="sh">Everything to build<br /><span>a complete setup.</span></h2>
        </div>
        <div className="acc-grid reveal">

          <div className="acc-card">
            <div className="acc-name">Steel Base Plates</div>
            <div className="acc-desc">Heavy-duty steel base plates anchor each panel to the ground on concrete, asphalt, and compacted surfaces without staking into the ground.</div>
            <span className="acc-badge both">Rental &amp; Purchase</span>
          </div>

          <div className="acc-card">
            <div className="acc-name">Plastic Fence Bases</div>
            <div className="acc-desc">Lightweight plastic feet for indoor events, trade shows, and surfaces where steel bases are not suitable. Quick to reposition and set up.</div>
            <span className="acc-badge both">Rental &amp; Purchase</span>
          </div>

          <div className="acc-card">
            <div className="acc-name">Top Connectors / Pins</div>
            <div className="acc-desc">Panel-to-panel coupling pins that lock adjacent fence panels together at the top rail, creating a continuous and rigid fence line.</div>
            <span className="acc-badge both">Rental &amp; Purchase</span>
          </div>

          <div className="acc-card">
            <div className="acc-name">Panel Clamps / Top Clamps</div>
            <div className="acc-desc">Steel clamps that secure panels together at multiple heights — used at corners, gate junctions, and anywhere extra lateral stability is needed.</div>
            <span className="acc-badge both">Rental &amp; Purchase</span>
          </div>

          <div className="acc-card">
            <div className="acc-name">Sandbags</div>
            <div className="acc-desc">Ballast sandbags placed over steel base plates to add weight and prevent panels from shifting in wind. Essential for open sites and outdoor events.</div>
            <span className="acc-badge both">Rental &amp; Purchase</span>
          </div>

          <div className="acc-card">
            <div className="acc-name">Zip Ties / Wire Ties</div>
            <div className="acc-desc">Heavy-duty zip ties and wire ties for attaching privacy screens, printed wraps, and signage to temporary fence panels. Supplied in bulk.</div>
            <span className="acc-badge sale">Purchase only</span>
          </div>

          <div className="acc-card">
            <div className="acc-name">T Bars</div>
            <div className="acc-desc">Steel T bars for bracing corner sections, gate frames, and any point in the fence run requiring additional lateral support against wind or crowd pressure.</div>
            <span className="acc-badge both">Rental &amp; Purchase</span>
          </div>

          <div className="acc-card">
            <div className="acc-name">Gate Wheels</div>
            <div className="acc-desc">Caster wheels that attach to the bottom of double and single gate frames, supporting the gate's weight and allowing smooth opening on hard surfaces.</div>
            <span className="acc-badge both">Rental &amp; Purchase</span>
          </div>

          <div className="acc-card">
            <div className="acc-name">Fence Feet Pins</div>
            <div className="acc-desc">Ground pins that anchor plastic fence feet and steel base plates to soft ground — grass, gravel, and compacted soil — preventing movement and tipping.</div>
            <span className="acc-badge both">Rental &amp; Purchase</span>
          </div>

          <div className="acc-card">
            <div className="acc-name">Orange Safety Fence</div>
            <div className="acc-desc">Plastic mesh safety fence for hazard marking, pedestrian guidance, and temporary barrier applications where a rigid panel fence is not required.</div>
            <span className="acc-badge sale">Purchase only</span>
          </div>

          <div className="acc-card">
            <div className="acc-name">Snow Fence</div>
            <div className="acc-desc">Seasonal plastic mesh barrier for drift control, pedestrian guidance in winter conditions, and temporary perimeter marking on outdoor winter sites.</div>
            <span className="acc-badge sale">Purchase only</span>
          </div>

          <div className="acc-card">
            <div className="acc-name">Privacy &amp; Printed Screens</div>
            <div className="acc-desc">Black mesh, green mesh, and full-colour custom printed fence screens. Attach to standard panels via zip ties. Perfect for beer gardens, branded events, and site screening.</div>
            <span className="acc-badge sale">Purchase only</span>
          </div>

        </div>
      </section>

      {/* PROCESS */}
      <section className="process-section" id="how-it-works">
        <div className="reveal">
          <div className="section-eyebrow">How it works</div>
          <h2 className="sh">From quote to fence up —<br /><span>fast and simple.</span></h2>
        </div>
        <div className="process-grid reveal">
          <div className="process-step">
            <div className="step-num">01</div>
            <div className="step-title">Tell us your site</div>
            <div className="step-desc">Share your site or event location, approximate perimeter, gate requirements, rental duration, and any screen or accessory needs. The more detail, the faster and more accurate the quote.</div>
          </div>
          <div className="process-step">
            <div className="step-num">02</div>
            <div className="step-title">Get your quote</div>
            <div className="step-desc">We come back within 2 business hours with a rental or purchase quote covering panels, gates, accessories, delivery, setup, and pickup. No hidden charges added later.</div>
          </div>
          <div className="process-step">
            <div className="step-num">03</div>
            <div className="step-title">We deliver &amp; set up</div>
            <div className="step-desc">Our driver contacts you before arrival to confirm layout preferences. We set up panels, connect gates, stake bases, and confirm the installation is solid before we leave your site.</div>
          </div>
          <div className="process-step">
            <div className="step-num">04</div>
            <div className="step-title">We pick it up</div>
            <div className="step-desc">Book pickup 2–3 days ahead of your required removal date. We dismantle, load, and remove all rented equipment cleanly. Damaged or missing items are invoiced per the rental agreement.</div>
          </div>
        </div>
      </section>

      {/* FAQ + SEO */}
      <section className="faq-section">
        <div className="reveal">
          <div className="section-eyebrow">Helpful information</div>
          <h2 className="sh">Temporary fence rental<br /><span>questions answered.</span></h2>
        </div>
        <div className="faq-seo-grid">
          <div className="faq reveal">
            {[
              {
                q: "Do you offer temporary fence rental in Kitchener, Waterloo, and Cambridge?",
                a: "Yes. VG Fence Products offers temporary fence rental and sales across Kitchener, Waterloo, Cambridge, and the entire Waterloo Region. We deliver, set up, and pick up fence panels, gates, privacy screens, and all accessories for construction sites, events, renovations, and emergency situations. Same-day setup may be available in the KWC area for urgent requirements — contact us directly to confirm."
              },
              {
                q: "What size temporary fence panels do you rent?",
                a: "We rent two panel sizes: the standard 6×10 panel (6 feet tall by 10 feet wide — the most common construction and large-event panel) and the compact 6×5 panel (6 feet tall by 5 feet wide — lighter, easier to handle, and fits in a standard pickup truck bed). The 6×5 is our most popular choice for events, residential renovations, small job sites, and single-entry gate setups. Both connect to the same hardware system."
              },
              {
                q: "Do you rent temporary fence for events like beer gardens, weddings, and festivals?",
                a: "Yes — events are a major part of what we do. We supply temporary fence panels, gates, and privacy screens for beer gardens, community events, concerts, corporate parties, festivals, film sets, propane compounds, seasonal tree sales, sporting events, tool and equipment enclosures, trade shows, and weddings. For licensed beer gardens, our black and green mesh privacy screens help meet AGCO visual barrier requirements. Custom printed fence screens with event or sponsor branding are also available."
              },
              {
                q: "Can I get same-day temporary fence delivery in Kitchener–Waterloo?",
                a: "Same-day delivery and setup is available in the Kitchener–Waterloo–Cambridge area for qualifying urgent situations — emergency scenes, last-minute event changes, and urgent construction site needs. Availability depends on current inventory and crew scheduling. Contact us directly as early as possible and we'll do everything we can to get fence to your site the same day."
              },
              {
                q: "Is it better to rent or buy temporary fence panels?",
                a: "For single-use projects — one event, one construction phase, one renovation — rental is almost always the better choice. You pay for the duration you need, we handle delivery and pickup, and you're not storing panels between jobs. For contractors who run multiple simultaneous sites or event companies with regular fence requirements, purchasing your own inventory makes more sense over time. We're happy to talk through the numbers based on your actual usage volume."
              },
              {
                q: "How far do you deliver temporary fence across Ontario?",
                a: "We deliver temporary fence panels, gates, and all accessories to sites across a 250km radius from our Kitchener–Waterloo base. This covers Guelph, Hamilton, Brantford, Toronto and the GTA, London, Windsor, Niagara, Barrie, and all communities in between. Contact us with your location and project details and we'll confirm delivery availability and timing."
              }
            ].map((faq, idx) => (
              <div className={`faq-item ${openFaq === idx ? 'open' : ''}`} key={idx}>
                <div className="faq-q" onClick={() => toggleFaq(idx)}>
                  {faq.q}
                  <span className="faq-icon">+</span>
                </div>
                <div 
                  className="faq-a" 
                  style={{ 
                    maxHeight: openFaq === idx ? '300px' : '0', 
                    paddingBottom: openFaq === idx ? '18px' : '0',
                    transition: 'max-height 0.35s ease, padding 0.3s'
                  }}
                >
                  {faq.a}
                </div>
              </div>
            ))}
          </div>
          <div className="content-block reveal">
            <h3>Temporary fence rental — Kitchener, Waterloo &amp; KWC</h3>
            <p>VG Fence Products is a dedicated <strong>temporary fence rental supplier</strong> based in the Kitchener–Waterloo–Cambridge region of Ontario. We carry a full inventory of 6×10 and 6×5 panels, single and double gates, pedestrian gates, privacy screens, and all accessories — available for short-term, long-term, or outright purchase depending on your project requirements.</p>
            <h3>Event fence rental — beer gardens, festivals &amp; concerts in Ontario</h3>
            <p>Our temporary fence panels are a go-to solution for <strong>event organizers across Ontario</strong> who need crowd control, licensed area enclosures, equipment security, and branded fence screens for outdoor events. The 6×5 compact panel is especially popular for events — it's lightweight, repositionable, and can be transported in a pickup truck without a flatdeck. Black and green privacy mesh screens are available to create visual barriers for beer gardens and VIP areas.</p>
            <h3>Construction fence rental — KWC &amp; Southern Ontario</h3>
            <p>General contractors, site supervisors, and developers use our <strong>construction fence rental</strong> service to secure active build perimeters, demolition zones, utility trenches, and public exclusion areas across Waterloo Region and Southern Ontario. We deliver on a schedule that works around your project timeline and pick up when the job is done. Same-day setup is available in the KWC area for emergency site requirements.</p>
            <h3>Temporary fence for residential renovation &amp; pool installation</h3>
            <p>Homeowners and residential contractors in <strong>Kitchener, Waterloo, Cambridge, and Guelph</strong> use our temporary fence rental service to safely secure backyard renovation projects, pool installations, and landscape work where children, pets, and neighbours need to be kept safely away from an active work zone. The 6×5 compact panel is the right fit — easy to deliver, easy to set up, and no big truck required.</p>
          </div>
        </div>
      </section>

      {/* TERRITORY */}
      <section className="territory" id="territory">
        <div className="reveal">
          <div className="section-eyebrow" style={{ color: 'rgba(255,255,255,.5)' }}>Where we deliver</div>
          <h2 className="sh sh-white">Temporary fence rental<br /><span>across Ontario.</span></h2>
          <p className="territory-intro">Delivery, setup, and pickup of temporary fence panels, gates, privacy screens, and accessories to construction sites and event venues across a 250km radius from Kitchener–Waterloo.</p>
        </div>
        <div className="region-grid reveal">

          <div className="region-block">
            <div className="region-name">Waterloo Region</div>
            <ul className="region-cities">
              <li className="primary"><a href="https://vgfence.com/temporary-fence-rental-kitchener" title="Temporary fence rental Kitchener Ontario">Kitchener</a></li>
              <li className="primary"><a href="https://vgfence.com/temporary-fence-rental-waterloo" title="Temporary fence rental Waterloo Ontario">Waterloo</a></li>
              <li className="primary"><a href="https://vgfence.com/temporary-fence-rental-cambridge" title="Temporary fence rental Cambridge Ontario">Cambridge</a></li>
              <li><a href="https://vgfence.com/temporary-fence-rental-ayr" title="Temp fence rental Ayr Ontario">Ayr</a></li>
              <li><a href="https://vgfence.com/temporary-fence-rental-breslau" title="Temp fence rental Breslau Ontario">Breslau</a></li>
              <li><a href="https://vgfence.com/temporary-fence-rental-elmira" title="Temp fence rental Elmira Ontario">Elmira</a></li>
              <li><a href="https://vgfence.com/temporary-fence-rental-st-jacobs" title="Temp fence rental St. Jacobs Ontario">St. Jacobs</a></li>
              <li><a href="https://vgfence.com/temporary-fence-rental-new-hamburg" title="Temp fence rental New Hamburg Ontario">New Hamburg</a></li>
              <li><a href="https://vgfence.com/temporary-fence-rental-baden" title="Temp fence rental Baden Ontario">Baden</a></li>
              <li><a href="https://vgfence.com/temporary-fence-rental-wellesley" title="Temp fence rental Wellesley Ontario">Wellesley</a></li>
            </ul>
          </div>

          <div className="region-block">
            <div className="region-name">Guelph &amp; Wellington</div>
            <ul className="region-cities">
              <li className="primary"><a href="https://vgfence.com/temporary-fence-rental-guelph" title="Temporary fence rental Guelph Ontario">Guelph</a></li>
              <li><a href="https://vgfence.com/temporary-fence-rental-fergus" title="Temp fence rental Fergus Ontario">Fergus</a></li>
              <li><a href="https://vgfence.com/temporary-fence-rental-elora" title="Temp fence rental Elora Ontario">Elora</a></li>
              <li><a href="https://vgfence.com/temporary-fence-rental-rockwood" title="Temp fence rental Rockwood Ontario">Rockwood</a></li>
              <li><a href="https://vgfence.com/temporary-fence-rental-acton" title="Temp fence rental Acton Ontario">Acton</a></li>
              <li><a href="https://vgfence.com/temporary-fence-rental-georgetown" title="Temp fence rental Georgetown Ontario">Georgetown</a></li>
            </ul>
          </div>

          <div className="region-block">
            <div className="region-name">Halton &amp; Hamilton</div>
            <ul className="region-cities">
              <li className="primary"><a href="https://vgfence.com/temporary-fence-rental-hamilton" title="Temporary fence rental Hamilton Ontario">Hamilton</a></li>
              <li className="primary"><a href="https://vgfence.com/temporary-fence-rental-burlington" title="Temporary fence rental Burlington Ontario">Burlington</a></li>
              <li><a href="https://vgfence.com/temporary-fence-rental-milton" title="Temp fence rental Milton Ontario">Milton</a></li>
              <li><a href="https://vgfence.com/temporary-fence-rental-oakville" title="Temp fence rental Oakville Ontario">Oakville</a></li>
              <li><a href="https://vgfence.com/temporary-fence-rental-stoney-creek" title="Temp fence rental Stoney Creek Ontario">Stoney Creek</a></li>
              <li><a href="https://vgfence.com/temporary-fence-rental-grimsby" title="Temp fence rental Grimsby Ontario">Grimsby</a></li>
              <li><a href="https://vgfence.com/temporary-fence-rental-brantford" title="Temp fence rental Brantford Ontario">Brantford</a></li>
              <li><a href="https://vgfence.com/temporary-fence-rental-paris" title="Temp fence rental Paris Ontario">Paris</a></li>
            </ul>
          </div>

          <div className="region-block">
            <div className="region-name">GTA &amp; Peel</div>
            <ul className="region-cities">
              <li className="primary"><a href="https://vgfence.com/temporary-fence-rental-mississauga" title="Temporary fence rental Mississauga Ontario">Mississauga</a></li>
              <li className="primary"><a href="https://vgfence.com/temporary-fence-rental-brampton" title="Temporary fence rental Brampton Ontario">Brampton</a></li>
              <li><a href="https://vgfence.com/temporary-fence-rental-vaughan" title="Temp fence rental Vaughan Ontario">Vaughan</a></li>
              <li><a href="https://vgfence.com/temporary-fence-rental-markham" title="Temp fence rental Markham Ontario">Markham</a></li>
              <li><a href="https://vgfence.com/temporary-fence-rental-richmond-hill" title="Temp fence rental Richmond Hill Ontario">Richmond Hill</a></li>
              <li><a href="https://vgfence.com/temporary-fence-rental-toronto" title="Temp fence rental Toronto Ontario">Toronto</a></li>
            </ul>
          </div>

          <div className="region-block">
            <div className="region-name">Oxford &amp; Perth</div>
            <ul className="region-cities">
              <li className="primary"><a href="https://vgfence.com/temporary-fence-rental-woodstock" title="Temp fence rental Woodstock Ontario">Woodstock</a></li>
              <li className="primary"><a href="https://vgfence.com/temporary-fence-rental-stratford" title="Temp fence rental Stratford Ontario">Stratford</a></li>
              <li><a href="https://vgfence.com/temporary-fence-rental-ingersoll" title="Temp fence rental Ingersoll Ontario">Ingersoll</a></li>
              <li><a href="https://vgfence.com/temporary-fence-rental-tillsonburg" title="Temp fence rental Tillsonburg Ontario">Tillsonburg</a></li>
              <li><a href="https://vgfence.com/temporary-fence-rental-st-marys" title="Temp fence rental St. Marys Ontario">St. Marys</a></li>
            </ul>
          </div>

          <div className="region-block">
            <div className="region-name">London &amp; Elgin</div>
            <ul className="region-cities">
              <li className="primary"><a href="https://vgfence.com/temporary-fence-rental-london-ontario" title="Temporary fence rental London Ontario">London</a></li>
              <li><a href="https://vgfence.com/temporary-fence-rental-st-thomas" title="Temp fence rental St. Thomas Ontario">St. Thomas</a></li>
              <li><a href="https://vgfence.com/temporary-fence-rental-strathroy" title="Temp fence rental Strathroy Ontario">Strathroy</a></li>
              <li><a href="https://vgfence.com/temporary-fence-rental-komoka" title="Temp fence rental Komoka Ontario">Komoka</a></li>
            </ul>
          </div>

          <div className="region-block">
            <div className="region-name">Southwest Ontario</div>
            <ul className="region-cities">
              <li className="primary"><a href="https://vgfence.com/temporary-fence-rental-windsor" title="Temporary fence rental Windsor Ontario">Windsor</a></li>
              <li className="primary"><a href="https://vgfence.com/temporary-fence-rental-chatham" title="Temp fence rental Chatham Ontario">Chatham</a></li>
              <li><a href="https://vgfence.com/temporary-fence-rental-leamington" title="Temp fence rental Leamington Ontario">Leamington</a></li>
              <li><a href="https://vgfence.com/temporary-fence-rental-sarnia" title="Temp fence rental Sarnia Ontario">Sarnia</a></li>
              <li><a href="https://vgfence.com/temporary-fence-rental-petrolia" title="Temp fence rental Petrolia Ontario">Petrolia</a></li>
            </ul>
          </div>

          <div className="region-block">
            <div className="region-name">Extended Service</div>
            <ul className="region-cities">
              <li className="primary"><a href="https://vgfence.com/temporary-fence-rental-niagara-falls" title="Temporary fence rental Niagara Falls Ontario">Niagara Falls</a></li>
              <li><a href="https://vgfence.com/temporary-fence-rental-st-catharines" title="Temp fence rental St. Catharines Ontario">St. Catharines</a></li>
              <li><a href="https://vgfence.com/temporary-fence-rental-welland" title="Temp fence rental Welland Ontario">Welland</a></li>
              <li className="primary"><a href="https://vgfence.com/temporary-fence-rental-barrie" title="Temporary fence rental Barrie Ontario">Barrie</a></li>
              <li><a href="https://vgfence.com/temporary-fence-rental-owen-sound" title="Temp fence rental Owen Sound Ontario">Owen Sound</a></li>
              <li><a href="https://vgfence.com/temporary-fence-rental-collingwood" title="Temp fence rental Collingwood Ontario">Collingwood</a></li>
            </ul>
          </div>

        </div>
      </section>

      {/* QUOTE CTA */}
      <section className="quote-cta" id="quote-section">
        <div className="quote-inner">
          <div className="quote-left">
            <h2>Get your fence rental quote.</h2>
            <p>Tell us your site or event, panel count, gate needs, location, and how long you need it. We'll come back with a full rental or purchase quote within 2 business hours.</p>
          </div>
          <div className="quote-form-card">
            <div style={{ fontFamily: 'var(--fd)', fontSize: '17px', fontWeight: 700, textTransform: 'uppercase', color: 'var(--white)', letterSpacing: '.04em', marginBottom: '4px' }}>Request a quote</div>
            <div style={{ fontSize: '12px', color: 'rgba(255,255,255,.6)', marginBottom: '20px' }}>Response within 2 business hours · Rental &amp; purchase</div>
            
            {formStatus === 'success' ? (
              <div className="form-success">
                <div className="fs-icon">✅</div>
                <div className="fs-title">Quote Request Sent!</div>
                <p className="fs-note">
                  Thank you! We have received your temporary fence quote request and will respond within 2 business hours.
                </p>
              </div>
            ) : (
              <form onSubmit={handleSubmit}>
                <div className="qrow">
                  <div>
                    <label className="ql">Company / your name</label>
                    <input 
                      className="qi" 
                      type="text" 
                      name="name" 
                      placeholder="ABC Co. / John Smith" 
                      value={formData.name}
                      onChange={handleInputChange}
                      required
                    />
                  </div>
                  <div>
                    <label className="ql">Phone</label>
                    <input 
                      className="qi" 
                      type="tel" 
                      name="phone" 
                      placeholder="519-xxx-xxxx" 
                      value={formData.phone}
                      onChange={handleInputChange}
                      required
                    />
                  </div>
                </div>
                
                <label className="ql">Email</label>
                <input 
                  className="qi" 
                  type="email" 
                  name="email" 
                  placeholder="you@company.com" 
                  value={formData.email}
                  onChange={handleInputChange}
                  required
                />
                
                <label className="ql">Rental type</label>
                <select 
                  className="qi" 
                  name="type" 
                  value={formData.type}
                  onChange={handleInputChange}
                  required
                >
                  <option value="">Select...</option>
                  <optgroup label="— Construction —">
                    <option value="Construction site — short term (under 4 weeks)">Construction site — short term (under 4 weeks)</option>
                    <option value="Construction site — long term (1–6 months)">Construction site — long term (1–6 months)</option>
                    <option value="Demolition site">Demolition site</option>
                    <option value="Emergency / disaster scene">Emergency / disaster scene</option>
                    <option value="Residential renovation or pool install">Residential renovation or pool install</option>
                    <option value="Utility / road work">Utility / road work</option>
                    <option value="Tool or propane compound">Tool or propane compound</option>
                  </optgroup>
                  <optgroup label="— Events —">
                    <option value="Beer garden">Beer garden</option>
                    <option value="Concert or festival">Concert or festival</option>
                    <option value="Sporting event">Sporting event</option>
                    <option value="Corporate event or party">Corporate event or party</option>
                    <option value="Wedding">Wedding</option>
                    <option value="Community event or fair">Community event or fair</option>
                    <option value="Film set or production">Film set or production</option>
                    <option value="Trade show">Trade show</option>
                    <option value="Seasonal tree sale or market">Seasonal tree sale or market</option>
                    <option value="Other event">Other event</option>
                  </optgroup>
                  <optgroup label="— Purchase —">
                    <option value="Purchase panels — own inventory">Purchase panels — own inventory</option>
                    <option value="Purchase privacy / safety screens">Purchase privacy / safety screens</option>
                  </optgroup>
                </select>
                
                <div className="qrow">
                  <div>
                    <label className="ql">Site city / location</label>
                    <input 
                      className="qi" 
                      type="text" 
                      name="city" 
                      placeholder="Kitchener, Guelph..." 
                      value={formData.city}
                      onChange={handleInputChange}
                      required
                    />
                  </div>
                  <div>
                    <label className="ql">Approx. panels needed</label>
                    <input 
                      className="qi" 
                      type="text" 
                      name="panels" 
                      placeholder="e.g. 30 panels" 
                      value={formData.panels}
                      onChange={handleInputChange}
                      required
                    />
                  </div>
                </div>
                
                <label className="ql">Additional needs</label>
                <input 
                  className="qi" 
                  type="text" 
                  name="requirements" 
                  placeholder="Gates, privacy screens, event date, rental duration..." 
                  value={formData.requirements}
                  onChange={handleInputChange}
                />
                
                <button className="qbtn" type="submit" disabled={formStatus === 'submitting'}>
                  {formStatus === 'submitting' ? 'Sending...' : 'Send quote request →'}
                </button>

                {formStatus === 'error' && (
                  <p style={{ color: '#fff', fontSize: '12px', marginTop: '10px', textAlign: 'center' }}>
                    ⚠️ Failed to send request. Please try again or email info@vgfenceproducts.com directly.
                  </p>
                )}
              </form>
            )}
          </div>
        </div>
      </section>
    </div>
  );
}
