"use client";

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

export default function DrawingServicesPage() {
  const [activeSection, setActiveSection] = useState('residential');
  const [openFaq, setOpenFaq] = useState<number | null>(null);
  const [formData, setFormData] = useState({
    name: '',
    phone: '',
    email: '',
    drawingType: '',
    city: '',
    length: ''
  });
  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 = ['residential', 'commercial', 'drawing-types', 'process', 'who-we-serve'];
    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 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.drawingType || "2D Fence Drawing Services Quote",
      message: `
        <b>Company / Name:</b> ${formData.name}<br />
        <b>Phone:</b> ${formData.phone}<br />
        <b>Email:</b> ${formData.email}<br />
        <b>Drawing Type Needed:</b> ${formData.drawingType}<br />
        <b>City / Location:</b> ${formData.city}<br />
        <b>Approx. Fence Length:</b> ${formData.length}
      `,
      to: "info@vgfenceproducts.com",
      senderName: "VG Fence Drawing Page Request",
    };

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

  return (
    <div className="drawing-services-page">
      {/* BREADCRUMB */}
    

      {/* HERO SECTION */}
      <section className="hero">
        <div className="hero-grid-bg"></div>
        <div className="hero-cad-deco"></div>
        <div className="hero-accent"></div>
        <div className="hero-inner">
          <div className="hero-eyebrow">2D Fence Drawing Services · KWC Ontario</div>
          <h1>
            Plan it right<br />
            <em>before you build.</em>
          </h1>
          <p className="hero-desc">
            <strong>Professional CAD-based 2D fence layout drawings</strong> for residential and commercial projects across Ontario. Permit support, material takeoffs, gate placement, and site-specific fence planning — delivered to contractors, builders, and homeowners from our Kitchener–Waterloo base.
          </p>
          <div className="hero-badges">
            <span className="badge badge-fill">CAD-Based Drawings</span>
            <span className="badge">Residential &amp; Commercial</span>
            <span className="badge">Permit Support</span>
            <span className="badge">Material Takeoffs</span>
            <span className="badge">Fast Turnaround</span>
          </div>
          <div className="hero-stats">
            <div>
              <div className="stat-val">14+</div>
              <div className="stat-label">Drawing types offered</div>
            </div>
            <div>
              <div className="stat-val">CAD</div>
              <div className="stat-label">Professional software</div>
            </div>
            <div>
              <div className="stat-val">250km</div>
              <div className="stat-label">Ontario service radius</div>
            </div>
          </div>
        </div>
      </section>

      {/* MODEL SCROLLSPY NAV */}
      <div className="model-nav">
        <a 
          className={`model-nav-item ${activeSection === 'residential' ? 'active' : ''}`} 
          href="#residential"
          onClick={(e) => handleNavClick(e, 'residential')}
        >
          Residential
        </a>
        <a 
          className={`model-nav-item ${activeSection === 'commercial' ? 'active' : ''}`} 
          href="#commercial"
          onClick={(e) => handleNavClick(e, 'commercial')}
        >
          Commercial
        </a>
        <a 
          className={`model-nav-item ${activeSection === 'drawing-types' ? 'active' : ''}`} 
          href="#drawing-types"
          onClick={(e) => handleNavClick(e, 'drawing-types')}
        >
          Drawing types
        </a>
        <a 
          className={`model-nav-item ${activeSection === 'process' ? 'active' : ''}`} 
          href="#process"
          onClick={(e) => handleNavClick(e, 'process')}
        >
          How it works
        </a>
        <a 
          className={`model-nav-item ${activeSection === 'who-we-serve' ? 'active' : ''}`} 
          href="#who-we-serve"
          onClick={(e) => handleNavClick(e, 'who-we-serve')}
        >
          Who we serve
        </a>
        <a 
          className="model-nav-item" 
          href="#quote-section"
          onClick={(e) => handleNavClick(e, 'quote-section')}
        >
          Get a quote
        </a>
      </div>

      {/* INTRO SECTION */}
      <section className="intro">
        <div className="reveal">
          <div className="section-eyebrow">About this service</div>
          <h2 className="sh">CAD fence drawings that make<br /><span>every project run smoother.</span></h2>
        </div>
        <div className="intro-grid">
          <div className="intro-text reveal">
            <p><strong>VG Fence Products offers professional 2D CAD fence layout drawings</strong> for contractors, builders, property managers, and homeowners across Ontario. A clear, accurate drawing before any fence goes in the ground saves time, material, and money — and it's often required for building permits.</p>
            <p>Whether you need a straightforward residential property boundary layout or a detailed commercial site plan with multiple access points, gate placements, and material specifications, we produce drawings that your installation crew, municipality, and clients can all work from with confidence.</p>
            <p>Our drawings pair directly with our fence material supply — when you order your layout drawing through VG Fence Products, we can simultaneously spec and supply all the materials needed to execute it.</p>
            <ul className="check-list">
              <li>CAD-based fence layout drawings — residential and commercial</li>
              <li>Permit support drawings accepted by Ontario municipalities</li>
              <li>Material takeoff — accurate linear footage and component counts</li>
              <li>Gate placement and access point planning</li>
              <li>Chain link, wood, aluminum, ornamental, and composite layouts</li>
              <li>Property boundary fence design from survey or site measurements</li>
              <li>Temporary fence site plans for construction projects</li>
              <li>Fast turnaround — contact us for current lead times</li>
            </ul>
          </div>
          <div className="highlight-cards reveal">
            <div className="hcard">
              <div className="hcard-title">Drawing + materials in one place</div>
              <div className="hcard-desc">Order your fence layout drawing and your materials from the same supplier. We spec the drawing to the exact products we carry — so your material list matches your layout perfectly and there are no surprises at the job site.</div>
            </div>
            <div className="hcard">
              <div className="hcard-title">Permit-ready drawings</div>
              <div className="hcard-desc">Many Ontario municipalities require a basic fence drawing for building permits, especially on commercial properties and shared lot-line fences. Our permit support drawings are formatted to meet typical municipal requirements — saving your clients the back-and-forth.</div>
            </div>
            <div className="hcard">
              <div className="hcard-title">Accurate material takeoffs</div>
              <div className="hcard-desc">A properly drawn fence plan eliminates guesswork on material quantities. Contractors who order drawings before ordering materials waste less product, avoid short-orders, and can quote more accurately — making every job more profitable.</div>
            </div>
          </div>
        </div>
      </section>

      {/* RESIDENTIAL DRAWINGS */}
      <section className="model-section bg-white" id="residential">
        <div className="model-layout reveal">
          <div>
            <div className="model-accent-strip"></div>
            <div className="model-label">Service 01</div>
            <div className="model-name">Residential<br />Drawings</div>
            <div className="model-tagline">Property boundaries, pools, backyards &amp; permits</div>
            <p className="model-desc">Residential fence drawings cover the full range of homeowner and contractor needs — from a straightforward backyard fence layout to a complete property boundary plan with gate placement, grade changes, and permit documentation. We work from site measurements, survey documents, or municipality-provided site plans.</p>
            <div className="specs-block">
              <div className="specs-title">What's included</div>
              <div className="spec-row"><span className="spec-key">Fence line layout</span><span className="spec-val orange">Property boundary design</span></div>
              <div className="spec-row"><span className="spec-key">Gate placement</span><span className="spec-val">Access points, swing direction</span></div>
              <div className="spec-row"><span className="spec-key">Post spacing plan</span><span className="spec-val">Standard &amp; non-standard spans</span></div>
              <div className="spec-row"><span className="spec-key">Material takeoff</span><span className="spec-val">Panels, posts, hardware counts</span></div>
              <div className="spec-row"><span className="spec-key">Permit drawing</span><span className="spec-val orange">Municipality-ready format</span></div>
            </div>
            <div className="specs-block">
              <div className="specs-title">Fence types covered</div>
              <div className="spec-row"><span className="spec-key">Chain link</span><span className="spec-val">Residential &amp; commercial gauge</span></div>
              <div className="spec-row"><span className="spec-key">Wood fence</span><span className="spec-val">Privacy, picket, board-on-board</span></div>
              <div className="spec-row"><span className="spec-key">Aluminum / ornamental</span><span className="spec-val">All 4 panel models</span></div>
              <div className="spec-row"><span className="spec-key">Composite fence</span><span className="spec-val">All 3 colour options</span></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">Residential fence layout drawing</div>
              <div className="photo-sub">Upload drawing example 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' }}>Gate placement detail</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' }}>Material takeoff sheet</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* COMMERCIAL DRAWINGS */}
      <section className="model-section bg-gray" id="commercial">
        <div className="model-layout reverse reveal">
          <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">Commercial fence site plan</div>
              <div className="photo-sub">Upload drawing example 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' }}>Access point planning</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' }}>Temporary fence site plan</div>
              </div>
            </div>
          </div>
          <div>
            <div className="model-accent-strip"></div>
            <div className="model-label">Service 02</div>
            <div className="model-name">Commercial<br />Drawings</div>
            <div className="model-tagline">Site security, parking, construction &amp; industrial</div>
            <p className="model-desc">Commercial fence drawings involve larger perimeters, multiple access control points, vehicle gates, and often stricter permit requirements than residential projects. We produce full site layout drawings that your contractor team can execute from, and that your property management or development client can submit for approvals.</p>
            <div className="specs-block">
              <div className="specs-title">What's included</div>
              <div className="spec-row"><span className="spec-key">Full site perimeter layout</span><span className="spec-val orange">Scaled CAD drawing</span></div>
              <div className="spec-row"><span className="spec-key">Vehicle gate placement</span><span className="spec-val">Single &amp; double access</span></div>
              <div className="spec-row"><span className="spec-key">Pedestrian access planning</span><span className="spec-val">Controlled entry points</span></div>
              <div className="spec-row"><span className="spec-key">Security specification</span><span className="spec-val">Barbed wire, heights, gauge</span></div>
              <div className="spec-row"><span className="spec-key">Material takeoff</span><span className="spec-val orange">Full component count</span></div>
              <div className="spec-row"><span className="spec-key">Contractor submission format</span><span className="spec-val">Permit &amp; project ready</span></div>
            </div>
            <div className="specs-block">
              <div className="specs-title">Commercial applications</div>
              <div className="spec-row"><span className="spec-key">Industrial / warehouse sites</span><span className="spec-val">Security perimeter</span></div>
              <div className="spec-row"><span className="spec-key">Construction site temp fence</span><span className="spec-val">Site layout plans</span></div>
              <div className="spec-row"><span className="spec-key">Parking lot enclosures</span><span className="spec-val">Chain link layouts</span></div>
              <div className="spec-row"><span className="spec-key">Multi-unit residential</span><span className="spec-val">Developer site plans</span></div>
            </div>
          </div>
        </div>
      </section>

      {/* DRAWING CATALOGUE */}
      <section className="drawings-section" id="drawing-types">
        <div className="reveal">
          <div className="section-eyebrow">Full drawing catalogue</div>
          <h2 className="sh">Every drawing type<br /><span>we produce.</span></h2>
        </div>
        <div className="drawings-grid reveal">
          
          <div className="drawing-card">
            <div className="drawing-num">01</div>
            <div className="drawing-icon">
              <svg viewBox="0 0 20 20" fill="none">
                <rect x="2" y="2" width="16" height="16" rx="2" stroke="#E8572A" strokeWidth="1.5" fill="none"/>
                <path d="M5 10 L15 10 M5 6 L15 6 M5 14 L11 14" stroke="#E8572A" strokeWidth="1.2" strokeLinecap="round"/>
              </svg>
            </div>
            <div className="drawing-name">Residential fence layout</div>
            <div className="drawing-desc">Full backyard, front yard, and property boundary fence layouts for residential homeowners and fence contractors.</div>
          </div>

          <div className="drawing-card">
            <div className="drawing-num">02</div>
            <div className="drawing-icon">
              <svg viewBox="0 0 20 20" fill="none">
                <rect x="2" y="4" width="16" height="12" rx="1.5" stroke="#E8572A" strokeWidth="1.5" fill="none"/>
                <path d="M7 4 L7 16 M13 4 L13 16" stroke="#E8572A" strokeWidth="1" strokeLinecap="round" opacity=".5"/>
              </svg>
            </div>
            <div className="drawing-name">Commercial fence layout</div>
            <div className="drawing-desc">Large-scale commercial and industrial site perimeter drawings with multiple access points, security specs, and material takeoffs.</div>
          </div>

          <div className="drawing-card">
            <div className="drawing-num">03</div>
            <div className="drawing-icon">
              <svg viewBox="0 0 20 20" fill="none">
                <path d="M2 14 L2 6 L10 2 L18 6 L18 14 L10 18 Z" stroke="#E8572A" strokeWidth="1.5" fill="none" strokeLinejoin="round"/>
              </svg>
            </div>
            <div className="drawing-name">Site measurement drawings</div>
            <div className="drawing-desc">Drawings produced directly from contractor or surveyor field measurements, accurately scaled and ready for permit submission or contractor use.</div>
          </div>

          <div className="drawing-card">
            <div className="drawing-num">04</div>
            <div className="drawing-icon">
              <svg viewBox="0 0 20 20" fill="none">
                <rect x="2" y="3" width="3" height="14" rx="1.5" fill="#E8572A" opacity=".6"/>
                <rect x="15" y="3" width="3" height="14" rx="1.5" fill="#E8572A" opacity=".6"/>
                <line x1="2" y1="7" x2="18" y2="7" stroke="#E8572A" strokeWidth="1.2"/>
                <line x1="2" y1="11" x2="18" y2="11" stroke="#E8572A" strokeWidth="1.2"/>
              </svg>
            </div>
            <div className="drawing-name">Chain link fence drawings</div>
            <div className="drawing-desc">Residential and commercial chain link layouts including gauge specification, post spacing, fabric height, and gate placement.</div>
          </div>

          <div className="drawing-card">
            <div className="drawing-num">05</div>
            <div className="drawing-icon">
              <svg viewBox="0 0 20 20" fill="none">
                <rect x="3" y="3" width="14" height="14" rx="1" stroke="#E8572A" strokeWidth="1.5" fill="none"/>
                <path d="M3 8 L17 8 M3 12 L17 12 M8 3 L8 17" stroke="#E8572A" strokeWidth="1" strokeLinecap="round" opacity=".6"/>
              </svg>
            </div>
            <div className="drawing-name">Wood fence drawings</div>
            <div className="drawing-desc">Privacy fence, picket, and board-on-board wood fence layouts with post scheduling and material quantities by section.</div>
          </div>

          <div className="drawing-card">
            <div className="drawing-num">06</div>
            <div className="drawing-icon">
              <svg viewBox="0 0 20 20" fill="none">
                <rect x="2" y="6" width="16" height="9" rx="1.5" fill="none" stroke="#E8572A" strokeWidth="1.5"/>
                <rect x="4" y="2" width="2" height="16" rx="1" fill="#E8572A" opacity=".5"/>
                <rect x="14" y="2" width="2" height="16" rx="1" fill="#E8572A" opacity=".5"/>
              </svg>
            </div>
            <div className="drawing-name">Aluminum fence drawings</div>
            <div className="drawing-desc">Ornamental and aluminum railing fence drawings including model specification (Tokio, Rio, Denver, Oslo) and installation notes.</div>
          </div>

          <div className="drawing-card">
            <div className="drawing-num">07</div>
            <div className="drawing-icon">
              <svg viewBox="0 0 20 20" fill="none">
                <rect x="2" y="4" width="16" height="12" rx="2" fill="none" stroke="#E8572A" strokeWidth="1.5"/>
                <line x1="8" y1="4" x2="8" y2="16" stroke="#E8572A" strokeWidth="1" strokeLinecap="round" opacity=".5"/>
                <path d="M8 10 L12 10" stroke="#E8572A" strokeWidth="1.5" strokeLinecap="round"/>
              </svg>
            </div>
            <div className="drawing-name">Gate placement drawings</div>
            <div className="drawing-desc">Dedicated gate layout plans showing swing direction, clearance zones, latch side, hinge placement, and post sizing for all gate types.</div>
          </div>

          <div className="drawing-card">
            <div className="drawing-num">08</div>
            <div className="drawing-icon">
              <svg viewBox="0 0 20 20" fill="none">
                <path d="M2 16 L2 6 L10 2 L18 6 L18 16" stroke="#E8572A" strokeWidth="1.5" fill="none" strokeLinecap="round"/>
                <rect x="6" y="10" width="8" height="6" rx="1" fill="#E8572A" opacity=".3"/>
              </svg>
            </div>
            <div className="drawing-name">Property boundary design</div>
            <div className="drawing-desc">Fence layout drawings referenced to property line survey data, designed to accurately place the fence on or adjacent to the legal boundary.</div>
          </div>

          <div className="drawing-card">
            <div className="drawing-num">09</div>
            <div className="drawing-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"/>
              </svg>
            </div>
            <div className="drawing-name">Temporary fence site plans</div>
            <div className="drawing-desc">Construction site temporary fence layout plans showing panel runs, gate positions, access control points, and safety barrier zones.</div>
          </div>

          <div className="drawing-card">
            <div className="drawing-num">10</div>
            <div className="drawing-icon">
              <svg viewBox="0 0 20 20" fill="none">
                <rect x="2" y="2" width="16" height="16" rx="2" stroke="#E8572A" strokeWidth="1.5" fill="none"/>
                <path d="M6 14 L6 9 L10 6 L14 9 L14 14" stroke="#E8572A" strokeWidth="1.2" fill="none" strokeLinecap="round"/>
              </svg>
            </div>
            <div className="drawing-name">Material takeoff drawings</div>
            <div className="drawing-desc">Quantity estimation drawings that break down the full material list — linear footage, panel count, post count, hardware requirements — section by section.</div>
          </div>

          <div className="drawing-card">
            <div className="drawing-num">11</div>
            <div className="drawing-icon">
              <svg viewBox="0 0 20 20" fill="none">
                <rect x="3" y="2" width="14" height="16" rx="2" stroke="#E8572A" strokeWidth="1.5" fill="none"/>
                <path d="M6 7 L14 7 M6 10 L14 10 M6 13 L10 13" stroke="#E8572A" strokeWidth="1" strokeLinecap="round"/>
              </svg>
            </div>
            <div className="drawing-name">Permit support drawings</div>
            <div className="drawing-desc">Formatted fence drawings suitable for building permit applications with Ontario municipalities — scaled, labelled, and including required specification notes.</div>
          </div>

          <div className="drawing-card">
            <div className="drawing-num">12</div>
            <div className="drawing-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"/>
                <path d="M7 17 L7 12 L13 12 L13 17" stroke="#E8572A" strokeWidth="1.2" fill="none"/>
              </svg>
            </div>
            <div className="drawing-name">Contractor project planning</div>
            <div className="drawing-desc">Multi-phase project drawings for fence contractors managing complex residential or commercial jobs — section breakdowns, staging areas, and installation sequencing notes.</div>
          </div>

          <div className="drawing-card">
            <div className="drawing-num">13</div>
            <div className="drawing-icon">
              <svg viewBox="0 0 20 20" fill="none">
                <rect x="2" y="14" width="16" height="4" rx="1" fill="#E8572A" opacity=".5"/>
                <path d="M6 14 L6 4 M10 14 L10 2 M14 14 L14 6" stroke="#E8572A" strokeWidth="1.5" strokeLinecap="round"/>
              </svg>
            </div>
            <div className="drawing-name">Custom fence design drafting</div>
            <div className="drawing-desc">Bespoke fence design drawings built to client-specific requirements — irregular lot shapes, grade transitions, feature gates, and custom panel configurations.</div>
          </div>

          <div className="drawing-card">
            <div className="drawing-num">14</div>
            <div className="drawing-icon">
              <svg viewBox="0 0 20 20" fill="none">
                <rect x="2" y="3" width="16" height="14" rx="2" fill="none" stroke="#E8572A" strokeWidth="1.5"/>
                <circle cx="6" cy="7" r="1.5" fill="#E8572A"/>
                <circle cx="10" cy="7" r="1.5" fill="#E8572A" opacity=".5"/>
                <circle cx="14" cy="7" r="1.5" fill="#E8572A" opacity=".3"/>
                <path d="M4 12 L16 12" stroke="#E8572A" strokeWidth="1" strokeLinecap="round" opacity=".4"/>
              </svg>
            </div>
            <div className="drawing-name">CAD-based layout preparation</div>
            <div className="drawing-desc">Full CAD drawing preparation from supplied site plans, survey documents, or aerial imagery — formatted for contractor, client, and municipal use.</div>
          </div>

        </div>
      </section>

      {/* HOW IT WORKS */}
      <section className="process-section" id="process">
        <div className="reveal">
          <div className="section-eyebrow" style={{ color: 'rgba(255,255,255,.5)' }}>How it works</div>
          <h2 className="sh sh-white">Simple process.<br /><span>Professional output.</span></h2>
        </div>
        <div className="process-grid reveal">
          <div className="process-step">
            <div className="step-num">01</div>
            <div className="step-title">Send us your info</div>
            <div className="step-desc">Share your site measurements, survey, property plan, or aerial image. Tell us the fence type, heights, gate locations, and what the drawing will be used for (permit, contractor, or client).</div>
          </div>
          <div className="process-step">
            <div className="step-num">02</div>
            <div className="step-title">We prepare your drawing</div>
            <div className="step-desc">Our team produces a scaled CAD layout drawing of your fence project — including fence lines, gate placements, post schedule, and all required specification notes.</div>
          </div>
          <div className="process-step">
            <div className="step-num">03</div>
            <div className="step-title">Review &amp; approve</div>
            <div className="step-desc">We send you the drawing for review. Any adjustments to fence lines, gate positions, or material specs are made before final delivery. Your satisfaction with the accuracy is the standard.</div>
          </div>
          <div className="process-step">
            <div className="step-num">04</div>
            <div className="step-title">Drawing delivered</div>
            <div className="step-desc">Final drawing delivered digitally — ready to submit for permits, hand to your installation crew, or present to your client. Order materials from us in the same step.</div>
          </div>
        </div>
      </section>

      {/* WHO WE SERVE */}
      <section className="targets-section" id="who-we-serve">
        <div className="reveal">
          <div className="section-eyebrow">Who uses our drawing services</div>
          <h2 className="sh">Built for every<br /><span>fence professional.</span></h2>
        </div>
        <div className="targets-grid reveal">
          <div className="target-card">
            <div className="target-name">Fence contractors</div>
            <div className="target-desc">Accurate drawings reduce material waste, speed up quoting, and give clients a professional presentation before a single post goes in the ground.</div>
          </div>
          <div className="target-card">
            <div className="target-name">General contractors</div>
            <div className="target-desc">Fence scope drawings for larger commercial, residential development, and renovation projects where fencing is one component of a broader build.</div>
          </div>
          <div className="target-card">
            <div className="target-name">Homeowners</div>
            <div className="target-desc">Property owners who need a permit drawing for their fence project or want a clear plan to present to their chosen fence contractor.</div>
          </div>
          <div className="target-card">
            <div className="target-name">Property managers</div>
            <div className="target-desc">Commercial and residential property managers planning fence replacements, upgrades, or additions across managed properties and facilities.</div>
          </div>
          <div className="target-card">
            <div className="target-name">Developers &amp; builders</div>
            <div className="target-desc">Site developers needing fence scope drawings as part of a broader site plan package — for new builds, subdivisions, and commercial developments.</div>
          </div>
          <div className="target-card">
            <div className="target-name">Landscaping companies</div>
            <div className="target-desc">Landscapers who include fence as part of a complete outdoor project and need a professional drawing to support the scope and permit requirements.</div>
          </div>
          <div className="target-card">
            <div className="target-name">Municipalities &amp; institutions</div>
            <div className="target-desc">Government contractors and institutional facility managers requiring documented fence plans for public infrastructure, schools, parks, and recreation facilities.</div>
          </div>
          <div className="target-card">
            <div className="target-name">Pool contractors</div>
            <div className="target-desc">Pool installers who need a fence drawing that satisfies Ontario pool enclosure requirements — showing fence height, gate placement, and barrier continuity.</div>
          </div>
        </div>
      </section>

      {/* FAQ + SEO SECTION */}
      <section className="faq-section">
        <div className="reveal">
          <div className="section-eyebrow">Helpful information</div>
          <h2 className="sh">Fence drawing services<br /><span>knowledge base.</span></h2>
        </div>
        <div className="faq-seo-grid">
          <div className="faq reveal">
            {[
              {
                q: "What information do I need to provide to get a fence drawing?",
                a: "The more detail you can provide, the better. Ideal inputs include a site plan or survey document, lot dimensions, fence type and height, gate locations, and what the drawing will be used for (permit, contractor use, or client presentation). If you don't have a formal survey, site measurements or a scaled property plan are a good starting point. Contact us and we'll tell you exactly what we need for your specific project type."
              },
              {
                q: "Do your permit drawings meet Ontario municipality requirements?",
                a: "Our permit support drawings are formatted to meet the typical requirements of Ontario municipalities for fence permit applications — including scaled site plan, fence height and type notation, property line referencing, and gate placement. Individual municipality requirements can vary, and we recommend confirming specific requirements with your local building department before submission. We can adjust the drawing format to meet specific municipal notes if required."
              },
              {
                q: "What fence types can you produce drawings for?",
                a: "We produce drawings for all fence types we supply — chain link (residential and commercial), wood fences (privacy, picket, board-on-board), aluminum and ornamental fences (all four models), composite fences, glass railing, and temporary fence site plans. We can also produce drawings for fence types outside our standard product line on request."
              },
              {
                q: "Can I order fence materials at the same time as the drawing?",
                a: "Yes — and we recommend it. When you order your fence drawing through VG Fence Products, we spec the layout to the exact products we carry. Once the drawing is approved, the material takeoff is ready and you can order everything in one step. This eliminates the gap between drawing and material spec that often causes ordering errors or quantity surprises on the job site."
              },
              {
                q: "How long does it take to get a fence drawing?",
                a: "Turnaround time depends on project complexity and our current volume. Simple residential fence layouts are typically faster to produce than complex commercial site plans. Contact us with your project details and timeline and we'll give you an accurate turnaround estimate. For urgent permit applications, let us know and we'll do our best to prioritize your drawing."
              },
              {
                q: "Do you serve areas outside Kitchener–Waterloo?",
                a: "Yes. Our drawing services are available to clients across Ontario — not limited by geography. We work digitally, so fence drawings can be produced for any property in Ontario based on supplied measurements, survey documents, or site plans. For fence material supply and delivery, our service radius is 250km from our Kitchener–Waterloo base."
              }
            ].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 ? '240px' : '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>2D fence drawing services — Kitchener, Waterloo &amp; Ontario</h3>
            <p>VG Fence Products offers <strong>professional CAD-based 2D fence layout drawings</strong> to fence contractors, builders, homeowners, and property managers across Ontario. Our drawing service covers every project type — from a straightforward residential backyard fence to a complete commercial site perimeter plan with multiple access gates and security specifications.</p>
            <h3>Fence permit drawings — Ontario municipalities</h3>
            <p>Many Ontario municipalities require a scaled <strong>fence permit drawing</strong> for building permit applications, particularly on commercial properties and shared lot-line fence installations. Our permit support drawings are formatted to meet typical municipal requirements — saving your clients the back-and-forth with the building department and keeping your project moving on schedule.</p>
            <h3>Material takeoff drawings — accurate quantities, every time</h3>
            <p>A properly drawn fence layout produces a <strong>material takeoff</strong> — a precise count of every panel, post, hardware piece, and gate component required for the project. Contractors who use material takeoffs before ordering waste less product, avoid costly short-orders at critical project phases, and can quote more accurately from the start.</p>
            <h3>Drawing + supply — one supplier, one invoice</h3>
            <p>VG Fence Products is unique in offering both fence drawing services and fence material supply under the same roof. When you order your drawing from us, the material takeoff is built into the drawing — and you can order your materials in the same conversation. One supplier, one point of contact, and materials spec'd exactly to your layout.</p>
          </div>
        </div>
      </section>

      {/* TERRITORY SECTION */}
      <section className="territory">
        <div className="reveal">
          <div className="section-eyebrow" style={{ color: 'rgba(255,255,255,.5)' }}>Where we serve</div>
          <h2 className="sh sh-white">Fence drawing services<br /><span>across Ontario.</span></h2>
          <p className="territory-intro">Our 2D fence drawing services are available across Ontario. Material supply and delivery covers 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/fence-drawing-services-kitchener">Kitchener</a></li>
              <li className="primary"><a href="https://vgfence.com/fence-drawing-services-waterloo">Waterloo</a></li>
              <li className="primary"><a href="https://vgfence.com/fence-drawing-services-cambridge">Cambridge</a></li>
              <li>Ayr</li><li>Breslau</li><li>Elmira</li><li>St. Jacobs</li><li>New Hamburg</li><li>Baden</li><li>Wellesley</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/fence-drawing-services-guelph">Guelph</a></li>
              <li>Fergus</li><li>Elora</li><li>Rockwood</li><li>Acton</li><li>Georgetown</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/fence-drawing-services-hamilton">Hamilton</a></li>
              <li className="primary"><a href="https://vgfence.com/fence-drawing-services-burlington">Burlington</a></li>
              <li>Milton</li><li>Oakville</li><li>Stoney Creek</li><li>Grimsby</li><li>Brantford</li><li>Paris</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/fence-drawing-services-mississauga">Mississauga</a></li>
              <li className="primary"><a href="https://vgfence.com/fence-drawing-services-brampton">Brampton</a></li>
              <li>Vaughan</li><li>Markham</li><li>Richmond Hill</li>
            </ul>
          </div>
          <div className="region-block">
            <div className="region-name">Oxford &amp; Perth</div>
            <ul className="region-cities">
              <li className="primary">Woodstock</li><li className="primary">Stratford</li>
              <li>Ingersoll</li><li>Tillsonburg</li><li>St. Marys</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/fence-drawing-services-london">London</a></li>
              <li>St. Thomas</li><li>Strathroy</li><li>Komoka</li>
            </ul>
          </div>
          <div className="region-block">
            <div className="region-name">Southwest Ontario</div>
            <ul className="region-cities">
              <li className="primary">Windsor</li><li className="primary">Chatham</li>
              <li>Leamington</li><li>Sarnia</li><li>Petrolia</li>
            </ul>
          </div>
          <div className="region-block">
            <div className="region-name">Extended Service</div>
            <ul className="region-cities">
              <li className="primary">Niagara Falls</li><li>St. Catharines</li><li>Welland</li>
              <li className="primary">Barrie</li><li>Owen Sound</li><li>Collingwood</li>
            </ul>
          </div>
        </div>
      </section>

      {/* QUOTE CTA SECTION */}
      <section className="quote-cta" id="quote-section">
        <div className="quote-inner">
          <div className="quote-left">
            <h2>Get your fence drawing started.</h2>
            <p>Tell us your fence type, project size, and what you need the drawing for — we'll come back within 2 business hours with a quote and turnaround time.</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 drawing quote
            </div>
            <div style={{ fontSize: '12px', color: 'rgba(255,255,255,.6)', marginBottom: '20px' }}>
              Response within 2 business hours
            </div>
            
            {formStatus === 'success' ? (
              <div className="form-success">
                <div className="fs-icon">✅</div>
                <div className="fs-title">Request Sent!</div>
                <p className="fs-note font-body">
                  Thank you! We have received your drawing 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 Fence 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}
                    />
                  </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">Drawing type needed</label>
                <select 
                  className="qi"
                  name="drawingType"
                  value={formData.drawingType}
                  onChange={handleInputChange}
                  required
                >
                  <option value="">Select drawing type...</option>
                  <option value="Residential fence layout">Residential fence layout</option>
                  <option value="Commercial fence / site plan">Commercial fence / site plan</option>
                  <option value="Permit support drawing">Permit support drawing</option>
                  <option value="Material takeoff drawing">Material takeoff drawing</option>
                  <option value="Gate placement drawing">Gate placement drawing</option>
                  <option value="Property boundary fence design">Property boundary fence design</option>
                  <option value="Temporary fence site plan">Temporary fence site plan</option>
                  <option value="Chain link fence drawing">Chain link fence drawing</option>
                  <option value="Wood fence drawing">Wood fence drawing</option>
                  <option value="Custom fence design drafting">Custom fence design drafting</option>
                  <option value="Multiple / not sure — describe below">Multiple / not sure — describe below</option>
                </select>
                <div className="qrow">
                  <div>
                    <label className="ql">City / location</label>
                    <input 
                      className="qi" 
                      type="text" 
                      name="city"
                      placeholder="Kitchener, Guelph..."
                      value={formData.city}
                      onChange={handleInputChange}
                    />
                  </div>
                  <div>
                    <label className="ql">Approx. fence length</label>
                    <input 
                      className="qi" 
                      type="text" 
                      name="length"
                      placeholder="e.g. 200 linear ft"
                      value={formData.length}
                      onChange={handleInputChange}
                    />
                  </div>
                </div>
                <button 
                  className="qbtn" 
                  type="submit"
                  disabled={formStatus === 'submitting'}
                >
                  {formStatus === 'submitting' ? 'Sending...' : 'Send drawing 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>
  );
}
