// cal-pages.jsx — Financing, About+Contact, Credit-Consent, 404

const { useState: pUS, useMemo: pUM, useRef: pUR, useEffect: pUE } = React;

// ─────────────────────────────────────────────────────────────
// Financing / How it works
// ─────────────────────────────────────────────────────────────
function Financing() {
  return (
    <div>
      <FinancingHero />
      <FullProcess />
      <CalculatorSection />
      <LenderNetwork />
      <WhatYoullNeed />
      <FinancingFAQ />
      <FinalCTA />
    </div>
  );
}

function FinancingHero() {
  return (
    <section style={{padding: "72px 0 48px"}}>
      <div className="container" style={{maxWidth: 880}}>
        <div className="eyebrow">How it works</div>
        <h1 className="h-hero mt-4" style={{fontSize:"clamp(38px, 5.5vw, 68px)"}}>How we get you financing.</h1>
        <p className="lede-lg mt-6" style={{maxWidth: 680}}>
          We sell vehicles and arrange the financing in the same place. We
          aren't a lender — we work with a network of Canadian lenders who
          finance the deal. Here's exactly how the process works, end to end.
        </p>
      </div>
    </section>
  );
}

function FinancingDisclosureCard() {
  return (
    <section style={{padding: "20px 0"}}>
      <div className="container">
        <div className="broker-card">
          <div className="broker-card-h">
            <Icon name="shield" size={20} />
            <span>How financing works at CAL</span>
          </div>
          <div style={{padding: "20px 24px 24px"}}>
            <p style={{margin:"0",fontSize:16,lineHeight:1.6,color:"var(--text)"}}>
              <b>Canadian Auto Loan is an Ontario-based auto dealership</b> serving
              Ontario and Quebec. We sell the vehicle. We are <b>not</b> a lender.
            </p>
            <p style={{margin:"14px 0 0",fontSize:16,lineHeight:1.6,color:"var(--text)"}}>
              <b>For financing, we work on your behalf with a network of Canadian lenders</b> to
              find a rate that matches your credit profile. The lender pays the loan, you pay
              the lender. We handle the paperwork between you and them.
            </p>
          </div>
        </div>
      </div>
      <style>{`
        .broker-card {
          border: 1.5px solid var(--primary);
          background: linear-gradient(180deg, var(--primary-tint), white);
          border-radius: var(--r-xl);
          box-shadow: var(--shadow-sm);
          overflow: hidden;
        }
        .broker-card-h {
          display: flex; gap: 10px; align-items: center;
          padding: 14px 24px;
          background: var(--primary);
          color: white;
          font-weight: 600; letter-spacing: -0.005em; font-size: 14px;
          text-transform: uppercase;
          letter-spacing: 0.06em;
        }
      `}</style>
    </section>
  );
}

