#!/usr/bin/env python3
# ---------------------------------------------------------------------------
# 1:1 HTML replica of the live inner-service page
#   https://www.leaguelaw.com/our-services/bc-injury-claims/car-accident-claims/
# Every number below was measured off the live page with headless Chrome at a
# 1440px viewport (getBoundingClientRect + getComputedStyle), not estimated.
# Images are served from THIS build's own /wp-content/uploads/ (no hotlinking).
# ---------------------------------------------------------------------------
import io, os, sys

OUT = "/srv/apps/leaguelaw/wp-content/prototype/inner-service.html"

TEL_HREF   = "tel:2508880002"
UP         = "/wp-content/uploads"

# --- the injury-claims sidebar menu, in live order -------------------------
INJURY = [
    ("Car Accident Claims",        "/our-services/bc-injury-claims/car-accident-claims/", True),
    ("Motorcycle Accident Claims", "/our-services/bc-injury-claims/motorcycle-accident-claims/", False),
    ("Cyclist Accident Claims",    "/our-services/bc-injury-claims/cyclist-accident-claims/", False),
    ("Passenger Injury Claims",    "/our-services/bc-injury-claims/passenger-injury-claims/", False),
    ("Pedestrian Injury Claims",   "/our-services/bc-injury-claims/pedestrian-injury-claims/", False),
    ("Hit and Run Injury Claims",  "/our-services/bc-injury-claims/hit-and-run-injury-claims/", False),
    ("Slip and Fall",              "/our-services/bc-injury-claims/slip-and-fall/", False),
    ("Premises Liability Claims",  "/our-services/bc-injury-claims/premises-liability-claims/", False),
    ("School Accident Claims",     "/our-services/bc-injury-claims/school-accident-claims/", False),
    ("Product Liability",          "/our-services/bc-injury-claims/product-liability/", False),
    ("Dog Attack",                 "/our-services/bc-injury-claims/dog-attack/", False),
    ("Boat Accidents",             "/our-services/bc-injury-claims/boat-accident-injuries/", False),
    ("Assault &amp; Battery",      "/our-services/bc-injury-claims/assault-battery/", False),
]

SOCIALS = [
    ("fa-facebook",     "https://www.facebook.com/leaguelaw/"),
    ("fa-twitter",      "https://twitter.com/law_in_victoria"),
    ("fa-linkedin",     "https://www.linkedin.com/company/league-and-williams-law-corporation"),
    ("fa-youtube-play", "https://www.youtube.com/channel/UCwrwHBHYoBeOoZtIgmn2PIQ"),
]

