// pages.jsx — page body templates for Responsive Hauling.
// Renders inside the shared chrome (UtilityBar, Nav, Footer, MobileCallBar) from app.jsx.

const { useState: useStatePg } = React;

/* ───────── Home ───────── */
function HomePageBody() {
  return (
    <>
      <HeroHome />
      <HomeTrustStrip />
      <HomeCategoryGrid />
      <ReviewBadges />
      <BeforeAfterGallery />
      <section className="section section-alt">
        <div className="container">
          <SectionHeading
            eyebrow="How it works"
            title="From call to clean, in 4 steps."
            sub="Here's exactly what happens, in order."
          />
          <StepsRow compact />
        </div>
      </section>
      <CityChips />
      <CtaBand />
    </>
  );
}

const HOME_TRUST_ITEMS = [
  { label: "Licensed & insured" },
  { label: "Family-owned since 2018" },
  { label: "Free on-site estimates" }
];

function HomeTrustStrip() {
  const total = YELP_STATS.count + GOOGLE_STATS.count;
  return (
    <div className="badges-band">
      <div className="container review-platforms trust-lift">
        {HOME_TRUST_ITEMS.map((t) => (
          <span className="review-badge" key={t.label}>
            <IconCheck size={14} /> <span className="rb-name">{t.label}</span>
          </span>
        ))}
        <span className="review-badge">
          <Stars n={5} />
          <span className="rb-name">5.0 &middot; {total} reviews on Yelp &amp; Google</span>
        </span>
      </div>
    </div>
  );
}

/* Home page ordering per Steven's landing pass: the four biggest job types up
   front (mapped to their nearest real category page), then the rest. */
const HOME_CATEGORY_CARDS = [
  { slug: "property-cleanouts", label: "Estate & Property Cleanouts", photo: "svc-cleanout-1400w.jpg", blurb: "Full estates, foreclosures, evictions, and inherited properties. We clear it all, top to bottom." },
  { slug: "help-for-hoarders", label: "Help for Hoarders", photo: "svc-hoarders-1400w.jpg", blurb: "Respectful, discreet hoarding cleanup for the whole property, room by room." },
  { slug: "construction-debris-removal", label: "Construction Debris Removal", photo: "svc-business-1400w.jpg", blurb: "Drywall, lumber, concrete, and demo debris hauled fast. No dumpster, no permit." },
  { slug: "in-home-pick-up", label: "Full-Load Junk Removal", photo: "IMG_2496-1400w.jpg", blurb: "Garages, basements, and full-house loads. Our crew does the carrying and the hauling." },
  { slug: "furniture-removal", label: "Furniture", photo: "svc-furniture-1400w.jpg", blurb: "Couches, mattresses, dressers, and more, carried out and hauled away." },
  { slug: "appliance-removal", label: "Appliances", photo: "svc-appliance-1400w.jpg", blurb: "Refrigerators, washers, water heaters, and more, disconnected and removed." },
  { slug: "business-services", label: "Business Services", photo: "svc-business-1400w.jpg", blurb: "Office cleanouts, warehouses, and multi-unit properties, without disrupting your day." },
  { slug: "other-removal", label: "Specialty & Bulky", photo: "svc-other-1400w.jpg", blurb: "Hot tubs, sheds, decks, fences, pools, and anything else too big for the curb." }
];