function FullProcess() {
  const items = [
    {
      n: "01",
      t: "You apply",
      d: "Five short steps. You share your contact info, the vehicle you want, your income and employment, and your credit picture. About 3 minutes.",
      timing: "≈ 3 min",
    },
    {
      n: "02",
      t: "We call you",
      d: "Ecaterina or another team member reviews your file by hand and reaches out. We'll talk through your situation and what's realistic — not pass your file off to a robot.",
      timing: "Within 24 hours",
    },
    {
      n: "03",
      t: "Credit check, with your OK",
      d: "Once we've spoken and you've approved proceeding, we run a credit check with Equifax and TransUnion. We never check your credit before we've talked.",
      timing: "After we talk",
    },
    {
      n: "04",
      t: "We shop our lender network",
      d: "We bring your file to the lenders most likely to approve your profile, and negotiate the best rate they'll offer for the vehicle you want.",
      timing: "1–3 business days",
    },
    {
      n: "05",
      t: "Pre-approval",
      d: "If a lender approves you, we send the offer with the rate, term and monthly payment laid out clearly. You decide whether to accept — no pressure.",
      timing: "After approval",
    },
    {
      n: "06",
      t: "Vehicle selection",
      d: "Choose a vehicle from our partner inventory of 7,000+ vehicles. We send photos, full vehicle history, and detailed specs before you commit.",
      timing: "Your pace",
    },
    {
      n: "07",
      t: "Door-to-door delivery",
      d: "Barb or Caroline brings the vehicle to your address, walks you through the paperwork, and hands you the keys. No dealership lot.",
      timing: "Same week",
    },
  ];
  return (
    <section style={{padding: "80px 0"}}>
      <div className="container">
        <div style={{maxWidth: 620, marginBottom: 56}}>
          <div className="eyebrow">The full process</div>
          <h2 className="h1 mt-4">Seven steps, end to end.</h2>
          <p className="lede mt-4">
            Most customers go from application to a vehicle in their driveway in
            five to seven business days. Here's every step.
          </p>
        </div>
        <div className="process-list">
          {items.map((it) => (
            <div key={it.n} className="process-row">
              <div className="process-marker">
                <div className="process-num tnum">{it.n}</div>
              </div>
              <div className="process-body">
                <div className="process-h">
                  <div className="h3" style={{fontSize:20}}>{it.t}</div>
                  <span className="pill pill-neutral tnum">{it.timing}</span>
                </div>
                <p style={{margin:"8px 0 0",color:"var(--text-muted)",fontSize:15.5,lineHeight:1.6,maxWidth: 680}}>
                  {it.d}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .process-list { display: flex; flex-direction: column; }
        .process-row {
          display: grid; grid-template-columns: 72px 1fr;
          gap: 24px;
          padding: 24px 0;
          border-bottom: 1px solid var(--border);
        }
        .process-row:last-child { border-bottom: 0; }
        .process-marker { position: relative; }
        .process-num {
          width: 56px; height: 56px; border-radius: 16px;
          background: var(--primary-tint); color: var(--primary);
          display: grid; place-items: center;
          font-weight: 600; font-size: 16px; letter-spacing: -0.01em;
        }
        .process-h { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
        @media (max-width: 640px) {
          .process-row { grid-template-columns: 44px 1fr; gap: 16px; }
          .process-num { width: 44px; height: 44px; border-radius: 12px; font-size: 14px; }
        }
      `}</style>
    </section>
  );
}

function CalculatorSection() {
  const [price, setPrice] = pUS(28000);
  const [down, setDown] = pUS(2000);
  const [term, setTerm] = pUS(72);
  const [credit, setCredit] = pUS("good");
  const apr = pUM(() => {
    const m = { excellent: 6.99, good: 9.49, fair: 12.99, building: 15.99, wip: 18.99 };
    return m[credit] ?? 9.49;
  }, [credit]);
  const monthly = pUM(() => {
    const p = Math.max(price - down, 1000); const r = (apr/100)/12; const n = term;
    return Math.round((p * r) / (1 - Math.pow(1 + r, -n)));
  }, [price, down, term, apr]);
  const fmt = (n) => "$" + n.toLocaleString("en-CA");

  const { go } = useRoute();

  return (
    <section id="calculator" style={{padding: "60px 0", background: "var(--bg-2)", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)"}}>
      <div className="container">
        <div className="calc-grid">
          <div>
            <div className="eyebrow">Payment estimator</div>
            <h2 className="h1 mt-4">See a payment for your profile.</h2>
            <p className="lede mt-4" style={{maxWidth: 480}}>
              Adjust price, down payment, term and your estimated credit to
              see a representative monthly payment.
            </p>
            <ul style={{listStyle:"none",padding:0,margin:"24px 0 0"}}>
              <CheckBullet>No personal info required to estimate</CheckBullet>
              <CheckBullet>Real rates from our lender network</CheckBullet>
              <CheckBullet>Final rate depends on your full credit picture</CheckBullet>
            </ul>
            <div className="mt-8">
              <button className="btn btn-primary btn-lg" onClick={() => go("/apply")}>
                Apply for a real quote <Icon name="arrowRight" size={16}/>
              </button>
            </div>
          </div>
          <div className="card card-pad-lg" style={{boxShadow:"var(--shadow-lg)"}}>
            <div style={{display:"flex",justifyContent:"space-between",alignItems:"flex-start",marginBottom:24}}>
              <div>
                <div className="tiny" style={{textTransform:"uppercase",letterSpacing:".08em",fontWeight:600,color:"var(--text-soft)"}}>Estimated monthly</div>
                <div className="tnum" style={{fontSize: 52, fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1, marginTop: 4}}>
                  {fmt(monthly)}<span style={{fontSize:22,color:"var(--text-muted)",fontWeight:500}}>/mo</span>
                </div>
              </div>
              <div style={{textAlign:"right"}}>
                <div className="tiny" style={{textTransform:"uppercase",letterSpacing:".08em",fontWeight:600,color:"var(--text-soft)"}}>Rep. APR</div>
                <div className="tnum" style={{fontSize: 24, fontWeight: 600, marginTop:4}}>{apr.toFixed(2)}<span style={{fontSize:16,color:"var(--text-muted)"}}>%</span></div>
              </div>
            </div>
            <div className="stack gap-6">
              <Slider label="Vehicle price" value={price} onChange={setPrice} min={5000} max={75000} step={500} fmt={fmt}/>
              <Slider label="Down payment" value={down} onChange={setDown} min={0} max={20000} step={250} fmt={fmt}/>
              <div>
                <label className="field-label" style={{justifyContent:"space-between",display:"flex"}}>
                  <span>Loan term</span><span className="tnum soft">{term} months</span>
                </label>
                <div style={{display:"flex",gap:6,marginTop:8}}>
                  {[36,48,60,72,84].map(t => (
                    <button key={t} onClick={()=>setTerm(t)} type="button" className="tnum"
                      style={{
                        flex:1,padding:"8px 0",borderRadius:8,
                        border:"1px solid " + (term===t?"var(--primary)":"var(--border)"),
                        background: term===t?"var(--primary-tint)":"var(--surface)",
                        color: term===t?"var(--primary)":"var(--text-muted)",
                        fontWeight: term===t?600:500,fontSize:13,cursor:"pointer",
                      }}>{t}</button>
                  ))}
                </div>
              </div>
              <div>
                <label className="field-label">Estimated credit</label>
                <CalSelect
                  value={credit}
                  onChange={setCredit}
                  options={[
                    { value: "excellent", label: "Excellent", hint: "720+" },
                    { value: "good", label: "Good", hint: "680–719" },
                    { value: "fair", label: "Fair", hint: "620–679" },
                    { value: "building", label: "Building", hint: "580–619" },
                    { value: "wip", label: "Work-in-progress", hint: "579 & under" },
                  ]}
                />
              </div>
            </div>
            <div className="mt-6" style={{padding:12,borderRadius:10,background:"var(--surface-muted)",fontSize:12,lineHeight:1.5,color:"var(--text-muted)",display:"flex",gap:8}}>
              <Icon name="info" size={14} style={{flex:"0 0 14px",marginTop:1}}/>
              <span>For illustration only. Representative APR <span className="tnum">{apr.toFixed(2)}%</span> over <span className="tnum">{term}</span> months. Not an offer of credit and not a binding quote. All financing is subject to credit approval.</span>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        .calc-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; }
        @media (max-width: 980px) { .calc-grid { grid-template-columns: 1fr; gap: 32px; } }
      `}</style>
    </section>
  );
}

function LenderNetwork() {
  const lenders = [
    { n: "TD Auto Finance", t: "Prime auto financing" },
    { n: "Scotia Dealer Advantage", t: "Sub-prime specialist" },
    { n: "iA Auto Finance", t: "Full credit spectrum" },
    { n: "Desjardins", t: "Quebec & Ontario residents" },
    { n: "Santander Consumer", t: "Near-prime focus" },
    { n: "Auto Capital Canada", t: "Credit rebuilding" },
    { n: "EdenPark Inc.", t: "Specialty financing" },
    { n: "Iceberg Finance", t: "Bankruptcy & proposals" },
    { n: "Northlake Financial", t: "Independent dealer network" },
  ];
  return (
    <section style={{padding: "96px 0"}}>
      <div className="container">
        <div style={{maxWidth: 620, marginBottom: 48}}>
          <div className="eyebrow">Lender network</div>
          <h2 className="h1 mt-4">We work with lenders for every profile.</h2>
          <p className="lede mt-4">
            Different lenders specialize in different parts of the credit spectrum.
            Our job is knowing who says yes to what.
          </p>
        </div>
        <div className="lender-grid">
          {lenders.map((l) => (
            <div key={l.n} className="lender-card">
              <div className="lender-mark"><Icon name="building" size={18}/></div>
              <div>
                <div style={{fontWeight:600,fontSize:14.5}}>{l.n}</div>
                <div className="small">{l.t}</div>
              </div>
            </div>
          ))}
        </div>
        <p className="small mt-8" style={{textAlign:"center"}}>
          Active lender partners. Our network updates as lenders join or shift focus.
        </p>
      </div>
      <style>{`
        .lender-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
        @media (max-width: 980px) { .lender-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 520px) { .lender-grid { grid-template-columns: 1fr; } }
        .lender-card {
          padding: 18px 18px;
          border: 1px solid var(--border);
          border-radius: var(--r-md);
          background: var(--surface);
          display: flex; gap: 14px; align-items: center;
        }
        .lender-mark {
          width: 36px; height: 36px; border-radius: 9px;
          background: var(--surface-muted); color: var(--text-muted);
          display: grid; place-items: center; flex: 0 0 36px;
        }
      `}</style>
    </section>
  );
}

function WhatYoullNeed() {
  const items = [
    { icon:"user", t:"Government ID", d:"Canadian driver's licence or provincial ID showing your current address." },
    { icon:"briefcase", t:"Proof of employment", d:"A recent pay stub (within 30 days) or, if self-employed, your last two tax returns." },
    { icon:"cash", t:"Proof of income", d:"Two months of bank statements showing income deposits." },
    { icon:"map", t:"Proof of address", d:"A recent utility bill, lease, or government correspondence." },
  ];
  return (
    <section id="what-youll-need" style={{padding: "60px 0", background: "var(--bg-2)", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)"}}>
      <div className="container">
        <div style={{maxWidth: 620, marginBottom: 40}}>
          <div className="eyebrow">What you'll need</div>
          <h2 className="h1 mt-4">Have these ready (after you apply).</h2>
          <p className="lede mt-4">
            You don't need any of this to start your application — we only ask for
            these after a lender pre-approves your file.
          </p>
        </div>
        <div className="need-grid">
          {items.map((it) => (
            <div key={it.t} className="card card-pad">
              <div className="need-icon"><Icon name={it.icon} size={20}/></div>
              <div className="h3 mt-4" style={{fontSize:17}}>{it.t}</div>
              <p style={{margin:"6px 0 0",color:"var(--text-muted)",fontSize:14.5,lineHeight:1.55}}>{it.d}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .need-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
        @media (max-width: 980px) { .need-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 520px) { .need-grid { grid-template-columns: 1fr; } }
        .need-icon {
          width: 40px; height: 40px; border-radius: 10px;
          background: var(--primary-tint); color: var(--primary);
          display: grid; place-items: center;
        }
      `}</style>
    </section>
  );
}

function FinancingFAQ() {
  const sections = [
    { name: "Eligibility", items: [
      { q: "Who can apply?", a: "Anyone who is a resident of Ontario or Quebec, 18 or older, with regular income (employment, self-employment, pension, or disability/social benefits). We can only sell and deliver vehicles to residents of those two provinces." },
      { q: "Can I apply with a bankruptcy or consumer proposal?", a: "Often, yes. Lenders in our network look at your full picture — time since discharge, current income, employment stability — not just a credit number. Be honest about it on your application; that's how we match you to a lender who will say yes." },
      { q: "What if I'm self-employed or on commission?", a: "We work with lenders who specialize in non-traditional income. You'll be asked for two years of tax returns or bank statements showing consistent income." },
      { q: "Do I need a co-signer?", a: "Not usually. A co-signer can help if your credit is very thin or recently rebuilding, but most of our customers apply on their own and get approved." },
    ]},
    { name: "Credit & rates", items: [
      { q: "Will applying hurt my credit score?", a: "Applying does nothing to your credit on its own. We only run a credit check after we've spoken with you and you've approved proceeding — and we'll always tell you before we do." },
      { q: "What rate will I get?", a: "We can't tell you in advance — your rate depends on your full credit picture, the lender, and the vehicle. What we can tell you is that we'll bring back the best rate available to you from the lenders in our network." },
      { q: "Do you offer 0% financing?", a: "No. 0% offers come from manufacturers on new vehicles for buyers with excellent credit. We're an independent dealer, and we focus on financing for everyone else." },
    ]},
    { name: "Process & paperwork", items: [
      { q: "How long does the whole process take?", a: "Most customers go from application to keys in 5–7 business days. The application itself takes about 3 minutes." },
      { q: "Can I save and come back later?", a: "Yes. Your application auto-saves as you fill it out. Close the tab, come back anytime, and pick up where you left off." },
      { q: "What happens after I submit?", a: "A real person (usually Ecaterina) reviews your file within 24 hours. We may call to clarify a few details, then take your file to our lender network. Once a lender pre-approves, we send the offer for you to accept or decline." },
      { q: "Can I see the vehicles before I commit?", a: "Yes. After pre-approval, you choose from our partner inventory of 7,000+ vehicles. We send photos, full history reports, and detailed specs. You're not locked in until you sign delivery paperwork." },
    ]},
  ];

  const [openKey, setOpenKey] = pUS("Will applying hurt my credit score?");
  return (
    <section style={{padding: "96px 0 60px"}}>
      <div className="container" style={{maxWidth: 900}}>
        <div style={{maxWidth: 560, marginBottom: 48}}>
          <div className="eyebrow">FAQ</div>
          <h2 className="h1 mt-4">Everything we get asked.</h2>
          <p className="lede mt-4">If we missed something, call us. We'll answer it the same day.</p>
        </div>

        <div className="stack gap-8">
          {sections.map((s) => (
            <div key={s.name}>
              <h3 className="h3 mb-4" style={{fontSize:14,textTransform:"uppercase",letterSpacing:".06em",color:"var(--text-soft)"}}>{s.name}</h3>
              <div>
                {s.items.map((it) => {
                  const open = openKey === it.q;
                  return (
                    <button key={it.q}
                      className="faq-item"
                      onClick={() => setOpenKey(open ? null : it.q)}
                      aria-expanded={open}
                    >
                      <div className="faq-q">
                        <span style={{fontWeight:600,fontSize:16.5,letterSpacing:"-0.005em"}}>{it.q}</span>
                        <Icon name="chevronDown" size={18} style={{transition:"transform .2s ease", transform: open ? "rotate(180deg)":"none", color: "var(--text-muted)"}}/>
                      </div>
                      {open && (
                        <p className="faq-a anim-fadeup" style={{margin: "10px 0 0", color:"var(--text-muted)", fontSize: 15.5, lineHeight: 1.6, textAlign: "left"}}>
                          {it.a}
                        </p>
                      )}
                    </button>
                  );
                })}
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .faq-item {
          appearance: none; text-align: left; width: 100%; cursor: pointer;
          padding: 20px 4px; border: 0; background: transparent;
          border-bottom: 1px solid var(--border); color: inherit;
          display: flex; flex-direction: column;
        }
        .faq-item:hover .faq-q span:first-child { color: var(--primary); }
        .faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
      `}</style>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// About + Contact merged
// ─────────────────────────────────────────────────────────────
function About() {
  return (
    <div>
      <AboutHero />
      <TheTeam />
      <AboutOfficeContact />
      <FinalCTA />
    </div>
  );
}

function AboutHero() {
  return (
    <section style={{padding: "72px 0 48px"}}>
      <div className="container">
        <div className="about-hero-grid">
          <div>
            <div className="eyebrow">About us</div>
            <h1 className="h-hero mt-4" style={{fontSize:"clamp(38px, 5.5vw, 68px)"}}>People over paperwork.</h1>
            <p className="lede-lg mt-6" style={{maxWidth: 540}}>
              Canadian Auto Loan started in Ottawa in 2019. Three things made
              us start the dealership: too many Canadians being declined by banks
              that didn't bother to ask why, too many dealerships using credit as
              leverage, and too few people willing to explain how any of it
              actually works.
            </p>
            <p className="lede mt-6" style={{maxWidth: 540}}>
              We're small on purpose. You'll talk to one of three people from
              application through delivery — by name, by phone.
            </p>
          </div>
          <div>
            <image-slot
              id="about-photo"
              src={(typeof window !== 'undefined' && window.__resources && window.__resources.aboutOffice) || "assets/about-office.jpg"}
              shape="rounded"
              radius="24"
              placeholder="Office photo, team at work, or Ottawa storefront. 4:5."
              style={{ width: "100%", aspectRatio: "4 / 5", height: "auto", display: "block" }}
            ></image-slot>
          </div>
        </div>
      </div>
      <style>{`
        .about-hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
        @media (max-width: 880px) { .about-hero-grid { grid-template-columns: 1fr; gap: 32px; } }
      `}</style>
    </section>
  );
}

function TheTeam() {
  const team = [
    { name: "Ecaterina", title: "Sales lead", since: "Since 2019", bio: "Reviews every application that comes in. Specializes in credit rebuilding files and self-employed customers. The first voice you'll hear after applying.", init: "EC", group: "Sales" },
    { name: "Tyler", title: "Sales", since: "", bio: "Walks customers through vehicle options and matches the financing offer to the right car for your budget.", init: "TY", group: "Sales" },
    { name: "Sid", title: "Sales", since: "", bio: "Handles incoming inquiries and helps customers narrow down what they want before financing review.", init: "SD", group: "Sales" },
    { name: "Terell", title: "Sales", since: "", bio: "Coordinates between sales and the lender side to keep your file moving once you're pre-approved.", init: "TR", group: "Sales" },
    { name: "Barb", title: "Delivery driver", since: "", bio: "Drives your vehicle from our lot to your driveway. Walks you through paperwork and hands you the keys.", init: "BB", group: "Delivery" },
    { name: "Caroline", title: "Delivery driver", since: "", bio: "Also handles door-to-door delivery across Ontario and Quebec. Mechanic by training; double-checks every vehicle before it leaves.", init: "CR", group: "Delivery" },
  ];
  return (
    <section id="team" style={{padding: "60px 0"}}>
      <div className="container">
        <div style={{maxWidth: 560, marginBottom: 48}}>
          <div className="eyebrow">The team</div>
          <h2 className="h1 mt-4">Six people. That's it.</h2>
          <p className="lede mt-4">No call centre. No outsourced concierge. Four on sales, two on the road, one Ottawa office.</p>
        </div>
        {["Sales", "Delivery"].map((g) => (
          <div key={g} className="team-group">
            <h3 className="team-group-h">{g}</h3>
            <div className="team-cards">
              {team.filter(p => p.group === g).map((p, i) => (
                <div key={p.name} className="team-card card card-pad-lg">
                  <div className="team-avatar" style={{background: TINT_BG[i % 3]}}>
                    {p.init}
                  </div>
                  <div className="mt-6">
                    <div className="h2" style={{fontSize:26}}>{p.name}</div>
                    <div className="small mt-2" style={{display:"flex",gap:10,alignItems:"center",flexWrap:"wrap"}}>
                      <span>{p.title}</span>
                      {p.since && <><span style={{width:3,height:3,borderRadius:"50%",background:"var(--text-soft)"}}/><span>{p.since}</span></>}
                    </div>
                    <p style={{margin:"14px 0 0",color:"var(--text-muted)",fontSize:14.5,lineHeight:1.55}}>
                      {p.bio}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
        <p className="small mt-8" style={{textAlign:"center"}}>
          Photography in progress — first-name role cards stand in until we have real headshots.
        </p>
      </div>
      <style>{`
        .team-group { margin-bottom: 48px; }
        .team-group:last-child { margin-bottom: 0; }
        .team-group-h {
          font-size: 12.5px; font-weight: 600; letter-spacing: .08em;
          text-transform: uppercase; color: var(--text-soft);
          margin: 0 0 18px; padding-bottom: 8px;
          border-bottom: 1px solid var(--border);
        }
        .team-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
        @media (max-width: 1100px) { .team-cards { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 560px) { .team-cards { grid-template-columns: 1fr; } }
        .team-avatar {
          width: 72px; height: 72px; border-radius: 50%;
          color: white; font-weight: 600; font-size: 24px; letter-spacing: -0.02em;
          display: grid; place-items: center;
        }
      `}</style>
    </section>
  );
}

function AboutOfficeContact() {
  return (
    <section id="contact" style={{padding: "60px 0 96px", background: "var(--bg-2)", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)"}}>
      <div className="container">
        <div style={{maxWidth: 560, marginBottom: 40}}>
          <div className="eyebrow">Visit or call</div>
          <h2 className="h1 mt-4">Real address. Real hours.</h2>
        </div>
        <div className="contact-grid">
          <div className="card card-pad-lg" style={{display:"flex",flexDirection:"column",gap:24}}>
            <div className="contact-row">
              <div className="contact-icon"><Icon name="map" size={20}/></div>
              <div>
                <div className="tiny" style={{textTransform:"uppercase",letterSpacing:".08em",fontWeight:600,color:"var(--text-soft)"}}>Head office</div>
                <div style={{fontWeight:600,marginTop:4,fontSize:17,lineHeight:1.45}}>1485 Laperriere Ave<br/>Ottawa, ON K1Z 7S8</div>
                <a className="small text-primary" href="#" style={{textDecoration:"underline",textUnderlineOffset:2,marginTop:6,display:"inline-block"}}>Get directions <Icon name="external" size={11} style={{verticalAlign:-1}}/></a>
              </div>
            </div>
            <div className="contact-row">
              <div className="contact-icon"><Icon name="phone" size={20}/></div>
              <div>
                <div className="tiny" style={{textTransform:"uppercase",letterSpacing:".08em",fontWeight:600,color:"var(--text-soft)"}}>Phone</div>
                <div className="tnum" style={{fontWeight:600,marginTop:4,fontSize:17}}>(613) 700-8641</div>
                <div className="small" style={{marginTop:4}}>(613) area, Ottawa head office.</div>
              </div>
            </div>
            <div className="contact-row">
              <div className="contact-icon"><Icon name="mail" size={20}/></div>
              <div>
                <div className="tiny" style={{textTransform:"uppercase",letterSpacing:".08em",fontWeight:600,color:"var(--text-soft)"}}>Email</div>
                <div style={{fontWeight:600,marginTop:4,fontSize:17}}>info@canadianautoloan.net</div>
              </div>
            </div>
            <div className="contact-row">
              <div className="contact-icon"><Icon name="clock" size={20}/></div>
              <div>
                <div className="tiny" style={{textTransform:"uppercase",letterSpacing:".08em",fontWeight:600,color:"var(--text-soft)"}}>Hours</div>
                <div style={{fontWeight:600,marginTop:4,fontSize:17}}>10:00 AM – 5:00 PM</div>
                <div className="small" style={{marginTop:4}}>Monday through Friday. Saturday & Sunday closed.</div>
              </div>
            </div>

            <div style={{display:"flex",gap:12,paddingTop:16,borderTop:"1px solid var(--border)",marginTop:8}}>
              <Link to="/apply" className="btn btn-primary flex-1">Start application</Link>
              <a href="#" className="btn btn-secondary">Read Google reviews</a>
            </div>
          </div>

          <div>
            <image-slot
              id="office-photo"
              src={(typeof window !== 'undefined' && window.__resources && window.__resources.officeExterior) || "assets/office-exterior.png"}
              shape="rounded"
              radius="24"
              placeholder="Office exterior, lobby, or map screenshot. Square-ish."
              style={{ width: "100%", aspectRatio: "5 / 6", height: "auto", display: "block" }}
            ></image-slot>
          </div>
        </div>
      </div>
      <style>{`
        .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; }
        @media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; gap: 24px; } }
        .contact-row { display: flex; gap: 16px; align-items: flex-start; }
        .contact-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--primary-tint); color: var(--primary); display: grid; place-items: center; flex: 0 0 44px; }
      `}</style>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Credit-consent standalone page (per brief §6)
// ─────────────────────────────────────────────────────────────
function CreditConsent() {
  return (
    <div className="container" style={{maxWidth: 760, padding: "72px 0 96px"}}>
      <div style={{marginBottom: 32}}>
        <Link to="/financing" className="small" style={{color:"var(--text-muted)",display:"inline-flex",gap:6,alignItems:"center"}}>
          <Icon name="arrowLeft" size={14}/> Back to how it works
        </Link>
      </div>

      <div className="eyebrow">Legal disclosure</div>
      <h1 className="h1 mt-4">Credit check consent disclosure</h1>
      <p className="lede mt-4">
        This is the long-form legal language behind the consent checkbox on your application.
      </p>

      <article className="legal mt-8">
        <h2>1. What you're agreeing to</h2>
        <p>
          By checking the consent box on your Canadian Auto Loan application, you are
          authorizing Canadian Auto Loan (CAL) to obtain a copy of your credit file
          from <b>Equifax Canada</b> and <b>TransUnion Canada</b> for the purpose of
          assessing your application and matching you with potential lenders in our
          network.
        </p>

        <h2>2. When the credit check happens</h2>
        <p>
          We do <b>not</b> check your credit simply because you submitted an
          application. A credit check is performed only after a member of our team
          has spoken with you and you have approved proceeding. We will always tell
          you before we run it.
        </p>
        <p>
          A credit check may appear on your credit report and can affect your credit
          score. By providing consent, you acknowledge and accept this as part of the
          financing application process.
        </p>

        <h2>3. Who sees your information</h2>
        <p>
          Your credit file, the information on your application, and any documents
          you provide may be shared with the lender(s) reviewing your application.
          We do not share your file with marketing partners, data brokers, or
          unaffiliated third parties.
        </p>

        <h2>4. How long we keep your information</h2>
        <p>
          We retain your application file for the period required by Canadian
          financial-services record-keeping regulations. You may request access to,
          correction of, or deletion of your personal information at any time by
          contacting us at <b>info@canadianautoloan.net</b>.
        </p>

        <h2>5. Withdrawing consent</h2>
        <p>
          You may withdraw consent at any time before the credit check is performed
          by emailing us at the address above. Withdrawing consent will end your
          application. A credit check that has already been performed cannot be
          undone, but no further checks will occur.
        </p>

        <h2>6. Your rights under Canadian privacy law</h2>
        <p>
          Canadian Auto Loan operates under the Personal Information Protection
          and Electronic Documents Act (PIPEDA) and applicable provincial privacy
          legislation in Ontario and Quebec. You have the right to access your
          personal information, request its correction, and lodge a complaint with
          the Office of the Privacy Commissioner of Canada.
        </p>

        <h2>7. Contact</h2>
        <p>
          Questions about this disclosure? Email <b>info@canadianautoloan.net</b>{" "}
          or call us at <b className="tnum">(613) 700-8641</b>.
        </p>

        <p className="legal-meta">
          Canadian Auto Loan · 1485 Laperriere Ave, Ottawa, ON K1Z 7S8 · Last updated 2026-06-02
        </p>
      </article>

      <div className="mt-12 text-center">
        <Link to="/apply" className="btn btn-primary btn-lg">Continue to application <Icon name="arrowRight" size={16}/></Link>
      </div>

      <style>{`
        .legal { color: var(--text); font-size: 16px; line-height: 1.7; }
        .legal h2 { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; margin: 36px 0 8px; }
        .legal h2:first-child { margin-top: 0; }
        .legal p { margin: 12px 0; color: var(--text); }
        .legal-meta { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--text-soft); font-size: 13px; }
      `}</style>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Privacy Policy — required under PIPEDA + Quebec Law 25
// ─────────────────────────────────────────────────────────────
function PrivacyPolicy() {
  return (
    <div className="container" style={{maxWidth: 760, padding: "72px 0 96px"}}>
      <div style={{marginBottom: 32}}>
        <Link to="/" className="small" style={{color:"var(--text-muted)",display:"inline-flex",gap:6,alignItems:"center"}}>
          <Icon name="arrowLeft" size={14}/> Back to home
        </Link>
      </div>

      <div className="eyebrow">Privacy</div>
      <h1 className="h1 mt-4">Privacy policy</h1>
      <p className="lede mt-4">
        How Canadian Auto Loan collects, uses, shares, and protects your
        personal information. This policy applies to everyone who uses our
        website or submits a financing application.
      </p>

      <article className="legal mt-8">
        <h2>1. Who we are</h2>
        <p>
          Canadian Auto Loan ("CAL", "we", "us", "our") is an Ontario-based
          auto dealership at 1485 Laperriere Ave, Ottawa, ON K1Z 7S8. We sell
          vehicles and arrange financing for our customers with a network of
          Canadian lenders. We are not a lender.
        </p>

        <h2>2. What information we collect</h2>
        <p>When you submit a financing application, we collect:</p>
        <ul>
          <li><b>Identification:</b> first and last name, date of birth, postal code.</li>
          <li><b>Contact:</b> phone number, email address.</li>
          <li><b>Employment:</b> employment status, length of employment, monthly income, employer name (optional).</li>
          <li><b>Financial:</b> self-reported credit band, bankruptcy or consumer-proposal history, co-signer availability, trade-in availability.</li>
          <li><b>Application details:</b> vehicle price range, vehicle type, intended timeline to purchase.</li>
          <li><b>Consent record:</b> the consent text shown to you, whether you accepted, and the date and time you submitted.</li>
        </ul>
        <p>
          When you visit our website, our hosting provider may automatically log
          technical information including your IP address, browser type, pages
          viewed, and the date and time of your visit. This information is used
          to maintain and secure the website and is retained for a short period.
          We do not use third-party advertising trackers or behavioural
          advertising cookies on this website.
        </p>

        <h2>3. Why we collect it</h2>
        <p>We collect this information for the following limited purposes:</p>
        <ul>
          <li>To prepare your financing application and present it to lenders in our network.</li>
          <li>To verify your identity and the information you have provided.</li>
          <li>To communicate with you about your application and, once you have approved proceeding, to perform a credit check.</li>
          <li>To complete the sale of a vehicle to you if a lender approves your financing.</li>
          <li>To meet our legal, regulatory, and record-keeping obligations as an Ontario-registered motor vehicle dealer.</li>
        </ul>
        <p>
          We do not use your information for any purpose other than those listed
          above without first asking for your separate, informed consent.
        </p>

        <h2>4. Credit checks</h2>
        <p>
          A credit check is performed only <b>after</b> a member of our team has
          spoken with you and you have given verbal approval to proceed. We do
          not run a credit check simply because you submitted an application.
          The standalone <Link to="/credit-consent">Credit check consent disclosure</Link>{" "}
          explains this in full detail.
        </p>

        <h2>5. Who we share your information with</h2>
        <p>
          We share your application information with the following parties, only
          to the extent necessary for the purposes in section 3:
        </p>
        <ul>
          <li><b>Lenders in our network</b> who review your application to decide whether to finance your purchase. A current list of lenders we work with appears on our <Link to="/financing">How it works</Link> page.</li>
          <li><b>Credit reporting agencies:</b> Equifax Canada and TransUnion Canada, once you have given verbal approval to proceed with a credit check.</li>
          <li><b>Service providers</b> who help us operate our business, including our hosting provider, email provider, and the document-management tools we use to prepare paperwork. These providers are bound by contract to use your information only as we instruct.</li>
          <li><b>Government and regulators</b> when we are required to disclose information by law or by a binding order.</li>
        </ul>
        <p>
          We do not sell your personal information. We do not share it with
          marketing partners, data brokers, or unaffiliated third parties.
        </p>

        <h2>6. Information stored outside Canada</h2>
        <p>
          Some of our service providers (including providers used by Equifax,
          TransUnion, and certain lenders) may store or process information in
          countries other than Canada, including the United States. When that
          happens, your information is subject to the laws of those countries
          and may be accessible to law enforcement and regulators there. By
          submitting an application, you consent to this transfer.
        </p>

        <h2>7. How we protect your information</h2>
        <p>
          We protect your information using administrative, technical, and
          physical safeguards appropriate to its sensitivity, including
          encryption of data in transit, access controls limiting who within
          CAL can see application data, and contracts with our service
          providers requiring equivalent safeguards. No method of transmission
          or storage is perfectly secure, but we take this seriously.
        </p>

        <h2>8. How long we keep your information</h2>
        <p>
          We retain your application and the supporting documents for the
          minimum period required by Canadian motor vehicle dealer
          record-keeping rules and applicable financial-services regulations,
          and then we securely dispose of it. If a sale is completed, certain
          records (the bill of sale, financing paperwork, regulatory filings)
          are kept for longer periods as required by law.
        </p>

        <h2>9. Your rights</h2>
        <p>Under Canadian privacy law you have the right to:</p>
        <ul>
          <li><b>Access</b> the personal information we hold about you.</li>
          <li><b>Correct</b> information that is inaccurate or incomplete.</li>
          <li><b>Withdraw consent</b> to our continued use of your information, subject to legal and contractual restrictions and reasonable notice. Withdrawing consent during an active application will end the application.</li>
          <li><b>Make a complaint</b> if you believe we have not handled your information appropriately.</li>
        </ul>
        <p>
          To exercise any of these rights, contact our privacy officer using the
          details in section 12.
        </p>

        <h2>10. Automated decisions</h2>
        <p>
          CAL does not make automated decisions about whether to approve your
          financing. Approval decisions are made by the lender(s) reviewing your
          application. Some of those lenders may use automated systems as part
          of their decision; you can ask the relevant lender directly about the
          systems they use.
        </p>

        <h2>11. Children</h2>
        <p>
          Our services are intended for people who are at least 18 years old
          (the minimum age to enter into a vehicle financing contract in Ontario
          and Quebec). We do not knowingly collect information from anyone under
          18. If we learn that we have collected information from a person under
          18, we will delete it.
        </p>

        <h2>12. Contact our privacy officer</h2>
        <p>
          Questions, access requests, corrections, withdrawal of consent, or
          complaints should be directed to:
        </p>
        <p style={{padding:"12px 16px",background:"var(--surface-muted)",borderRadius:10,fontSize:15,lineHeight:1.6}}>
          <b>Privacy Officer, Canadian Auto Loan</b><br/>
          1485 Laperriere Ave, Ottawa, ON K1Z 7S8<br/>
          Email: <b>info@canadianautoloan.net</b><br/>
          Phone: <b className="tnum">(613) 700-8641</b>
        </p>
        <p>
          We will respond to your request within 30 days. If you are not
          satisfied with our response, you may also contact:
        </p>
        <ul>
          <li><b>The Office of the Privacy Commissioner of Canada</b> — priv.gc.ca, 1-800-282-1376</li>
          <li><b>(Quebec residents)</b> the Commission d'accès à l'information du Québec — cai.gouv.qc.ca, 1-888-528-7741</li>
        </ul>

        <h2>13. Changes to this policy</h2>
        <p>
          We may update this policy from time to time. When we do, we will
          update the "last updated" date below. Material changes will be
          highlighted on this page for at least 30 days after they take effect.
        </p>

        <p className="legal-meta">
          Canadian Auto Loan · 1485 Laperriere Ave, Ottawa, ON K1Z 7S8 · Last updated 2026-06-02
        </p>
      </article>

      <div className="mt-12 text-center">
        <Link to="/apply" className="btn btn-primary btn-lg">Start application <Icon name="arrowRight" size={16}/></Link>
      </div>

      <style>{`
        .legal { color: var(--text); font-size: 16px; line-height: 1.7; }
        .legal h2 { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; margin: 36px 0 8px; }
        .legal h2:first-child { margin-top: 0; }
        .legal p { margin: 12px 0; color: var(--text); }
        .legal ul { margin: 12px 0; padding-left: 24px; }
        .legal li { margin: 6px 0; }
        .legal-meta { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--text-soft); font-size: 13px; }
      `}</style>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 404
// ─────────────────────────────────────────────────────────────
function NotFound() {
  return (
    <div className="container" style={{padding: "120px 0", maxWidth: 640, textAlign:"center"}}>
      <div className="tnum" style={{
        fontSize: 160, fontWeight: 700, letterSpacing: "-0.05em",
        lineHeight: 1, color: "var(--primary)",
        background: "linear-gradient(180deg, var(--primary) 0%, oklch(0.58 0.2 35) 100%)",
        WebkitBackgroundClip: "text",
        WebkitTextFillColor: "transparent",
        marginBottom: 16,
      }}>404</div>
      <h1 className="h1">This road doesn't lead anywhere.</h1>
      <p className="lede mt-4" style={{maxWidth: 460, margin: "20px auto 0"}}>
        The page you're looking for doesn't exist, or has moved. Don't worry —
        your application data is safe.
      </p>
      <div className="mt-8" style={{display:"flex",gap:12,justifyContent:"center",flexWrap:"wrap"}}>
        <Link to="/" className="btn btn-primary btn-lg">Back to home</Link>
        <Link to="/apply" className="btn btn-secondary btn-lg">Start application</Link>
      </div>
      <div className="mt-12 small">
        Need help? Call <b className="tnum">(613) 700-8641</b> · Mon–Fri, 10 AM – 5 PM
      </div>
    </div>
  );
}

Object.assign(window, {
  Financing, About, CreditConsent, PrivacyPolicy, NotFound, FinancingDisclosureCard,
});