# ---------------------------------------------------------------------------
CSS = r"""
/* ===========================================================================
   HTML replica of the live inner-service page (Car Accident Claims).
   Measured off www.leaguelaw.com at a 1440px viewport, 2026-08-27.
   Container 1280 · content 832 (65%) · gutter 64 (5%) · sidebar 384 (30%).
   Static: the two forms do not submit.
   ======================================================================== */
:root{
  --orange:#EF6D3E;      /* brand orange (icons, form chrome, page-header tint) */
  --orange-cta:#EF6136;  /* the contact strip's own, slightly redder orange     */
  --teal:#46ADC8;        /* accent: links, hexagons, buttons, current nav item  */
  --brown:#423C37;       /* contact strip right half                            */
  --grey-bar:#f3f3f3;    /* top bar + header band                               */
  --body:#3f3f3f;        /* article text                                        */
  --muted:#666;          /* theme default text                                  */
  --footer:#222;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Open Sans","Helvetica Neue",Arial,sans-serif;font-size:14px;line-height:23.1px;
     color:var(--muted);background:#fff;min-width:1380px;-webkit-font-smoothing:antialiased}
img{display:block}
a{text-decoration:none;color:inherit}
.container{width:1280px;margin:0 auto}

/* ---------- 1 · top bar (52px) ------------------------------------------ */
.topbar{background:var(--grey-bar);height:52px}
.topbar .container{padding-top:15px;text-align:right}
.topbar .cn{font-size:22px;line-height:36.3px;font-weight:600;color:var(--teal)}
.topbar .tel{font-size:22px;line-height:36.3px;font-weight:600;color:var(--orange);margin-left:18px}
.topbar .tel .fa{font-size:20px;margin-right:4px}

/* ---------- 2 · header band (43px) -------------------------------------- */
.hdr{background:var(--grey-bar);height:43px}
.hdr .container{position:relative;height:43px;display:flex;align-items:center;justify-content:flex-end}
/* the logo is pulled up out of the band (live: margin-top:-50px) so it sits
   across the top bar and the header band together */
.hdr .logo{position:absolute;left:0;top:-37px}
.hdr .logo img{width:400px;height:69px}
.mainnav{display:flex;height:50px;margin-right:-15px}
.mainnav a{display:block;padding:0 4px;line-height:50px;color:#555}
.mainnav .li{display:inline-block;font-family:Raleway,"Helvetica Neue",Arial,sans-serif;font-size:14px;
             font-weight:600;text-transform:uppercase;line-height:14px;padding:7px 11px}
.mainnav .fa{font-size:12px;margin-left:5px}

/* ---------- 3 · page header (252px) ------------------------------------- */
.phead{position:relative;height:252px;padding:100px 0;margin-bottom:40px;
       background:#f7f7f7 url('/wp-content/uploads/truck-2677373_960_720.jpg') 50% 50%/cover no-repeat}
.phead:before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.3)}
.phead .container{position:relative;height:50px}
.phead h1{font-family:Raleway,"Helvetica Neue",Arial,sans-serif;font-size:36px;line-height:50.4px;
          font-weight:600;color:#fff}
.crumbs{position:absolute;right:0;top:10px;font-size:12.6px;line-height:32px;color:#fff}
.crumbs a{color:#fff}
.crumbs .sep{margin:0 3px}

/* ---------- 4 · content + sidebar --------------------------------------- */
.cwrap{display:flex}
.primary{width:832px;padding-bottom:40px}
.sidebar{width:384px;margin-left:64px}

/* ---------- 5 · article ------------------------------------------------- */
.entry{font-size:17px;line-height:28px;color:var(--body)}
.entry a{color:var(--teal)}
.entry p{margin-bottom:20px}
.lead{padding:10px 0 40px}
.lead .tc{position:relative;padding-left:70px}
.lead .hex{position:absolute;left:0;top:0;width:50px;height:65px;background:var(--teal);
           clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
           display:flex;align-items:center;justify-content:center}
.lead .hex .fa{font-size:30px;color:#fff;margin-left:3px}
.lead h2{font-family:Raleway,"Helvetica Neue",Arial,sans-serif;font-size:26px;line-height:39px;
         font-weight:700;color:#000;margin-bottom:10px}
.lead .fa-phone{color:var(--body);margin:0 4px}
figure.alignright{float:right;width:256px;margin:8.5px 0 8.5px 17px}
figure.alignright img{width:256px;height:192px}
figure.alignright figcaption{font-size:12px;line-height:13px;color:#a9a9a9;text-align:center;
                             margin:6px 0 12px}
.entry ul{margin:0 0 20px 30px}
.entry ul li{margin:0}

/* ---------- 6 · sidebar: navigation widget ------------------------------ */
.wtitle{font-family:Raleway,"Helvetica Neue",Arial,sans-serif;font-size:20px;line-height:30px;
        font-weight:700;text-transform:uppercase;color:gray;border-bottom:1px solid lightgray;
        margin:20px 0}
.snav{list-style:none}
.snav>li{position:relative}
.snav>li>a{display:block;font-weight:700;color:#777;padding:7.532px 30px 7.532px 10.766px}
.snav .chev{position:absolute;right:0;top:0;width:40px;height:38px;color:#666;font-size:14px;
            transform:rotate(90deg)}
.snav .chev .fa{position:relative;top:12px;left:15px}
.snav .sub{list-style:none}
.snav .sub a{display:block;height:38.164px;color:#777;padding:7.532px 10.766px 7.532px 20px}
.snav .sub a:before{font-family:FontAwesome;content:"\f138";margin-right:10px}
.snav .sub li.current a{background:var(--teal);color:#fff}

/* ---------- 7 · sidebar + footer forms (shared chrome) ------------------ */
.fcard{background:#fff}
.legend{font-size:14px;line-height:23.1px;color:var(--muted)}
.legend em{color:#c02b0a;font-style:normal}
.gf{position:relative;margin-bottom:16px;border:1px solid var(--orange)}
.gf .fa{position:absolute;top:8px;left:13px;color:#fff;font-size:18px;z-index:2}
.gf.email .fa,.gf.msg .fa{left:11px}
.gf:before{content:"";position:absolute;top:0;left:0;width:40px;height:100%;background:var(--orange)}
.gf input,.gf textarea{width:100%;height:43px;border:1px solid #e1e1e1;background:#fff;
  font-family:"Open Sans","Helvetica Neue",Arial,sans-serif;font-size:15px;line-height:24.75px;
  color:var(--muted);padding:8px 8px 8px 50px;outline:none;display:block}
.gf input::placeholder,.gf textarea::placeholder{color:var(--muted)}
.gf textarea{resize:vertical}
.safe{font-size:11px;line-height:18.15px;color:var(--muted)}
.safe .fa{margin-right:4px}
.sendbtn{background:var(--teal);color:#fff;border:0;width:150px;height:41px;
  font-family:"Open Sans","Helvetica Neue",Arial,sans-serif;font-size:15px;line-height:41px;
  padding:0 15px;text-align:center;cursor:pointer}

/* sidebar form specifics */
.sform{margin-top:43px}
.sform .fhead{background:var(--orange);padding:20px 30px;text-align:center;color:#fff}
/* the live logo is an inline image: 7px of baseline leading sits under it,
   which is why the orange header is 131px and not 124px */
.sform .fhead img{display:inline-block;width:272px;height:41px;margin:0 0 27px}
.sform .fhead p{font-size:14px;line-height:23.1px}
.sform .body{padding-top:16px}
.sform .gf.msg textarea{height:288px}
.sform .foot{padding:0 30px 20px;margin-top:6px}
.sform .foot .sendbtn{margin-bottom:8px}
.sform .safe{padding:0 30px}

/* ---------- 8 · contact strip (full-bleed, 128px) ----------------------- */
.cstrip{display:flex;height:128px}
.cstrip div{width:50%;padding:30px 20px;text-align:center}
.cstrip .ph{background:var(--orange-cta)}
.cstrip .em{background:var(--brown)}
.cstrip h2{font-family:Raleway,"Helvetica Neue",Arial,sans-serif;font-size:32px;line-height:48px;
           font-weight:600;color:#fff;margin:10px 0}
.cstrip h2 .fa{margin-right:10px}

/* ---------- 9 · get in touch -------------------------------------------- */
.git{padding-top:50px;display:flow-root}
.git .half{width:700px;margin:0 auto;text-align:center}
.git .hex{width:95px;height:110px;margin:0 auto;background:var(--teal);
          clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
          display:flex;align-items:center;justify-content:center}
.git .hex .fa{font-size:50px;color:#fff}
.git h2{font-family:Raleway,"Helvetica Neue",Arial,sans-serif;font-size:32px;line-height:48px;
        font-weight:600;color:#555;margin:20px 0 10px}
.git p{font-size:14px;line-height:23.1px;color:var(--muted);margin-bottom:20px}

/* ---------- 10 · socials ------------------------------------------------ */
.socials{padding:20px 0;margin-bottom:20px;text-align:center;font-size:0;line-height:53px}
.socials a{display:inline-block;vertical-align:top;width:40px;height:46px;margin:0 5px;background:var(--orange);
           clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
           position:relative}
.socials a .fa{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
               color:#fff;font-size:14px}

/* ---------- 11 · footer form + map -------------------------------------- */
.ftgrid{display:flex}
.ftform{width:501px;background:#fff;border-top:15px solid var(--orange);
        box-shadow:0 0 15px 0 rgba(0,0,0,.5);padding:10px 30px 43px}
.ftform h5{font-family:Raleway,"Helvetica Neue",Arial,sans-serif;font-size:20px;line-height:30px;
           font-weight:600;color:#5b5754}
.ftform h6{font-family:Raleway,"Helvetica Neue",Arial,sans-serif;font-size:14px;line-height:21px;
           font-weight:600;color:#5b5754;margin-bottom:17px}
.ftform .gf.msg textarea{height:192px}
/* live: the button overlaps the "kept safe" line — reproduced, not corrected */
.ftform .foot{padding:16px 0;margin-top:6px;height:32px}
.ftform .sendbtn{position:relative;top:-50px}
.ftmap{width:751px;height:500px;margin-left:28px;border:0}
.spacer{height:61px}

/* ---------- 12 · footer bottom (125px) ---------------------------------- */
.fbottom{background:var(--footer);color:#999;text-align:center;padding:20px 0;
         font-size:12.922px;line-height:21.3213px}
.fbottom a{color:#bbb}

"""

