// sections.jsx — All section components for the Diaz Hauling landing page.
// Uses globals from primitives.jsx (Logo, PhotoPlaceholder, icons, data).

const { useState: useStateS, useEffect: useEffectS, useMemo: useMemoS } = React;

/* ───────── Top utility bar ───────── */
function UtilityBar() {
  return (
    <div className="utility">
      <div className="container utility-inner">
        <div className="utility-left">
          <span className="lic"><span className="dot"></span> CSLB #1072495</span>
          <span className="sep hide-sm"></span>
          <span className="hide-sm" style={{color:'#d6dbd2', fontSize: 12.5}}>Fully Licensed &amp; Insured</span>
        </div>
        <div className="utility-right">
          <span className="hide-sm" style={{color:'#9ba79a', fontFamily:'var(--font-mono)', fontSize: 11.5, letterSpacing: '0.06em', textTransform:'uppercase'}}>Mon–Sun · 5a–10p · Oakland</span>
          <span className="sep hide-sm"></span>
          <a href="tel:+15108254218"><PhoneIcon size={13} /> &nbsp;(510) 825-4218</a>
        </div>
      </div>
    </div>
  );
}

/* ───────── Main nav ───────── */
function Nav({ active }) {
  const [menuOpen, setMenuOpen] = useStateS(false);

  useEffectS(() => {
    if (!menuOpen) return;
    const onKey = (e) => { if (e.key === 'Escape') setMenuOpen(false); };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [menuOpen]);

  const closeMenu = () => setMenuOpen(false);

  return (
    <header className="nav">
      <div className="container nav-inner">
        <a href="/" className="logo logo-md" aria-label="Diaz Hauling — home">
          <img className="logo-img" src={BRAND_LOGO} alt="Diaz Hauling" />
        </a>
        <nav className="nav-links" aria-label="Primary">
          <a href="/services/" className={active==='services'?'active':''}>Services</a>
          <a href="/dumpster-rentals/" className={active==='dumpsters'?'active':''}>Dumpster Rentals</a>
          <a href="/about-us/" className={active==='about'?'active':''}>About Us</a>
        </nav>
        <div className="nav-cta">
          <a href="tel:+15108254218" className="nav-phone"><PhoneIcon size={15} /> (510) 825-4218</a>
          <a className="btn btn-action btn-sm btn-sms" href="/free-quote/">
            <TextIcon size={14} /> Free Quote <ArrowIcon size={13} />
          </a>
        </div>
        <button
          type="button"
          className="nav-toggle"
          aria-label="Menu"
          aria-expanded={menuOpen}
          onClick={() => setMenuOpen((o) => !o)}
        >
          <span className={`nav-toggle-bars ${menuOpen ? 'open' : ''}`}>
            <span></span><span></span><span></span>
          </span>
        </button>
      </div>
      {menuOpen && (
        <div className="nav-menu-panel" role="menu">
          <div className="nav-menu-links">
            <a href="/services/" onClick={closeMenu} className={active==='services'?'active':''}>Services</a>
            <a href="/dumpster-rentals/" onClick={closeMenu} className={active==='dumpsters'?'active':''}>Dumpster Rentals</a>
            <a href="/about-us/" onClick={closeMenu} className={active==='about'?'active':''}>About Us</a>
          </div>
          <div className="nav-menu-actions">
            <a className="btn btn-outline" href="tel:+15108254218" onClick={closeMenu} style={{borderColor: 'var(--green-primary)', color: 'var(--green-primary)'}}>
              <PhoneIcon size={14} /> Call (510) 825-4218
            </a>
            <a className="btn btn-action btn-sms" href="/free-quote/" onClick={closeMenu}>
              <TextIcon size={14} /> Free Quote <ArrowIcon size={13} />
            </a>
          </div>
        </div>
      )}
    </header>
  );
}

/* ───────── Hero (3 variants) ───────── */
function Hero({ variant = 'photo', onQuoteClick }) {
  if (variant === 'split')     return <HeroSplit onQuoteClick={onQuoteClick} />;
  if (variant === 'editorial') return <HeroEditorial onQuoteClick={onQuoteClick} />;
  return <HeroPhoto onQuoteClick={onQuoteClick} />;
}

function HeroTrustLine() {
  return (
    <div className="hero-trustline">
      <span><span className="pip"></span> Reply within the hour</span>
      <span><span className="pip"></span> Flat, all-in price</span>
      <span><span className="pip"></span> Same-day service</span>
    </div>
  );
}

function HeroPhoto({ onQuoteClick }) {
  return (
    <section className="hero" id="top">
      <div className="hero-photo">
        <PhotoPlaceholder tone="dark" label="HERO · Diaz green truck on East Bay job site · documentary daylight" />
      </div>
      <div className="hero-grain"></div>
      <div className="container hero-inner">
        <div className="eyebrow on-dark">Family-owned · Oakland · Since 2009</div>
        <h1 className="h-display h1" style={{marginTop: 20, maxWidth: '17ch'}}>
          The Bay Area's <span className="underline">#1</span> Debris Removal <span className="accent">Contractor</span>.
        </h1>
        <p className="hero-sub">
          Text us a photo of the pile — we'll text you a flat quote right back, usually within the hour.
        </p>
        <div className="hero-ctas">
          <a className="btn btn-action btn-lg btn-sms" href={SMS_HREF}>
            <TextIcon size={16} /> Text us a Photo <ArrowIcon size={14} />
          </a>
          <a className="btn btn-outline-light btn-lg" href="tel:+15108254218">
            <PhoneIcon size={15} /> (510) 825-4218
          </a>
        </div>
        <HeroTrustLine />
      </div>
    </section>
  );
}

function HeroSplit({ onQuoteClick }) {
  return (
    <section className="hero v-split" id="top">
      <div className="container hero-inner">
        <div className="eyebrow">Family-owned · Oakland · Since 2009</div>
        <h1 className="h-display h1" style={{marginTop: 20}}>
          The Bay Area's <span className="underline">#1</span><br/>
          Debris Removal <span className="accent">Contractor</span>.
        </h1>
        <p className="hero-sub">
          Text us a photo of the pile — we'll text you a flat quote right&nbsp;back, usually&nbsp;within&nbsp;the&nbsp;hour.
        </p>
        <div className="hero-ctas">
          <a className="btn btn-action btn-lg btn-sms" href={SMS_HREF}>
            <TextIcon size={16} /> Text Your Junk Photo <ArrowIcon size={14} />
          </a>
          <a className="btn btn-outline btn-lg" href="tel:+15108254218">
            <PhoneIcon size={15} /> Call Now (510) 825-4218
          </a>
          <a className="btn btn-primary btn-lg" href="#schedule">
            Book Online <ArrowIcon size={14} />
          </a>
        </div>
        <HeroTrustLine />
      </div>
    </section>
  );
}

function HeroEditorial({ onQuoteClick }) {
  return (
    <section className="hero v-editorial" id="top">
      <div className="container hero-inner">
        <div className="editorial-grid">
          <div>
            <div className="eyebrow">Family-owned · Oakland · Since 2009 · CSLB #1072495</div>
            <h1 className="h-display" style={{marginTop: 24}}>
              Bay Area's #1<br/>
              <span style={{color: 'var(--green-primary)'}}>Debris Removal</span><br/>
              Contractor.
            </h1>
            <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, marginTop: 40, alignItems: 'start'}}>
              <p className="hero-sub" style={{marginTop: 0}}>
                Text us a photo of the pile — we'll text you a flat quote right back, usually within the hour.
              </p>
              <div className="hero-ctas" style={{marginTop: 0}}>
                <a className="btn btn-action btn-lg btn-sms" href={SMS_HREF}>
                  <TextIcon size={16} /> Text us a Photo <ArrowIcon size={14} />
                </a>
                <a className="btn btn-outline btn-lg" href="tel:+15108254218">
                  <PhoneIcon size={15} /> (510) 825-4218
                </a>
              </div>
            </div>
          </div>
          <div className="editorial-photo">
            <PhotoPlaceholder tone="dark" label="HERO · Wide shot · Diaz crew + green truck at sunset · East Bay" />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ───────── Combined license + trust band ───────── */
function LicenseBand() {
  return (
    <section className="trust" aria-label="License & trust">
      <div className="container trust-inner">
        <div className="trust-item lic-lockup-item">
          <div className="license-text">
            <span className="lic-line1">Licensed &amp; Fully Insured</span>
            <span className="lic-line2">CSLB · #1072495</span>
          </div>
        </div>
        {TRUST.map((t, i) => (
          <div className="trust-item" key={i}>
            <span className="num">{t.num}</span>
            <span className="lbl">{t.lbl}</span>
          </div>
        ))}
      </div>
    </section>
  );
}
function TrustStrip() { return <LicenseBand />; }

/* ───────── Photo-quote workflow ───────── */
function Workflow() {
  return (
    <section className="section section-alt" id="workflow">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">How it works</div>
            <h2 className="h-display h2">Text a photo. Get a price.<br/>We do the rest.</h2>
          </div>
          <p className="lede">No estimators. No call-and-wait. No surprise add-ons on arrival. The fastest way to get debris off your property is to send us a picture of it.</p>
        </div>
        <div className="workflow">
          <WorkflowStep step={WORKFLOW[0]} visual={<PhoneMock />} />
          <WorkflowStep step={WORKFLOW[1]} visual={<QuoteReceipt />} />
          <WorkflowStep step={WORKFLOW[2]} visual={<CalendarVisual />} />
        </div>
      </div>
    </section>
  );
}
function WorkflowStep({ step, visual }) {
  return (
    <div className="workflow-step">
      <div className="step-num">{step.num}</div>
      <h3>{step.title}</h3>
      <p>{step.blurb}</p>
      <div className="step-visual">{visual}</div>
    </div>
  );
}
function PhoneMock() {
  return (
    <div className="phone-mock">
      <div className="phone">
        <div className="notch"></div>
        <div className="phone-screen">
          <div className="text-thread">
            <div className="bubble in">Hi Diaz Hauling — pile in my driveway, Oakland 94611. How much?</div>
            <div className="bubble photo"><div className="mini-ph"></div></div>
            <div className="bubble out">Thanks Marisol — that's about a half-load. $385 flat, Wed AM. Sound good?</div>
            <div className="bubble in">Perfect. Book it 👍</div>
          </div>
        </div>
      </div>
    </div>
  );
}
function QuoteReceipt() {
  return (
    <div className="quote-receipt">
      <div className="qr-head">
        <span className="lbl">Quote · 94611</span>
        <span className="stamp">Approved</span>
      </div>
      <div className="qr-line"><span>Half-load · garage cleanout</span><span style={{fontFamily: 'var(--font-mono)'}}>$320</span></div>
      <div className="qr-line"><span>Mattress · 1</span><span style={{fontFamily: 'var(--font-mono)'}}>$45</span></div>
      <div className="qr-line"><span>Recycling routing</span><span style={{fontFamily: 'var(--font-mono)'}}>$20</span></div>
      <div className="qr-total">
        <span className="price-lbl">Flat · all-in</span>
        <span className="price">$385</span>
      </div>
    </div>
  );
}
function CalendarVisual() {
  const cells = [
    {d: 8},            {d: 9, open: true},  {d: 10, sel: true}, {d: 11, open: true}, {d: 12},            {d: 13, open: true}, {d: 14},
    {d: 15, open: true},{d: 16},            {d: 17, open: true},{d: 18, open: true}, {d: 19},            {d: 20, open: true}, {d: 21}
  ];
  return (
    <div className="cal-visual" aria-hidden="true">
      <div className="cal-head">
        <span className="cal-title">Pick a day</span>
        <span className="cal-badge">2-hr windows</span>
      </div>
      <div className="cal-dow">
        {['M','T','W','T','F','S','S'].map((d, i) => (<span key={i}>{d}</span>))}
      </div>
      <div className="cal-grid">
        {cells.map((c, i) => (
          <span key={i} className={`cal-day ${c.sel ? 'sel' : ''} ${c.open ? 'open' : ''}`}>{c.d}</span>
        ))}
      </div>
      <div className="cal-slot">✓ Wed 10 · 8–10 AM · yours</div>
    </div>
  );
}

/* ───────── Services grid ───────── */
function Services({ cardStyle = 'photo' }) {
  return (
    <section className="section" id="services">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Services</div>
            <h2 className="h-display h2">What we haul.<br/>What we tear down.</h2>
          </div>
          <p className="lede">A real contractor's crew with the trucks, the license, and the Bobcat. Five core services across the East Bay and Alameda County.</p>
        </div>
        <div className="services-grid">
          {SERVICES.map((s) => (
            <ServiceCard key={s.id} service={s} style={cardStyle} />
          ))}
        </div>

        {/* Sub-services strip */}
        <div style={{marginTop: 48, borderTop: '1px solid var(--line)', paddingTop: 32}}>
          <div style={{display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap', marginBottom: 18}}>
            <div className="eyebrow">Also available</div>
            <span className="mono muted">Ask about combined-service discounts.</span>
          </div>
          <div style={{display: 'flex', flexWrap: 'wrap', gap: 10}}>
            {SUB_SERVICES.map((s) => (
              <span key={s} style={{
                display: 'inline-flex',
                alignItems: 'center',
                padding: '8px 14px',
                background: 'var(--surface-alt)',
                border: '1px solid var(--line)',
                borderRadius: 999,
                fontSize: 13.5,
                color: 'var(--ink-2)',
                fontWeight: 500
              }}>{s}</span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function ServiceCard({ service, style }) {
  const spanClass = service.span === 3 ? 'span-3' : '';
  const featuredClass = service.featured ? 'featured-icon' : '';
  if (style === 'icon') {
    return (
      <div className={`service-card icon-led ${spanClass} ${featuredClass}`}>
        <div className="sc-body">
          <div className="sc-icon">{iconFor(service.id)}</div>
          <h3>{service.name}</h3>
          <p>{service.blurb}</p>
          <div className="sc-meta">
            <span className="price"><span style={{color: 'var(--muted-2)'}}>Tag:&nbsp;</span>{service.tag}</span>
            <span className="more">Learn more <ArrowIcon size={12} /></span>
          </div>
        </div>
      </div>
    );
  }
  return (
    <div className={`service-card ${spanClass}`}>
      <div className="sc-photo">
        <PhotoPlaceholder tone={service.featured ? 'dark' : 'default'} label={service.photo} />
        <span className={`sc-tag ${service.featured ? 'featured' : ''}`}>{service.tag}</span>
      </div>
      <div className="sc-body">
        <h3>{service.name}</h3>
        <p>{service.blurb}</p>
        <div className="sc-meta">
          <span className="price">Oakland · East Bay · Alameda County</span>
          <span className="more">Learn more <ArrowIcon size={12} /></span>
        </div>
      </div>
    </div>
  );
}
function iconFor(id) {
  return {
    residential: 'H', commercial: 'C', construction: 'B', bobcat: 'BC', junk: 'J'
  }[id] || '·';
}

/* ───────── About / Why Diaz ───────── */
function About() {
  return (
    <section className="section section-alt" id="about">
      <div className="container">
        <div className="about-grid">
          <div className="about-photo-stack">
            <div className="ph-main">
              <PhotoPlaceholder label="HERO · wrapped Diaz truck · new green arrow logo · Oakland" />
            </div>
            <div className="ph-mini">
              <PhotoPlaceholder tone="sage" label="PORTRAIT · Jose smiling · owner headshot" stripes={false} />
            </div>
          </div>
          <div>
            <div className="eyebrow">About Diaz Hauling</div>
            <h2 className="h-display h2" style={{marginTop: 14}}>A real contractor.<br/>Not a guy with a truck.</h2>
            <p className="lede" style={{marginTop: 22}}>
              José Antonio Diaz grew up in Oakland and started Diaz Hauling with his family fifteen years ago. Today we're a fully-licensed contractor (CSLB #1072495) serving homes, businesses, and construction sites across Alameda County.
            </p>
            <p style={{color: 'var(--muted)', fontSize: 16, lineHeight: 1.6, marginTop: 16, maxWidth: '56ch'}}>
              Family is at the heart of everything we do. Hard work, honesty, and integrity — that's how we built the business, and that's how every job gets done. From a single mattress to a multi-day construction haul, we show up on time and we clean up after ourselves.
            </p>

            <div className="about-stats">
              <div className="about-stat">
                <div className="num">15+</div>
                <div className="lbl">Years in the East Bay</div>
              </div>
              <div className="about-stat">
                <div className="num">608+</div>
                <div className="lbl">Yelp reviews · verified</div>
              </div>
              <div className="about-stat">
                <div className="num">13</div>
                <div className="lbl">Cities served · Alameda Co.</div>
              </div>
              <div className="about-stat">
                <div className="num">100%</div>
                <div className="lbl">Family-owned</div>
              </div>
            </div>

            <div className="about-signature">
              <div className="sig-avatar">
                <PhotoPlaceholder label="JD" stripes={false} tone="sage" />
              </div>
              <div>
                <div className="sig-name">José Antonio Diaz</div>
                <div className="sig-title">Owner · CSLB #1072495</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ───────── Eco section ───────── */
function Eco() {
  return (
    <section className="section section-sage">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow on-dark">Eco-conscious by default</div>
            <h2 className="h-display h2" style={{color: '#fff'}}>Hauling that doesn't end in a landfill.</h2>
          </div>
          <p className="lede" style={{color: 'rgba(255,255,255,.88)'}}>
            All materials are directed to certified transfer stations and local facilities, where they're sorted and recycled whenever possible. It's not a marketing claim — it's the routing we already pay for.
          </p>
        </div>
        <div className="eco-grid">
          <div className="eco-item">
            <div className="num">01 · Sort</div>
            <h3>On-truck sorting</h3>
            <p>Metal, e-waste, mattresses, and clean wood are separated on-site, before we ever leave the property.</p>
          </div>
          <div className="eco-item">
            <div className="num">02 · Route</div>
            <h3>Certified facilities</h3>
            <p>Loads are routed to certified Bay Area transfer stations — Davis Street, Waste Management, ACI — by material type.</p>
          </div>
          <div className="eco-item">
            <div className="num">03 · Report</div>
            <h3>Recycling, not landfill</h3>
            <p>The majority of what we haul is recycled, reused, or repurposed. Landfill is the option of last resort.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ───────── Service area ───────── */
function ServiceArea() {
  const cities = AREAS[0].cities;
  return (
    <section className="section" id="area">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Service area · East Bay</div>
            <h2 className="h-display h2">Proudly serving the<br/><span style={{color:'var(--green-primary)'}}>entire East Bay.</span></h2>
          </div>
          <p className="lede">Oakland born, East Bay built. We cover every neighborhood from Albany down through Fremont. If you're in the East Bay, we're already in your neighborhood.</p>
        </div>
        <div className="east-bay-cities">
          {cities.map((c) => (<span key={c} className="eb-city">{c}</span>))}
        </div>
        <div className="area-fine" style={{marginTop: 18}}>
          <span className="mono muted">{cities.length} cities · Alameda County · Same-day service available</span>
        </div>
      </div>
    </section>
  );
}

/* ───────── Reviews ───────── */
function Reviews() {
  return (
    <section className="section section-alt" id="reviews">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Reviews · Yelp-verified</div>
            <h2 className="h-display h2">608+ reviews. We read every one.</h2>
          </div>
          <p className="lede">Real homeowners, real cleanouts, real East Bay zip codes. Yelp Partner-verified license and identity. Three honest ones, lifted from the page.</p>
        </div>
        <div className="reviews-grid">
          {REVIEWS.map((r) => (
            <div className="review" key={r.name}>
              <Stars n={5} />
              <span className="yelp-tag">YELP</span>
              <p className="review-text">"{r.text}"</p>
              <div className="review-meta">
                <div className="avatar">{r.initial}</div>
                <div className="who">
                  <span className="name">{r.name}</span>
                  <span className="city">{r.city}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ───────── Dumpster rentals (replaces Eco) ───────── */
function DumpsterRentals() {
  const [picked, setPicked] = useStateS('15');
  return (
    <section className="section section-alt" id="dumpsters">
      <div className="container">
        <div className="dumpster">
          <div className="dumpster-photo">
            <PhotoPlaceholder label="DUMPSTER · Diaz green roll-off bin in driveway · Oakland residential" />
          </div>
          <div>
            <div className="eyebrow">Dumpster Rentals</div>
            <h2 className="h-display h2" style={{marginTop: 12}}>Drop it. Fill it.<br/>We haul it.</h2>
            <p className="lede" style={{marginTop: 18}}>
              Roll-off dumpsters for cleanouts, remodels, and construction debris. Driveway-friendly sizes, flat weekly rates, no surprise dump fees.
            </p>

            <div className="dumpster-sizes" role="radiogroup" aria-label="Dumpster size">
              {DUMPSTER_SIZES.map((s) => (
                <button
                  key={s.yards}
                  type="button"
                  className={`dumpster-size ${picked === s.yards ? 'active' : ''}`}
                  onClick={() => setPicked(s.yards)}
                  role="radio"
                  aria-checked={picked === s.yards}
                >
                  <div className="size-num">{s.yards}<span style={{fontSize: 18, color: 'var(--muted)', marginLeft: 4}}>yd³</span></div>
                  <div className="size-unit">{s.tag}</div>
                  <div className="size-desc">{s.dims} · {s.price} · {s.weight}. {s.desc}</div>
                </button>
              ))}
            </div>

            <ul className="dumpster-bullets">
              <li>Same-week drop, flexible pickup</li>
              <li>Flat weekly rate — 7 days included</li>
              <li>Driveway-safe placement</li>
              <li>Extra days $40/day · overweight $195/ton</li>
              <li>Construction, roofing, household</li>
              <li>Permit help for street placement</li>
            </ul>

            <div className="hero-ctas" style={{marginTop: 0}}>
              <a className="btn btn-action btn-lg btn-sms" href={SMS_HREF + '%20Dumpster%20rental%20%E2%80%94%20size%20' + picked + 'yd'}>
                <TextIcon size={16} /> Text for {picked}yd³ Quote <ArrowIcon size={14} />
              </a>
              <a className="btn btn-outline" href="tel:+15108254218">
                <PhoneIcon size={14} /> Call (510) 825-4218
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ───────── Workiz scheduling (bottom of page) — LIVE embed ─────────
   Current admin embed URL per the 2026-05-08 audit (NOT the stale da1f0c… one). */
const WORKIZ_EMBED_URL = 'https://booking.workiz.com/?ac=da1f0c6266d95ff8ac202d9b6340ea109ed8523cb876c9c29975f8c61feaf893';

function WorkizSchedule() {
  return (
    <section className="section workiz" id="schedule">
      <div className="container workiz-grid">
        <div>
          <div className="eyebrow on-dark">Schedule your service</div>
          <h2 className="h-display h2" style={{marginTop: 14}}>Call. Text. Book.<br/><span style={{color:'#b8d4a9'}}>Junk. Gone.</span></h2>
          <p className="lede" style={{marginTop: 20}}>
            Already know what you need? Pick a date and a window that works. We'll confirm by text during business hours. Powered by Workiz — the same scheduling tool our crew uses to run the day.
          </p>
          <ul className="workiz-features">
            <li><span className="wf-num">01</span><span><strong style={{color:'#fff'}}>Live availability.</strong> What you see is what's open on the calendar. No back-and-forth.</span></li>
            <li><span className="wf-num">02</span><span><strong style={{color:'#fff'}}>Real booking.</strong> Your request goes straight into our scheduling system.</span></li>
            <li><span className="wf-num">03</span><span><strong style={{color:'#fff'}}>Text confirmation.</strong> You get a real reply from a real person.</span></li>
            <li><span className="wf-num">04</span><span><strong style={{color:'#fff'}}>Free to reschedule.</strong> Plans change. Just text us.</span></li>
          </ul>
          <div className="hero-ctas workiz-ctas" style={{marginTop: 28}}>
            <a className="btn btn-action btn-lg btn-sms" href={SMS_HREF}>
              <TextIcon size={16} /> Text Your Junk Photo <ArrowIcon size={14} />
            </a>
            <a className="btn btn-outline-light btn-lg" href="tel:+15108254218">
              <PhoneIcon size={15} /> Call Now (510) 825-4218
            </a>
          </div>
        </div>

        <div className="workiz-embed workiz-live">
          <div className="workiz-embed-head">
            <div className="wz-brand"><span className="wz-dot"></span> Schedule a job</div>
            <span className="wz-tag">Powered by Workiz</span>
          </div>
          <iframe
            className="workiz-iframe"
            src={WORKIZ_EMBED_URL}
            title="Book online with Diaz Hauling"
            loading="lazy"
          ></iframe>
        </div>
      </div>
    </section>
  );
}

/* ───────── Bobcat callout ───────── */
function Callout() {
  return (
    <section className="section">
      <div className="container">
        <div className="callout">
          <div className="callout-photo">
            <PhotoPlaceholder tone="dark" label="ACTION · Bobcat skid steer mid-job · demolition cleanup · East Bay" />
          </div>
          <div className="callout-content">
            <div className="eyebrow on-dark">Specialty · Bobcat &amp; demolition</div>
            <h2 className="h-display h2">The job most haulers can't take.</h2>
            <p>Skid steer work, light demolition, tight-lot moves, big-load construction haul-away. If it needs more than a truck and a crew, we already brought it.</p>
            <ul className="bobcat-list">
              <li>Grading &amp; debris piles</li>
              <li>Shed &amp; deck demolition</li>
              <li>Dirt &amp; aggregate moves</li>
              <li>Tight-access lots</li>
              <li>Multi-day construction</li>
              <li>Pre &amp; post-build cleanup</li>
            </ul>
            <div className="hero-ctas" style={{marginTop: 0}}>
              <a className="btn btn-action" href="#schedule">Book Bobcat job <ArrowIcon size={13} /></a>
              <a className="btn btn-outline-light" href="tel:+15108254218"><PhoneIcon size={14} /> (510) 825-4218</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ───────── Quote section (CTA-only — dead lead-capture form removed 2026-07-20) ───────── */
function QuoteForm() {
  return (
    <section className="section quote-section" id="quote">
      <div className="container">
        <div className="quote-grid">
          <div>
            <div className="eyebrow on-dark">Get your free quote</div>
            <h2 className="h-display h2" style={{marginTop: 12, marginBottom: 16}}>Send a photo.<br/>Get a real price.</h2>
            <p className="lede" style={{marginTop: 0}}>Skip the back-and-forth. Text us a couple of photos and a sentence about the job. We text a flat quote — usually within the hour during business hours.</p>
            <ul className="quote-list">
              <li><span className="check"><CheckIcon size={12} /></span> Flat, all-in pricing. No surprise charges on arrival.</li>
              <li><span className="check"><CheckIcon size={12} /></span> Same-day service across Alameda County.</li>
              <li><span className="check"><CheckIcon size={12} /></span> Licensed (CSLB #1072495) and fully insured.</li>
            </ul>
            <div style={{marginTop: 32, paddingTop: 24, borderTop: '1px solid rgba(255,255,255,.12)'}}>
              <div className="mono" style={{color: '#c0d4c0', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 14}}>Prefer to talk it through? Same-day service available.</div>
              <a href="tel:+15108254218" className="btn btn-action btn-lg call-cta-btn">
                <PhoneIcon size={16} /> Call Us to Discuss Your Project · (510) 825-4218
              </a>
            </div>
          </div>

          <div className="quote-cta-card">
            <div className="qcta-icon"><TextIcon size={20} /></div>
            <h3 className="qcta-heading">Fastest way to a real price</h3>
            <p className="qcta-sub">No forms to fill out. Text a photo of the pile straight from your phone and we'll text back a flat, all-in quote — usually within the hour.</p>
            <div className="qcta-ctas">
              <a className="btn btn-action btn-lg btn-sms" href={SMS_HREF}>
                <TextIcon size={16} /> Text a Photo for a Quote <ArrowIcon size={14} />
              </a>
              <a className="btn btn-outline btn-lg" href="tel:+15108254218">
                <PhoneIcon size={15} /> Call (510) 825-4218
              </a>
            </div>
            <a className="qcta-book-link" href="/free-quote/">
              Prefer to book online? See real-time availability <ArrowIcon size={11} />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ───────── Footer ───────── */
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <a href="/" className="logo logo-lg on-dark logo-chip" aria-label="Diaz Hauling — home">
              <img className="logo-img" src={BRAND_LOGO} alt="Diaz Hauling" />
            </a>
            <p style={{marginTop:20, color:'#b9c4b3', fontSize:14.5, lineHeight:1.6, maxWidth:'32ch'}}>
              Family-owned debris removal contractor based in Oakland. Serving the entire East Bay since 2012. CSLB #1072495 · Fully insured.
            </p>
            <div className="footer-contact-block" style={{marginTop:22}}>
              <a href="tel:+15108254218" className="footer-phone"><PhoneIcon size={14}/> (510) 825-4218</a>
              <a href="mailto:jose@diazhauling.com" className="footer-email">jose@diazhauling.com</a>
              <span className="footer-hours">Mon–Sun · 5 AM – 10 PM</span>
            </div>
          </div>
          <div>
            <h4>Services</h4>
            <ul>
              <li><a href="/services/residential-trash-removal-oakland/">Residential Hauling</a></li>
              <li><a href="/services/commercial-trash-removal-oakland/">Commercial Hauling</a></li>
              <li><a href="/services/construction-material-hauling-oakland/">Construction Hauling</a></li>
              <li><a href="/services/bobcat-services/">Bobcat Services</a></li>
              <li><a href="/dumpster-rentals/">Dumpster Rentals</a></li>
              <li><a href="/free-quote/">Get a Free Quote</a></li>
            </ul>
          </div>
          <div>
            <h4>Service Area · East Bay</h4>
            <ul className="footer-cities">
              {CITY_PAGES.map((c) => (
                <li key={c.slug}><a href={`/about-us/${c.slug}/`}>{c.city}</a></li>
              ))}
            </ul>
          </div>
          <div>
            <h4>Company</h4>
            <ul>
              <li><a href="/about-us/">About Us</a></li>
              <li><a href="/testimonials/">Testimonials</a></li>
              <li><a href="/contact-us/">Contact Us</a></li>
              <li><a href="/privacy-policy/">Privacy Policy</a></li>
              <li><a href="/terms-and-conditions/">Terms &amp; Conditions</a></li>
              <li><a href="https://www.yelp.com/biz/diaz-hauling-oakland" target="_blank" rel="noreferrer">Yelp · 613+ reviews</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 Diaz Hauling. All rights reserved.</div>
          <div className="lic-foot"><span style={{display:'inline-block',width:8,height:8,borderRadius:'50%',background:'var(--gold)'}}></span> CSLB #1072495 · Fully Licensed &amp; Insured</div>
          <div style={{display:'inline-flex',gap:16}}><a href="/privacy-policy/" style={{color:'#9ba79a'}}>Privacy</a><a href="/terms-and-conditions/" style={{color:'#9ba79a'}}>Terms</a></div>
        </div>
      </div>
    </footer>
  );
}

/* ───────── Sticky mobile bar ───────── */
function MobileBar() {
  return (
    <div className="mobile-bar">
      <a className="btn btn-outline" href="tel:+15108254218" style={{borderColor: 'var(--green-primary)', color: 'var(--green-primary)'}}>
        <PhoneIcon size={14} /> Call now
      </a>
      <a className="btn btn-action btn-sms" href="/free-quote/">
        <TextIcon size={14} /> Free Quote
      </a>
    </div>
  );
}

// Expose
Object.assign(window, {
  UtilityBar, Nav, Hero, TrustStrip, LicenseBand, Workflow, Services,
  About, ServiceArea, Reviews, Callout, QuoteForm, Footer, MobileBar,
  DumpsterRentals, WorkizSchedule
});