// Hours of Service deep-dive — the federal rules every driver lives under,
// in plain English with citations to 49 CFR 395. Ships with the existing
// HOS clock calculator (see page-tools.jsx) so drivers can read the rule
// then immediately compute their position against it.
//
// Source of truth: 49 CFR 395 (current as of last review). FMCSA's own
// "Summary of Hours of Service Regulations" is the canonical plain-English
// version; this page extends it with the working scenarios drivers
// actually hit on the road.

function HosPage({ onNav }) {
  return (
    <div className="hos-page">
      <style>{`
        .hos-page { background: var(--paper); padding-bottom: 96px; min-height: 100vh; }
        .hos-hero {
          max-width: 1100px; margin: 0 auto; padding: 64px 24px 32px;
          border-bottom: 1px solid var(--rule);
        }
        .hos-back {
          display: inline-flex; align-items: center; gap: 6px;
          font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
          text-transform: uppercase; color: var(--ink-soft);
          background: transparent; border: 0; cursor: pointer;
          padding: 0 0 16px;
        }
        .hos-back:hover { color: var(--ink); }
        .hos-mark {
          font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.32em;
          text-transform: uppercase; color: var(--ink-soft); margin-bottom: 14px;
          display: inline-flex; align-items: center; gap: 10px;
        }
        .hos-mark .dot {
          display: inline-block; width: 8px; height: 8px; border-radius: 50%;
          background: oklch(0.55 0.18 145);
        }
        .hos-title {
          font-family: var(--font-serif); font-size: 56px; line-height: 1.04;
          letter-spacing: -0.028em; margin: 0 0 18px;
        }
        .hos-title em { font-style: italic; color: var(--red, oklch(0.50 0.16 250)); }
        .hos-dek {
          font-family: var(--font-serif); font-size: 20px; line-height: 1.4;
          color: var(--ink); margin: 0; max-width: 820px;
        }
        @media (max-width: 700px) {
          .hos-title { font-size: 38px; }
          .hos-dek { font-size: 17px; }
        }

        .hos-toc {
          max-width: 1100px; margin: 32px auto 0; padding: 0 24px;
          display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
          border-top: 1px solid var(--rule); padding-top: 28px;
        }
        @media (max-width: 880px) { .hos-toc { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 480px) { .hos-toc { grid-template-columns: 1fr; gap: 14px; } }
        .hos-toc-tile {
          padding: 0 24px; border-right: 1px solid var(--rule);
          display: block; text-decoration: none; color: var(--ink);
          font-family: inherit;
        }
        .hos-toc-tile:first-child { padding-left: 0; }
        .hos-toc-tile:last-child { border-right: 0; padding-right: 0; }
        .hos-toc-num {
          font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
          text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px;
        }
        .hos-toc-h {
          font-family: var(--font-serif); font-size: 17px; line-height: 1.25;
          letter-spacing: -0.005em; color: var(--ink); margin: 0;
        }

        .hos-body {
          max-width: 800px; margin: 0 auto; padding: 56px 24px 0;
        }
        .hos-section { margin-bottom: 48px; }
        .hos-section:first-child { margin-top: 0; }
        .hos-section h2 {
          font-family: var(--font-serif); font-size: 30px; letter-spacing: -0.02em;
          line-height: 1.2; margin: 0 0 6px; scroll-margin-top: 80px;
        }
        .hos-cite {
          font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
          color: var(--ink-soft); margin-bottom: 18px;
        }
        .hos-section h3 {
          font-family: var(--font-serif); font-size: 21px; letter-spacing: -0.015em;
          line-height: 1.3; margin: 28px 0 8px;
        }
        .hos-section p {
          font-size: 16px; line-height: 1.7; color: var(--ink); margin: 0 0 14px;
        }
        .hos-section ul { padding-left: 22px; margin: 0 0 14px; }
        .hos-section li { font-size: 16px; line-height: 1.65; margin-bottom: 6px; }
        .hos-section strong { font-weight: 600; }

        .hos-rule {
          background: var(--paper-2); border: 1px solid var(--rule);
          border-left: 4px solid var(--ink); border-radius: 6px;
          padding: 18px 22px; margin: 18px 0 22px;
        }
        .hos-rule-l {
          font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
          text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px;
        }
        .hos-rule-h {
          font-family: var(--font-serif); font-size: 19px; letter-spacing: -0.01em;
          margin: 0 0 6px;
        }
        .hos-rule-p {
          font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0;
        }

        .hos-callout {
          background: oklch(0.96 0.04 145); border: 1px solid oklch(0.85 0.08 145);
          border-radius: 6px; padding: 18px 22px; margin: 22px 0;
        }
        .hos-callout strong { color: oklch(0.40 0.14 145); }

        .hos-warn {
          background: oklch(0.96 0.05 25); border: 1px solid oklch(0.85 0.10 25);
          border-radius: 6px; padding: 18px 22px; margin: 22px 0;
        }
        .hos-warn strong { color: oklch(0.40 0.18 25); }

        .hos-cta {
          margin-top: 56px; padding: 32px;
          background: var(--paper-2); border: 1px solid var(--rule); border-radius: 8px;
          text-align: center;
        }
        .hos-cta h3 {
          font-family: var(--font-serif); font-size: 24px; letter-spacing: -0.015em;
          margin: 0 0 8px;
        }
        .hos-cta p { color: var(--ink-soft); margin: 0 0 18px; }
        .hos-cta-btn {
          font-family: inherit; font-size: 14px; padding: 12px 22px;
          border-radius: 6px; cursor: pointer; border: 1px solid var(--ink);
          background: var(--ink); color: #fff; font-weight: 600;
          letter-spacing: 0.02em;
        }
        .hos-cta-btn:hover { opacity: 0.9; }

        .hos-table {
          width: 100%; border-collapse: collapse; margin: 14px 0 22px;
          font-size: 14px;
        }
        .hos-table th, .hos-table td {
          text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule);
          vertical-align: top;
        }
        .hos-table th {
          font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
          text-transform: uppercase; color: var(--ink-soft); font-weight: 600;
        }
        .hos-table td:first-child { font-weight: 600; white-space: nowrap; }

        .hos-foot {
          max-width: 800px; margin: 64px auto 0; padding: 28px 24px 0;
          border-top: 1px solid var(--rule);
          font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
          color: var(--ink-soft); line-height: 1.7;
        }
      `}</style>

      <section className="hos-hero">
        <button className="hos-back" onClick={() => onNav("drivers")}>← Back to The Yard</button>
        <div className="hos-mark"><span className="dot" /> Hours of service</div>
        <h1 className="hos-title">The federal HOS rules, in <em>plain English</em>.</h1>
        <p className="hos-dek">
          Every limit a property-carrying driver lives under, with the citation
          to 49 CFR 395 if you need it on the side of the road. Six rules, five
          exceptions, the math the calculator runs against. Bookmark it.
        </p>
      </section>

      <nav className="hos-toc">
        <a className="hos-toc-tile" href="#hos-core">
          <div className="hos-toc-num">01</div>
          <div className="hos-toc-h">The six rules</div>
        </a>
        <a className="hos-toc-tile" href="#hos-sleeper">
          <div className="hos-toc-num">02</div>
          <div className="hos-toc-h">Sleeper berth + splits</div>
        </a>
        <a className="hos-toc-tile" href="#hos-exceptions">
          <div className="hos-toc-num">03</div>
          <div className="hos-toc-h">Exceptions & extras</div>
        </a>
        <a className="hos-toc-tile" href="#hos-questions">
          <div className="hos-toc-num">04</div>
          <div className="hos-toc-h">Questions drivers ask</div>
        </a>
      </nav>

      <div className="hos-body">

        {/* ============ THE SIX RULES ============ */}
        <section className="hos-section" id="hos-core">
          <h2>The six rules every property-carrying driver runs under.</h2>
          <div className="hos-cite">49 CFR 395.3 · property-carrying CMV</div>
          <p>
            Property-carrying = trucks, not buses. The rules are different for
            passenger carriers; this page covers freight only. If you're driving
            anything that crosses a state line and weighs over 10,001 lbs, these
            apply to you.
          </p>

          <div className="hos-rule">
            <div className="hos-rule-l">Rule 1 · 49 CFR 395.3(a)(3)</div>
            <h4 className="hos-rule-h">11-hour driving limit</h4>
            <p className="hos-rule-p">
              You may drive a maximum of <strong>11 hours</strong> after 10
              consecutive hours off duty. Once you hit 11 hours of driving, you
              cannot drive again until you take another 10 off.
            </p>
          </div>

          <div className="hos-rule">
            <div className="hos-rule-l">Rule 2 · 49 CFR 395.3(a)(2)</div>
            <h4 className="hos-rule-h">14-hour duty window</h4>
            <p className="hos-rule-p">
              You may not drive beyond the <strong>14th consecutive hour</strong> after
              coming on duty, following 10 off. This window does not pause for
              breaks, fueling, or paperwork — once it starts, it runs. (The
              sleeper-berth split below is the one exception.)
            </p>
          </div>

          <div className="hos-rule">
            <div className="hos-rule-l">Rule 3 · 49 CFR 395.3(a)(3)(ii)</div>
            <h4 className="hos-rule-h">30-minute break</h4>
            <p className="hos-rule-p">
              After 8 cumulative hours of driving without an interruption of
              at least 30 minutes, you must take a 30-minute non-driving break.
              The break can be off-duty, sleeper-berth, or on-duty-not-driving
              — anything that isn't the wheel turning.
            </p>
          </div>

          <div className="hos-rule">
            <div className="hos-rule-l">Rule 4 · 49 CFR 395.3(a)(1)</div>
            <h4 className="hos-rule-h">10 hours off duty</h4>
            <p className="hos-rule-p">
              You must be off duty (or in a sleeper berth, or a qualifying split)
              for <strong>10 consecutive hours</strong> before starting a new shift.
              Anything less and your 11/14 don't reset.
            </p>
          </div>

          <div className="hos-rule">
            <div className="hos-rule-l">Rule 5 · 49 CFR 395.3(b)</div>
            <h4 className="hos-rule-h">60/7 or 70/8 — the rolling weekly cap</h4>
            <p className="hos-rule-p">
              Your carrier picks one: <strong>60 hours in any 7 consecutive days</strong> (if
              the carrier doesn't operate every day of the week) or
              <strong> 70 hours in any 8 consecutive days</strong> (if it does). It's a
              rolling window — drop off the back as you add to the front.
            </p>
          </div>

          <div className="hos-rule">
            <div className="hos-rule-l">Rule 6 · 49 CFR 395.3(c)</div>
            <h4 className="hos-rule-h">34-hour restart (optional)</h4>
            <p className="hos-rule-p">
              Take <strong>34 consecutive hours off duty</strong> and your 60/7 or 70/8
              clock resets to zero. There's no required overnight period in the
              current rule (the 1–5 am provision was suspended). You can take
              this whenever you want; you don't have to.
            </p>
          </div>
        </section>

        {/* ============ SLEEPER BERTH ============ */}
        <section className="hos-section" id="hos-sleeper">
          <h2>Sleeper berth — splitting the 10.</h2>
          <div className="hos-cite">49 CFR 395.1(g)</div>
          <p>
            The 10 hours off doesn't have to be 10 consecutive hours in your
            bunk. You can split it two ways. The split is the only legal way to
            pause the 14-hour clock.
          </p>

          <h3>The 8/2 split</h3>
          <p>
            <strong>8 consecutive hours in the sleeper berth</strong>, plus a
            separate <strong>2 consecutive hours</strong> in any combination of
            sleeper, off-duty, or both. Order doesn't matter — 2-then-8 or
            8-then-2 both qualify. The 14-hour window pauses during whichever
            qualifying period you took.
          </p>

          <h3>The 7/3 split</h3>
          <p>
            <strong>7 consecutive hours in the sleeper berth</strong>, plus a
            separate <strong>3 consecutive hours</strong> in sleeper or off-duty
            (or combination). Same flexibility on order, same 14-hour pause
            during either qualifying period.
          </p>

          <div className="hos-callout">
            <strong>Practical effect:</strong> Split sleeper buys you back
            window time when a long detention or a load you're unloading
            yourself eats your 14. The 2 or 3 hours you spend in the sleeper
            doesn't count against the 14. That can be the difference between
            making delivery legally and parking three hours short.
          </div>
        </section>

        {/* ============ EXCEPTIONS ============ */}
        <section className="hos-section" id="hos-exceptions">
          <h2>Exceptions and extras the rules build in.</h2>

          <h3>Adverse driving conditions</h3>
          <div className="hos-cite">49 CFR 395.1(b)(1)</div>
          <p>
            Snow, fog, an unexpected closure — conditions a reasonably prudent
            driver couldn't have known about when starting the run. You may
            extend the <strong>11-hour driving limit by up to 2 hours</strong> AND
            extend the <strong>14-hour window by up to 2 hours</strong> to complete
            the trip. You must document the condition. This is not "I left
            late and traffic was bad" — it has to be unforeseeable.
          </p>

          <h3>Short-haul exception (150 air-mile)</h3>
          <div className="hos-cite">49 CFR 395.1(e)(1)</div>
          <p>
            If you operate within a <strong>150 air-mile radius</strong> of your
            normal work-reporting location, return there each day, and don't
            drive more than 14 hours, you're exempt from the ELD requirement
            (though the 11/14/60-or-70 limits still apply). Your time records
            can be a paper time card.
          </p>

          <h3>Non-CDL short-haul (150 air-mile)</h3>
          <div className="hos-cite">49 CFR 395.1(e)(2)</div>
          <p>
            If a CDL isn't required for the truck (lighter weight, certain
            categories), the short-haul exception loosens further. Mostly
            relevant to light-duty straight trucks. If you're in a Class 8
            tractor, this doesn't apply to you.
          </p>

          <h3>Personal conveyance</h3>
          <div className="hos-cite">FMCSA guidance under 49 CFR 390.5T</div>
          <p>
            You can use the truck for genuinely personal travel and log it as
            <strong> off-duty</strong> — going to a restaurant from the truck stop,
            home from the terminal at end-of-day, to a motel for sleep when
            the carrier doesn't have lodging. PC time doesn't count against
            your 11 or 14.
          </p>
          <div className="hos-warn">
            <strong>Don't abuse this.</strong> PC has to be genuinely personal,
            with the truck unloaded or empty (carrying a load = on-duty,
            period), no advancement of the load, and you have to be relieved
            of all duty. DOT will pull ELD logs and review PC patterns. The
            "I drove 200 miles closer to the next pickup on PC" pattern is
            a violation and will hit your CSA score.
          </div>

          <h3>Yard moves</h3>
          <div className="hos-cite">49 CFR 395.8(c)(2)</div>
          <p>
            Moving the truck within a properly designated yard counts as
            <strong> on-duty-not-driving</strong>, not driving. That keeps the move
            off your 11-hour clock. Most ELDs have a yard-move toggle for
            this.
          </p>

          <h3>The 16-hour exception (short-haul only)</h3>
          <div className="hos-cite">49 CFR 395.1(o)</div>
          <p>
            Once every 7 consecutive days, a short-haul property-carrying
            driver can extend the 14-hour window to 16 hours, provided they
            return to their work-reporting location, have 5 consecutive
            previous days of operating under the short-haul rule, and haven't
            used the exception in the previous 6 days. <strong>You still cannot
            drive more than 11 hours</strong> within that 16-hour window.
          </p>
        </section>

        {/* ============ DRIVER QUESTIONS ============ */}
        <section className="hos-section" id="hos-questions">
          <h2>The questions drivers actually ask.</h2>

          <h3>"Does my 30-minute break stop the 14-hour clock?"</h3>
          <p>
            <strong>No.</strong> The 14-hour duty window keeps running through
            the 30-minute break. Only a qualifying sleeper-berth split (8/2
            or 7/3) pauses the 14.
          </p>

          <h3>"Can I drive after my 11 hours if I'm 5 minutes from delivery?"</h3>
          <p>
            <strong>No.</strong> The 11-hour limit is hard. The only legal
            extensions are the adverse driving conditions exception (which
            requires unforeseeable conditions) or stopping and taking 10 off.
            Driving past 11 is a citable violation; "I was almost there" is
            not a defense.
          </p>

          <h3>"What if my dispatcher tells me to drive past my hours?"</h3>
          <p>
            <strong>49 CFR 392.3 (Coercion Rule)</strong> makes it illegal for
            a carrier or shipper or broker to coerce a driver to violate HOS.
            Coercion includes implying job loss, withholding loads, or any
            other adverse action for refusing to drive over hours. Document
            it. Drivers can file a complaint with FMCSA at 1-888-DOT-SAFT
            or online — the rule is enforceable, with penalties up to
            $16,000 per violation against the carrier.
          </p>

          <h3>"Can I run with my paper logs after a malfunctioning ELD?"</h3>
          <p>
            <strong>Yes, for up to 8 days</strong> from the date the malfunction
            occurred. You must note the malfunction on your paper log,
            notify the carrier within 24 hours, and the carrier has 8 days
            to repair or replace. After day 8 without resolution, you can't
            keep operating that truck. (49 CFR 395.34)
          </p>

          <h3>"How does detention time count?"</h3>
          <p>
            <strong>Detention is on-duty-not-driving.</strong> It counts against
            the 14-hour window and the weekly 60/7 or 70/8, but not against
            the 11-hour driving limit. This is why long detention is so
            destructive — you burn the 14 sitting still while not getting
            any closer to delivery.
          </p>

          <h3>"What about restart — do I need overnight hours?"</h3>
          <p>
            <strong>Not currently.</strong> The 1-5 am overnight requirement
            was suspended; the simple 34 consecutive hours off resets your
            60/7 or 70/8. You can take it any time of day.
          </p>

          <h3>"Does PC count against my 14-hour window?"</h3>
          <p>
            <strong>No.</strong> Personal conveyance is logged off-duty,
            which means it doesn't burn the 14. But you have to be genuinely
            off-duty, the truck has to be either empty or in a non-load-
            advancing situation, and the FMCSA's PC guidance has to be met.
            Mark it correctly or the auditor will see exactly what you did.
          </p>
        </section>

        <div className="hos-cta">
          <h3>Run your own numbers.</h3>
          <p>The HOS clock calculator tells you what's left, given what you've already used today and this week.</p>
          <button className="hos-cta-btn" onClick={() => { window.location.hash = "#/tools"; }}>
            Open HOS clock →
          </button>
        </div>
      </div>

      <footer className="hos-foot">
        Plain-English summary of 49 CFR Part 395 (current as of last review).
        FMCSA's official guidance is the controlling document — when in doubt,
        check fmcsa.dot.gov/regulations/hours-of-service. This page is not
        legal advice; if your operation has unusual fact patterns, talk to a
        DOT compliance attorney. The HOS calculator on this site is an
        estimator; your ELD is the legal record.
      </footer>
    </div>
  );
}

window.HosPage = HosPage;