# ---------------------------------------------------------------------------
def head():
    return """<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow">
<title>League Law &mdash; Inner Service Replica (live as-is)</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- the live site loads the v1 CSS API; css2 serves the 2021 variable Open Sans,
     which is ~5% wider and re-wraps every paragraph. Do not "modernise" this. -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700|Raleway:300,400,500,600,700&subset=latin" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>__CSS__</style>
</head>
<body>
""".replace("__CSS__", CSS)


def header():
    nav = [("What We Do", True), ("Your Team", True), ("Blogs", False), ("Careers", False)]
    items = "".join(
        '<a href="#"><span class="li">%s%s</span></a>'
        % (t, '<i class="fa fa-angle-down"></i>' if c else '')
        for t, c in nav)
    return """
<!-- 1 · top bar -->
<div class="topbar">
  <div class="container">
    <span class="cn">Call Now</span><a class="tel" href="{tel}"><i class="fa fa-phone"></i>250-888-0002</a>
  </div>
</div>

<!-- 2 · header -->
<header class="hdr">
  <div class="container">
    <a class="logo" href="/"><img src="{up}/logo.png" alt="League and Williams Lawyers"></a>
    <nav class="mainnav">{items}</nav>
  </div>
</header>
""".format(tel=TEL_HREF, up=UP, items=items)