function HomeCategoryGrid() {
  return (
    <section className="section section-alt" id="services">
      <div className="container">
        <SectionHeading
          eyebrow="What we haul"
          title="Big jobs are our specialty."
          sub="From a full estate cleanout to a job site full of debris, pick your service, or call and we'll sort it out."
        />
        <div className="category-grid">
          {HOME_CATEGORY_CARDS.map((c) => (
            <a className="category-card has-photo" href={href(c.slug)} key={c.slug}>
              <div className="cc-photo"><img src={imgSrc(c.photo)} alt={c.label} loading="lazy" /></div>
              <h3>{c.label}</h3>
              <p>{c.blurb}</p>
              <span className="cc-more">What we take <IconArrow size={12} /></span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function AboutBody() {
  const galleryImgs = [
    'IMG_2040-1400w.jpg', 'IMG_2119-1400w.jpg', 'IMG_2480-1400w.jpg', 'IMG_2481-1400w.jpg',
    'IMG_2484-1400w.jpg', 'IMG_2485-1400w.jpg', 'IMG_2486-1400w.jpg', 'IMG_2488-1400w.jpg',
    'IMG_2490-1400w.jpg', 'IMG_2491-1400w.jpg', 'IMG_2492-1400w.jpg', 'IMG_2493-1400w.jpg',
    'IMG_2494-1400w.jpg', 'IMG_2495-1400w.jpg', 'IMG_2496-1400w.jpg', 'IMG_2498-1400w.jpg',
    'IMG_2500-1400w.jpg', 'IMG_2501-1400w.jpg', 'IMG_2502-1400w.jpg', 'IMG_2503-1400w.jpg',
    'IMG_2504-1400w.jpg', 'IMG_2505-1400w.jpg', 'IMG_2506-1400w.jpg', 'IMG_2507-1400w.jpg',
    'IMG_2509-1400w.jpg', 'IMG_2512-1400w.jpg'
  ];
  return (
    <>
      <HeroCompact
        eyebrow="About Us"
        title="Locally owned. Bay Area operated. Eco-focused."
        sub="Responsive Hauling has been clearing homes, businesses, and job sites across the Bay Area since 2018, founded by Ricardo on a simple promise: show up on time, haul it all, and leave the space spotless."
      />
      <CtaRow />
      <section className="section">
        <div className="container">
          <SectionHeading
            eyebrow="Our story"
            title="A local team built around one call."
            sub="What started as a single truck in Hayward has grown into a full crew serving the entire Bay Area, without losing the personal touch that got us here."
          />
          <p className="lede" style={{ maxWidth: '80ch' }}>
            Responsive Hauling Inc. is based right here in Hayward, CA, and since 2018 we've built our reputation one job at a time, on-time crews, all-inclusive pricing, and an eco-first approach that puts recycling and donation ahead of the landfill. Whether it's a single item pickup or a full property cleanout, our crew treats every job like it's the only one on the schedule that day.
          </p>
          <div className="stat-strip">
            <div className="stat-item"><div className="num">2018</div><div className="lbl">Founded in Hayward</div></div>
            <div className="stat-item"><div className="num">Mon&ndash;Sat</div><div className="lbl">8 AM &ndash; 6 PM</div></div>
            <div className="stat-item"><div className="num">12</div><div className="lbl">Cities served</div></div>
            <div className="stat-item"><div className="num">100%</div><div className="lbl">Licensed &amp; insured</div></div>
          </div>
        </div>
      </section>

      <section className="section section-alt">
        <div className="container">
          <SectionHeading eyebrow="Meet the crew" title="The people who show up on time." />
          <div className="crew-shot">
            <img src={imgSrc('crew-three-1400w.jpg')} alt="The Responsive Hauling crew" loading="lazy" />
          </div>
          <div className="team-grid">
            {TEAM.map((m) => (
              <div className="team-card" key={m.name}>
                {m.photo ? (
                  <div className="team-photo"><img src={imgSrc(m.photo)} alt={m.name} loading="lazy" /></div>
                ) : (
                  <div className="team-avatar">{m.name[0]}</div>
                )}
                <h3>{m.name}</h3>
                <div className="team-role">{m.role}</div>
                <p>{m.bio}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHeading eyebrow="On the job" title="A few recent Bay Area jobs." />
          <div className="gallery-strip">
            {galleryImgs.map((img) => (
              <figure key={img}><img src={imgSrc(img)} alt="Responsive Hauling crew on a Bay Area job" loading="lazy" /></figure>
            ))}
          </div>
        </div>
      </section>

      <EcoBand />
      <CtaBand title="Ready to work with a crew you can trust?" />
    </>
  );
}

/* ───────── How We Work ───────── */
function HowWeWorkBody() {
  return (
    <>
      <HeroCompact
        eyebrow="How We Work"
        title="From call to clean, in 4 steps."
        sub="No hidden fees, no surprise add-ons, just a simple, all-inclusive process from the first call to the final sweep."
      />
      <CtaRow />
      <section className="section">
        <div className="container">
          <StepsRow />
        </div>
      </section>

      <section className="section section-alt">
        <div className="container">
          <SectionHeading
            eyebrow="Pricing, made simple"
            title="Volume-based, all-inclusive pricing."
            sub="You pay for the space your junk takes up in the truck, nothing more. No hidden dump fees, no last-minute add-ons."
          />
          <div className="usp-grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
            <div className="usp-card">
              <IconChip tone="blue"><IconClock size={22} /></IconChip>
              <h3>Open Mon&ndash;Sat, 8 AM&ndash;6 PM</h3>
              <p>Same-day pickups available most days, Monday through Saturday. Text a photo and we'll confirm a time.</p>
            </div>
            <div className="usp-card">
              <IconChip tone="blue"><IconShield size={22} /></IconChip>
              <h3>Financing Available</h3>
              <p>Bigger cleanouts don't have to wait. Ask about flexible financing options at booking.</p>
            </div>
            <div className="usp-card">
              <IconChip tone="blue"><IconCheck size={22} /></IconChip>
              <h3>Pay Your Way</h3>
              <p>Card, cash, or check, whatever's easiest for you, settled on the spot.</p>
            </div>
          </div>
        </div>
      </section>

      <BeforeAfterGallery />
      <CtaBand />
    </>
  );
}

/* ───────── Contact ───────── */
function ContactBody() {
  const data = getRHData();
  const cities = data.cities || [];

  return (
    <>
      <HeroCompact
        eyebrow="Contact Us"
        title="Get your free, no-obligation estimate."
        sub="Call, text a photo, or book online, whichever is easiest for you."
      />
      <CtaRow />

      <section className="section">
        <div className="container">
          <div className="contact-grid">
            <div className="contact-card">
              <IconChip tone="blue"><IconPhone size={20} /></IconChip>
              <h3>Call</h3>
              <p>Call {data.phone} and we'll give you a straight price over the phone.</p>
              <a href={`tel:${data.phoneHref.replace('tel:', '')}`}>{data.phone}</a>
            </div>
            <div className="contact-card">
              <IconChip tone="blue"><IconPhone size={20} /></IconChip>
              <h3>Text a Photo for a Quote</h3>
              <p>Text a photo of what needs to go and we'll price it before we even arrive.</p>
              <a href={data.phoneHref.replace('tel:', 'sms:')}>Text Us</a>
            </div>
            <div className="contact-card">
              <IconChip tone="blue"><IconClock size={20} /></IconChip>
              <h3>Book Online</h3>
              <p>Pick a day and time that works for you and lock in your appointment in under a minute.</p>
              <BookBtn variant="ghost" arrow={false}>Book Online</BookBtn>
            </div>
          </div>

          <div className="contact-meta">
            <p><IconClock size={14} /> Hours: Mon&ndash;Sat, 8 AM &ndash; 6 PM. Closed Sunday.</p>
            <p><IconMail size={14} /> Email: <a href={`mailto:${data.email}`}>{data.email}</a></p>
          </div>
        </div>
      </section>

      <section className="section section-alt">
        <div className="container">
          <SectionHeading
            align="center"
            eyebrow="Service area"
            title="Where we work."
            sub="Based in Hayward, serving all of these cities and everywhere in between."
          />
          <div className="area-grid">
            {cities.map((c) => (
              <a className="area-card" key={c} href={href(citySlug(c))}>
                <IconChip tone="blue"><IconPin size={18} /></IconChip>
                <h3>{c}</h3>
                <span className="area-cta">Junk removal in {c} <IconArrow /></span>
              </a>
            ))}
          </div>
        </div>
      </section>

      <CtaBand />
    </>
  );
}

/* ───────── Category page ───────── */
/* ───────── Item accordion grid (v2.1) ─────────
   Replaces the one-full-section-per-item layout that made service pages
   5,000px+ tall. Every item keeps its id so /coffee-maker-removal ->
   /appliance-removal/#coffee-maker-removal still lands on the item, which
   auto-expands. All copy stays in the DOM for SEO — it is hidden, not absent. */
function ItemAccordionGrid({ items, category, phone }) {
  const openFromHash = () => (typeof window !== 'undefined' ? window.location.hash.replace('#', '') : '');
  const [openSlug, setOpenSlug] = React.useState(openFromHash);

  React.useEffect(() => {
    const onHash = () => {
      const slug = openFromHash();
      if (slug) {
        setOpenSlug(slug);
        // layout is still settling on a fresh load (fonts/images), so re-fire
        [150, 600, 1400].forEach((ms) => setTimeout(() => {
          const el = document.getElementById(slug);
          if (el && Math.abs(el.getBoundingClientRect().top - 96) > 40) {
            el.scrollIntoView({ block: 'start' });
            // some embedded webviews ignore scrollIntoView; set it directly too
            const y = el.getBoundingClientRect().top + (window.pageYOffset || 0) - 96;
            if (document.scrollingElement) document.scrollingElement.scrollTop = y;
          }
        }, ms));
      }
    };
    onHash();
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  return (
    <div className="item-grid">
      {items.map((it) => {
        const open = openSlug === it.slug;
        const paras = (it.paragraphs && it.paragraphs.length ? it.paragraphs : [
          `Need ${it.label.toLowerCase()} in Hayward or the wider Bay Area? Our crew handles it start to finish, call for a free, no-obligation estimate.`
        ]);
        return (
          <div key={it.slug} id={it.slug} className={`item-cell${open ? ' is-open' : ''}`}>
            <button
              type="button"
              className="item-toggle"
              aria-expanded={open}
              aria-controls={`${it.slug}-body`}
              onClick={() => setOpenSlug(open ? '' : it.slug)}
            >
              <span>{it.label}</span>
              <IconCaret size={13} className={`caret-btn${open ? ' is-open' : ''}`} />
            </button>
            <div id={`${it.slug}-body`} className="item-body" hidden={!open}>
              {paras.map((p, j) => (<p key={j}>{p}</p>))}
              <div className="itemblock-cta">
                <Btn tel="+15102440285" variant="primary" size="sm" icon={<IconPhone size={14} />}>{phone}</Btn>
                <BookBtn variant="ghost" size="sm" />
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

/* ───────── Construction & Renovation Debris Removal (real page, v2) ───────── */
const CONSTRUCTION_HAUL_LIST = [
  { label: "Drywall", note: "Scraps, sheets, and full teardown loads." },
  { label: "Lumber", note: "Framing offcuts, studs, and scrap wood." },
  { label: "Tile & Flooring", note: "Ripped-up tile, laminate, carpet, and padding." },
  { label: "Concrete Chunks & Brick", note: "Broken slabs, brick, and masonry rubble." },
  { label: "Cabinets & Fixtures", note: "Old cabinetry, sinks, tubs, and toilets." },
  { label: "Roofing Debris", note: "Shingles, underlayment, and gutter scrap." },
  { label: "Packaging & Pallets", note: "Wood pallets, crating, and shrink wrap." },
  { label: "Demo Debris", note: "Mixed loads from teardown and demolition." }
];

const CONSTRUCTION_FAQ = [
  {
    q: "Do you take broken concrete?",
    a: "Yes. We haul broken concrete, slabs, and brick, from a driveway tear-out to a full foundation demo. Concrete is heavy, so let us know roughly how much you have when you call so we can bring the right truck."
  },
  {
    q: "How fast can you get to my job site?",
    a: "Most jobs get same-week pickup, and many get same-day or next-day service. Text us a photo of the pile and we can usually confirm a window within the hour."
  },
  {
    q: "Do contractors get repeat pricing?",
    a: "Yes. If you call us for recurring pickups on a job, we'll set up simple, consistent pricing so you're not re-negotiating every visit. Ask when you call."
  },
  {
    q: "Do you sort debris for recycling?",
    a: "We sort what we haul. Clean wood, metal, and concrete get routed to recycling facilities whenever we can, instead of straight to the landfill."
  },
  {
    q: "Can you take hazmat or propane tanks?",
    a: "No. We cannot take hazardous materials, including asbestos, paint, solvents, or propane tanks and other pressurized cylinders. If you are unsure about an item, ask us before your appointment."
  }
];

function ConstructionDebrisFaq() {
  const [openIdx, setOpenIdx] = React.useState(null);
  return (
    <div className="item-grid">
      {CONSTRUCTION_FAQ.map((f, i) => {
        const open = openIdx === i;
        return (
          <div key={f.q} className={`item-cell${open ? ' is-open' : ''}`}>
            <button
              type="button"
              className="item-toggle"
              aria-expanded={open}
              onClick={() => setOpenIdx(open ? null : i)}
            >
              <span>{f.q}</span>
              <IconCaret size={13} className={`caret-btn${open ? ' is-open' : ''}`} />
            </button>
            <div className="item-body" hidden={!open}>
              <p>{f.a}</p>
            </div>
          </div>
        );
      })}
    </div>
  );
}

function ConstructionDebrisBody() {
  const data = getRHData();
  const category = getCategory('construction-debris-removal');
  return (
    <>
      <section className="hero-home hero-service">
        <div className="container hero-grid">
          <div>
            <div className="hero-badge"><span className="pip"></span> Same-week pickup</div>
            <h1 className="h-display h1" style={{ marginTop: 16 }}>
              Construction &amp; Renovation Debris Removal in Hayward &amp; the East Bay
            </h1>
            <p className="hero-sub">
              Contractors, remodelers, and homeowners mid-renovation call us when the dumpster isn't worth it.
              Text a photo of the pile, get a price, and we load and haul it, usually the same week.
              No permit, no driveway damage, no waiting on a pickup schedule.
            </p>
            <div className="hero-ctas">
              <Btn tel={data.phoneHref.replace('tel:', '')} variant="cta" size="lg" icon={<IconPhone size={16} />}>Call {data.phone}</Btn>
              <Btn href={data.phoneHref.replace('tel:', 'sms:')} variant="outline-light" size="lg">Text a Photo</Btn>
              <BookBtn variant="outline-light" size="lg">Book Online</BookBtn>
            </div>
            <div className="hero-trustline">
              <span><Stars n={5} size={13} /></span>
              <span><strong>5.0</strong>&nbsp;&middot;&nbsp;{YELP_STATS.count + GOOGLE_STATS.count} reviews on Yelp &amp; Google</span>
              <span><span className="pip"></span> Free on-site estimate</span>
            </div>
          </div>
          <div className="hero-visual">
            <div className="hero-photo-wrap hero-photo-service">
              <img src={imgSrc((category && category.photo) || 'svc-business-1400w.jpg')} alt="Construction debris cleared by Responsive Hauling" loading="eager" />
            </div>
            <div className="hero-chip">
              <div className="num">$0</div>
              <div className="sub">estimate fee<br />no obligation</div>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHeading
            eyebrow="What we haul"
            title="Job-site debris, cleared."
            sub="If it came off your job site, we probably haul it. Not sure about something? Call and ask."
          />
          <div className="haul-grid">
            {CONSTRUCTION_HAUL_LIST.map((h) => (
              <div className="haul-card" key={h.label}>
                <IconChip tone="blue"><IconCheck size={18} /></IconChip>
                <h3>{h.label}</h3>
                <p>{h.note}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section section-alt">
        <div className="container">
          <SectionHeading
            eyebrow="Why not a dumpster"
            title="Skip the permit. Skip the wait."
            sub="A dumpster sits on your driveway for a week and needs a permit if it's on the street. We show up, load it ourselves, and we're gone the same day."
          />
          <div className="usp-grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
            <div className="usp-card">
              <IconChip tone="blue"><IconCheck size={22} /></IconChip>
              <h3>No Permit</h3>
              <p>No street permit to arrange or pay for. We work with what's already there.</p>
            </div>
            <div className="usp-card">
              <IconChip tone="blue"><IconShield size={22} /></IconChip>
              <h3>No Driveway Damage</h3>
              <p>A dropped dumpster can crack a driveway. Our trucks stay on the street.</p>
            </div>
            <div className="usp-card">
              <IconChip tone="blue"><IconClock size={22} /></IconChip>
              <h3>No Waiting</h3>
              <p>No week-long rental sitting there half full. We haul it and it's gone.</p>
            </div>
            <div className="usp-card">
              <IconChip tone="blue"><IconTruck size={22} /></IconChip>
              <h3>We Load It</h3>
              <p>Your crew keeps working. Our crew does the lifting and loading.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHeading eyebrow="How it works" title="From photo to pickup, in 3 steps." />
          <StepsRow compact steps={[
            { num: '01', title: 'Text a Photo', blurb: 'Send us a photo of the debris pile and roughly how much there is.' },
            { num: '02', title: 'Get a Quote', blurb: "We'll give you an all-inclusive price before we ever show up." },
            { num: '03', title: 'Same-Week Pickup', blurb: 'We show up, load it ourselves, and sweep the site clean.' }
          ]} />
        </div>
      </section>

      <section className="section section-alt">
        <div className="container">
          <SectionHeading eyebrow="Questions" title="Construction debris FAQ." />
          <ConstructionDebrisFaq />
        </div>
      </section>

      <UspStrip />
      <CtaBand
        title="Ready to clear the job site?"
        sub="Text a photo, get a price, same-week pickup."
      />
    </>
  );
}

/* ───────── Property Cleanouts (estate & property) ───────── */
const WHO_WE_HELP_CLEANOUTS = [
  { label: "Executors & families", note: "Settling an estate, sorting what stays and what goes, on your timeline." },
  { label: "Realtors & property managers", note: "A clean, empty unit ready to list or show, no delays." },
  { label: "Landlords after a move-out", note: "Left-behind furniture and trash cleared before the next tenant." },
  { label: "People helping a relative", note: "A parent downsizing, a garage overflowing, a house that needs sorting." }
];

const CLEANOUTS_FAQ = [
  {
    q: "Do you handle a whole house, not just one room?",
    a: "Yes. We clear single rooms, whole homes, garages, and full estates, whatever the job needs. Tell us the scope when you call or text and we'll bring the right crew and truck size."
  },
  {
    q: "Can you work directly with an executor, realtor, or property manager?",
    a: "Yes. We coordinate directly with executors, realtors, and property managers, including access arrangements and timing around a closing or a showing."
  },
  {
    q: "What happens to items that are still usable?",
    a: "We separate what can be recycled or donated from what has to be disposed of, and route it accordingly instead of sending everything straight to the landfill."
  },
  {
    q: "How do I get a price without you coming out first?",
    a: "Text us photos of the space, or book a free on-site walkthrough. Either way, you get one all-inclusive price before we start, no surprise add-ons."
  },
  {
    q: "How fast can a cleanout be scheduled?",
    a: "Many cleanouts are scheduled within the week, and some are same-day. Call, text a photo, or book online and we'll confirm a time that works."
  }
];

function CleanoutsFaq() {
  const [openIdx, setOpenIdx] = React.useState(null);
  return (
    <div className="item-grid">
      {CLEANOUTS_FAQ.map((f, i) => {
        const open = openIdx === i;
        return (
          <div key={f.q} className={`item-cell${open ? ' is-open' : ''}`}>
            <button
              type="button"
              className="item-toggle"
              aria-expanded={open}
              onClick={() => setOpenIdx(open ? null : i)}
            >
              <span>{f.q}</span>
              <IconCaret size={13} className={`caret-btn${open ? ' is-open' : ''}`} />
            </button>
            <div className="item-body" hidden={!open}>
              <p>{f.a}</p>
            </div>
          </div>
        );
      })}
    </div>
  );
}

function PropertyCleanoutsBody() {
  const data = getRHData();
  const category = getCategory('property-cleanouts');
  const items = ((category && category.items) || [])
    .map((s) => ({ slug: s, ...(data.items[s] || { label: s }) }))
    .filter(Boolean);

  return (
    <>
      <section className="hero-home hero-service">
        <div className="container hero-grid">
          <div>
            <div className="hero-badge"><span className="pip"></span> Whole rooms to whole homes</div>
            <h1 className="h-display h1" style={{ marginTop: 16 }}>
              Estate &amp; Property Cleanouts in Hayward &amp; the East Bay
            </h1>
            <p className="hero-sub">
              We clear single rooms, whole homes, garages, and rental units. Estates, foreclosures,
              evictions, and inherited properties all get the same deal: one all-inclusive price and a
              crew that sorts, loads, hauls, and sweeps.
            </p>
            <div className="hero-ctas">
              <Btn tel={data.phoneHref.replace('tel:', '')} variant="cta" size="lg" icon={<IconPhone size={16} />}>Call {data.phone}</Btn>
              <Btn href={data.phoneHref.replace('tel:', 'sms:')} variant="outline-light" size="lg">Text a Photo</Btn>
              <BookBtn variant="outline-light" size="lg">Book Online</BookBtn>
            </div>
            <div className="hero-trustline">
              <span><Stars n={5} size={13} /></span>
              <span><strong>5.0</strong>&nbsp;&middot;&nbsp;{YELP_STATS.count + GOOGLE_STATS.count} reviews on Yelp &amp; Google</span>
              <span><span className="pip"></span> Free on-site estimate</span>
            </div>
          </div>
          <div className="hero-visual">
            <div className="hero-photo-wrap hero-photo-service">
              <img src={imgSrc((category && category.photo) || 'svc-cleanout-1400w.jpg')} alt="A property cleanout completed by Responsive Hauling" loading="eager" />
            </div>
            <div className="hero-chip">
              <div className="num">$0</div>
              <div className="sub">estimate fee<br />no obligation</div>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHeading
            eyebrow="Who we help"
            title="Cleanouts for every kind of handoff."
            sub="Whatever brought you here, the job runs the same way: one price, one crew, done."
          />
          <div className="usp-grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
            {WHO_WE_HELP_CLEANOUTS.map((w) => (
              <div className="usp-card" key={w.label}>
                <IconChip tone="blue"><IconHome size={22} /></IconChip>
                <h3>{w.label}</h3>
                <p>{w.note}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section section-alt">
        <div className="container">
          <SectionHeading eyebrow="How it works" title="From photo to empty property, in 3 steps." />
          <StepsRow compact steps={[
            { num: '01', title: 'Text Photos or Book a Walkthrough', blurb: 'Send photos of the space, or book a free on-site walkthrough for a bigger job.' },
            { num: '02', title: 'Get One Clear Price', blurb: 'All-inclusive, before we start. No hourly rate, no surprise add-ons.' },
            { num: '03', title: 'We Sort, Load, Haul & Sweep', blurb: 'Our crew clears the space, recycles and donates what it can, and sweeps up.' }
          ]} />
        </div>
      </section>

      {items.length > 0 && (
        <section className="section">
          <div className="container">
            <SectionHeading
              eyebrow={category.label}
              title="Every cleanout type we handle."
              sub="Tap any type for the full rundown. Every one is the same deal: free estimate, all-inclusive price."
            />
            <ItemAccordionGrid items={items} category={category} phone={data.phone} />
          </div>
        </section>
      )}

      <section className="section section-alt">
        <div className="container">
          <SectionHeading eyebrow="Questions" title="Property cleanout FAQ." />
          <CleanoutsFaq />
        </div>
      </section>

      <UspStrip />
      <CtaRow />
      <CtaBand
        title="Ready to clear the property?"
        sub="Text a photo, get a price, we handle the rest."
      />
    </>
  );
}

/* ───────── Help for Hoarders ───────── */
const HOARDING_FAQ = [
  {
    q: "Will your crew be discreet?",
    a: "Yes. Our trucks and crew are respectful and low-key on the street, and we work at a pace that suits the situation. No judgment, just care for the person and the space."
  },
  {
    q: "Can you work with a family member instead of the resident?",
    a: "Yes. We regularly coordinate with an adult child, a case manager, or another family member on scheduling and scope, and we're happy to talk through the plan before the crew arrives."
  },
  {
    q: "What if the resident isn't ready for everything to go at once?",
    a: "We can work in stages, one room, one area, or one visit at a time, instead of clearing the whole property in a single pass."
  },
  {
    q: "Do you sort through items or just haul everything?",
    a: "We can sort as we go, setting aside anything you flag to keep, and remove the rest. Tell us what matters before we start."
  },
  {
    q: "How do you price a hoarding cleanup?",
    a: "The same way as any cleanout: one all-inclusive price based on volume, confirmed before we start. Text photos or book a free walkthrough for an accurate quote."
  }
];

function HoardingFaq() {
  const [openIdx, setOpenIdx] = React.useState(null);
  return (
    <div className="item-grid">
      {HOARDING_FAQ.map((f, i) => {
        const open = openIdx === i;
        return (
          <div key={f.q} className={`item-cell${open ? ' is-open' : ''}`}>
            <button
              type="button"
              className="item-toggle"
              aria-expanded={open}
              onClick={() => setOpenIdx(open ? null : i)}
            >
              <span>{f.q}</span>
              <IconCaret size={13} className={`caret-btn${open ? ' is-open' : ''}`} />
            </button>
            <div className="item-body" hidden={!open}>
              <p>{f.a}</p>
            </div>
          </div>
        );
      })}
    </div>
  );
}

function HelpForHoardersBody() {
  const data = getRHData();
  const category = getCategory('help-for-hoarders');

  return (
    <>
      <section className="hero-home hero-service">
        <div className="container hero-grid">
          <div>
            <div className="hero-badge"><span className="pip"></span> Discreet, respectful crews</div>
            <h1 className="h-display h1" style={{ marginTop: 16 }}>
              Hoarding Cleanup Help in Hayward &amp; the East Bay
            </h1>
            <p className="hero-sub">
              We clear rooms, hallways, garages, and entire properties for hoarding situations, at
              whatever pace the job needs. No judgment, just a patient crew and one clear price.
            </p>
            <div className="hero-ctas">
              <Btn tel={data.phoneHref.replace('tel:', '')} variant="cta" size="lg" icon={<IconPhone size={16} />}>Call {data.phone}</Btn>
              <Btn href={data.phoneHref.replace('tel:', 'sms:')} variant="outline-light" size="lg">Text a Photo</Btn>
              <BookBtn variant="outline-light" size="lg">Book Online</BookBtn>
            </div>
            <div className="hero-trustline">
              <span><Stars n={5} size={13} /></span>
              <span><strong>5.0</strong>&nbsp;&middot;&nbsp;{YELP_STATS.count + GOOGLE_STATS.count} reviews on Yelp &amp; Google</span>
              <span><span className="pip"></span> Free on-site estimate</span>
            </div>
          </div>
          <div className="hero-visual">
            <div className="hero-photo-wrap hero-photo-service">
              <img src={imgSrc((category && category.photo) || 'svc-hoarders-1400w.jpg')} alt="A room cleared by Responsive Hauling" loading="eager" />
            </div>
            <div className="hero-chip">
              <div className="num">$0</div>
              <div className="sub">estimate fee<br />no obligation</div>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHeading
            eyebrow="Who we help"
            title="Support for the whole situation, not just the junk."
            sub="Whether you're the resident or helping one, we work at your pace and keep it discreet."
          />
          <div className="usp-grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
            <div className="usp-card">
              <IconChip tone="blue"><IconHeart size={22} /></IconChip>
              <h3>Residents ready for help</h3>
              <p>A patient crew that clears at the pace you're comfortable with.</p>
            </div>
            <div className="usp-card">
              <IconChip tone="blue"><IconHome size={22} /></IconChip>
              <h3>Family members</h3>
              <p>Adult children and relatives coordinating a cleanup for a loved one.</p>
            </div>
            <div className="usp-card">
              <IconChip tone="blue"><IconBriefcase size={22} /></IconChip>
              <h3>Case managers & caregivers</h3>
              <p>Professionals arranging cleanup as part of a broader care plan.</p>
            </div>
            <div className="usp-card">
              <IconChip tone="blue"><IconShield size={22} /></IconChip>
              <h3>Landlords & property managers</h3>
              <p>Getting a unit safe and rentable again after a hoarding situation.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="section section-alt">
        <div className="container">
          <SectionHeading eyebrow="How it works" title="From first contact to a cleared space, in 3 steps." />
          <StepsRow compact steps={[
            { num: '01', title: 'Text Photos or Book a Walkthrough', blurb: 'Reach out privately by text, or book a free, no-pressure on-site walkthrough.' },
            { num: '02', title: 'Get One Clear Price', blurb: 'One all-inclusive price for the scope you choose, confirmed before we start.' },
            { num: '03', title: 'We Sort, Load, Haul & Sweep', blurb: 'Our crew works room by room, at your pace, and leaves the space swept clean.' }
          ]} />
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHeading
            eyebrow="Our approach"
            title="Discreet on the street. Patient in the home."
          />
          <p className="lede" style={{ maxWidth: '80ch' }}>
            We understand hoarding situations are personal. Our crew shows up on time, works
            quietly, and clears at whatever pace makes sense for the resident, one room, one visit,
            or the whole property. No judgment, no rushing, just steady progress toward a safer,
            cleaner space.
          </p>
        </div>
      </section>

      <section className="section section-alt">
        <div className="container">
          <SectionHeading eyebrow="Questions" title="Hoarding cleanup FAQ." />
          <HoardingFaq />
        </div>
      </section>

      <UspStrip />
      <CtaRow />
      <CtaBand
        title="Ready to talk it through?"
        sub="Call or text, privately, whenever you're ready."
      />
    </>
  );
}

function CategoryPageBody({ slug }) {
  if (slug === 'construction-debris-removal') return <ConstructionDebrisBody />;
  if (slug === 'property-cleanouts') return <PropertyCleanoutsBody />;
  if (slug === 'help-for-hoarders') return <HelpForHoardersBody />;

  const category = getCategory(slug);
  const data = getRHData();

  if (!category) {
    return (
      <>
        <HeroCompact eyebrow="Services" title="Service category" sub="We couldn't find details for this category just yet, give us a call and we'll help sort it out." />
        <CtaBand />
      </>
    );
  }

  // v2: the 72 standalone item routes are GONE. Each item is now an anchored section on
  // its parent category page — /coffee-maker-removal 301s to
  // /appliance-removal/#coffee-maker-removal, so the redirect lands on the actual copy
  // rather than a generic page. Anchor ids MUST stay === the old slugs (see redirects.json).
  const items = (category.items || [])
    .map((s) => ({ slug: s, ...(data.items[s] || { label: s }) }))
    .filter(Boolean);

  return (
    <>
      <HeroService category={category} />

      {items.length > 0 ? (
        <section className="section">
          <div className="container">
            <SectionHeading
              eyebrow={category.label}
              title="Everything we take."
              sub="Tap any item for the full rundown. Every one is the same deal: free estimate, all-inclusive price."
            />
            <ItemAccordionGrid items={items} category={category} phone={data.phone} />
          </div>
        </section>
      ) : (
        <section className="section">
          <div className="container">
            <SectionHeading
              eyebrow="What's included"
              title={`${category.label}, done right.`}
            />
            <p className="lede">{category.blurb}</p>
          </div>
        </section>
      )}

      <section className="section section-alt">
        <div className="container">
          <SectionHeading eyebrow="How pickup works" title="From call to clean, in 4 steps." />
          <StepsRow compact />
        </div>
      </section>

      <UspStrip />
      <CtaBand />
    </>
  );
}


/* ───────── City page ───────── */
function CityPageBody({ slug }) {
  const city = getCityPage(slug);
  const data = getRHData();

  if (!city) {
    return (
      <>
        <HeroCompact eyebrow="Service Area" title="Service area" sub="We couldn't find details for this city just yet, give us a call and we'll help sort it out." />
        <CtaBand />
      </>
    );
  }

  return (
    <>
      <section className="hero-home hero-service hero-city">
        <div className="container hero-grid">
          <div>
            <div className="hero-badge"><span className="pip"></span> Same-day pickups</div>
            <h1 className="h-display h1" style={{ marginTop: 16 }}>{city.h1}</h1>
            <p className="hero-sub">{`Fast, friendly junk removal in ${city.city}, on-time crews, all-inclusive pricing, and a broom-clean sweep every time.`}</p>
            <div className="hero-ctas">
              <BookBtn variant="cta" size="lg">Book Online</BookBtn>
              <Btn tel={data.phoneHref.replace('tel:', '')} variant="outline-light" size="lg" icon={<IconPhone size={16} />}>{data.phone}</Btn>
              <Btn href={data.phoneHref.replace('tel:', 'sms:')} variant="outline-light" size="lg">Text a Photo</Btn>
            </div>
            <div className="hero-trustline">
              <span><Stars n={5} size={13} /></span>
              <span><strong>5.0</strong>&nbsp;&middot;&nbsp;{YELP_STATS.count + GOOGLE_STATS.count} reviews on Yelp &amp; Google</span>
            </div>
          </div>
          <div className="hero-visual">
            <CityMap highlight={city.city} />
          </div>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div className="prose">
            {(city.paragraphs || []).map((p, i) => (<p key={i}>{p}</p>))}
          </div>
          {city.localNotes && (
            <p className="lede city-local-note">{city.localNotes}</p>
          )}
        </div>
      </section>
      <CategoryGrid />
      <UspStrip />
      <CtaBand
        title={`Junk removal in ${city.city}, done by tonight.`}
        sub={`Call now for a free, no-obligation estimate, serving ${city.city} and the whole Bay Area.`}
      />
    </>
  );
}

/* ───────── Accessibility statement ───────── */
function AccessibilityBody() {
  return (
    <>
      <HeroCompact eyebrow="Legal" title="Accessibility Statement" />
      <CtaRow />
      <section className="section">
        <div className="container">
          <div className="prose">
            <h2>Our commitment</h2>
            <p>Responsive Hauling is committed to ensuring digital accessibility for people of all abilities. We are continually improving the user experience for everyone and applying the relevant accessibility standards.</p>
            <h2>Conformance status</h2>
            <p>We aim to conform to the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA. These guidelines explain how to make web content more accessible for people with disabilities and more user-friendly for everyone.</p>
            <h2>Feedback</h2>
            <p>We welcome your feedback on the accessibility of this website. If you encounter any barriers, please let us know:</p>
            <ul>
              <li>Phone: {getRHData().phone}</li>
              <li>Email: {getRHData().email}</li>
            </ul>
            <h2>Technical specifications</h2>
            <p>Accessibility of this website relies on HTML, CSS, and JavaScript. These technologies are relied upon for conformance with the accessibility standards used.</p>
          </div>
        </div>
      </section>
      <CtaBand title="Questions about accessibility?" sub="Give us a call, we're happy to help." />
    </>
  );
}

/* ───────── Services hub (new in v2) ───────── */
function ServicesHubBody() {
  const data = getRHData();
  return (
    <>
      <HeroCompact
        eyebrow="Services"
        title="One crew. Everything you need gone."
        sub="Eight service lines cover just about anything we get called for, from a single mattress to a whole property. Not sure which one fits? Call and describe it; we'll sort it."
      />
      <CtaRow />
      <CategoryGrid heading={false} />
      <section className="section section-alt">
        <div className="container">
          <SectionHeading
            eyebrow="Can't see your item?"
            title="If it fits in the truck, we'll take it."
            sub="Between these eight service lines we cover more than 70 specific items. Every one of them lives on its service page, or just call and ask."
          />
          <div className="itemblock-cta">
            <Btn tel="+15102440285" variant="primary" size="lg" icon={<IconPhone />}>{data.phone}</Btn>
            <BookBtn variant="ghost" size="lg" />
          </div>
        </div>
      </section>
      <StepsBand />
      <UspStrip />
      <CtaBand />
    </>
  );
}

/* ───────── Service areas hub (new in v2) ───────── */
function AreasHubBody() {
  const data = getRHData();
  const cities = data.cities || [];
  return (
    <>
      <HeroCompact
        eyebrow="Service Areas"
        title="Based in Hayward. Working across the Bay."
        sub={`We run ${cities.length} cities out of our Hayward yard, East Bay, Peninsula, and the Tri-Valley. Free on-site estimates everywhere we go.`}
      />
      <CtaRow />
      <section className="section">
        <div className="container">
          <SectionHeading
            eyebrow="Pick your city"
            title="Find your city."
            sub="Every city page covers what we haul locally and how fast we can get to you."
          />
          <div className="area-grid">
            {cities.map((c) => (
              <a className="area-card" key={c} href={href(citySlug(c))}>
                <IconChip tone="blue"><IconPin size={18} /></IconChip>
                <h3>{c}</h3>
                <span className="area-cta">Junk removal in {c} <IconArrow /></span>
              </a>
            ))}
          </div>
        </div>
      </section>
      <StepsBand />
      <CtaBand />
    </>
  );
}

/* ───────── Online booking (new in v2) ───────── */
function BookingBody() {
  const data = getRHData();
  const b = data.booking || {};
  return (
    <>
      <HeroCompact
        eyebrow="Free Estimate"
        title={b.heading || 'Book your pickup online'}
        sub={b.sub}
      />
      <CtaRow />
      <section className="section">
        <div className="container">
          <div className="booking-wrap">
            <BookingEmbed />
            <aside className="booking-aside">
              <h3 className="h-display">Rather just talk to someone?</h3>
              <p>We answer the phone Monday through Saturday, 8 AM to 6 PM. Tell us what you've got and we'll give you a straight price.</p>
              <div className="itemblock-cta">
                <Btn tel="+15102440285" variant="primary" size="lg" icon={<IconPhone />}>{data.phone}</Btn>
              </div>
              <ul className="tick-list">
                <li><IconCheck /> Free on-site estimate</li>
                <li><IconCheck /> Upfront, all-inclusive price</li>
                <li><IconCheck /> We do all the lifting</li>
                <li><IconCheck /> Licensed &amp; insured</li>
              </ul>
            </aside>
          </div>
        </div>
      </section>
      <StepsBand />
      <UspStrip />
      <CtaBand />
    </>
  );
}

/* ───────── Privacy Policy ───────── */
function PrivacyBody() {
  const d = getRHData();
  return (
    <>
      <HeroCompact
        eyebrow="Legal"
        title="Privacy Policy"
        sub="Last updated: August 24, 2026"
      />
      <CtaRow />
      <section className="section">
        <div className="container">
          <div className="prose">
            <p>Responsive Hauling Inc. (&ldquo;Responsive Hauling,&rdquo; &ldquo;we,&rdquo; &ldquo;us,&rdquo; or &ldquo;our&rdquo;) operates responsivehauling.com and provides junk removal, hauling, and cleanout services in Hayward, California and the surrounding Bay Area. This policy explains what information we collect, why we collect it, and the choices you have.</p>

            <h2>Information we collect</h2>
            <p>We collect only what we need in order to quote and complete your job.</p>
            <ul>
              <li><strong>Information you give us.</strong> Your name, phone number, email address, service address, and a description of the items you need removed, given to us through a phone call, a text, or a booking you make through our Housecall Pro online scheduler.</li>
              <li><strong>Photos you send us.</strong> Many customers text or upload photos of their items so we can quote accurately. We use those photos to prepare your estimate and plan the job.</li>
              <li><strong>Call information.</strong> We use a call-tracking service to route and record inbound calls for quality and training. If you would prefer not to be recorded, tell us at the start of the call and we will note it.</li>
              <li><strong>Automatically collected information.</strong> When you visit our website we receive standard technical data such as IP address, browser type, device type, referring page, and the pages you view.</li>
            </ul>

            <h2>Text messages and SMS consent</h2>
            <p>If you give us your mobile number, you agree that we may contact you by text message about your quote, your appointment, and your job.</p>
            <ul>
              <li>Message and data rates may apply.</li>
              <li>Message frequency varies.</li>
              <li>Reply <strong>STOP</strong> at any time to opt out. Reply <strong>HELP</strong> for help.</li>
              <li>Carriers are not liable for delayed or undelivered messages.</li>
              <li>Consent to receive text messages is not a condition of purchasing any service from us.</li>
            </ul>
            <p><strong>We do not sell, rent, or share your mobile number or SMS consent with third parties or affiliates for their own marketing purposes.</strong></p>

            <h2>How we use your information</h2>
            <ul>
              <li>To prepare estimates and to schedule, perform, and follow up on your job.</li>
              <li>To contact you about your request by phone, text, or email.</li>
              <li>To take payment and keep business records.</li>
              <li>To understand how our website is used so we can improve it.</li>
              <li>To measure our advertising so we know which ads bring real customers.</li>
            </ul>

            <h2>Cookies and analytics</h2>
            <p>Our website uses cookies and similar technologies to remember your session and to measure traffic and advertising performance. This includes Google Analytics, Google Ads conversion measurement, and the Meta (Facebook) pixel. These tools may set their own cookies and receive information about your visit. You can block or delete cookies in your browser settings; parts of the site may not work correctly if you do.</p>

            <h2>Who we share information with</h2>
            <p><strong>We do not sell your personal information.</strong> We share it only with companies that help us run the business, and only so far as they need it to do their job:</p>
            <ul>
              <li>Our scheduling, dispatch, and payment providers.</li>
              <li>Our call-tracking and messaging providers.</li>
              <li>Our website analytics and advertising providers.</li>
              <li>Law enforcement or others when we are legally required to, or to protect our rights, our crew, or public safety.</li>
            </ul>

            <h2>How long we keep it</h2>
            <p>We keep customer and job records for as long as we need them to serve you and to meet our tax, accounting, and legal obligations. Job photos are kept for the life of the quote and job record. You can ask us to delete yours sooner.</p>

            <h2>Your California privacy rights</h2>
            <p>If you live in California, the California Consumer Privacy Act as amended gives you the right to:</p>
            <ul>
              <li>Know what personal information we have collected about you and how we use it.</li>
              <li>Request a copy of that information.</li>
              <li>Request that we correct information that is wrong.</li>
              <li>Request that we delete your information, subject to legal exceptions.</li>
              <li>Not be discriminated against for exercising any of these rights.</li>
            </ul>
            <p>We do not sell or share personal information as those terms are defined by California law. To make a request, call us at {d.phone} or email {d.email}. We may need to verify your identity before we act on your request.</p>

            <h2>Children</h2>
            <p>Our services and website are meant for adults. We do not knowingly collect personal information from anyone under 16. If you believe a child has given us information, contact us and we will delete it.</p>

            <h2>Security</h2>
            <p>We use reasonable safeguards to protect the information we hold. No method of transmission or storage is completely secure, so we cannot guarantee absolute security.</p>

            <h2>Changes to this policy</h2>
            <p>If we change this policy we will update the date at the top of this page. Material changes will be highlighted here.</p>

            <h2>Contact us</h2>
            <p>Questions about this policy, or about the information we hold on you:</p>
            <ul>
              <li>Responsive Hauling Inc., Hayward, California</li>
              <li>Phone: {d.phone}</li>
              <li>Email: {d.email}</li>
            </ul>
          </div>
        </div>
      </section>
      <CtaBand title="Questions about your privacy?" sub="Call us and talk to a person." />
    </>
  );
}

/* ───────── Terms of Service ───────── */
function TermsBody() {
  const d = getRHData();
  return (
    <>
      <HeroCompact
        eyebrow="Legal"
        title="Terms of Service"
        sub="Last updated: August 24, 2026"
      />
      <CtaRow />
      <section className="section">
        <div className="container">
          <div className="prose">
            <p>These terms apply to the services Responsive Hauling Inc. provides and to your use of responsivehauling.com. By booking a job with us or using this website, you agree to them.</p>

            <h2>Our services</h2>
            <p>We provide junk removal, furniture and appliance removal, property and estate cleanouts, curbside pickups, light demolition debris removal, and related hauling services in Hayward and the surrounding Bay Area.</p>

            <h2>Estimates and pricing</h2>
            <ul>
              <li>Estimates are free and carry no obligation.</li>
              <li>Our pricing is volume based and all inclusive, labor, loading, hauling, and disposal are included in the quoted price.</li>
              <li>A quote given over the phone, by text, or from photos is a good-faith estimate. The final price is confirmed on site once our crew can see the actual volume, weight, and access.</li>
              <li>Items that require special handling or special disposal fees may change the price. We will tell you before we load anything.</li>
              <li>You are free to decline the on-site price at no charge.</li>
            </ul>

            <h2>Scheduling, arrival windows, and cancellation</h2>
            <ul>
              <li>We aim to arrive inside a two-hour window and we will call or text if we are running late.</li>
              <li>Weather, traffic, disposal-site queues, and earlier jobs can move a window. We will keep you informed.</li>
              <li>Please give us as much notice as you can if you need to cancel or reschedule so we can offer the slot to someone else.</li>
              <li>If our crew arrives and nobody is there to grant access, or the job is materially different from what was described, we may need to reschedule.</li>
            </ul>

            <h2>Items we cannot take</h2>
            <p>By law and for our crew&rsquo;s safety we cannot remove hazardous materials. This includes, without limitation:</p>
            <ul>
              <li>Asbestos and any material suspected of containing it.</li>
              <li>Paint, solvents, oil, fuel, and other chemicals.</li>
              <li>Propane tanks, pressurized cylinders, and explosives.</li>
              <li>Medical, biological, or radioactive waste.</li>
              <li>Contaminated soil and hazardous sludge.</li>
            </ul>
            <p>If you are unsure about an item, ask us before your appointment and we will point you to the right disposal route.</p>

            <h2>Access and your property</h2>
            <ul>
              <li>You confirm you own the items, or that you are authorized to have them removed.</li>
              <li>Please make sure our crew can safely reach the items and park the truck.</li>
              <li>Once an item is loaded, removal is final. Check that nothing of value is in the pile before we start.</li>
              <li>We take care in your home, but we are not responsible for pre-existing damage, or for damage that cannot reasonably be avoided in a tight or obstructed space. Tell us about tight access in advance.</li>
              <li>Our crew sweeps the area when the job is done.</li>
            </ul>

            <h2>Disposal, donation, and recycling</h2>
            <p>We sort what we collect and send reusable goods to donation and recyclable material to recycling wherever we can. Once items are loaded they become our responsibility to dispose of lawfully, and we decide the disposal route. We cannot guarantee that any particular item will be donated rather than disposed of.</p>

            <h2>Payment</h2>
            <p>Payment is due when the job is complete unless we have agreed otherwise in writing. We accept card, cash, and check. Financing is available on qualifying jobs.</p>

            <h2>Licensing and insurance</h2>
            <p>Responsive Hauling Inc. is licensed and insured. Proof of insurance is available on request, call {d.phone}.</p>

            <h2>Limitation of liability</h2>
            <p>To the fullest extent permitted by California law, our total liability for any claim arising out of a job is limited to the amount you paid for that job. We are not liable for indirect, incidental, or consequential damages.</p>

            <h2>Website content</h2>
            <p>The text, photographs, and design on this website belong to Responsive Hauling Inc. or are used with permission. Please do not copy or reuse them without our written consent. Prices, service areas, and availability shown on this site may change without notice.</p>

            <h2>Governing law</h2>
            <p>These terms are governed by the laws of the State of California. Any dispute will be handled in the state or federal courts serving Alameda County, California.</p>

            <h2>Contact us</h2>
            <ul>
              <li>Responsive Hauling Inc., Hayward, California</li>
              <li>Phone: {d.phone}</li>
              <li>Email: {d.email}</li>
            </ul>
          </div>
        </div>
      </section>
      <CtaBand title="Ready to get it hauled?" sub="Free estimate, upfront price, no obligation." />
    </>
  );
}

Object.assign(window, {
  HomePageBody, AboutBody, HowWeWorkBody, ContactBody, CategoryPageBody,
  CityPageBody, AccessibilityBody, ServicesHubBody, AreasHubBody, BookingBody,
  PrivacyBody, TermsBody
});