// pages.jsx — page-level layouts for every route.
// Uses primitives + sections globals.

const { useState: useStateP, useEffect: useEffectP, useMemo: useMemoP } = React;

/* ─────────────────────────────────────────────────────────
   Shared building blocks (new)
   ───────────────────────────────────────────────────────── */

function Breadcrumb({ trail }) {
  return (
    <nav className="breadcrumb" aria-label="Breadcrumb">
      {trail.map((item, i) => (
        <span key={i} className="bc-item">
          {item.href
            ? <a href={item.href}>{item.label}</a>
            : <span aria-current="page">{item.label}</span>}
          {i < trail.length - 1 && <span className="bc-sep" aria-hidden>/</span>}
        </span>
      ))}
    </nav>
  );
}

function PageHero({ eyebrow, h1, sub, photoCue, breadcrumb, ctas, compact, tall }) {
  return (
    <section className={`page-hero ${compact ? 'page-hero-compact' : ''} ${tall ? 'page-hero-tall' : ''}`}>
      <div className="page-hero-photo">
        {photoCue ? <PhotoPlaceholder tone="dark" label={photoCue} /> : null}
      </div>
      <div className="page-hero-grain"></div>
      <div className="container page-hero-inner">
        {breadcrumb && <Breadcrumb trail={breadcrumb} />}
        {eyebrow && <div className="eyebrow on-dark">{eyebrow}</div>}
        <h1 className="h-display h1 page-hero-h1">{h1}</h1>
        {sub && <p className="page-hero-sub">{sub}</p>}
        {ctas && <div className="hero-ctas">{ctas}</div>}
      </div>
    </section>
  );
}

function PrimaryCTAs({ photoCTA = 'Get a Free Quote', photoHref = '/free-quote/', light = true }) {
  return (
    <>
      <a className="btn btn-action btn-lg btn-sms" href={photoHref}>
        <TextIcon size={16} /> {photoCTA} <ArrowIcon size={14} />
      </a>
      <a className={`btn ${light ? 'btn-outline-light' : 'btn-outline'} btn-lg`} href="tel:+15108254218">
        <PhoneIcon size={15} /> (510) 825-4218
      </a>
    </>
  );
}

function MidCTA({ heading = 'Get Your Free Quote Today', sub = 'Text a photo of your pile. We\'ll text you a flat quote — usually within the hour.', photoCue = 'Diaz green truck loaded · golden hour · East Bay' }) {
  return (
    <section className="mid-cta">
      <div className="mid-cta-photo">
        <PhotoPlaceholder tone="dark" label={photoCue} />
      </div>
      <div className="container mid-cta-inner">
        <h2 className="h-display h2">{heading}</h2>
        <p className="mid-cta-sub">{sub}</p>
        <div className="hero-ctas">
          <a className="btn btn-action btn-lg btn-sms" href="/free-quote/">
            <TextIcon size={16} /> Get a Free Quote <ArrowIcon size={14} />
          </a>
          <a className="btn btn-outline-light btn-lg" href="tel:+15108254218">
            <PhoneIcon size={15} /> (510) 825-4218
          </a>
        </div>
      </div>
    </section>
  );
}

function PhotoGallery({ photos }) {
  return (
    <div className="photo-gallery">
      {photos.map((p, i) => (
        <div key={i} className="gallery-tile">
          <PhotoPlaceholder label={p} />
        </div>
      ))}
    </div>
  );
}

function CityTileGrid({ cities, featured = 6 }) {
  const tiles = cities.slice(0, featured);
  const pills = cities.slice(featured);
  return (
    <div className="city-tile-grid">
      <div className="city-tiles">
        {tiles.map((c) => (
          <a key={c.slug} className="city-tile" href={`/about-us/${c.slug}/`}>
            <div className="city-tile-photo">
              <PhotoPlaceholder label={`Diaz job · ${c.city}`} />
            </div>
            <div className="city-tile-name">{c.city}</div>
          </a>
        ))}
      </div>
      {pills.length > 0 && (
        <div className="city-pill-grid">
          {pills.map((c) => (
            <a key={c.slug} className="city-pill" href={`/about-us/${c.slug}/`}>{c.city}</a>
          ))}
        </div>
      )}
    </div>
  );
}

function TrustStrip4Up() {
  return (
    <section className="trust-strip-4up">
      <div className="container trust-4up-inner">
        <div className="ts-item">
          <Stars n={5} />
          <span className="ts-num">613+ Yelp Reviews</span>
        </div>
        <div className="ts-item">
          <span className="ts-badge">CSLB #1072495</span>
        </div>
        <div className="ts-item">
          <span className="ts-num">15+</span>
          <span className="ts-lbl">Years in the East Bay</span>
        </div>
        <div className="ts-item">
          <span className="ts-num">Family-Owned</span>
          <span className="ts-lbl">Since 2012</span>
        </div>
      </div>
    </section>
  );
}