def page_header():
    return """
<!-- 3 · page header -->
<header class="phead">
  <div class="container">
    <h1>Car Accident Claims</h1>
    <nav class="crumbs"><a href="/"><i class="fa fa-home"></i></a><span class="sep">&raquo;</span><a href="/our-services/">What We Do</a><span class="sep">&raquo;</span><a href="/our-services/bc-injury-claims/">Injury Claims</a><span class="sep">&raquo;</span>Car Accident Claims</nav>
  </div>
</header>
"""


ARTICLE = u"""<div class="lead"><div class="tc"><span class="hex"><i class="fa fa-car"></i></span><h2>League &#038; Williams are Experienced Car Accident Injury Claims Lawyers</h2><p>Our team of lawyers are experienced in car accident injury claims &#038; work to ensure that injured victims recover their fullest potential. Free consultations.</p>
<p><strong>Contact us today for a consultation</strong> <i class="fa fa-phone"></i> <a href="tel:2508880002"><strong>(250) 888-0002</strong></a></p>
</div></div>


<p>Being involved in a car accident can be scary and often those injured in motor vehicle accidents are unaware of how to ensure the best recovery possible.&nbsp; Those injured in car accidents in British Columbia, whether as a driver, passenger, pedestrian or cyclist are entitled to pursue compensation for their injuries.&nbsp; Car accident victims who are injured may claim for pain and suffering, out-of-pocket expenses, loss of housekeeping capacity, loss of income and diminished earning capacity, and for cost of future care.&nbsp; The kind of compensation available and the amounts will depend on the extent of the injuries, the impact they have had on the victim’s life, and whether or not the victim was partly at fault for their injuries.</p>



<p>Typically those involved in car&nbsp;accidents in British Columbia may make two types of claims – a Tort claim and a Part 7 claim.</p>



<p>A Tort claim is available for those who are injured and who can prove that another person was, at least partly, at fault or responsible for causing the accident.&nbsp; The person must also establish that they suffered damages, and that those damages were the result of the accident.&nbsp; It is important to note that in order to make a tort claim, that claim must also be filed within 2 years of the date of the accident (this is the limitation date).&nbsp; If a person cannot prove that their injuries were caused by the accident, then the injured person is limited in their tort claim to the damages that they can prove were the result of the accident. &nbsp;If a person cannot prove that another person is at least partly at fault, then their claims for their injuries will be limited to a Part 7 claim, also known as a no-fault benefits claim.</p>



<div class="wp-block-image"><figure class="alignright"><img src="/wp-content/uploads/blackandwhitemiata-1-1024x768.png" alt="" width="256" height="192" /><figcaption>An experienced injury lawyer can help you recover after a car accident by handling your ICBC claim, ensuring access to treatments needed to recover, and advocating for fair compensation.</figcaption></figure></div>



<p>A Part 7 claim refers to the “no-fault” benefits that are payable to accident victims in BC, even if they are wholly at fault for their injuries.&nbsp; To receive these benefits, the person must have an insurance policy with ICBC; or, live in a household with someone who has an insurance policy with ICBC; or, was the occupant of a vehicle licensed in BC; or was a cyclist or pedestrian who has collided with a vehicle insured in BC.&nbsp; It is important to note that notice and limitation periods apply to Part 7 claims.&nbsp; Although the claimant does not need to prove that someone else was at fault for the accident, they must still prove that the injuries that they sustained were the result of the accident.</p>



<p>Under Part 7, a person is entitled to the following benefits:</p>



<ul><li>Up to $150,000 in medical and rehabilitation expenses</li><li>Up to $300 per week in wage loss benefits for those who were totally disabled from work within 20 days of the accident. Note these benefits are payable for a maximum of 104 weeks.</li><li>Homemaker benefits (limits apply).</li><li>Death benefits – limited amounts paid to surviving spouses and children.</li></ul>



<p>If you, or someone you know was injured in a car accident, speaking with an experienced injury lawyer and making informed decisions about their claim is critical.&nbsp; The lawyers at League and Williams provide free consultations to those injured in car accidents and have the experience needed to help injured victims recover to their fullest potential. &nbsp;We <a href="/contact-our-lawyers/">may be contacted</a> by phone 250-888-0002 or via email at&nbsp;<a href="mailto:info@leaguelaw.com">info@leaguelaw.com.</a></p>"""


