import Link from 'next/link';

export default function Home() {
  return (
    <>
      {/* HERO */}
      <section className="hero">
        <div className="hero-pattern"></div>
        <div className="hero-accent"></div>
        <div className="hero-accent2"></div>

        <div className="hero-left">
          <div className="hero-eyebrow">Kitchener–Waterloo Region · Ontario</div>
          <h1 className="hero-h1">
            Ontario's B2B<br />
            <em>Fence Supply</em><br />
            Partner
          </h1>
          <p className="hero-sub">
            Supplying contractors, builders, and property managers across Ontario with{' '}
            <strong>chain link, ornamental, composite, glass railing, and stain products</strong> —
            with same-day job site delivery across a 250km radius from KWC.
          </p>
          <div className="hero-btns">
            <Link href="/#quote" className="btn-primary">Request contractor pricing</Link>
            <Link href="/products" className="btn-secondary">View all products</Link>
          </div>
          <div className="hero-stats">
            <div>
              <div className="stat-val">3+</div>
              <div className="stat-label">Years serving KWC</div>
            </div>
            <div>
              <div className="stat-val">250km</div>
              <div className="stat-label">Delivery radius</div>
            </div>
            <div>
              <div className="stat-val">9</div>
              <div className="stat-label">Product lines</div>
            </div>
            <div>
              <div className="stat-val">B2B</div>
              <div className="stat-label">Contractor focus</div>
            </div>
          </div>
        </div>

        <div className="hero-right" id="quote">
          <div className="quote-card">
            <div className="quote-card-title">Request a quote</div>
            <div className="quote-card-sub">Response within 2 business hours · Contractor pricing available</div>
            <div className="form-row">
              <div className="form-group">
                <label className="form-label">Company name</label>
                <input className="form-input" type="text" placeholder="ABC Fence Co." />
              </div>
              <div className="form-group">
                <label className="form-label">Your name</label>
                <input className="form-input" type="text" placeholder="John Smith" />
              </div>
            </div>
            <div className="form-row">
              <div className="form-group">
                <label className="form-label">Phone</label>
                <input className="form-input" type="tel" placeholder="519-xxx-xxxx" />
              </div>
              <div className="form-group">
                <label className="form-label">Email</label>
                <input className="form-input" type="email" placeholder="you@company.com" />
              </div>
            </div>
            <div className="form-group">
              <label className="form-label">Product needed</label>
              <select className="form-select">
                <option value="">Select a product...</option>
                <option>Aluminum railing</option>
                <option>Chain link fence — commercial</option>
                <option>Chain link fence — residential</option>
                <option>Composite fence</option>
                <option>Expert Stain & Seal products</option>
                <option>Fence armor (post caps / guards)</option>
                <option>Glass railing</option>
                <option>Ornamental / iron fence</option>
                <option>Temporary fence rental</option>
                <option>Multiple products</option>
              </select>
            </div>
            <div className="form-row">
              <div className="form-group">
                <label className="form-label">Job site city</label>
                <input className="form-input" type="text" placeholder="Kitchener, Guelph..." />
              </div>
              <div className="form-group">
                <label className="form-label">Approximate quantity</label>
                <input className="form-input" type="text" placeholder="e.g. 200 linear ft" />
              </div>
            </div>
            <button className="form-submit">Send quote request →</button>
            <div className="form-note">Or call us directly · info@vgfenceproducts.com</div>
          </div>
        </div>
      </section>

      {/* TRUST BAR */}
      <div className="trust-bar">
        <div className="trust-item"><span className="trust-icon">🚚</span> Same-day job site delivery</div>
        <div className="trust-item"><span className="trust-icon">📐</span> 2D fence drawing services</div>
        <div className="trust-item"><span className="trust-icon">🏗️</span> Contractor accounts available</div>
        <div className="trust-item"><span className="trust-icon">📍</span> Serving 250km across Ontario</div>
        <div className="trust-item"><span className="trust-icon">⭐</span> 3+ years serving KWC</div>
      </div>

      {/* PRODUCTS PREVIEW */}
      <section className="products-section" id="products">
        <div className="products-header">
          <div>
            <div className="section-eyebrow">Our products</div>
            <h2 className="section-h2">Everything you<br />need to <span>build.</span></h2>
          </div>
          <p style={{ fontSize: '15px', color: 'var(--gray-600)', maxWidth: '340px', lineHeight: '1.7' }}>
            Nine product lines in stock, ready for same-day or scheduled delivery to your job site anywhere in our 250km radius.
          </p>
        </div>
        <div className="products-grid">
          {/* Card 1 */}
          <Link href="/products" className="product-card">
            <div className="product-icon">
              <svg viewBox="0 0 22 22" fill="none"><rect x="1" y="3" width="3" height="16" rx="1.5" fill="white" /><rect x="9" y="3" width="3" height="16" rx="1.5" fill="white" /><rect x="17" y="3" width="3" height="16" rx="1.5" fill="white" /><line x1="1" y1="8" x2="20" y2="8" stroke="white" strokeWidth="1.5" /><line x1="1" y1="13" x2="20" y2="13" stroke="white" strokeWidth="1.5" /></svg>
            </div>
            <div className="product-name">Aluminum railing</div>
            <div className="product-desc">Residential and commercial aluminum railing systems for decks, balconies, stairs, and pools.</div>
            <div className="product-tags"><span className="product-tag">Residential</span><span className="product-tag">Commercial</span></div>
            <div className="product-arrow">→</div>
          </Link>

          {/* Card 2 */}
          <Link href="/products" className="product-card">
            <div className="product-icon">
              <svg viewBox="0 0 22 22" fill="none"><rect x="2" y="3" width="3" height="16" rx="1.5" fill="white" /><rect x="17" y="3" width="3" height="16" rx="1.5" fill="white" /><line x1="2" y1="8" x2="20" y2="8" stroke="white" strokeWidth="1.5" /><line x1="2" y1="13" x2="20" y2="13" stroke="white" strokeWidth="1.5" /><line x1="8" y1="3" x2="8" y2="19" stroke="white" strokeWidth="1.5" /><line x1="14" y1="3" x2="14" y2="19" stroke="white" strokeWidth="1.5" /></svg>
            </div>
            <div className="product-name">Chain link fence</div>
            <div className="product-desc">Commercial and residential chain link in black and galvanized finishes. High volume, quick delivery.</div>
            <div className="product-tags"><span className="product-tag">Black</span><span className="product-tag">Galvanized</span><span className="product-tag">Commercial</span></div>
            <div className="product-arrow">→</div>
          </Link>

          {/* Card 3 */}
          <div className="product-card" style={{ background: 'var(--navy)' }}>
            <div style={{ height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: '13px', fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--orange)', marginBottom: '16px' }}>Need a custom quote?</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: '26px', fontWeight: 800, textTransform: 'uppercase', color: 'var(--white)', lineHeight: 1.1, marginBottom: '12px' }}>Talk to our<br />supply team.</div>
                <div style={{ fontSize: '13px', color: 'rgba(255,255,255,.55)', lineHeight: 1.6 }}>Bulk orders · Contractor accounts · Scheduled deliveries · Job site planning</div>
              </div>
              <Link href="/#quote" className="btn-primary" style={{ textAlign: 'center', marginTop: '24px', display: 'block' }}>Request pricing →</Link>
            </div>
          </div>
        </div>
      </section>

      {/* SERVICES */}
      <section className="services-section" id="services">
        <div className="section-eyebrow" style={{ color: 'rgba(255,255,255,.5)' }}>
          What we do
        </div>
        <h2 className="section-h2">More than just <span>supply.</span></h2>
        <div className="services-grid">
          <div className="service-card">
            <div className="service-num">01</div>
            <div className="service-name">2D Fence <span>Drawing Services</span></div>
            <div className="service-desc">CAD-based fence layout drawings for residential and commercial projects.</div>
            <ul className="service-list">
              <li>Residential & commercial layouts</li>
              <li>Material takeoff & quantity estimation</li>
              <li>Permit support drawings</li>
            </ul>
          </div>
          <div className="service-card">
            <div className="service-num">02</div>
            <div className="service-name">Wood <span>Staining Services</span></div>
            <div className="service-desc">Professional application of Expert Stain & Seal products on outdoor structures.</div>
            <ul className="service-list">
              <li>Fence, deck & pergola staining</li>
              <li>New wood preparation & staining</li>
              <li>Maintenance & restoration</li>
            </ul>
          </div>
        </div>
      </section>

      {/* TERRITORY */}
      <section className="territory-section" id="territory">
        <div className="section-eyebrow">Quick Delivery</div>
        <h2 className="section-h2">Across <span>Ontario.</span></h2>
        <div className="territory-layout">
          <div className="city-list">
            <div className="city-item">
              <div className="city-dot home"></div>
              <div className="city-info">
                <div className="city-name-txt">Kitchner / Waterloo</div>
                <div className="city-sub-txt">Home Depot & Job Site Base</div>
              </div>
              <div className="city-dist-badge">BASE</div>
            </div>
            <div className="city-item">
              <div className="city-dot near"></div>
              <div className="city-info">
                <div className="city-name-txt">Guelph / Cambridge</div>
                <div className="city-sub-txt">Immediate 1-hour Delivery</div>
              </div>
              <div className="city-dist-badge">20KM</div>
            </div>
            <div className="city-item">
              <div className="city-dot far"></div>
              <div className="city-info">
                <div className="city-name-txt">Toronto / GTA</div>
                <div className="city-sub-txt">Same-day Delivery Available</div>
              </div>
              <div className="city-dist-badge">110KM</div>
            </div>
          </div>
          <div className="territory-map-wrap">
            <div className="radius-label">250km Service Radius</div>
            <div style={{ height: '300px', background: 'var(--gray-100)', borderRadius: '8px', display: 'flex', alignItems: 'center', justifyCenter: 'center', color: 'var(--gray-400)', fontSize: '14px' }}>
              [Interactive Region Map Integration]
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="cta-section">
        <h2 className="cta-h2">Ready to <span>start?</span></h2>
        <p className="cta-sub">Join hundreds of Ontario contractors who trust VG Fence for their supply needs.</p>
        <div className="cta-btns">
          <Link href="/login" className="btn-white">Create Account</Link>
          <Link href="/#quote" className="btn-white-outline">Get a Quote Now</Link>
        </div>
      </section>
    </>
  );
}