function ReviewsRow({ ids = [0, 1, 2], heading = 'Real reviews from real East Bay neighbors.', eyebrow = 'Reviews · Yelp-verified' }) {
  const picks = ids.map((i) => SITE_REVIEWS[i]).filter(Boolean);
  return (
    <section className="section section-alt" id="reviews">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">{eyebrow}</div>
            <h2 className="h-display h2">{heading}</h2>
          </div>
          <p className="lede">Real homeowners. Real cleanouts. Real East Bay zip codes. ★5.0 / 613+ reviews on Yelp.</p>
        </div>
        <div className="reviews-grid">
          {picks.map((r, i) => (
            <div className="review" key={i}>
              <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} · {r.service}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQ({ items, eyebrow = 'FAQ', heading = 'Common questions.' }) {
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">{eyebrow}</div>
            <h2 className="h-display h2">{heading}</h2>
          </div>
          <p className="lede">Still have questions? Just text us — fastest way to a real answer.</p>
        </div>
        <div className="faq-list">
          {items.map((it, i) => (
            <details key={i} className="faq-item">
              <summary>
                <span>{it.q}</span>
                <span className="faq-icon" aria-hidden>+</span>
              </summary>
              <div className="faq-a">{it.a}</div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

function ServicesGrid4({ active }) {
  const services = [
    { id: 'residential', name: 'Residential Hauling', href: '/services/residential-trash-removal-oakland/', tag: 'Homes & garages', blurb: 'House cleanouts, garage cleanouts, single-item pickups. Mattresses, appliances, yard waste, e-waste.', photoCue: 'green truck in residential driveway · Oakland' },
    { id: 'commercial', name: 'Commercial Hauling', href: '/services/commercial-trash-removal-oakland/', tag: 'Offices & properties', blurb: 'Office cleanouts, retail turnovers, property management accounts. Scheduled or on-call.', photoCue: 'commercial cleanout · East Bay' },
    { id: 'construction', name: 'Construction Hauling', href: '/services/construction-material-hauling-oakland/', tag: 'Job sites & GCs', blurb: 'Post-build cleanup, drywall, lumber, demo debris, concrete, dirt. We coordinate with your GC.', photoCue: 'construction site haul-away · East Bay' },
    { id: 'bobcat', name: 'Bobcat Services', href: '/services/bobcat-services/', tag: 'Specialty · Differentiator', blurb: 'Skid steer for jobs a truck and crew can\'t touch — grading, demolition, dirt, debris piles in tight lots.', photoCue: 'Bobcat skid steer · East Bay job site', featured: true }
  ];
  return (
    <div className="services-grid services-4">
      {services.map((s) => (
        <a key={s.id} className={`service-card ${s.id === active ? 'is-active' : ''} ${s.featured ? 'card-featured' : ''}`} href={s.href}>
          <div className="sc-photo">
            <PhotoPlaceholder tone={s.featured ? 'dark' : 'default'} label={s.photoCue} />
            <span className={`sc-tag ${s.featured ? 'featured' : ''}`}>{s.tag}</span>
          </div>
          <div className="sc-body">
            <h3>{s.name}</h3>
            <p>{s.blurb}</p>
            <div className="sc-meta">
              <span className="more">View details <ArrowIcon size={12} /></span>
            </div>
          </div>
        </a>
      ))}
    </div>
  );
}

/* Dedicated dumpster band — sits below the 2×2 services grid on Home + Services. */
function DumpsterBand() {
  const SIZES = ['15', '20', '25', '30', '7'];
  return (
    <section className="section section-alt" id="dumpster-rentals">
      <div className="container">
        <div className="dumpster">
          <div className="dumpster-photo">
            <PhotoPlaceholder label="green Diaz dumpster in driveway · East Bay" />
          </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-band-sizes">
              {SIZES.map((y) => (
                <a key={y} className="dumpster-band-size" href="/dumpster-rentals/">
                  <span className="dbs-num">{y}</span>
                  <span className="dbs-unit">yd³</span>
                </a>
              ))}
            </div>
            <div className="hero-ctas" style={{marginTop: 26}}>
              <a className="btn btn-action btn-lg" href="/dumpster-rentals/">
                View Dumpster Rentals <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>
    </section>
  );
}

function InsideTheQuote() {
  return (
    <section className="section section-alt" id="inside-quote">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow">Inside the quote</div>
            <h2 className="h-display h2">No surprises. Ever.</h2>
          </div>
          <p className="lede">Our quote is the price. Period. No add-ons on arrival, no dump-fee surprises, no upsells.</p>
        </div>
        <div className="inside-quote-grid">
          <div className="iq-card">
            <div className="iq-num">01</div>
            <h3>Flat Price</h3>
            <p>One number, all-in. Labor, fuel, dump fees, sweep-up — everything is baked in before the truck shows up.</p>
          </div>
          <div className="iq-card">
            <div className="iq-num">02</div>
            <h3>Same-Day Service</h3>
            <p>East Bay-wide. Same-day service available most days. Pick the day, we'll lock the 2-hour window.</p>
          </div>
          <div className="iq-card">
            <div className="iq-num">03</div>
            <h3>No Hidden Fees</h3>
            <p>If the pile's bigger than the photo, we'll text you the adjusted price before we load — never after.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function EcoSection() {
  return (
    <section className="section section-sage">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow on-dark">Eco-Friendly &amp; Fully Insured</div>
            <h2 className="h-display h2" style={{color:'#fff'}}>Hauling that doesn't<br/>end in a landfill.</h2>
          </div>
          <p className="lede" style={{color:'rgba(255,255,255,.88)'}}>
            All loads are routed to certified Bay Area transfer stations and recycled whenever possible. It's the routing we already pay for — and CSLB #1072495 keeps us accountable for where every load ends up.
          </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 go to certified East Bay transfer stations — Davis Street, Waste Management, ACI — by material type.</p>
          </div>
          <div className="eco-item">
            <div className="num">03 · Insured</div>
            <h3>Licensed CSLB #1072495</h3>
            <p>Fully licensed contractor + general liability + workers' comp. Insurance certificates available on request.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────
   PAGE: Homepage
   ───────────────────────────────────────────────────────── */
function HomePageBody() {
  return (
    <>
      <PageHero
        tall
        eyebrow="Family-owned · Oakland · Since 2012"
        h1={<>The Bay Area's <span className="underline">#1</span> Debris Removal <span className="accent">Contractor</span>.</>}
        sub="Family-owned East Bay junk removal, demolition, and dumpster rentals. 15+ years. Fully licensed and insured."
        photoCue="HERO · Diaz green truck on East Bay job site · documentary daylight"
        ctas={<PrimaryCTAs photoCTA="Get a Free Quote" photoHref="/free-quote/" />}
      />
      <TrustStrip4Up />
      <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. Four core services across the East Bay — plus roll-off dumpsters below.</p>
          </div>
          <ServicesGrid4 />
          <div className="city-pill-grid" style={{marginTop: 24}}>
            {SERVICE_PAGES.map((s) => (
              <a key={s.slug} className="city-pill" href={`/services/${s.slug}/`}>{s.name}</a>
            ))}
          </div>
        </div>
      </section>
      <DumpsterBand />
      <EcoSection />
      <MidCTA heading="Get Your Free Quote Today" />
      <section className="section">
        <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">Junk Removal Specialists</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 back in 2012. Today we're a fully-licensed contractor (CSLB #1072495) serving homes, businesses, and construction sites across the East Bay.
              </p>
              <ul className="check-list">
                <li><CheckIcon size={14}/> House &amp; estate cleanouts</li>
                <li><CheckIcon size={14}/> Garage &amp; basement cleanouts</li>
                <li><CheckIcon size={14}/> Furniture, appliance &amp; mattress haul-away</li>
                <li><CheckIcon size={14}/> Yard waste &amp; e-waste pickup</li>
                <li><CheckIcon size={14}/> Light demolition (sheds, decks, fences)</li>
                <li><CheckIcon size={14}/> Construction debris &amp; Bobcat work</li>
                <li><CheckIcon size={14}/> Foreclosure &amp; eviction cleanouts</li>
                <li><CheckIcon size={14}/> Dumpster rentals (15/20/25/30/7 yard)</li>
              </ul>
            </div>
          </div>
        </div>
      </section>
      <ReviewsRow ids={[0,1,2]} heading="613+ five-star reviews. We read every one." />
      <section className="section">
        <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>
          <CityTileGrid cities={CITY_PAGES} featured={6} />
        </div>
      </section>
      <MidCTA heading="Snap a pic. Get a quote." sub="Text us a photo of the pile — we'll text you back a flat, all-in quote, usually within the hour." photoCue="Diaz truck loaded at dusk · East Bay backdrop" />
    </>
  );
}

/* ─────────────────────────────────────────────────────────
   PAGE: Services index
   ───────────────────────────────────────────────────────── */
function ServicesIndexBody() {
  return (
    <>
      <PageHero
        eyebrow="Services"
        h1={<>Services.</>}
        sub="Junk removal, hauling, demolition, dumpster rentals, and Bobcat work — across the entire East Bay."
        photoCue="Diaz crew loading truck · East Bay job"
        breadcrumb={[{label:'Home',href:'/'},{label:'Services'}]}
        ctas={<PrimaryCTAs photoCTA="Get a Free Quote" />}
        compact
      />
      <TrustStrip4Up />
      <section className="section">
        <div className="container">
          <ServicesGrid4 />
        </div>
      </section>
      <DumpsterBand />
      <InsideTheQuote />
      <ReviewsRow ids={[0,1,2]} />
      <MidCTA />
    </>
  );
}

/* ─────────────────────────────────────────────────────────
   PAGE: Service detail (4 instances)
   ───────────────────────────────────────────────────────── */
function ServiceDetailBody({ slug }) {
  const s = SERVICE_BY_SLUG[slug];
  if (!s) return <div className="container section">Service not found.</div>;
  return (
    <>
      <PageHero
        eyebrow="Services"
        h1={s.name}
        sub={s.heroBlurb}
        photoCue={'HERO · ' + s.photoCue}
        breadcrumb={[{label:'Home',href:'/'},{label:'Services',href:'/services/'},{label:s.name}]}
        ctas={<PrimaryCTAs photoCTA="Get a Free Quote" />}
      />
      <TrustStrip4Up />
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow">{s.heroTagline}</div>
              <h2 className="h-display h2">What we handle.</h2>
            </div>
            <p className="lede">Single-item to multi-day. Truck-only to full crew + Bobcat. Whatever the job, we have the gear, the license, and the insurance to take it on.</p>
          </div>
          <ul className="check-list check-list-grid">
            {s.handles.map((h, i) => (<li key={i}><CheckIcon size={14}/> {h}</li>))}
          </ul>
        </div>
      </section>
      <Workflow />
      <InsideTheQuote />
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow">Real jobs</div>
              <h2 className="h-display h2">Recent {s.name.toLowerCase()} jobs.</h2>
            </div>
            <p className="lede">Every photo on this page is a real Diaz Hauling job. No stock imagery, no AI mockups. The truck on screen is the truck that shows up.</p>
          </div>
          <PhotoGallery photos={[
            `${s.name} · East Bay job 1`,
            `${s.name} · East Bay job 2`,
            `${s.name} · East Bay job 3`,
            `${s.name} · East Bay job 4`,
            `${s.name} · East Bay job 5`,
            `${s.name} · East Bay job 6`
          ]} />
        </div>
      </section>
      <MidCTA heading={`Get a free ${s.name.toLowerCase()} quote`} />
      <ReviewsRow ids={[0,1,2]} eyebrow={`Reviews · ${s.name}`} heading={`What East Bay neighbors say about our ${s.name.toLowerCase()}.`} />
      <section className="section section-alt">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow">Related services</div>
              <h2 className="h-display h2">More we can take off your hands.</h2>
            </div>
            <p className="lede">One call covers a lot of work. Tell us what else needs to go.</p>
          </div>
          <div className="related-grid">
            {s.related.map((rs) => {
              const r = SERVICE_BY_SLUG[rs];
              if (!r) return null;
              return (
                <a key={rs} className="related-card" href={`/services/${r.slug}/`}>
                  <div className="related-photo"><PhotoPlaceholder label={r.photoCue}/></div>
                  <div className="related-body">
                    <h3>{r.name}</h3>
                    <span className="more">View details <ArrowIcon size={12}/></span>
                  </div>
                </a>
              );
            })}
            <a className="related-card" href="/dumpster-rentals/">
              <div className="related-photo"><PhotoPlaceholder label="green Diaz dumpster · driveway · East Bay"/></div>
              <div className="related-body">
                <h3>Dumpster Rentals</h3>
                <span className="more">View details <ArrowIcon size={12}/></span>
              </div>
            </a>
          </div>
        </div>
      </section>
    </>
  );
}

/* ─────────────────────────────────────────────────────────
   PAGE: City page (13 instances) — SEO workhorse
   ───────────────────────────────────────────────────────── */
function CityPageBody({ slug }) {
  const c = CITY_BY_SLUG[slug];
  if (!c) return <div className="container section">City not found.</div>;
  const neighborCities = c.neighbors.map((n) => CITY_PAGES.find(cp => cp.city === n)).filter(Boolean);
  return (
    <>
      <PageHero
        eyebrow={`Service area · ${c.city}, CA`}
        h1={`Hauling and Junk Removal Services ${c.city}`}
        sub={`Family-owned, fully licensed, and based right here in the East Bay. Same-day junk removal, dumpster rentals, and light demolition across ${c.city}.`}
        photoCue={`HERO · Diaz job in ${c.city} · documentary daylight`}
        breadcrumb={[{label:'Home',href:'/'},{label:'Service Area',href:'/about-us/'},{label:c.city}]}
        ctas={<PrimaryCTAs photoCTA="Get a Free Quote" />}
      />
      <TrustStrip4Up />

      <section className="section">
        <div className="container">
          <div className="city-copy">
            <h2 className="h-display h3">Junk Removal Services in {c.city}, California</h2>
            <p>
              Diaz Hauling has been serving {c.city} and the rest of the East Bay since 2012. We're a family-owned, fully licensed contractor (CSLB #1072495) handling residential cleanouts, commercial debris removal, construction haul-away, and Bobcat work for {c.city} homeowners, property managers, and general contractors. Whether you need a single mattress removed from a {c.city} apartment or a multi-day cleanout of a {c.city} job site, our crew is on the road across the East Bay every day — and {c.city} is usually less than thirty minutes from the next truck.
            </p>

            <h3 className="h-display h3">Full-Service Junk Removal in {c.city}</h3>
            <p>
              From single-item pickups to whole-house cleanouts, we handle the full range of junk removal in {c.city}. Mattresses, couches, fridges, washer/dryers, e-waste, yard debris, hot tubs, construction debris — if it doesn't fit in a regular trash bin, we can haul it. The same Diaz truck that's covered the East Bay for over a decade pulls into your driveway in {c.city}, the crew loads it, sweeps up, and you're done.
            </p>

            <h3 className="h-display h3">Eco-Friendly Disposal</h3>
            <p>
              We route every {c.city} load to certified East Bay transfer stations — Davis Street, Waste Management, ACI — and recycle whenever possible. Metal, clean wood, mattresses, and e-waste are separated on-truck before we ever leave your {c.city} property. We're licensed, we're insured, and we're accountable for where every load ends up. That's a hard contrast to one-truck haulers who don't have to report to anyone.
            </p>

            <h3 className="h-display h3">Comprehensive Hauling Services in {c.city}</h3>
            <p>Diaz Hauling covers the full menu of debris removal in {c.city}:</p>
            <ul className="check-list check-list-grid">
              <li><CheckIcon size={14}/> Residential junk removal in {c.city}</li>
              <li><CheckIcon size={14}/> Commercial cleanouts &amp; property management</li>
              <li><CheckIcon size={14}/> Construction debris haul-away</li>
              <li><CheckIcon size={14}/> Bobcat services &amp; light demolition</li>
              <li><CheckIcon size={14}/> Dumpster rentals (15/20/25/30/7 yard) in {c.city}</li>
              <li><CheckIcon size={14}/> Foreclosure &amp; eviction cleanouts in {c.city}</li>
              <li><CheckIcon size={14}/> Estate cleanouts in {c.city}</li>
              <li><CheckIcon size={14}/> Hot tub, spa &amp; appliance removal</li>
              <li><CheckIcon size={14}/> Yard waste &amp; tree debris pickup</li>
            </ul>

            <h3 className="h-display h3">Why Choose Diaz Hauling for Junk Removal in {c.city}?</h3>
            <p>
              We're the East Bay's #1 debris removal contractor — not by accident. {c.city} customers choose Diaz Hauling because we show up on time, we quote a flat price by text after you send a photo, and we don't tack on surprise fees when we arrive. Our CSLB #1072495 license isn't a sticker on the truck — it's a real general contractor's license that holds us accountable for every job in {c.city}. We've been doing this since 2012. We're not going anywhere.
            </p>
          </div>
        </div>
      </section>

      <MidCTA heading={`Get Your Free Quote Today for ${c.city} Junk Removal`} sub={`Text us a photo of your pile. We'll text you a flat quote — usually within the hour. ${c.city} is on our daily route.`} photoCue={`Diaz crew + truck · ${c.city} job site`} />

      <section className="section section-alt">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow">Also serving</div>
              <h2 className="h-display h2">Nearby cities we cover.</h2>
            </div>
            <p className="lede">Same crew. Same trucks. Same flat-rate pricing across the East Bay.</p>
          </div>
          <CityTileGrid cities={neighborCities} featured={5} />
        </div>
      </section>

      <ReviewsRow ids={[0,1,2]} eyebrow="Reviews" heading={`What our ${c.city} customers say.`} />

      <section className="section">
        <div className="container city-contact">
          <h2 className="h-display h3">Contact Us for Junk Removal in {c.city}, California</h2>
          <p>The fastest way to a real, flat-rate quote in {c.city} is to text us a photo of what needs to go. Call José directly at (510) 825-4218, or request a free quote online — we'll get back to you the same day during business hours.</p>
          <div className="hero-ctas" style={{marginTop:24}}>
            <a className="btn btn-action btn-lg btn-sms" href="/free-quote/"><TextIcon size={16}/> Get a Free Quote <ArrowIcon size={14}/></a>
            <a className="btn btn-outline btn-lg" href="tel:+15108254218"><PhoneIcon size={15}/> (510) 825-4218</a>
          </div>
        </div>
      </section>
    </>
  );
}

/* ─────────────────────────────────────────────────────────
   PAGE: Dumpster Rentals
   ───────────────────────────────────────────────────────── */
function DumpsterRentalsBody() {
  const [picked, setPicked] = useStateP('15');
  const SIZES = [
    { yards: '15', tag: 'Compact',      dims: '14\' x 7\' x 53"', price: '$649/wk', weight: '2,000 lbs included', desc: 'No dirt, concrete, brick, or other heavy material.' },
    { yards: '20', tag: 'Most popular', dims: '16\' x 7\' x 56"', price: '$725/wk', weight: '3,000 lbs included', desc: 'No dirt, concrete, brick, or other heavy material.' },
    { yards: '25', tag: 'Heavy-duty',   dims: '16\' x 7\' x 70"', price: '$749/wk', weight: '3,000 lbs included', desc: 'No dirt, concrete, brick, or other heavy material.' },
    { yards: '30', tag: 'Job-site',     dims: '16\' x 7\' x 90"', price: '$849/wk', weight: '4,000 lbs included', desc: 'No dirt, concrete, brick, or other heavy material.' }
  ];
  const HEAVY = { yards: '7', tag: 'Heavy material only', dims: '12\' x 7\' x 25"', price: '$899/wk', weight: 'Heavy-material only', desc: 'Clean concrete (no big chunks/rebar), clean dirt, clean tile, clean brick. No mixed materials.' };
  return (
    <>
      <PageHero
        eyebrow="Dumpster Rentals"
        h1={<>Dumpster Rentals.<br/><span style={{color:'#b8d4a9'}}>East Bay.</span></>}
        sub="Roll-off dumpsters for cleanouts, remodels, and construction debris. Driveway-friendly sizes, flat weekly rates, no surprise dump fees."
        photoCue="HERO · bright green Diaz dumpster · East Bay driveway"
        breadcrumb={[{label:'Home',href:'/'},{label:'Dumpster Rentals'}]}
        ctas={<PrimaryCTAs photoCTA="Reserve Your Dumpster" />}
      />
      <TrustStrip4Up />

      <section className="section" style={{paddingBottom:0}}>
        <div className="container">
          <div className="dumpster-gallery">
            <div className="dg-item"><PhotoPlaceholder label="dumpster strip a · dropped bin"/></div>
            <div className="dg-item"><PhotoPlaceholder label="dumpster strip b · roll-off truck"/></div>
            <div className="dg-item"><PhotoPlaceholder label="dumpster strip c · roll-off haul"/></div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow">Sizes available</div>
              <h2 className="h-display h2">Pick the size that fits the job.</h2>
            </div>
            <p className="lede">Five sizes from a 15-yarder for a single remodel to a 30-yard job-site box — plus a dedicated 7-yard box for heavy material. We deliver across the East Bay, set it in your driveway, and pick it up when you're done.</p>
          </div>
          <div className="dumpster-size-grid">
            {SIZES.map((s) => (
              <button
                key={s.yards}
                type="button"
                className={`dumpster-size-card ${picked === s.yards ? 'active' : ''}`}
                onClick={() => setPicked(s.yards)}
              >
                <div className="ds-body">
                  <div className="ds-yards">{s.yards}<span className="ds-unit">yd³</span></div>
                  <div className="ds-tag">{s.tag}</div>
                  <p className="ds-desc">{s.dims} · {s.price} · {s.weight}. {s.desc}</p>
                </div>
              </button>
            ))}
          </div>

          <div style={{maxWidth:460,margin:'20px auto 0'}}>
            <button
              type="button"
              className={`dumpster-size-card ${picked === HEAVY.yards ? 'active' : ''}`}
              onClick={() => setPicked(HEAVY.yards)}
            >
              <div className="ds-body">
                <div className="ds-yards">{HEAVY.yards}<span className="ds-unit">yd³</span></div>
                <div className="ds-tag">{HEAVY.tag}</div>
                <p className="ds-desc">{HEAVY.dims} · {HEAVY.price} · {HEAVY.weight}. {HEAVY.desc}</p>
              </div>
            </button>
          </div>

          <div className="hero-ctas" style={{marginTop:32,justifyContent:'center'}}>
            <a className="btn btn-action btn-lg btn-sms" href="/free-quote/">
              <TextIcon size={16}/> Reserve a {picked}yd³ Dumpster <ArrowIcon size={14}/>
            </a>
            <a className="btn btn-outline btn-lg" href="tel:+15108254218">
              <PhoneIcon size={15}/> (510) 825-4218
            </a>
          </div>
        </div>
      </section>

      <section className="section section-alt">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow">Rental terms &amp; fees</div>
              <h2 className="h-display h2">One flat rate.<br/>No surprise math.</h2>
            </div>
            <p className="lede">Every rental includes 7 days and the weight allowance listed on its card — here's what's extra.</p>
          </div>
          <div className="inside-quote-grid">
            <div className="iq-card">
              <div className="iq-num">01</div>
              <h3>7 Days Included</h3>
              <p>Every rental includes a 7-day window. Need more time? Extra days are a flat $40/day — just text us.</p>
            </div>
            <div className="iq-card">
              <div className="iq-num">02</div>
              <h3>Overweight: $195/ton</h3>
              <p>Each size includes the weight allowance listed on its card. Go over, and it's a flat $195/ton — no hidden math.</p>
            </div>
            <div className="iq-card">
              <div className="iq-num">03</div>
              <h3>Extra-Fee Items</h3>
              <p>Mattresses, appliances, TVs, electronics, and tires are accepted but carry an added per-item fee. Debris can't exceed the top-rail fill line.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="canister-grid">
            <div>
              <div className="eyebrow">What goes in</div>
              <h2 className="h-display h3" style={{marginTop:14}}>Yes to most household, construction, and yard debris.</h2>
              <ul className="check-list">
                <li><CheckIcon size={14}/> Furniture &amp; household clutter</li>
                <li><CheckIcon size={14}/> Drywall, lumber, framing scrap</li>
                <li><CheckIcon size={14}/> Roofing tear-off material</li>
                <li><CheckIcon size={14}/> Yard waste, tree limbs, brush</li>
                <li><CheckIcon size={14}/> Cardboard &amp; packaging</li>
                <li><CheckIcon size={14}/> Mattresses, appliances, TVs, electronics, tires (extra-fee items)</li>
              </ul>
            </div>
            <div>
              <div className="eyebrow" style={{color:'var(--gold-deep)'}}>Prohibited</div>
              <h2 className="h-display h3" style={{marginTop:14}}>No to anything hazardous.</h2>
              <ul className="x-list">
                <li>Batteries</li>
                <li>Paints</li>
                <li>Oils</li>
                <li>Chemicals</li>
                <li>Hazardous materials</li>
                <li>Dirt, concrete, brick &amp; heavy material (15/20/25/30yd — use the 7yd Heavy Material box instead)</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <section className="section section-alt">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow">How it works</div>
              <h2 className="h-display h2">Order. Drop. Fill. Haul.</h2>
            </div>
            <p className="lede">Four steps from "I think I need a dumpster" to a clean driveway. East Bay-wide.</p>
          </div>
          <div className="four-step-grid">
            {[
              { num:'01', t:'Order', b:'Text us the size, your address, and the start date. We confirm same day.' },
              { num:'02', t:'Drop',  b:'We deliver to your driveway, work site, or street (with permit) on the day you pick.' },
              { num:'03', t:'Fill',  b:'7 days included. Keep debris under the top-rail fill line. Need more time? Extra days are $40/day.' },
              { num:'04', t:'Haul',  b:'Text us when it\'s ready. We pick up the same week and route to a certified facility.' }
            ].map((s,i)=>(
              <div className="four-step-card" key={i}>
                <div className="fs-num">{s.num}</div>
                <h3>{s.t}</h3>
                <p>{s.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <MidCTA heading="Reserve Your Dumpster" sub="Text us the size and your zip — we'll text you a flat weekly rate, usually within the hour." />

      <FAQ items={[
        { q: 'How long can I keep the dumpster?', a: 'Every rental includes 7 days. Need more time? Extra days are a flat $40/day — just text us and we\'ll extend it.' },
        { q: 'Are there weight limits?', a: 'Yes — each size includes a set weight allowance (2,000–4,000 lbs depending on size). Go over, and it\'s a flat $195/ton overage — no surprise math.' },
        { q: 'What can\'t I put in the dumpster?', a: 'No batteries, paints, oils, chemicals, or other hazardous materials. Dirt, concrete, brick, and other heavy material go in our dedicated 7-yard Heavy Material box, not the standard sizes. Mattresses, appliances, TVs, electronics, and tires are accepted but carry an added per-item fee, and debris can\'t exceed the top-rail fill line.' },
        { q: 'Do I need a permit for street placement?', a: 'Yes, if it\'s on a public street. We can help you pull the permit through your city, or you can do it yourself in 24 hours. Driveways and private property need no permit.' },
        { q: 'How much driveway space do I need?', a: 'A 15yd³ needs about 14 ft × 7 ft. A 30yd³ needs 16 ft × 7 ft. The 7yd Heavy Material box needs about 12 ft × 7 ft. Tell us your driveway dimensions and we\'ll confirm the right size.' },
        { q: 'Do you serve all of the East Bay?', a: 'Yes — Oakland, Berkeley, Alameda, Hayward, Fremont, Castro Valley, and every city in between. Same-week delivery is standard.' }
      ]} />

      <ReviewsRow ids={[7,4,3]} eyebrow="Reviews · Dumpsters" heading="Real East Bay neighbors. Real rentals." />
    </>
  );
}

/* ─────────────────────────────────────────────────────────
   PAGE: About Us index
   ───────────────────────────────────────────────────────── */
function AboutUsIndexBody() {
  return (
    <>
      <PageHero
        eyebrow="About Diaz Hauling"
        h1={<>A real contractor.<br/>Not a guy with a truck.</>}
        sub="Family-owned, fully licensed, and East Bay born. José Antonio Diaz started Diaz Hauling in Oakland in 2012. We've been on the road every day since."
        photoCue="HERO · Diaz family + green truck · Oakland"
        breadcrumb={[{label:'Home',href:'/'},{label:'About Us'}]}
        ctas={<PrimaryCTAs photoCTA="Get a Free Quote" />}
      />
      <TrustStrip4Up />

      <section className="section">
        <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">Our story</div>
              <h2 className="h-display h2" style={{marginTop:14}}>Built in Oakland.<br/>Run by family.</h2>
              <p className="lede" style={{marginTop:22}}>
                José Antonio Diaz grew up in Oakland and started Diaz Hauling in 2012. What started as one truck and a single contractor's license is now a family-run operation serving every East Bay city. We're CSLB-licensed (#1072495), fully insured, and on the road across Alameda County every day.
              </p>
              <p style={{color:'var(--muted)',fontSize:16,lineHeight:1.6,marginTop:16,maxWidth:'56ch'}}>
                Family is at the heart of how we run. José answers the phone. Our crew shows up on time. We sweep up. We text you when we're done. That's the whole formula — and after 600+ Yelp reviews, it's still the same way it was on day one.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="section section-alt">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow">Why customers choose Diaz</div>
              <h2 className="h-display h2">Four reasons we keep getting calls.</h2>
            </div>
            <p className="lede">After 15+ years of cleanouts, haul-aways, and demos, we've heard most of it. Here's what East Bay customers consistently say.</p>
          </div>
          <div className="value-prop-grid">
            <div className="vp-card">
              <div className="vp-num">01</div>
              <h3>Family-Owned</h3>
              <p>You're talking to José or his crew — never a call center or a franchise dispatcher.</p>
            </div>
            <div className="vp-card">
              <div className="vp-num">02</div>
              <h3>Fully Insured</h3>
              <p>CSLB #1072495 general contractor's license + general liability + workers' comp. Certificates on request.</p>
            </div>
            <div className="vp-card">
              <div className="vp-num">03</div>
              <h3>Eco-Friendly</h3>
              <p>Certified transfer stations across the East Bay. We recycle whenever possible, not as a marketing line.</p>
            </div>
            <div className="vp-card">
              <div className="vp-num">04</div>
              <h3>Same-Day Response</h3>
              <p>Text a photo, get a flat quote — usually within the hour during business hours. Same-day service available.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow">Service area · East Bay</div>
              <h2 className="h-display h2">Every East Bay city. End to end.</h2>
            </div>
            <p className="lede">Click any city for local junk removal info. Same crew, same trucks, same flat-rate pricing across the East Bay.</p>
          </div>
          <CityTileGrid cities={CITY_PAGES} featured={CITY_PAGES.length} />
        </div>
      </section>

      <ReviewsRow ids={[0,1,2]} />
      <MidCTA />
    </>
  );
}

/* ─────────────────────────────────────────────────────────
   PAGE: Testimonials
   ───────────────────────────────────────────────────────── */
function TestimonialsBody() {
  return (
    <>
      <PageHero
        eyebrow="Testimonials"
        h1={<>★ 5.0 from 613+<br/>East Bay neighbors.</>}
        sub="Real reviews from real Yelp accounts. No solicited testimonials, no friend-of-the-family ringers. Just what real East Bay customers have said about a real Diaz Hauling job."
        photoCue="HERO · Diaz crew + truck · East Bay sunset"
        breadcrumb={[{label:'Home',href:'/'},{label:'Testimonials'}]}
        ctas={
          <>
            <a className="btn btn-action btn-lg btn-sms" href="/free-quote/"><TextIcon size={16}/> Get a Free Quote <ArrowIcon size={14}/></a>
            <a className="btn btn-outline-light btn-lg" href="https://www.yelp.com/biz/diaz-hauling-oakland" target="_blank" rel="noreferrer">Read all 613+ on Yelp</a>
          </>
        }
      />
      <TrustStrip4Up />
      <section className="section">
        <div className="container">
          <div className="reviews-grid reviews-grid-wide">
            {SITE_REVIEWS.map((r,i)=>(
              <div className="review" key={i}>
                <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} · {r.service}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
          <div style={{textAlign:'center',marginTop:40}}>
            <a className="btn btn-primary btn-lg" href="https://www.yelp.com/biz/diaz-hauling-oakland" target="_blank" rel="noreferrer">Read all reviews on Yelp <ArrowIcon size={14}/></a>
          </div>
        </div>
      </section>
      <MidCTA />
    </>
  );
}

/* ─────────────────────────────────────────────────────────
   PAGE: Contact Us
   ───────────────────────────────────────────────────────── */
function ContactUsBody() {
  return (
    <>
      <PageHero
        eyebrow="Contact"
        h1={<>Get in touch.<br/>We answer fast.</>}
        sub="Text a photo for the fastest quote. Or call José directly — he picks up. Family-owned means a real person on the phone, every time."
        photoCue="HERO · Diaz green truck · Oakland HQ exterior"
        breadcrumb={[{label:'Home',href:'/'},{label:'Contact'}]}
        ctas={<PrimaryCTAs photoCTA="Text a Photo for a Quote" />}
      />
      <TrustStrip4Up />
      <section className="section">
        <div className="container">
          <div className="contact-grid">
            <div className="contact-info">
              <div className="contact-row">
                <div className="contact-label">Phone</div>
                <a className="contact-value" href="tel:+15108254218">(510) 825-4218</a>
              </div>
              <div className="contact-row">
                <div className="contact-label">Text a photo for a quote</div>
                <a className="contact-value" href={SMS_HREF}>(510) 825-4218</a>
              </div>
              <div className="contact-row">
                <div className="contact-label">Email</div>
                <a className="contact-value" href="mailto:jose@diazhauling.com">jose@diazhauling.com</a>
              </div>
              <div className="contact-row">
                <div className="contact-label">Hours</div>
                <span className="contact-value">Mon–Sun · 5 AM – 10 PM</span>
              </div>
              <div className="contact-row">
                <div className="contact-label">Service area</div>
                <span className="contact-value">East Bay / Alameda County</span>
              </div>
              <div className="contact-row">
                <div className="contact-label">License</div>
                <span className="contact-value">CSLB #1072495 · Fully insured</span>
              </div>
              <div className="contact-row">
                <div className="contact-label">HQ</div>
                <span className="contact-value">Oakland, CA</span>
              </div>
            </div>
          </div>
        </div>
      </section>
      <MidCTA />
    </>
  );
}

/* ─────────────────────────────────────────────────────────
   PAGE: Privacy Policy
   ───────────────────────────────────────────────────────── */
function PrivacyPolicyBody() {
  return (
    <>
      <PageHero
        eyebrow="Legal"
        h1="Privacy Policy"
        sub="How Diaz Hauling collects, uses, and protects your information."
        photoCue=""
        breadcrumb={[{label:'Home',href:'/'},{label:'Privacy Policy'}]}
        compact
      />
      <section className="section">
        <div className="container">
          <div className="legal-copy">
            <p><strong>Last updated:</strong> July 2026</p>
            <h2>Information we collect</h2>
            <p>When you request a quote or contact Diaz Hauling, we may collect your name, phone number, email address, service address, and any photos you choose to send us. We use this information only to respond to your request, schedule service, and follow up on the job.</p>
            <h2>How we use your information</h2>
            <p>We use the information you provide to: (a) respond to your quote request; (b) schedule and complete the job; (c) send appointment reminders and follow-ups; (d) respond to questions or concerns. We do not sell, rent, or share your information with third parties for marketing purposes.</p>
            <h2>Text messages and photos</h2>
            <p>Photos and text messages sent to (510) 825-4218 are used only to provide your quote and complete service. We do not publish customer photos without explicit permission.</p>
            <h2>Cookies and analytics</h2>
            <p>This website uses standard analytics to understand which pages are most useful to our customers. No personally identifiable information is shared with third parties.</p>
            <h2>Your choices</h2>
            <p>You can request that we delete your contact information at any time by emailing jose@diazhauling.com.</p>
            <h2>Contact</h2>
            <p>Questions about this policy? Email jose@diazhauling.com or call (510) 825-4218.</p>
          </div>
        </div>
      </section>
    </>
  );
}

/* ─────────────────────────────────────────────────────────
   PAGE: Terms & Conditions
   ───────────────────────────────────────────────────────── */
function TermsBody() {
  return (
    <>
      <PageHero
        eyebrow="Legal"
        h1="Terms & Conditions"
        sub="The terms that apply when you request a quote, book a job, or rent a dumpster from Diaz Hauling."
        photoCue=""
        breadcrumb={[{label:'Home',href:'/'},{label:'Terms & Conditions'}]}
        compact
      />
      <section className="section">
        <div className="container">
          <div className="legal-copy">
            <p><strong>Last updated:</strong> July 2026</p>

            <h2>1. Agreement</h2>
            <p>These Terms &amp; Conditions apply to all services provided by Diaz Hauling (CSLB #1072495), a family-owned debris-removal contractor based in Oakland, California. By requesting a quote, booking a job, or renting a dumpster, you agree to these terms.</p>

            <h2>2. Quotes &amp; estimates</h2>
            <p>Quotes provided by phone, text, photo, or our online booking tool are good-faith estimates. Final pricing is confirmed on site and may change based on the actual volume, weight, material type, and access at the job location. We always confirm the final price with you before we begin work.</p>

            <h2>3. Scheduling, arrival windows &amp; cancellations</h2>
            <p>We schedule service in arrival windows and confirm by text. If you need to reschedule or cancel, just text or call (510) 825-4218 — there is no charge to reschedule. We ask for reasonable notice so we can offer the slot to another customer.</p>

            <h2>4. Payment</h2>
            <p>Payment is due upon completion of the job unless other arrangements have been made in advance. We accept the payment methods listed at the time of booking. Dumpster rentals may require payment before drop-off.</p>

            <h2>5. Dumpster rentals</h2>
            <p>Dumpster rentals include a 7-day rental period. Additional days are $40 per day. Each dumpster has an included weight allowance; loads over the allowance are billed at $195 per ton. Debris may not exceed the container's top "fill line." Certain items — including mattresses, appliances, TVs, electronics, and tires — carry an additional disposal fee. Heavy materials (clean concrete, dirt, tile, or brick) are only permitted in our 7-yard heavy-material dumpster and may not be mixed with general debris.</p>

            <h2>6. Prohibited &amp; hazardous materials</h2>
            <p>For everyone's safety and to comply with disposal regulations, we cannot haul or accept batteries, paints, oils, solvents, chemicals, or other hazardous materials. If you are unsure whether an item can be hauled, ask us before your appointment.</p>

            <h2>7. Property &amp; liability</h2>
            <p>Our crew takes care on every job. Diaz Hauling is not responsible for pre-existing property conditions or for damage arising from dumpster placement at a location you direct (for example, on a driveway). Please let us know in advance of any surface, gate, or clearance concerns so we can plan accordingly.</p>

            <h2>8. Text messaging</h2>
            <p>When you contact us at (510) 825-4218 or opt in through our website, you consent to receive text messages from Diaz Hauling about your quote, appointment, and service. Message frequency varies. Message and data rates may apply. Reply STOP to opt out at any time, or HELP for help. Consent to receive texts is not a condition of any purchase. See our <a href="/privacy-policy/">Privacy Policy</a> for how we handle your information.</p>

            <h2>9. Changes to these terms</h2>
            <p>We may update these terms from time to time. The "last updated" date above reflects the most recent revision. Continued use of our services after changes are posted constitutes acceptance of the updated terms.</p>

            <h2>10. Contact</h2>
            <p>Questions about these terms? Email jose@diazhauling.com or call (510) 825-4218.</p>
          </div>
        </div>
      </section>
    </>
  );
}

/* ─────────────────────────────────────────────────────────
   PAGE: Free Quote — focused conversion funnel.
   Rebuilt off the current component set (PageHero, TrustStrip4Up,
   InsideTheQuote, ReviewsRow, DumpsterBand) so it no longer carries the
   legacy sections.jsx content ("Since 2009", Peninsula / Tri-Valley /
   Dublin / Pleasanton, "608+" reviews, the old "JD" signature). Keeps
   the visitor on-page: no 4-up Services grid or 14-city ServiceArea
   linking traffic away from the quote.
   ───────────────────────────────────────────────────────── */
function FreeQuoteBody() {
  return (
    <>
      <PageHero
        tall
        eyebrow="Free Estimate · East Bay · Since 2012"
        h1={<>Send a photo.<br/><span className="accent">Get a flat quote.</span></>}
        sub="Text us a picture of the pile and we'll text back a flat, all-in price — usually within the hour. Prefer to lock a time? Book your window right here."
        photoCue="HERO · Diaz green truck loaded · East Bay · golden hour"
        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-light btn-lg" href="tel:+15108254218">
              <PhoneIcon size={15} /> (510) 825-4218
            </a>
            <a className="btn btn-primary btn-lg" href="#schedule">
              Book Online <ArrowIcon size={14} />
            </a>
          </>
        }
      />
      <TrustStrip4Up />
      <WorkizSchedule />
      <InsideTheQuote />
      <Workflow />
      <ReviewsRow ids={[3,0,7]} eyebrow="Reviews · Yelp-verified" heading="613+ five-star reviews from East Bay neighbors." />
      <DumpsterBand />
      <MidCTA heading="Snap a pic. Get a flat quote." sub="Text us a photo of the pile — we'll text back a flat, all-in quote, usually within the hour." />
    </>
  );
}

/* ─────────────────────────────────────────────────────────
   PAGE: Thank You — booking/quote-request confirmation
   ───────────────────────────────────────────────────────── */
function ThankYouBody() {
  // Fire once on load so GTM/Workiz can pick up the booking conversion.
  useEffectP(() => {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({ event: 'booking_confirmed' });
  }, []);

  return (
    <>
      <PageHero
        compact
        eyebrow="Request Received"
        h1={<>Thank you,<br/>your request is in!</>}
        sub="José or the crew will reach out shortly to confirm. For the fastest reply, feel free to text a photo to (510) 825-4218."
        photoCue="HERO · Diaz green truck on East Bay job site · documentary daylight"
        breadcrumb={[{label:'Home',href:'/'},{label:'Thank You'}]}
        ctas={<PrimaryCTAs photoCTA="Text a Photo for a Quote" photoHref={SMS_HREF} />}
      />
      <section className="section" style={{textAlign: 'center'}}>
        <div className="container">
          <a href="/" className="btn btn-outline btn-lg">
            <ArrowIcon size={14} style={{transform: 'rotate(180deg)'}} /> Back to Home
          </a>
        </div>
      </section>
    </>
  );
}

/* ─────────────────────────────────────────────────────────
   Routes / page resolver
   ───────────────────────────────────────────────────────── */
const PAGE_TYPES = {
  'home':        HomePageBody,
  'services':    ServicesIndexBody,
  'service':     ServiceDetailBody,
  'city':        CityPageBody,
  'dumpster':    DumpsterRentalsBody,
  'about':       AboutUsIndexBody,
  'testimonials':TestimonialsBody,
  'contact':     ContactUsBody,
  'privacy':     PrivacyPolicyBody,
  'terms':       TermsBody,
  'free-quote':  FreeQuoteBody,
  'thank-you':   ThankYouBody
};

Object.assign(window, {
  PAGE_TYPES,
  PageHero, Breadcrumb, MidCTA, PhotoGallery, CityTileGrid, TrustStrip4Up, ReviewsRow, FAQ,
  ServicesGrid4, DumpsterBand, InsideTheQuote, EcoSection,
  HomePageBody, ServicesIndexBody, ServiceDetailBody, CityPageBody, DumpsterRentalsBody,
  AboutUsIndexBody, TestimonialsBody, ContactUsBody, PrivacyPolicyBody, TermsBody, FreeQuoteBody, ThankYouBody
});