def article():
    """The live page's own article markup, lifted verbatim.

    Transcribing this by hand loses the non-breaking spaces the copy carries
    (e.g. "via email at\u00a0info@leaguelaw.com."), and a lost NBSP re-wraps the
    line. It is extracted, never retyped.
    """
    return '\n      <div class="entry">\n' + ARTICLE + '\n      </div>\n'


def sidebar():
    subs = "".join(
        '<li%s><a href="%s">%s</a></li>' % (' class="current"' if cur else '', href, name)
        for name, href, cur in INJURY)
    return """
    <aside class="sidebar">

      <div class="wtitle">Navigation</div>
      <ul class="snav">
        <li>
          <span class="chev"><i class="fa fa-chevron-right"></i></span>
          <a href="/our-services/bc-injury-claims/">Injury Claims</a>
          <ul class="sub">{subs}</ul>
        </li>
      </ul>

      <div class="fcard sform">
        <div class="legend">"<em>*</em>" indicates required fields</div>
        <div class="fhead">
          <img src="{up}/logo-white.png" alt="League and Williams Lawyers">
          <p>Contact us for a Consultation</p>
        </div>
        <div class="body">
          <div class="gf name"><i class="fa fa-user"></i><input type="text" placeholder="NAME"></div>
          <div class="gf email"><i class="fa fa-envelope"></i><input type="text" placeholder="EMAIL"></div>
          <div class="gf phone"><i class="fa fa-phone"></i><input type="text" placeholder="PHONE"></div>
          <div class="gf msg"><i class="fa fa-comments"></i><textarea placeholder="MESSAGE"></textarea></div>
        </div>
        <div class="safe"><i class="fa fa-lock"></i>Your information is kept safe.</div>
        <div class="foot"><button class="sendbtn" type="button">SEND MESSAGE</button></div>
      </div>

    </aside>
""".format(subs=subs, up=UP)


