Files
AV-Yard-Pro-AI-Pilots-Client/contact.html
T

547 lines
30 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Next Gen Landscaping | Antelope Valley Yard Care & Cleanups</title>
<meta name="description" content="Contact Next Gen Landscaping in Palmdale & Lancaster. Call (661) 581-7278, text yard photos for a fast quote, or submit your property details online.">
<meta name="keywords" content="contact Next Gen landscaping, yard work Palmdale phone number, Lancaster weed abatement contact, Antelope Valley yard cleanups estimate">
<!-- Favicon & Brand Manifest -->
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="manifest" href="site.webmanifest">
<meta name="theme-color" content="#00e676">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="Contact Next Gen Landscaping & Yard Care | Antelope Valley">
<meta property="og:description" content="Get a fast, transparent quote for Antelope Valley weed abatement, cleanups, mowing, and xeriscaping. Call or text (661) 581-7278.">
<meta property="og:image" content="images/brand-emblem.jpg">
<meta property="og:image:width" content="1024">
<meta property="og:image:height" content="1024">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<!-- LocalBusiness Schema -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HomeAndConstructionBusiness",
"name": "Next Gen Landscaping & Yard Care",
"image": "images/hero.jpg",
"telephone": "(661) 581-7278",
"email": "info@avyardpro.com",
"priceRange": "$$",
"address": {
"@type": "PostalAddress",
"addressLocality": "Palmdale",
"addressRegion": "CA",
"postalCode": "93550",
"addressCountry": "US"
},
"areaServed": [
"Palmdale, CA",
"Lancaster, CA",
"Quartz Hill, CA",
"Acton, CA",
"Rosamond, CA"
]
}
</script>
</head>
<body>
<!-- 1. TOP ANNOUNCEMENT BAR -->
<aside class="announcement-bar">
<div class="container announcement-content">
<span class="announcement-badge">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
RAPID RESPONSE
</span>
<span>Text yard photos to <strong>(661) 581-7278</strong> for a same-day ballpark quote!</span>
</div>
</aside>
<!-- 2. STICKY HEADER -->
<header class="site-header" id="header">
<div class="container header-container">
<a href="index.html" class="brand-logo" aria-label="Next Gen Landscaping Home">
<div class="logo-symbol">
<img src="logo-mark.svg" alt="Next Gen Landscaping & Yardwork Logo" width="44" height="44" class="custom-logo-mark">
</div>
<div class="logo-text">
<span class="brand-name">NEXT <span style="color: var(--neon-lime);">GEN</span></span>
<span class="brand-tagline">Landscaping & Yardwork</span>
</div>
</a>
<!-- Desktop Navigation -->
<nav class="nav-desktop" aria-label="Main Navigation">
<a href="index.html#services" class="nav-link">Services</a>
<a href="index.html#calculator" class="nav-link">Cost Calculator</a>
<a href="index.html#transformation" class="nav-link">Before & After</a>
<a href="index.html#areas" class="nav-link">Service Areas</a>
<a href="index.html#reviews" class="nav-link">Reviews</a>
<a href="contact.html" class="nav-link active" style="color: var(--neon-text-shade); font-weight: 800;">Contact Us</a>
</nav>
<!-- Header CTAs -->
<div class="header-cta-group">
<a href="tel:6615817278" class="phone-direct" aria-label="Call Next Gen Landscaping">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
<span>(661) 581-7278</span>
</a>
<button class="btn btn-primary open-quote-btn" id="header-quote-btn">
Free Estimate
</button>
<button class="mobile-menu-btn" id="mobile-toggle" aria-label="Toggle navigation menu">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
</button>
</div>
</div>
<!-- Mobile Drawer Menu -->
<div class="mobile-nav-drawer" id="mobile-drawer">
<a href="index.html#services" class="nav-link mobile-link">Services</a>
<a href="index.html#calculator" class="nav-link mobile-link">Cost Calculator</a>
<a href="index.html#transformation" class="nav-link mobile-link">Before & After</a>
<a href="index.html#areas" class="nav-link mobile-link">Service Areas</a>
<a href="index.html#reviews" class="nav-link mobile-link">Customer Reviews</a>
<a href="contact.html" class="nav-link mobile-link" style="color: var(--neon-text-shade); font-weight: 800;">Contact Us</a>
<button class="btn btn-primary open-quote-btn" style="width: 100%; margin-top: 10px;">Request Instant Quote</button>
</div>
</header>
<!-- 3. SUBPAGE HERO -->
<main id="main-content">
<section class="subpage-hero">
<div class="container">
<nav class="breadcrumbs" aria-label="Breadcrumb">
<a href="index.html">Home</a>
<span class="separator">/</span>
<span>Contact Us</span>
</nav>
<div class="section-tag">
<span class="badge">
<span class="badge-dot"></span>
Direct High Desert Dispatch
</span>
</div>
<h1 class="subpage-title">
Contact <span class="neon-text">Next Gen</span>
</h1>
<p class="subpage-subtitle">
Have an overgrown yard, dry tumbleweeds, or a county weed abatement deadline? Contact our Antelope Valley crew directly by phone, text photo, or submit your property details below for a fast, honest estimate.
</p>
</div>
</section>
<!-- 4. CONTACT GRID & SUBMISSION FORM -->
<section class="contact-section">
<div class="container">
<div class="contact-grid">
<!-- Left Column: Contact Methods & Info -->
<div class="contact-info-panel">
<!-- Card 1: Direct Call -->
<div class="contact-card">
<div class="contact-card-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
</div>
<div class="contact-card-content">
<h4>Call Our Team Direct</h4>
<p>Speak directly with a local crew lead about scheduling, pricing, and emergency cleanups.</p>
<a href="tel:6615817278" class="contact-card-link">
(661) 581-7278 &rarr;
</a>
</div>
</div>
<!-- Card 2: Text Photos for Quote -->
<div class="contact-card">
<div class="contact-card-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
</div>
<div class="contact-card-content">
<h4>Text Photos for Instant Estimate</h4>
<p>Snap 23 photos of your front or back yard and text them with your cross streets for a rapid quote.</p>
<a href="sms:6615817278?body=Hi%20Next%20Gen,%20I'd%20like%20a%20yard%20quote%20for%20my%20property%20in%20" class="contact-card-link">
Text Photos: (661) 581-7278 &rarr;
</a>
</div>
</div>
<!-- Card 3: Email & Territory -->
<div class="contact-card">
<div class="contact-card-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
</div>
<div class="contact-card-content">
<h4>Email Inquiries</h4>
<p>For official documentation, HOA letters, or detailed site proposals.</p>
<a href="mailto:info@avyardpro.com" class="contact-card-link">
info@avyardpro.com &rarr;
</a>
</div>
</div>
<!-- Card 4: Operating Hours -->
<div class="contact-card" style="border-left: 3px solid var(--neon-green);">
<div class="contact-card-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
</div>
<div class="contact-card-content">
<h4>Service Hours & Dispatch</h4>
<p style="margin-bottom: 4px;"><strong>Monday Friday:</strong> 6:30 AM 7:00 PM</p>
<p style="margin-bottom: 4px;"><strong>Saturday:</strong> 7:00 AM 6:00 PM</p>
<p><strong>Sunday:</strong> On-call for windstorm & fire emergencies</p>
</div>
</div>
<!-- Card 5: Tooling Note -->
<div class="contact-card" style="background: #fdfefe; border: 1.5px dashed #cbd5e1;">
<div class="contact-card-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path></svg>
</div>
<div class="contact-card-content">
<h4>Residential Care Guarantee</h4>
<p>We work with commercial-grade mowers, string trimmers, rakes, and haul trailers—never destructive heavy tractors. Your fences, underground pipes, and walls are 100% safe.</p>
</div>
</div>
</div>
<!-- Right Column: Interactive Quote / Contact Form -->
<div class="contact-form-panel">
<div class="contact-form-header">
<span class="badge" style="margin-bottom: 10px;">Free On-Site Assessment</span>
<h3>Request Your Free Quote</h3>
<p>Fill out your project details below. Our team logs every submission and responds within 15 minutes during work hours.</p>
</div>
<!-- The Form -->
<form id="contact-form">
<div class="form-row">
<div class="form-group">
<label class="form-label" for="contact-name">Your Full Name *</label>
<input type="text" id="contact-name" class="form-control" placeholder="John Smith" required autocomplete="name">
</div>
<div class="form-group">
<label class="form-label" for="contact-phone">Phone Number *</label>
<input type="tel" id="contact-phone" class="form-control" placeholder="(661) 000-0000" required autocomplete="tel" inputmode="tel">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label" for="contact-address">Property Address / Cross Streets *</label>
<input type="text" id="contact-address" class="form-control" placeholder="e.g. 10th St West & Ave N, Palmdale" required autocomplete="street-address">
</div>
<div class="form-group">
<label class="form-label" for="contact-service">Primary Service Needed *</label>
<select id="contact-service" class="form-control" required>
<option value="LA County Weed Abatement">LA County Fire Weed Abatement</option>
<option value="Tumbleweed Removal & Cleanout" selected>Tumbleweed Removal & Cleanout</option>
<option value="General Yardwork & Mowing">General Yardwork & Mowing</option>
<option value="Synthetic Turf Installation">Synthetic Turf Installation</option>
<option value="Desert Xeriscape & Rock">Desert Xeriscape & Rock</option>
<option value="Tree Trimming & Palms">Tree Trimming & Palms</option>
<option value="Smart Irrigation Repair">Smart Irrigation Repair</option>
<option value="Other Yard Care">Other Yard Care</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label" for="contact-size">Approximate Lot Size</label>
<select id="contact-size" class="form-control">
<option value="Front Yard Only">Front Yard Only (~2,000 sq ft)</option>
<option value="Standard Suburb Lot" selected>Standard Suburb Lot (~1/4 Acre)</option>
<option value="Half-Acre Parcel">Half-Acre Parcel (~20,000 sq ft)</option>
<option value="Large Residential Parcel">Large Residential Parcel (1+ Acre)</option>
</select>
</div>
<div class="form-group">
<label class="form-label" for="contact-urgency">Desired Timeframe</label>
<select id="contact-urgency" class="form-control">
<option value="Urgent / Same-Day">Urgent (County Deadline / Same Day)</option>
<option value="Within 48 Hours" selected>Within 48 Hours</option>
<option value="Next Week">Sometime Next Week</option>
<option value="Planning Ahead">Planning Ahead / General Estimate</option>
</select>
</div>
</div>
<div class="form-group">
<label class="form-label" for="contact-notes">Project Notes & Details</label>
<textarea id="contact-notes" class="form-control" rows="4" placeholder="Tell us about the overgrowth, gate access, tumbleweed piles, or specific concerns..."></textarea>
</div>
<button type="submit" class="btn btn-primary btn-lg" style="width: 100%; margin-top: 10px;">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
Send Quote Request
</button>
<div style="text-align: center; margin-top: 14px; font-size: 0.84rem; color: var(--text-muted);">
Prefer text messaging? Text photos directly to <a href="sms:6615817278" style="color: var(--neon-text-shade); font-weight: 700;">(661) 581-7278</a>
</div>
</form>
<!-- Success State -->
<div class="form-submission-success" id="contact-success-box">
<div class="success-icon-box">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>
<h3 style="font-size: 1.5rem; color: var(--brand-black); margin-bottom: 8px;">Quote Request Dispatched!</h3>
<p style="font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 16px;">
Thank you! Your quote request has been logged under Reference ID: <strong id="contact-lead-id" style="color: var(--neon-text-shade);">#NG-LEAD</strong>.
</p>
<p style="font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 24px;">
A Next Gen team member will review your property details and call or text you back within 15 minutes.
</p>
<a href="sms:6615817278" id="contact-sms-link" class="btn btn-secondary btn-lg" style="width: 100%;">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
Speed Up: Text Quote Directly to Crew
</a>
</div>
</div>
</div>
</div>
</section>
<!-- 5. FAQ SECTION -->
<section class="section" id="contact-faq" style="background: #f7faf8;">
<div class="container">
<div class="section-header">
<div class="section-tag"><span class="badge">Booking Questions</span></div>
<h2 class="section-title">Common Questions About <span class="neon-text">Quotes & Estimates</span></h2>
</div>
<div class="faq-accordion-wrapper">
<details class="faq-item" name="contact-faq" open>
<summary class="faq-question">How fast can someone come out to inspect my yard?</summary>
<div class="faq-answer">
We offer same-day or 24-hour on-site assessments throughout Palmdale, Lancaster, Quartz Hill, and Acton. If you text photos of your yard to (661) 581-7278, we can frequently give you an immediate ballpark quote within 30 minutes.
</div>
</details>
<details class="faq-item" name="contact-faq">
<summary class="faq-question">Do I have to be home for the yard estimate?</summary>
<div class="faq-answer">
No! As long as side gates are unlocked and dogs are secured inside, our crew can walk the perimeter, assess weed density and haul volume, and call or text you the written estimate immediately.
</div>
</details>
<details class="faq-item" name="contact-faq">
<summary class="faq-question">Do you charge for quotes?</summary>
<div class="faq-answer">
Zero charge. All on-site assessments, phone estimates, and photo quotes in the Antelope Valley are 100% free with no obligation.
</div>
</details>
<details class="faq-item" name="contact-faq">
<summary class="faq-question">What payment methods do you accept?</summary>
<div class="faq-answer">
We accept Cash, Major Credit/Debit Cards, Zelle, Venmo, and local checks upon complete job satisfaction.
</div>
</details>
</div>
</div>
</section>
<!-- 6. FINAL CTA BANNER -->
<section class="cta-banner-section">
<div class="container">
<div class="cta-banner-card">
<h2>Ready To Reclaim Your <span class="neon-text">High Desert Yard?</span></h2>
<p>
Don't let windblown tumbleweeds and fire hazards take over. Call Next Gen today for immediate, friendly yard care.
</p>
<div class="cta-banner-actions">
<a href="tel:6615817278" class="btn btn-primary btn-lg">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
Direct Call (661) 581-7278
</a>
<a href="sms:6615817278?body=Hi%20Next%20Gen,%20I'd%20like%20a%20yard%20quote" class="btn btn-secondary btn-lg" style="background: rgba(255,255,255,0.1); color: #ffffff; border-color: rgba(255,255,255,0.25);">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
Text Yard Photos
</a>
</div>
</div>
</div>
</section>
</main>
<!-- 7. FOOTER -->
<footer class="site-footer">
<div class="container">
<div class="footer-top">
<div class="footer-brand">
<div class="brand-logo">
<div class="logo-symbol">
<img src="logo-mark.svg" alt="Next Gen Landscaping & Yardwork Logo" width="44" height="44" class="custom-logo-mark">
</div>
<div class="logo-text">
<span class="brand-name">NEXT <span style="color: var(--neon-lime);">GEN</span></span>
<span class="brand-tagline">Landscaping & Yardwork</span>
</div>
</div>
<p>
Antelope Valley's premier landscaping, fire hazard weed abatement, desert rockscaping, and synthetic turf contractor. Palmdale & Lancaster, California.
</p>
<div style="margin-top: 14px; font-size: 0.85rem; color: var(--neon-lime); font-weight: 700;">
Direct: (661) 581-7278 &bull; info@avyardpro.com
</div>
</div>
<div>
<h4 class="footer-heading">Services</h4>
<ul class="footer-links">
<li><a href="weed-abatement.html">LA County Weed Abatement</a></li>
<li><a href="tumbleweed-removal.html">Tumbleweed Removal</a></li>
<li><a href="synthetic-turf.html">Synthetic Turf Installation</a></li>
<li><a href="desert-xeriscape.html">Desert Xeriscape & Rock</a></li>
<li><a href="tree-trimming.html">Tree Trimming & Palms</a></li>
<li><a href="irrigation-repair.html">Smart Irrigation Repair</a></li>
</ul>
</div>
<div>
<h4 class="footer-heading">Service Areas</h4>
<ul class="footer-links">
<li><a href="service-areas.html" style="color: var(--neon-lime); font-weight: 700;">All Service Areas &rarr;</a></li>
<li><a href="palmdale-landscaping.html">Palmdale, CA (93550, 93551)</a></li>
<li><a href="lancaster-landscaping.html">Lancaster, CA (93534, 93535)</a></li>
<li><a href="quartz-hill-landscaping.html">Quartz Hill, CA (93536)</a></li>
<li><a href="acton-landscaping.html">Acton &amp; Agua Dulce</a></li>
<li><a href="rosamond-landscaping.html">Rosamond &amp; Mojave</a></li>
</ul>
</div>
<div>
<h4 class="footer-heading">Working Hours</h4>
<ul class="footer-links" style="font-size: 0.85rem; color: #cbd5e1;">
<li><strong>Mon Fri:</strong> 6:30 AM 7:00 PM</li>
<li><strong>Saturday:</strong> 7:00 AM 6:00 PM</li>
<li><strong>Sunday:</strong> Emergency Storm Calls</li>
<li style="margin-top: 10px; color: var(--neon-lime); display: flex; align-items: center; gap: 6px;">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
24-Hr Text Dispatch Available
</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<div>
&copy; <span id="current-year">2026</span> Next Gen Landscaping & Yard Care. All rights reserved. &bull; <a href="privacy-policy.html" style="color: #94a3b8; text-decoration: underline;">Privacy Policy (CCPA / CPRA)</a>
</div>
<div>
Licensed, Bonded & Insured &bull; High Desert Fire Hazard Compliant
</div>
</div>
</div>
</footer>
<!-- 8. NATIVE MODAL DIALOG (<dialog id="quote-dialog">) -->
<dialog id="quote-dialog" aria-labelledby="modal-title">
<div class="modal-content">
<button class="modal-close-btn" id="modal-close" aria-label="Close quote modal">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</button>
<div class="modal-header">
<span class="badge" style="margin-bottom: 8px;">Quick Response Guarantee</span>
<h3 id="modal-title">Request Your <span class="neon-text">Free Estimate</span></h3>
<p>Fill out the form below or call us directly. Next Gen responds within 15 minutes during daylight hours.</p>
</div>
<form id="quote-form">
<div class="form-row">
<div class="form-group">
<label class="form-label" for="lead-name">Your Name</label>
<input type="text" id="lead-name" class="form-control" placeholder="John Doe" required autocomplete="name">
</div>
<div class="form-group">
<label class="form-label" for="lead-phone">Phone Number</label>
<input type="tel" id="lead-phone" class="form-control" placeholder="(661) 000-0000" required autocomplete="tel" inputmode="tel">
</div>
</div>
<div class="form-group">
<label class="form-label" for="lead-address">Property Address / Zip Code</label>
<input type="text" id="lead-address" class="form-control" placeholder="e.g. 10th St West, Palmdale, CA" required autocomplete="street-address">
</div>
<div class="form-group">
<label class="form-label" for="lead-service">Primary Service</label>
<select id="lead-service" class="form-control">
<option value="Weed Abatement">LA County Weed Abatement</option>
<option value="Tumbleweed Removal" selected>Tumbleweed & Yard Cleanout</option>
<option value="General Yardwork">General Yard Maintenance & Mowing</option>
<option value="Synthetic Turf">Synthetic Turf Installation</option>
<option value="Desert Xeriscape">Desert Xeriscape & Rock</option>
<option value="Tree Trimming">Tree Trimming & Palms</option>
<option value="Irrigation Repair">Smart Drip Irrigation Repair</option>
</select>
</div>
<div class="form-group">
<label class="form-label" for="lead-notes">Project Notes</label>
<textarea id="lead-notes" class="form-control" placeholder="Describe your yard conditions, tumbleweed overgrowth, or urgency..."></textarea>
</div>
<button type="submit" class="btn btn-primary" style="width: 100%; margin-top: 10px;">
Send Quote Request
</button>
<p style="font-size: 0.78rem; color: var(--text-muted); text-align: center; margin-top: 12px;">
Next Gen values your privacy. Zero spam. We use your details only to provide your estimate.
</p>
</form>
</div>
</dialog>
<!-- 9. TOAST NOTIFICATION -->
<div class="toast-notification" id="toast" role="status" aria-live="polite">
<div class="toast-icon">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
</div>
<div>
<div style="font-weight: 700; font-size: 0.95rem;">Request Dispatched!</div>
<div style="font-size: 0.82rem; color: #cbd5e1;">A Next Gen Antelope Valley team member will reach out shortly.</div>
</div>
</div>
<!-- 10. MOBILE STICKY ACTION BAR -->
<div class="mobile-sticky-bar">
<div class="mobile-sticky-inner">
<a href="tel:6615817278" class="mobile-bar-btn mobile-bar-call">
<svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
<span>Call</span>
</a>
<a href="sms:6615817278?body=Hi%20Next%20Gen,%20I'd%20like%20a%20yard%20quote%20for%20my%20property%20in%20" class="mobile-bar-btn mobile-bar-text">
<svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
<span>Text Photo</span>
</a>
<button class="mobile-bar-btn mobile-bar-quote open-quote-btn">
<svg viewBox="0 0 24 24" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
<span>Get Quote</span>
</button>
</div>
</div>
<script src="app.js"></script>
</body>
</html>