/* ============ PAGE TEMPLATES ============ */

/* ---- HOME PAGE ---- */
function HomePage() {
  useDocumentHead({
    title: 'Commercial Cleaning & Janitorial Services Los Angeles & Orange County | California Janitor',
    description: 'Commercial cleaning and janitorial services across LA & OC. Office, medical, retail, school, warehouse, post-construction, day porter, night janitorial. Licensed, bonded, insured. Free quote in 2 business hours.',
    canonical: 'https://californiajanitor.com/'
  });
  return (
    <div>
      <Hero
        eyebrow="Commercial Cleaning & Facility Care · LA + Orange County"
        h1={<>Making places <span className="grad">exceptional</span>.</>}
        sub="We clean and care for the buildings where people work, shop, heal, learn, and gather — so those places feel the way they should. A team that takes real pride in the work, and one standard: every space we touch is a space you love being in."
        ctas={[
          { label: 'Get a Quote', href: '/quote', style: 'btn-primary' },
          { label: 'Call (323) 264-7800', href: 'tel:3232647800', style: 'btn-secondary' }
        ]}
        stats={HOME_STATS}
      />
      <TrustBar/>

      {/* Section 1: Philosophy */}
      <section>
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow">Our Approach</div>
              <h2 style={{marginTop: 16}}>A clean building is the floor. An <em style={{fontStyle:'italic', fontWeight:500}}>exceptional</em> one is the goal.</h2>
            </div>
            <p className="lead">
              Most janitorial work is invisible when done well and catastrophic when done poorly. We aim higher than invisible. We want your tenants to walk in and feel the care — in how the light hits a freshly-mopped floor, in restrooms that are truly fresh, in a lobby that greets the day rather than just surviving it. The work is physical. The outcome is experiential.
            </p>
          </div>

          <div className="pillars-light">
            {HOME_PILLARS.map((p, i) => (
              <div key={i} className="pillar-light">
                <h3>{p.h}</h3>
                <p>{p.p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Section 2: What We Clean (sectors) */}
      <section className="on-soft">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow">Where We Work</div>
              <h2 style={{marginTop: 16}}>Every kind of Southern California building.</h2>
            </div>
            <p className="lead">
              From Class A towers downtown to neighborhood medical suites, distribution centers in Commerce to event venues on the coast. We scale the program to the space — what it's for, how it's used, who walks through it.
            </p>
          </div>

          <div className="svc-grid">
            {HOME_SECTORS.map((s, i) => (
              <div key={i} className="svc-card svc-card-static">
                <h3>{s.t}</h3>
                <p>{s.p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Section 3: Services breadth */}
      <section>
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow">Services</div>
              <h2 style={{marginTop: 16}}>One partner, a complete program.</h2>
            </div>
            <p className="lead">
              A complete program under one roof and one account manager. Run our services as a recurring program, bring us in for a one-off project, or mix both. Everything below is available either way — no tiered packages, no nickel-and-diming.
            </p>
          </div>

          <div className="svc-grid">
            {SERVICES.slice(0, 9).map((s) => (
              <Link key={s.slug} to={`/services/${s.slug}`} className="svc-card">
                <h3>{s.cardTitle}</h3>
                <p>{s.cardBlurb}</p>
                <div className="more">Explore</div>
              </Link>
            ))}
          </div>

          <div style={{marginTop: 40, display: 'flex', justifyContent: 'center'}}>
            <Link to="/services" className="btn btn-secondary btn-lg">See All Services</Link>
          </div>
        </div>
      </section>

      {/* Section 4: Locations */}
      <section className="on-soft">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow">LA + Orange County</div>
              <h2 style={{marginTop: 16}}>Rooted in every neighborhood we serve.</h2>
            </div>
            <p className="lead">
              Headquartered in Commerce, with regional supervisors in LA and OC. Our crews run the same routes for years — they know which parking structure echoes, which lobby floor shows every streak at sunrise, which restrooms need a mid-day refresh. Local knowledge is part of the product.
            </p>
          </div>

          <div className="locs-grid">
            <div className="locs-col">
              <h3>Los Angeles County</h3>
              <div className="locs-list">
                {LOCATIONS_LA.map(l => (
                  <Link key={l.slug} to={`/locations/${l.slug}`}>
                    <span>{l.name}</span>
                  </Link>
                ))}
              </div>
            </div>
            <div className="locs-col">
              <h3>Orange County</h3>
              <div className="locs-list">
                {LOCATIONS_OC.map(l => (
                  <Link key={l.slug} to={`/locations/${l.slug}`}>
                    <span>{l.name}</span>
                  </Link>
                ))}
              </div>
            </div>
          </div>
          <div style={{marginTop: 48, display: 'flex', justifyContent: 'center'}}>
            <Link to="/quote" className="btn btn-primary btn-lg">Get a Quote for My Location</Link>
          </div>
        </div>
      </section>

      {/* Section 5: The standard */}
      <section className="on-ink">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow">The Standard</div>
              <h2 style={{marginTop: 16}}>How we think about an exceptional space.</h2>
            </div>
            <p className="lead">
              If you've ever walked into a lobby on a Monday morning and felt it — the air, the light on the floor, the quiet — that's what we're after. It's small, specific, hard-won work. Here's what goes into it.
            </p>
          </div>

          <div className="pillars">
            <div className="pillar">
              <h3>Small details, relentlessly.</h3>
              <p>The scuff under the reception desk. The fingerprint on the elevator glass. The corner of the baseboard no one else notices. We clean the whole space, but we live for the details — because that's what makes a place feel truly cared for.</p>
            </div>
            <div className="pillar">
              <h3>Same crew, same standard, every shift.</h3>
              <p>You get the same team on your building week after week. They learn your space, your people, your quirks. When one of them is out, their partner covers with the same playbook. No rotating unknowns.</p>
            </div>
            <div className="pillar">
              <h3>Years of expertise, kept current.</h3>
              <p>We know which solvent for which floor, which day of the year humidity will fight you, when to pull the extractor instead of the spot-cleaner. We also keep training — GBAC disinfection, low-VOC green chemistry, HEPA systems, new equipment.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Section 6: Pull quote */}
      <section>
        <div className="container">
          <div style={{display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80, alignItems: 'center'}}>
            <div>
              <div className="eyebrow">Largely the same clients, year after year</div>
              <h2 style={{marginTop: 16, marginBottom: 32}}>Built on longstanding relationships.</h2>
              <p className="lead" style={{marginBottom: 24}}>
                Most of the buildings we clean today are the same ones we cleaned years ago. Property managers, owners, and facility directors stay because the work stays good — and because the same crew, supervisor, and account lead show up week after week.
              </p>
              <p>Specific references happily shared with serious buildings at proposal time.</p>
            </div>
            <div>
              <div className="proof-card">
                <div className="proof-card-stat" style={{fontSize: 'clamp(40px, 5vw, 56px)', lineHeight: 1.1}}>Hundreds of buildings</div>
                <div className="proof-card-label">Cared for across LA &amp; OC</div>
                <div className="proof-card-divider"></div>
                <div className="proof-card-row">
                  <span>In business</span>
                  <strong>Over a decade</strong>
                </div>
                <div className="proof-card-row">
                  <span>Client retention</span>
                  <strong>Long-term partnerships</strong>
                </div>
                <div className="proof-card-row">
                  <span>Service area</span>
                  <strong>25+ cities</strong>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Section 7: Quote teaser */}
      <section className="on-soft">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow">Request a Quote</div>
              <h2 style={{marginTop: 16}}>A real proposal, in just a few days.</h2>
            </div>
            <p className="lead">
              Tell us about your building — the space, the use, the schedule you want, the services you want included. A real person reads it, schedules a walkthrough, and sends back a one-page proposal. Every service we offer is available on a recurring contract or as a one-off.
            </p>
          </div>
          <div style={{display: 'flex', flexWrap: 'wrap', gap: 12}}>
            <Link to="/quote" className="btn btn-accent btn-xl">Request a Quote</Link>
            <Link to="/contact?type=walkthrough" className="btn btn-secondary btn-xl">Book a Walkthrough</Link>
          </div>
          <p style={{marginTop: 32, fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--muted)', letterSpacing: '0.02em'}}>
            Every quote is custom. Cleaning varies by building, use, and schedule — a generic published price would mislead. We send you a real proposal.
          </p>
        </div>
      </section>

      {/* Section 8: FAQ */}
      <section>
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow">Good Questions</div>
              <h2 style={{marginTop: 16}}>The things people actually ask us.</h2>
            </div>
            <p className="lead">
              Every question a facilities director, risk manager, or CFO might bring to a first call — answered directly. Service- and location-specific FAQs live on those pages.
            </p>
          </div>
          <FAQBlock items={HOME_FAQ}/>
        </div>
      </section>

      <FinalCTA/>
    </div>
  );
}

/* ---- SERVICE PAGE ---- */
function ServicePage({ slug }) {
  const s = getService(slug);
  if (!s) return <NotFound/>;
  useDocumentHead({
    title: `${s.name} in Los Angeles & Orange County | California Janitor`,
    description: `${s.sub} Serving LA & OC. Licensed, bonded, insured. Free quote in 2 business hours.`,
    canonical: `https://californiajanitor.com/services/${slug}`,
    jsonLd: {
      "@context": "https://schema.org",
      "@type": "Service",
      "name": s.name,
      "description": s.sub,
      "provider": { "@type": "ProfessionalService", "name": "California Janitor", "telephone": "+1-323-264-7800" },
      "areaServed": [
        { "@type": "AdministrativeArea", "name": "Los Angeles County" },
        { "@type": "AdministrativeArea", "name": "Orange County" }
      ],
      "serviceType": s.name,
      "url": `https://californiajanitor.com/services/${slug}`
    }
  });
  return (
    <div>
      <section className="page-header no-border">
        <div className="container">
          <Breadcrumb items={[
            { label: 'Home', href: '/' },
            { label: 'Services', href: '/services' },
            { label: s.name }
          ]}/>
          <div className="label-mono" style={{marginBottom: 20}}>SERVICE</div>
          <h1>{s.h1}</h1>
          <p className="lead">{s.sub}</p>
          <div className="hero-cta-row">
            <Link to="/contact" className="btn btn-primary btn-lg">Contact Us</Link>
            <Link to="/quote" className="btn btn-secondary btn-lg">Get a Quote</Link>
            <Link to="/contact?type=walkthrough" className="btn btn-ghost btn-lg">Free Walkthrough</Link>
          </div>
          <div className="page-meta">
            <div className="item">
              <div className="k">Ideal For</div>
              <div className="v" style={{fontSize: 15, maxWidth: 720, lineHeight: 1.4}}>{s.idealFor}</div>
            </div>
          </div>
        </div>
      </section>
      <TrustBar/>

      <div className="container">
        <div className="page-body">
          <div>
            <Prose sections={s.sections}/>
            <h2 style={{fontFamily: 'var(--serif)', fontSize: 38, fontWeight: 500, letterSpacing: '-0.015em', marginTop: 64, marginBottom: 32}}>Frequently Asked</h2>
            <FAQBlock items={s.faq}/>
            <div className="related-links">
              <h4>Related Services</h4>
              <ul>
                {s.related.map(r => {
                  const rs = getService(r);
                  return rs ? <li key={r}><Link to={`/services/${r}`}>{rs.name}</Link></li> : null;
                })}
              </ul>
            </div>
          </div>
          <aside>
            <div className="sidebar-card">
              <h4>Request a quote</h4>
              <p>Tell us about your building. We'll send a real proposal back, usually within 48 hours.</p>
              <Link to="/quote" className="btn btn-accent">Get a Quote</Link>
              <ul>
                <li><a href="tel:3232647800">(323) 264-7800</a></li>
                <li><Link to="/contact?type=walkthrough">Book a free walkthrough</Link></li>
                <li><Link to="/contact">General contact form</Link></li>
              </ul>
            </div>
          </aside>
        </div>
      </div>
      <FinalCTA/>
    </div>
  );
}

/* ---- SERVICES INDEX ---- */
function ServicesIndex() {
  useDocumentHead({
    title: 'Commercial Cleaning Services in Los Angeles & Orange County | California Janitor',
    description: 'All 17 commercial cleaning and janitorial services in one place: office, medical, retail, warehouse, school, post-construction, floor care, carpet, windows, pressure washing, day porter, night janitorial, green cleaning. Serving LA & OC.',
    canonical: 'https://californiajanitor.com/services'
  });
  return (
    <div>
      <section className="page-header no-border">
        <div className="container">
          <Breadcrumb items={[{ label: 'Home', href: '/' }, { label: 'Services' }]}/>
          <div className="label-mono" style={{marginBottom: 20}}>SERVICES</div>
          <h1>Every service we offer, in one place.</h1>
          <p className="lead">From nightly office cleaning to post-construction final cleans, floor care to pressure washing. One vendor, one contract, one account manager.</p>
        </div>
      </section>
      <TrustBar/>
      <section>
        <div className="container">
          <div className="index-grid">
            {SERVICES.map((s) => (
              <Link key={s.slug} to={`/services/${s.slug}`} className="index-row">
                <div className="content">
                  <h3>{s.name}</h3>
                  <p>{s.cardBlurb}</p>
                </div>
                <div className="arrow">→</div>
              </Link>
            ))}
          </div>
        </div>
      </section>
      <FinalCTA/>
    </div>
  );
}

/* ---- LOCATION PAGE ---- */
function LocationPage({ slug }) {
  const l = getLocation(slug);
  if (!l) return <NotFound/>;
  const countyName = l.county === 'LA' ? 'Los Angeles County' : 'Orange County';
  useDocumentHead({
    title: `Commercial Cleaning & Janitorial Services in ${l.name} | California Janitor`,
    description: `Office, medical, retail, and warehouse cleaning in ${l.name}, ${countyName}. Day porter and night janitorial crews. ZIP codes: ${l.zips}. Licensed, bonded, insured. Free quote in 2 business hours.`,
    canonical: `https://californiajanitor.com/locations/${slug}`,
    jsonLd: {
      "@context": "https://schema.org",
      "@type": "LocalBusiness",
      "@id": `https://californiajanitor.com/locations/${slug}#business`,
      "name": `California Janitor — ${l.name}`,
      "description": `Commercial cleaning and janitorial services in ${l.name}, ${countyName}.`,
      "url": `https://californiajanitor.com/locations/${slug}`,
      "telephone": "+1-323-264-7800",
      "email": "info@californiajanitor.com",
      "priceRange": "$$",
      "areaServed": { "@type": "City", "name": l.name },
      "address": {
        "@type": "PostalAddress",
        "addressLocality": l.name,
        "addressRegion": "CA",
        "addressCountry": "US"
      }
    }
  });
  return (
    <div>
      <section className="page-header no-border">
        <div className="container">
          <Breadcrumb items={[
            { label: 'Home', href: '/' },
            { label: 'Locations', href: '/locations' },
            { label: l.name }
          ]}/>
          <div className="label-mono" style={{marginBottom: 20}}>{l.county === 'LA' ? 'LOS ANGELES COUNTY' : 'ORANGE COUNTY'} · {l.name.toUpperCase()}</div>
          <h1>Commercial Cleaning in {l.name}.</h1>
          <p className="lead">{l.blurb}</p>
          <div className="hero-cta-row">
            <Link to="/contact" className="btn btn-primary btn-lg">Contact Us</Link>
            <Link to="/quote" className="btn btn-secondary btn-lg">Get a Quote</Link>
            <a href="tel:3232647800" className="btn btn-ghost btn-lg">Call (323) 264-7800</a>
          </div>
          <div className="page-meta">
            <div className="item">
              <div className="k">ZIP Codes</div>
              <div className="v" style={{fontFamily: 'var(--mono)', fontSize: 14}}>{l.zips}</div>
            </div>
            <div className="item">
              <div className="k">Service Area</div>
              <div className="v">{l.county === 'LA' ? 'LA County' : 'Orange County'}</div>
            </div>
            <div className="item">
              <div className="k">Response</div>
              <div className="v">Same-day available</div>
            </div>
          </div>
        </div>
      </section>
      <TrustBar/>

      <div className="container">
        <div className="page-body">
          <div>
            <div className="prose">
              <h2>What We Know About {l.name}</h2>
              {l.body.map((p, i) => <p key={i}>{p}</p>)}

              <h2>Specialties in {l.name}</h2>
              <ul>
                {l.specialties.map((sp, i) => <li key={i}>{sp}</li>)}
              </ul>

              <h2>All Services Available in {l.name}</h2>
              <p>We deliver all 17 of our services in {l.name} — nightly janitorial, day porter, floor care, carpet cleaning, pressure washing, window cleaning, and the full specialty list.</p>
            </div>

            <div className="related-links">
              <h4>Most common in {l.name}</h4>
              <ul>
                <li><Link to="/services/commercial-office-cleaning">Office Cleaning</Link></li>
                <li><Link to="/services/night-janitorial">Night Janitorial</Link></li>
                <li><Link to="/services/day-porter-services">Day Porter</Link></li>
                <li><Link to="/services/medical-healthcare-cleaning">Medical</Link></li>
                <li><Link to="/services/floor-care-strip-wax">Floor Care</Link></li>
                <li><Link to="/services/commercial-window-cleaning">Windows</Link></li>
                <li><Link to="/services">All services</Link></li>
              </ul>
            </div>
          </div>
          <aside>
            <div className="sidebar-card">
              <h4>Service in {l.name}</h4>
              <p>Local dispatch, local supervisors, deep roots in the area.</p>
              <Link to="/quote" className="btn btn-accent">Get a Quote</Link>
              <ul>
                <li><a href="tel:3232647800">(323) 264-7800</a></li>
                <li><Link to="/contact?type=walkthrough">Free walkthrough</Link></li>
              </ul>
            </div>
          </aside>
        </div>
      </div>
      <FinalCTA/>
    </div>
  );
}

/* ---- LOCATIONS INDEX ---- */
function LocationsIndex() {
  useDocumentHead({
    title: 'Cities We Serve — Commercial Cleaning across LA & Orange County | California Janitor',
    description: 'Commercial cleaning and janitorial services across 25 cities in Los Angeles County and Orange County. Local crews, local supervisors, same-day response.',
    canonical: 'https://californiajanitor.com/locations'
  });
  return (
    <div>
      <section className="page-header no-border">
        <div className="container">
          <Breadcrumb items={[{ label: 'Home', href: '/' }, { label: 'Locations' }]}/>
          <div className="label-mono" style={{marginBottom: 20}}>LOCATIONS</div>
          <h1>Every city we serve — LA and Orange County.</h1>
          <p className="lead">Headquartered in Commerce. Crews dispatched across LA and OC with local supervisors and local response times.</p>
        </div>
      </section>
      <TrustBar/>

      <section>
        <div className="container">
          <h2 style={{marginBottom: 32, fontFamily: 'var(--serif)'}}>Los Angeles County</h2>
          <div className="index-grid">
            {LOCATIONS_LA.map((l) => (
              <Link key={l.slug} to={`/locations/${l.slug}`} className="index-row">
                <div className="content">
                  <h3>{l.name}</h3>
                  <p>{l.blurb}</p>
                </div>
                <div className="arrow">→</div>
              </Link>
            ))}
          </div>

          <h2 style={{margin: '80px 0 32px', fontFamily: 'var(--serif)'}}>Orange County</h2>
          <div className="index-grid">
            {LOCATIONS_OC.map((l) => (
              <Link key={l.slug} to={`/locations/${l.slug}`} className="index-row">
                <div className="content">
                  <h3>{l.name}</h3>
                  <p>{l.blurb}</p>
                </div>
                <div className="arrow">→</div>
              </Link>
            ))}
          </div>
        </div>
      </section>
      <FinalCTA/>
    </div>
  );
}

/* ---- ABOUT PAGE ---- */
function AboutPage() {
  useDocumentHead({
    title: 'About Us — Commercial Cleaning Company in LA & OC | California Janitor',
    description: 'Family-run commercial cleaning company serving Los Angeles and Orange County. Over a decade in business, hundreds of buildings cared for. Licensed, bonded, insured. Day porter and night janitorial crews across 25+ cities.',
    canonical: 'https://californiajanitor.com/about'
  });
  return (
    <div>
      <section className="page-header no-border">
        <div className="container">
          <Breadcrumb items={[{ label: 'Home', href: '/' }, { label: 'About' }]}/>
          <div className="label-mono" style={{marginBottom: 20}}>ABOUT</div>
          <h1>A team that <em style={{fontStyle:'italic',fontWeight:500,color:'var(--accent)'}}>quietly</em> makes Southern California a more pleasant place to work.</h1>
          <p className="lead">We care for the buildings where LA and Orange County get their work done. Offices, warehouses, medical suites, retail centers, schools, banks. The buildings don't always get the credit — but the people inside them feel the difference between a place that's merely clean and a place that's cared for.</p>
        </div>
      </section>
      <TrustBar/>
      <div className="container">
        <div className="page-body">
          <div className="prose">
            <h2>Who We Are</h2>
            <p>LA Maintenance and Janitorial Services, Inc. is a commercial cleaning and facility-care company headquartered in Commerce, California. We serve building managers, property owners, and facilities directors across Los Angeles and Orange County — from small single-tenant suites to large distribution centers.</p>
            <p>Every person on our crews is directly employed, uniformed, badged, and trained. Our supervisors are career supervisors — this is their trade, not a stop on the way to something else. Most of our management team has been with the company for years.</p>

            <h2>The Through-Line</h2>
            <p>Every agreement we sign includes the line “WE CARE ABOUT OUR CLIENTS.” It isn't marketing copy — it's the standard the business has been written around. In practice, that means:</p>
            <ul>
              <li>When you have a problem, a real person picks up — same day, often same hour.</li>
              <li>When a shift is missed, we re-perform — not explain.</li>
              <li>When your risk team asks for an insurance endorsement, we send it same day.</li>
              <li>When you want a walkthrough at 7am before the building opens, we're there.</li>
            </ul>

            <h2>Credentials and Coverage</h2>
            <ul>
              <li>General aggregate liability insurance</li>
              <li>Workers' compensation coverage (CA)</li>
              <li>Employer's Liability</li>
              <li>Employee dishonesty / crime bond</li>
              <li>Additional insured endorsements at no charge</li>
              <li>GBAC-trained technicians for infection-prevention work</li>
              <li>OSHA-10 minimum for industrial technicians</li>
              <li>Green Seal and EPA Safer Choice certified product program</li>
            </ul>

            <h2>What We Do Not Do</h2>
            <p>We're not a residential cleaner. We don't clean private homes, Airbnbs, or do one-time "move-out" residential work. We're not a licensed biohazard remediation company or a certified mold remediation vendor — but we partner with ones we trust. We stop where our license and training stops, and we say so.</p>

            <h2>How to Start</h2>
            <p>The easiest way to start is a free walkthrough. We walk your building, we understand the scope, we send a one-page proposal. No sales pressure. Most transitions start within a few days of a signed agreement.</p>
          </div>
          <aside>
            <div className="sidebar-card">
              <h4>Get in touch</h4>
              <p>Walkthrough is free. Estimate is fast. Someone real picks up.</p>
              <Link to="/contact?type=walkthrough" className="btn btn-primary">Schedule Walkthrough</Link>
              <ul>
                <li><a href="tel:3232647800">(323) 264-7800</a></li>
                <li><Link to="/quote">Request a quote</Link></li>
                <li><Link to="/contact">Contact form</Link></li>
              </ul>
            </div>
          </aside>
        </div>
      </div>
      <FinalCTA/>
    </div>
  );
}

/* ---- CONTACT PAGE ---- */
function ContactPage({ type }) {
  useDocumentHead({
    title: 'Contact California Janitor — Commercial Cleaning LA & OC',
    description: 'Get in touch for a commercial cleaning quote, free walkthrough, or general questions. Call (323) 264-7800 or email info@californiajanitor.com. Serving Los Angeles and Orange County.',
    canonical: 'https://californiajanitor.com/contact'
  });
  const [submitted, setSubmitted] = useState(false);
  return (
    <div>
      <section className="page-header no-border">
        <div className="container">
          <Breadcrumb items={[{ label: 'Home', href: '/' }, { label: 'Contact' }]}/>
          <div className="label-mono" style={{marginBottom: 20}}>{type === 'walkthrough' ? 'SCHEDULE A FREE WALKTHROUGH' : 'GENERAL CONTACT'}</div>
          <h1>{type === 'walkthrough' ? "Let's walk your building." : "Let's talk about your building."}</h1>
          <p className="lead">Fill out what you know, hit send. A real person replies within two business hours. Or skip the form and call (323) 264-7800.</p>
        </div>
      </section>
      <TrustBar/>
      <div className="container">
        <div style={{padding: '80px 0', display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 80}}>
          <div>
            {submitted ? (
              <div style={{padding: 48, background: 'var(--paper-2)', border: '1px solid var(--rule)'}}>
                <div className="eyebrow">Received</div>
                <h2 style={{marginTop: 16, fontFamily: 'var(--serif)'}}>Thanks — we'll be in touch.</h2>
                <p style={{marginTop: 16}}>Someone from the team will reply within two business hours. If it's urgent, call <a href="tel:3232647800">(323) 264-7800</a>.</p>
              </div>
            ) : (
              <form className="form" onSubmit={e => { e.preventDefault(); setSubmitted(true); }}>
                <div>
                  <label>Your name</label>
                  <input type="text" required defaultValue=""/>
                </div>
                <div>
                  <label>Company / building</label>
                  <input type="text" required defaultValue=""/>
                </div>
                <div>
                  <label>Email</label>
                  <input type="email" required defaultValue=""/>
                </div>
                <div>
                  <label>Phone</label>
                  <input type="tel" defaultValue=""/>
                </div>
                <div className="full">
                  <label>Building address</label>
                  <input type="text" defaultValue=""/>
                </div>
                <div>
                  <label>Building type</label>
                  <select defaultValue="office">
                    <option>Office</option>
                    <option>Medical / healthcare</option>
                    <option>Retail / shopping center</option>
                    <option>Warehouse / industrial</option>
                    <option>School / daycare</option>
                    <option>Bank / financial</option>
                    <option>Gym / fitness</option>
                    <option>Other</option>
                  </select>
                </div>
                <div>
                  <label>Square footage</label>
                  <input type="text" placeholder="e.g. 25,000" defaultValue=""/>
                </div>
                <div className="full">
                  <label>What do you need?</label>
                  <textarea rows={5} defaultValue={type === 'walkthrough' ? "I'd like to schedule a walkthrough. Preferred days/times: " : ""}/>
                </div>
                <div className="full">
                  <button type="submit" className="btn btn-primary btn-xl">Send to Our Team</button>
                </div>
              </form>
            )}
          </div>
          <aside>
            <div className="sidebar-card">
              <h4>Call us directly</h4>
              <p style={{marginBottom: 8}}>Someone real picks up — usually within 3 rings.</p>
              <p style={{fontFamily: 'var(--serif)', fontSize: 28, color: 'var(--ink)', marginBottom: 24}}>
                <a href="tel:3232647800" style={{textDecoration:'none', color:'var(--ink)'}}>(323) 264-7800</a>
              </p>
              <ul style={{marginTop: 0}}>
                <li style={{fontSize: 13, color: 'var(--muted)', textTransform:'uppercase', letterSpacing: '0.08em', fontWeight: 600, border: 'none', paddingTop: 16}}>Hours</li>
                <li style={{borderTop: 'none'}}>Mon-Fri · 7am - 6pm</li>
                <li>Sat · 9am - 2pm</li>
                <li>24/7 emergency line</li>
                <li style={{fontSize: 13, color: 'var(--muted)', textTransform:'uppercase', letterSpacing: '0.08em', fontWeight: 600, paddingTop: 20}}>Email</li>
                <li style={{borderTop: 'none'}}><a href="mailto:info@californiajanitor.com">info@californiajanitor.com</a></li>
                <li style={{fontSize: 13, color: 'var(--muted)', textTransform:'uppercase', letterSpacing: '0.08em', fontWeight: 600, paddingTop: 20}}>HQ</li>
                <li style={{borderTop: 'none'}}>4717 E. Washington Blvd.<br/>Commerce, CA 90040</li>
              </ul>
            </div>
          </aside>
        </div>
      </div>
      <FinalCTA title="Or just call us." sub="(323) 264-7800 — someone real picks up, Monday through Friday, 7am to 6pm."/>
    </div>
  );
}

/* ---- BLOG HUB ---- */
function BlogHub() {
  useDocumentHead({
    title: 'Resources — Commercial Cleaning Guides for LA & OC Buildings | California Janitor',
    description: 'Practical guides on commercial cleaning, janitorial vendor selection, floor care, medical-office compliance, post-construction cleanup, and more. Written for property managers and facility teams in LA & OC.',
    canonical: 'https://californiajanitor.com/blog'
  });
  return (
    <div>
      <section className="page-header no-border">
        <div className="container">
          <Breadcrumb items={[{ label: 'Home', href: '/' }, { label: 'Resources' }]}/>
          <div className="label-mono" style={{marginBottom: 20}}>RESOURCES</div>
          <h1>Field notes from years of commercial cleaning.</h1>
          <p className="lead">Pricing math, compliance primers, facility-care schedules, vendor-switch playbooks. Honest answers to the questions building managers actually ask.</p>
        </div>
      </section>
      <TrustBar/>
      <section>
        <div className="container">
          <div className="blog-grid">
            {BLOG_POSTS.map(b => (
              <Link key={b.slug} to={`/blog/${b.slug}`} className="blog-card">
                <div className="cat">{b.cat}</div>
                <h3>{b.title}</h3>
                <p>{b.excerpt}</p>
                <div style={{marginTop: 8}}><span className="link-arrow" style={{fontSize: 13}}>Read</span></div>
              </Link>
            ))}
          </div>
        </div>
      </section>
      <FinalCTA/>
    </div>
  );
}

/* ---- BLOG POST ---- */
function BlogPost({ slug }) {
  const b = getBlogPost(slug);
  if (!b) return <NotFound/>;
  useDocumentHead({
    title: `${b.title} | California Janitor`,
    description: b.excerpt,
    canonical: `https://californiajanitor.com/blog/${slug}`,
    jsonLd: {
      "@context": "https://schema.org",
      "@type": "Article",
      "headline": b.title,
      "description": b.excerpt,
      "author": { "@type": "Organization", "name": "California Janitor" },
      "publisher": { "@type": "Organization", "name": "California Janitor", "url": "https://californiajanitor.com/" },
      "url": `https://californiajanitor.com/blog/${slug}`,
      "articleSection": b.cat
    }
  });
  return (
    <div>
      <section className="page-header no-border">
        <div className="post-shell">
          <Breadcrumb items={[{ label: 'Home', href: '/' }, { label: 'Resources', href: '/blog' }, { label: b.title }]}/>
          <div className="label-mono" style={{marginBottom: 20, color: 'var(--accent)'}}>{b.cat.toUpperCase()}</div>
          <h1 style={{fontSize: 'clamp(34px, 4.5vw, 58px)'}}>{b.title}</h1>
          <p className="lead" style={{marginTop: 24}}>{b.excerpt}</p>
        </div>
      </section>

      <div className="post-body">
        <div className="prose">
          {b.body.map((block, i) => {
            if (typeof block === 'string') return <p key={i}>{block}</p>;
            if (block.h) return <h3 key={i}>{block.h}</h3>;
            if (block.list) return <ul key={i}>{block.list.map((li, k) => <li key={k}>{li}</li>)}</ul>;
            return null;
          })}
        </div>
        <div className="related-links" style={{marginTop: 64}}>
          <h4>More Resources</h4>
          <ul>
            {BLOG_POSTS.filter(p => p.slug !== b.slug).slice(0, 6).map(p => (
              <li key={p.slug}><Link to={`/blog/${p.slug}`}>{p.title}</Link></li>
            ))}
          </ul>
        </div>
      </div>
      <FinalCTA/>
    </div>
  );
}

/* ---- NOT FOUND ---- */
function NotFound() {
  return (
    <div>
      <section className="page-header no-border">
        <div className="container">
          <div className="label-mono">404</div>
          <h1 style={{marginTop: 24}}>Page not found.</h1>
          <p className="lead">That URL doesn't exist — maybe it moved, maybe it never existed. Here's where to go:</p>
          <div className="hero-cta-row">
            <Link to="/" className="btn btn-primary btn-lg">Go home</Link>
            <Link to="/services" className="btn btn-secondary btn-lg">See services</Link>
            <Link to="/contact" className="btn btn-ghost btn-lg">Contact us</Link>
          </div>
        </div>
      </section>
      <FinalCTA/>
    </div>
  );
}

Object.assign(window, {
  HomePage, ServicePage, ServicesIndex, LocationPage, LocationsIndex,
  AboutPage, ContactPage, BlogHub, BlogPost, NotFound
});