def top_footer():
    socials = "".join('<a href="%s"><i class="fa %s"></i></a>' % (href, icon)
                      for icon, href in SOCIALS)
    return """
<!-- 8 · contact strip (full-bleed) -->
<section class="cstrip">
  <div class="ph"><h2><a href="{tel}"><i class="fa fa-phone"></i>250-888-0002</a></h2></div>
  <div class="em"><h2><a href="mailto:info@leaguelaw.com"><i class="fa fa-envelope"></i>info@leaguelaw.com</a></h2></div>
</section>

<!-- 9 · get in touch -->
<section class="git">
  <div class="container">
    <div class="half">
      <span class="hex"><i class="fa fa-comments"></i></span>
      <h2>GET IN TOUCH</h2>
      <p>Please contact us for more information. <br>Our email is monitored seven days a week and we will get back to you shortly.</p>
    </div>
  </div>
</section>

<!-- 10 · socials -->
<div class="socials">{socials}</div>

<!-- 11 · footer form + map -->
<div class="container">
  <div class="ftgrid">
    <div class="fcard ftform">
      <div class="legend">"<em>*</em>" indicates required fields</div>
      <h5>WE&rsquo;VE GOT YOUR BACK</h5>
      <h6>Contact us today!</h6>
      <div class="gf name"><i class="fa fa-user"></i><input type="text" placeholder="NAME"></div>
      <div class="gf email"><i class="fa fa-envelope"></i><input type="text" placeholder="EMAIL"></div>
      <div class="gf phone"><i class="fa fa-phone"></i><input type="text" placeholder="PHONE"></div>
      <div class="gf msg"><i class="fa fa-comments"></i><textarea placeholder="MESSAGE"></textarea></div>
      <div class="safe"><i class="fa fa-lock"></i>Your information is kept safe.</div>
      <div class="foot"><button class="sendbtn" type="button">SEND MESSAGE</button></div>
    </div>
    <iframe class="ftmap" title="League and Williams Locations" loading="lazy"
      src="https://www.google.com/maps/d/embed?mid=1QMwQ3tpq9R-gbsEiZ_WW9_u7cZw"></iframe>
  </div>
</div>
<div class="spacer"></div>
""".format(tel=TEL_HREF, socials=socials)


def footer_bottom():
    return """
<!-- 12 · footer bottom -->
<footer class="fbottom">
  <div class="container">
    Victoria (Main Office) | Phone <a href="{tel}">(250) 888-0002</a> | Fax (778) 433-0171 | Email: <a href="mailto:info@leaguelaw.com">info@LeagueLaw.com</a><br>
    Address: 174 Wilson St #210 | Victoria, BC V9A 7N6<br><br>
    <a href="/">Home</a> | <a href="/our-services/">Services</a> | <a href="/contact-our-lawyers/">Contact</a>
  </div>
</footer>
""".format(tel=TEL_HREF)


def build():
    parts = [head(), header(), page_header(),
             '\n<!-- 4 · content + sidebar -->\n<div class="container cwrap">\n  <main class="primary">\n',
             article(),
             '  </main>\n', sidebar(), '</div>\n',
             top_footer(), footer_bottom(),
             "\n</body>\n</html>\n"]
    return "".join(parts)


if __name__ == "__main__":
    html = build()
    dest = sys.argv[1] if len(sys.argv) > 1 else OUT
    with io.open(dest, "w", encoding="utf-8") as fh:
        fh.write(html)
    print("wrote %s (%d bytes)" % (dest, len(html)))
