// ─────────────────────────────────────────────────────────────────────────────
// AutoInsureWire — InsurTech · Videos · Guides · Glossary
// Matches existing editorial aesthetic: Source Serif 4, Inter, JetBrains Mono
// Cream paper, deep ink, cobalt + rust accents
// ─────────────────────────────────────────────────────────────────────────────

// ── DATA ─────────────────────────────────────────────────────────────────────

const INSURTECH_COMPANIES = [
  {
    slug: "clearcover",
    name: "Clearcover",
    tagline: "API-first auto insurance for embedded channels",
    stage: "Series E",
    raised: "$200M+",
    hq: "Chicago, IL",
    founded: 2016,
    tag: "FUNDING",
    category: "Embedded",
    summary: "Clearcover has built its entire distribution strategy around embedding insurance at the point of vehicle purchase — dealer groups, lenders, and finance platforms. Its REST API allows partners to quote, bind, and service policies without the customer ever leaving the partner experience. The Series E extension announced in Q1 2026 brings the total capital raised above $200M and funds expansion into 11 additional dealer-group integrations.",
    highlights: ["API-first architecture binds in under 60 seconds","Now embedded in 47 dealer groups nationwide","Claims NPS 22 points above industry average","Loss ratio held below 65% for 6 consecutive quarters"],
    sources: ["Insurance Journal","Coverager"],
    lastVerified: "May 9, 2026",
  },
  {
    slug: "root-insurance",
    name: "Root Insurance",
    tagline: "Telematics-first personal auto — AI claims triage",
    stage: "Public (ROOT)",
    raised: "NYSE listed",
    hq: "Columbus, OH",
    founded: 2015,
    tag: "PRODUCT",
    category: "Telematics",
    summary: "Root Insurance pioneered the smartphone-telematics model — a test-drive period before binding determines the base rate — and has now extended AI into first-notice-of-loss triage. Its AI claims system launched across the full personal auto book in Q2 2026, routing simple claims to automated settlement and flagging complex losses for human adjusters within seconds of the FNOL call.",
    highlights: ["AI triage live across 100% of personal auto FNOL","Average simple-claim settlement time reduced to 4.2 hours","Telematics pricing model now covers 34 states","Stock recovered to $8.40 after two-year post-IPO trough"],
    sources: ["InsuranceNewsNet","Insurance Business Magazine US"],
    lastVerified: "May 8, 2026",
  },
  {
    slug: "branch-insurance",
    name: "Branch",
    tagline: "Bundled home + auto at checkout speed",
    stage: "Series C",
    raised: "$147M",
    hq: "Columbus, OH",
    founded: 2019,
    tag: "EXPANSION",
    category: "Bundling",
    summary: "Branch's core thesis is that the insurance purchase should take the same time as buying a coffee — pre-filling the application using publicly available data so customers only confirm, not enter. The bundled home-and-auto product now expanding to Ohio and Michigan tests whether the model holds in high-liability no-fault states where claims severity is structurally higher.",
    highlights: ["Quote-to-bind in under 3 minutes for most applicants","Bundled home + auto saves customers avg $489/yr","OH + MI expansion increases addressable market by 18%","Reinsurance backed by Munich Re and Hannover Re"],
    sources: ["Coverager","Insurance Journal"],
    lastVerified: "May 7, 2026",
  },
  {
    slug: "loop-insurance",
    name: "Loop",
    tagline: "Removing credit score from auto insurance pricing",
    stage: "Series A",
    raised: "$35M",
    hq: "Austin, TX",
    founded: 2019,
    tag: "LAUNCH",
    category: "Equity",
    summary: "Loop has built its brand around a single regulatory position: auto insurance pricing should not use credit scores, ZIP code proxies, or other factors it argues are racial-equity proxies. The Texas launch is its first in a large, deregulated market. Early data suggests Loop is attracting drivers who have been priced out of standard markets — a riskier pool on paper, but Loop argues its telematics data is a better predictor than credit.",
    highlights: ["No credit score in pricing model — behavioral data only","Texas: 2nd largest auto insurance market in US","Loss ratio not yet disclosed — 18-month seasoning expected","Backed by True Ventures, Precursor Ventures, HBCU-focused VCs"],
    sources: ["Insurance Business Magazine US","Coverager"],
    lastVerified: "May 6, 2026",
  },
  {
    slug: "zendrive",
    name: "Zendrive",
    tagline: "Telematics-as-a-service — B2B and emerging direct",
    stage: "Series C",
    raised: "$90M",
    hq: "San Francisco, CA",
    founded: 2013,
    tag: "BETA",
    category: "TaaS",
    summary: "Zendrive's primary business is selling driving-behavior data to fleet operators and carriers as a B2B service. The TaaS direct-to-consumer beta is a departure — offering individual drivers a portable telematics score they can share with any participating carrier to demonstrate safe-driver status and unlock discounts. If the portable-score model gains regulatory acceptance, it could shift pricing power toward drivers.",
    highlights: ["Portable telematics score concept first to market","Scoring algorithm validated against 8B miles of data","iOS beta — Android release H2 2026","Carrier partnerships in negotiation — 4 LOIs disclosed"],
    sources: ["Insurance Journal","InsuranceNewsNet"],
    lastVerified: "May 5, 2026",
  },
  {
    slug: "just-insurance",
    name: "Just",
    tagline: "Pay-per-mile for EV owners — the mileage-first model",
    stage: "Seed+",
    raised: "$18M",
    hq: "San Francisco, CA",
    founded: 2021,
    tag: "PRODUCT",
    category: "Usage-Based",
    summary: "Just targets the specific segment of EV owners who drive far fewer miles than the average driver — work-from-home professionals, urban apartment dwellers with a car for weekend trips, retirees. It connects to the vehicle's OBD or connected-car API to measure actual miles driven and bills accordingly. Monthly premiums for low-mileage EV drivers average $42 — well below the $180–220 EV market average.",
    highlights: ["Avg $42/month for drivers under 500 miles/month","Direct OBD-II and OEM connected-car integration","EV-specific repair network partnerships — 6 service chains","California and Oregon live; 4 states pending DOI approval"],
    sources: ["Coverager","InsuranceNewsNet"],
    lastVerified: "May 4, 2026",
  },
];

const VIDEOS_DATA = [
  {
    slug: "ev-insurance-explained",
    title: "Why EV Insurance Costs More — and How to Cut the Gap",
    duration: "8:42",
    category: "EV Coverage",
    host: "Edward Dube",
    published: "May 6, 2026",
    views: "14,200",
    thumbnail: "ev-coverage",
    description: "Electric vehicle owners pay 15–25% more for auto insurance than equivalent gas-vehicle drivers. We break down the four concrete reasons — battery replacement exposure, thin repair networks, parts lead times, and total-loss frequency — and walk through the comparison strategies that cut the gap.",
    chapters: [
      { t: "0:00", label: "The 23% premium gap — real numbers" },
      { t: "1:44", label: "Why battery replacement exposure matters" },
      { t: "3:12", label: "Repair network concentration risk" },
      { t: "5:30", label: "Which carriers price EVs more competitively" },
      { t: "7:15", label: "Comparison checklist for EV owners" },
    ],
    relatedArticle: "ev-insurance-premium-gap-2026",
  },
  {
    slug: "telematics-deep-dive",
    title: "Telematics: What the App Is Actually Tracking (And When to Opt Out)",
    duration: "11:18",
    category: "Telematics",
    host: "Leah Finesse",
    published: "Apr 28, 2026",
    views: "22,800",
    thumbnail: "telematics",
    description: "Usage-based insurance offers 10–25% discounts for safe drivers — but the data collection is broader than most policyholders realize. We show you exactly what is tracked, when tracking harms your rate, and which programs are actually worth it based on current carrier data.",
    chapters: [
      { t: "0:00", label: "What telematics programs actually measure" },
      { t: "2:05", label: "The late-night penalty — how much it costs" },
      { t: "4:40", label: "Hard braking: what counts, what doesn't" },
      { t: "6:55", label: "When to opt in vs. opt out" },
      { t: "9:30", label: "Best programs by carrier — 2026 rankings" },
    ],
    relatedArticle: "telematics-deep-dive",
  },
  {
    slug: "ai-fraud-claims",
    title: "AI-Generated Crash Photos — How Carriers Detect Them",
    duration: "7:55",
    category: "Fraud",
    host: "Edward Dube",
    published: "Apr 25, 2026",
    views: "31,500",
    thumbnail: "fraud",
    description: "Following the Cornell study on AI-generated insurance fraud, we sit down with two claims investigators to demonstrate the detection workflow — metadata analysis, lighting consistency checks, and cross-referencing with telematics data — and what honest drivers can do to protect their legitimate claims.",
    chapters: [
      { t: "0:00", label: "The Cornell study findings" },
      { t: "1:30", label: "Live demo: what the detector sees" },
      { t: "3:45", label: "Metadata is the tell — every time" },
      { t: "5:20", label: "Protecting your honest claim" },
      { t: "6:50", label: "The NICB fraud tip line" },
    ],
    relatedArticle: "ai-generated-crash-fraud-cornell-study",
  },
  {
    slug: "sr22-explained",
    title: "SR-22 Insurance Explained: What It Is, What It Costs, How to Get Out",
    duration: "9:10",
    category: "Regulation",
    host: "Leah Finesse",
    published: "Apr 15, 2026",
    views: "44,100",
    thumbnail: "regulation",
    description: "An SR-22 is not insurance — it is a certificate filed with your state DMV proving you carry the required minimums. We explain who needs it, how long it lasts, what it costs across 10 states, and the exact timeline for removal.",
    chapters: [
      { t: "0:00", label: "SR-22 vs. FR-44 — the difference" },
      { t: "1:55", label: "Which violations trigger SR-22" },
      { t: "3:40", label: "Cost comparison: 10 states" },
      { t: "6:00", label: "The 3-year clock — how it works" },
      { t: "7:45", label: "Non-owner SR-22 for suspended drivers" },
    ],
    relatedArticle: null,
  },
  {
    slug: "florida-pip-explained",
    title: "Florida PIP: Why Your Premiums Are So High and What's Actually Changing",
    duration: "12:04",
    category: "Regulation",
    host: "Edward Dube",
    published: "Apr 18, 2026",
    views: "18,700",
    thumbnail: "regulation",
    description: "Florida's Personal Injury Protection system is the single largest driver of the state's famously high auto insurance premiums. We trace the money — from fraudulent clinics to staged accidents to legislative inaction — and assess the 2026 reform package's realistic impact.",
    chapters: [
      { t: "0:00", label: "PIP: the $10,000 you can't opt out of" },
      { t: "2:30", label: "Fraud clinic pipeline — how it works" },
      { t: "5:15", label: "The 2026 reform proposals" },
      { t: "8:00", label: "What carriers are actually pricing in" },
      { t: "10:30", label: "Timeline and what drivers should do now" },
    ],
    relatedArticle: "florida-pip-no-fault-reform-pressure",
  },
  {
    slug: "fleet-insurance-guide-video",
    title: "Commercial Fleet Insurance: Coverage Gaps Most Small Businesses Miss",
    duration: "10:28",
    category: "Commercial Fleet",
    host: "Marcus Osei",
    published: "Apr 10, 2026",
    views: "9,300",
    thumbnail: "commercial-fleet",
    description: "A standard commercial auto policy has four coverage gaps that catch small fleet operators off guard: hired-auto, non-owned auto, cargo liability, and the personal-use exclusion. We walk through each gap, what it costs when it's uncovered, and how to close it.",
    chapters: [
      { t: "0:00", label: "The four gaps — overview" },
      { t: "1:50", label: "Hired auto: rental vehicles for business" },
      { t: "4:10", label: "Non-owned auto: employee vehicles" },
      { t: "6:30", label: "Cargo liability basics" },
      { t: "8:45", label: "Personal-use exclusion — the hidden trap" },
    ],
    relatedArticle: "commercial-fleet-guide",
  },
];

const GUIDES_DATA = [
  {
    slug: "how-much-auto-insurance-do-i-need",
    title: "How Much Auto Insurance Do You Actually Need?",
    subtitle: "State minimums are a legal floor, not a recommendation. Here is the full coverage framework.",
    category: "Buying Guide",
    readTime: 14,
    author: "Edward Dube",
    reviewer: "Daniel Ndhlala",
    lastVerified: "May 1, 2026",
    featured: true,
    intro: "Every state requires a minimum level of auto insurance, but those minimums are calibrated to protect other drivers from you — not to protect your assets, income, or financial future. A driver with $30,000 in bodily injury liability coverage causing $180,000 in medical bills faces $150,000 in personal exposure. This guide walks through the right coverage levels for different financial situations.",
    sections: [
      {
        h2: "What does 100/300/100 actually mean?",
        body: "Liability coverage is expressed as three numbers: per-person bodily injury limit / per-accident bodily injury limit / property damage limit. 100/300/100 means $100,000 per injured person, $300,000 total per accident, $100,000 for property damage. Most consumer advocates recommend at least 100/300/100 for drivers with meaningful assets — savings, home equity, retirement accounts, or future earning capacity.",
      },
      {
        h2: "How much liability coverage do you need?",
        body: "A simple rule: your liability limits should equal or exceed your net worth. If you have $200,000 in assets, carry at least $200,000 in per-accident liability. If your assets exceed $300,000, consider an umbrella policy — typically $1M of additional liability coverage for $200–400 per year — which sits above your auto and home policies.",
      },
      {
        h2: "Should you add uninsured motorist coverage?",
        body: "Yes, and at the same limits as your liability. Approximately 13% of US drivers are uninsured, and rates exceed 20% in states like Mississippi and Michigan. If an uninsured driver totals your car and hospitalizes you, UM/UIM coverage is the only thing that pays your medical bills and vehicle replacement — your own liability coverage protects others, not you.",
      },
      {
        h2: "When is full coverage worth it?",
        body: "Comprehensive and collision coverage are worth carrying as long as your vehicle's actual cash value exceeds roughly 10x the annual combined cost of those coverages. A vehicle worth $12,000 paying $900/year in comp and collision sits right at the break-even. Once the vehicle depreciates below that threshold, self-insuring makes more mathematical sense.",
      },
    ],
    faq: [
      { q: "What is the minimum auto insurance required by law?", a: "Minimums vary by state, from $10,000/$20,000 in Florida to $50,000/$100,000 in several states after recent increases. See our state-by-state minimums hub for current figures verified against each state DOI." },
      { q: "Does umbrella insurance cover auto accidents?", a: "Yes — umbrella coverage extends your liability limits for auto, home, and personal liability above the underlying policy limits. Most umbrella policies require you to carry at least 100/300 on your auto policy as a prerequisite." },
      { q: "What coverage do I need for a leased or financed vehicle?", a: "Lenders and lessors require comprehensive and collision, typically with a maximum deductible of $500–1,000. They are listed as loss payee on the policy. Also consider GAP insurance if your loan balance exceeds the vehicle's ACV." },
    ],
    callout: "The gap between the cheapest and most appropriate coverage level often costs less than $30/month — but the gap between appropriate coverage and a major at-fault accident can be six figures.",
  },
  {
    slug: "sr22-complete-guide",
    title: "SR-22 Insurance: The Complete Guide for 2026",
    subtitle: "What it is, what triggers it, what it costs, and how to get out.",
    category: "Specialty Coverage",
    readTime: 11,
    author: "Daniel Ndhlala",
    reviewer: "Leah Finesse",
    lastVerified: "Apr 28, 2026",
    featured: false,
    intro: "An SR-22 is not an insurance policy — it is a certificate of financial responsibility that your insurer files with your state DMV to prove you carry the required minimum coverage. It is required after certain driving violations and typically stays on your record for three years. Understanding the mechanics helps you navigate the process without overpaying.",
    sections: [
      {
        h2: "Which violations trigger an SR-22 requirement?",
        body: "DUI or DWI convictions are the most common trigger. Others include: driving uninsured, reckless driving convictions, at-fault accidents while uninsured, multiple moving violations within a short period, and license suspension or revocation. Some states also require SR-22 after a driver's license restoration.",
      },
      {
        h2: "How much does SR-22 filing cost?",
        body: "The filing itself typically costs $25–50 as a one-time fee. The real cost is the rate increase — SR-22 filers pay a significant surcharge that varies by violation and carrier. A DUI-triggered SR-22 adds an average of $1,300–2,200 per year to premiums nationally, with significant variation by state. Comparison shopping among high-risk-specialist carriers is especially important in this situation.",
      },
      {
        h2: "How long does SR-22 last?",
        body: "Most states require three years of continuous SR-22 coverage. The clock starts from the violation date or license reinstatement, depending on the state. Any lapse in coverage resets the clock in most states — which is the single most expensive mistake SR-22 filers make.",
      },
      {
        h2: "Non-owner SR-22: if you don't own a car",
        body: "If you need SR-22 to reinstate your license but don't own a vehicle, a non-owner SR-22 policy provides the required liability coverage when you drive borrowed or rented vehicles. Non-owner policies are significantly less expensive than standard policies — typically $200–500 per year plus the SR-22 surcharge.",
      },
    ],
    faq: [
      { q: "Can I get SR-22 insurance without owning a car?", a: "Yes. A non-owner SR-22 policy covers you when you drive vehicles you don't own. It provides liability coverage only — no comprehensive or collision — but satisfies the state filing requirement." },
      { q: "What happens if my SR-22 lapses?", a: "Your insurer must notify the state, which typically triggers an immediate license suspension. The SR-22 period then restarts from the date of restoration. Continuous coverage is essential — even a single day's lapse has consequences." },
      { q: "Is FR-44 the same as SR-22?", a: "No. FR-44 is used only in Florida and Virginia, typically for DUI offenses, and requires higher liability limits than SR-22 (2x the state minimums in Florida, for example). The filing mechanism is the same — a certificate filed by your insurer — but the coverage requirement is stricter." },
    ],
    callout: "Compare at least 5 carriers before accepting any SR-22 quote. Price variation for high-risk drivers exceeds $2,000/year — more than any other driver segment.",
  },
  {
    slug: "ev-insurance-buyers-guide",
    title: "EV Insurance Buyers Guide 2026: How to Close the 23% Premium Gap",
    subtitle: "Electric vehicle owners overpay for insurance more than any other segment. Here is exactly why — and how to fix it.",
    category: "EV Coverage",
    readTime: 12,
    author: "Edward Dube",
    reviewer: "Daniel Ndhlala",
    lastVerified: "May 9, 2026",
    featured: true,
    intro: "Electric vehicles cost 15–25% more to insure than equivalent gas-powered vehicles in 2026. The reasons are concrete: higher repair costs, battery-pack replacement exposure, longer parts lead times, and a thinner specialist repair-shop network. Most of these factors are improving — but carriers are pricing on current-year data, not projections. Understanding the mechanics gives you leverage at renewal.",
    sections: [
      {
        h2: "Why does EV insurance cost more?",
        body: "Four structural factors drive the premium gap. First, battery-pack replacement costs $8,000–22,000 depending on the vehicle — insurers price this exposure in. Second, EV-specific repair requires certified technicians and equipment, available at a fraction of general body shops. Third, parts lead times for imported EV components average 2–4 weeks longer than gas vehicles. Fourth, EV total-loss rates are higher because minor accidents can trigger battery-management system damage that makes repair uneconomical.",
      },
      {
        h2: "Which carriers price EVs most competitively?",
        body: "USAA (military eligible), State Farm, and Tesla's own insurance product (available in 12 states) consistently show the lowest rates for EV owners in independent 2026 data. Progressive and Nationwide fall in the middle. Travelers and Chubb price EV risk most conservatively. The spread between the cheapest and most expensive quote for the same EV and driver profile exceeds $1,100 per year — more than any other vehicle segment.",
      },
      {
        h2: "Should you get GAP insurance for an EV?",
        body: "More urgently than for gas vehicles. EVs depreciate faster in the first 18 months, and battery degradation creates an additional gap between loan balance and ACV. If your loan balance exceeds your EV's current ACV — common in the first 3 years of ownership — GAP insurance is essential. Avoid dealer GAP products; bank and credit union policies average 40–60% less.",
      },
      {
        h2: "Does home charging affect your coverage?",
        body: "Rarely directly — but some carriers require disclosure of a Level 2 charger installation for home coverage underwriting. Confirm your home insurer covers the charging equipment (typically $800–2,500 for a Level 2 unit). Most standard homeowners policies cover it; some require a rider.",
      },
    ],
    faq: [
      { q: "Is Tesla Insurance worth it?", a: "For Tesla owners in the 12 states where it's available, Tesla Insurance is often 20–40% below third-party carriers, particularly for newer models. The tradeoff is that it requires telematics participation and the claims service is Tesla-controlled — reviews are mixed on the claims experience compared to major carriers." },
      { q: "Does charging at public stations affect my coverage?", a: "No — coverage follows the vehicle, not the charging method. However, if you are involved in an accident while pulling out of a charging bay, the claim is handled exactly like any parking-lot incident." },
      { q: "Does EV insurance cost more for used EVs?", a: "Generally yes, because the battery's state of health is unknown and replacement cost is the same regardless of vehicle age. Some carriers charge the same rate for a 5-year-old EV as a new one. Request an ACV appraisal before insuring a used EV to avoid overpaying." },
    ],
    callout: "The single largest savings move for EV owners: compare at least 5 carriers including Tesla Insurance if eligible. Average savings reported: $740–1,100 per year.",
  },
  {
    slug: "gap-insurance-guide",
    title: "GAP Insurance: When You Need It, When You Don't, and Where to Buy It Cheapest",
    subtitle: "Dealer GAP products are the most marked-up insurance product in existence. Here is what the dealers don't tell you.",
    category: "Specialty Coverage",
    readTime: 9,
    author: "Leah Finesse",
    reviewer: "Edward Dube",
    lastVerified: "Apr 20, 2026",
    featured: false,
    intro: "GAP insurance — Guaranteed Asset Protection — covers the difference between what your insurer pays for a total-loss vehicle and what you still owe on the loan or lease. It exists because vehicles depreciate faster than most loans amortize. Understanding when it's necessary and where to buy it cheapest can save $800–1,500 over the life of a loan.",
    sections: [
      {
        h2: "When do you actually need GAP insurance?",
        body: "You need GAP if your loan balance exceeds your vehicle's ACV (actual cash value). This is most common in the first 18–30 months of a loan, when vehicles depreciate 15–25% while loan principal declines slowly. You're also at risk if you made a small down payment (under 20%), took a long loan term (72–84 months), or financed negative equity from a trade-in.",
      },
      {
        h2: "When do you not need GAP insurance?",
        body: "If you made a 20%+ down payment, have a short loan term (36–48 months), or have paid down more than 30% of the principal, your loan balance is likely below or close to ACV. Check your payoff quote against Kelley Blue Book or NADA ACV and skip GAP if the gap is small.",
      },
      {
        h2: "Where to buy GAP cheapest",
        body: "Avoid dealer GAP products almost universally. Dealer GAP averages $700–900 and is rolled into the loan, accruing interest. Your own insurer typically offers GAP as an endorsement for $20–40/year. Your bank or credit union offers standalone GAP policies for $200–350 total. The coverage is functionally identical — the pricing is not.",
      },
    ],
    faq: [
      { q: "Does GAP insurance cover my deductible?", a: "Standard GAP insurance does not. Some products marketed as 'GAP Plus' or 'deductible waiver' cover the deductible — read the declarations carefully. Many consumers buy standard GAP thinking the deductible is covered and are surprised at settlement." },
      { q: "Can I cancel GAP insurance?", a: "Yes — if you financed through a dealer, you can cancel the dealer GAP policy for a prorated refund. Contact the dealer's finance office and your lender directly. If you added GAP through your insurer, remove it at any renewal once your loan balance is below your vehicle's ACV." },
      { q: "Does GAP insurance cover theft?", a: "Yes — GAP covers the loan-to-ACV gap on any total loss, including theft claims paid by comprehensive coverage. It does not cover mechanical breakdown, missed payments, or anything other than a total-loss settlement gap." },
    ],
    callout: "Never buy dealer GAP without comparing your insurer's endorsement price first. The same product costs $700–900 at a dealer and $20–40/year added to your existing policy.",
  },
  {
    slug: "fleet-insurance-small-business",
    title: "Commercial Fleet Insurance for Small Businesses: The Complete 2026 Guide",
    subtitle: "Five vehicles or fifty — here is the coverage framework that protects your fleet, your employees, and your balance sheet.",
    category: "Commercial Fleet",
    readTime: 15,
    author: "Leah Finesse",
    reviewer: "Daniel Ndhlala",
    lastVerified: "May 3, 2026",
    featured: false,
    intro: "Commercial fleet insurance is significantly more complex than personal auto — and significantly more expensive when gaps are discovered after a claim. Small business owners with 1–20 vehicles represent the most underinsured segment in commercial auto. This guide covers the four critical coverage gaps, how to build a complete fleet policy, and how to manage premium cost without cutting coverage.",
    sections: [
      {
        h2: "The four coverage gaps that catch small fleets off guard",
        body: "Hired auto covers rental and borrowed vehicles used for business. Non-owned auto covers employee personal vehicles driven on company business. Cargo liability covers goods in transit if not covered by the customer's policy. The personal-use exclusion means standard commercial auto does not cover employees using company vehicles for personal errands — a gap that creates significant exposure if the employee causes an accident.",
      },
      {
        h2: "How fleet size affects your options",
        body: "Fleets of 1–4 vehicles typically use commercial auto endorsements on business owner's policies. Fleets of 5–20 vehicles should have standalone commercial auto with all four gap endorsements. Fleets of 20+ vehicles typically qualify for fleet programs with loss-sensitive rating — premiums adjust based on actual claims experience, rewarding safety investment.",
      },
      {
        h2: "Telematics for fleet risk management",
        body: "Fleet telematics — GPS, driver behavior monitoring, dash cams — reduces commercial auto premiums 8–15% at most major commercial carriers. More importantly, dashcam footage resolves disputed-liability claims in your favor at a rate that more than covers the equipment cost. The ROI on telematics for fleets with 5+ vehicles is consistently positive within 18 months.",
      },
    ],
    faq: [
      { q: "Does my personal auto policy cover driving my van for deliveries?", a: "Almost certainly not. Most personal auto policies exclude commercial use, including delivery driving, rideshare, and any driving for compensation. A single delivery accident can void your coverage entirely if commercial use is not disclosed." },
      { q: "What is the difference between fleet insurance and individual commercial auto?", a: "Individual commercial auto policies cover specific named vehicles. Fleet policies cover any vehicle operated by the business — adding and removing vehicles is administratively simpler, and pricing is based on the overall fleet profile rather than each vehicle individually." },
      { q: "How is commercial fleet insurance priced?", a: "Underwriters look at: vehicle types, primary use, radius of operation, driver MVRs, claims history, and whether you have a formal driver safety program. The largest single premium-reduction lever is driver MVR screening — requiring clean driving records reduces both claims and premiums." },
    ],
    callout: "Have your commercial fleet policy reviewed annually by a broker who specializes in commercial auto. The gap between a correctly structured policy and a standard BOP endorsement can exceed $200,000 in uncovered exposure.",
  },
  {
    slug: "comparison-shopping-guide",
    title: "How to Compare Auto Insurance Quotes: The Step-by-Step Guide That Actually Works",
    subtitle: "Most comparison tools optimize for commission, not your savings. Here is the process that finds the real cheapest quote.",
    category: "Buying Guide",
    readTime: 10,
    author: "Edward Dube",
    reviewer: "Daniel Ndhlala",
    lastVerified: "May 8, 2026",
    featured: true,
    intro: "The auto insurance market has more price variation than almost any other consumer financial product. Two drivers with identical profiles, vehicles, and coverage needs can receive quotes that differ by $1,400 per year for identical policies. The comparison process matters — and most drivers do it wrong, comparing mismatched coverage levels, stopping at three quotes, or relying on aggregator tools that exclude key carriers.",
    sections: [
      {
        h2: "Step 1: Establish your coverage baseline",
        body: "Before comparing, decide on your target coverage levels. Lock in: liability limits, UM/UIM limits, comprehensive and collision deductibles, and any endorsements (rental reimbursement, roadside, GAP). Comparing quotes means nothing if the policies have different liability limits. Most comparison shoppers make this mistake — they find the cheapest number without noticing it's a $50,000 policy vs. a $300,000 policy.",
      },
      {
        h2: "Step 2: Get at least 5 quotes — including carriers not on aggregators",
        body: "Erie, Auto-Owners, USAA (if eligible), and Wawanesa are consistently among the cheapest carriers in specific states but don't participate in major aggregator platforms. USAA requires military service eligibility but beats all competitors for eligible drivers in nearly every market. Check direct websites for these carriers after using aggregators.",
      },
      {
        h2: "Step 3: Review the declarations page before accepting",
        body: "The quote is a marketing number. The declarations page is the legal document. Before binding, confirm: all vehicles listed, all drivers listed, exact coverage limits matching your target, deductibles correct, and all discounts applied (multi-policy, good driver, anti-theft, telematics enrollment).",
      },
      {
        h2: "Step 4: Set a renewal reminder 30 days out",
        body: "Auto renewal is the insurance industry's profit center. Rates for renewing customers drift 3–8% per year regardless of your claims history, driven by factors you can't control: local claims trends, catastrophe loads, reinsurance costs. The only defense is shopping every renewal. Set a calendar reminder 30 days before your renewal date — enough time to complete the comparison without a coverage gap.",
      },
    ],
    faq: [
      { q: "Does comparing quotes hurt my credit score?", a: "Auto insurance quotes use a soft credit inquiry, not a hard pull. Soft inquiries have no effect on your credit score regardless of how many you request. This is categorically different from loan or credit card applications." },
      { q: "Why is my renewal quote higher than my original quote?", a: "Insurers engage in 'price walking' — gradually increasing renewal premiums, counting on customer inertia. In 2026, several states have passed or are considering regulations limiting this practice, but it remains legal in most markets." },
      { q: "Is independent agent or direct carrier better?", a: "Depends on your situation. Independent agents can quote multiple carriers simultaneously and offer advocacy during claims — valuable for complex situations. Direct carriers eliminate agent commission (sometimes 10–15% of premium) and can be cheaper for straightforward policies. Most consumers benefit from trying both approaches." },
    ],
    callout: "Call (855) 629-1947 to speak with a licensed advisor who will run a multi-carrier comparison for your specific profile — no obligation, no commission pressure.",
  },
];

const GLOSSARY_TERMS = [
  { term: "Actual Cash Value (ACV)", abbr: "ACV", letter: "A", definition: "The fair market value of your vehicle immediately before a covered loss — what it would sell for, accounting for age, mileage, condition, and local market factors. ACV is what your insurer pays for a total loss, minus your deductible. It is typically less than replacement cost and less than what you owe on a loan.", relatedTerms: ["Replacement Cost Value","GAP Insurance","Total Loss"] },
  { term: "Assigned Risk Pool", letter: "A", definition: "A state-run mechanism that provides auto insurance to drivers who cannot obtain coverage in the standard market — typically because of serious driving violations, extensive claims history, or other risk factors that make them unacceptable to most carriers. Rates in assigned risk pools are significantly higher than standard market rates.", relatedTerms: ["High-Risk Driver","SR-22","Non-Standard Market"] },
  { term: "Bodily Injury Liability (BI)", abbr: "BI", letter: "B", definition: "Coverage that pays for the medical expenses, lost wages, and legal costs of other people injured in an accident you cause. Expressed as per-person/per-accident limits (e.g., $100,000/$300,000 means $100,000 maximum per injured person and $300,000 maximum per accident). Does not cover your own injuries.", relatedTerms: ["Property Damage Liability","Personal Injury Protection","Uninsured Motorist"] },
  { term: "Collision Coverage", letter: "C", definition: "Pays for damage to your vehicle from a collision with another vehicle or object, regardless of fault. Subject to your chosen deductible. Required by most lenders and lessors. Not required by any state. Worth dropping once your vehicle's ACV falls below roughly 10x the annual cost of the coverage.", relatedTerms: ["Comprehensive Coverage","Actual Cash Value","Deductible"] },
  { term: "Comprehensive Coverage", letter: "C", definition: "Pays for damage to your vehicle from non-collision events: theft, vandalism, fire, flood, hail, falling objects, animal strikes. Also required by most lenders. The deductible applies. Often called 'other than collision' (OTC) in policy documents.", relatedTerms: ["Collision Coverage","Deductible","GAP Insurance"] },
  { term: "Declarations Page", letter: "D", definition: "The summary page of your insurance policy listing the named insureds, covered vehicles, policy period, coverage types, limits, deductibles, premiums, and endorsements. The 'dec page' is the authoritative document for all coverage questions — the quote is a marketing number; the dec page is the legal agreement.", relatedTerms: ["Endorsement","Policy Period","Named Insured"] },
  { term: "Deductible", letter: "D", definition: "The amount you pay out of pocket before your insurance coverage applies to a claim. A $1,000 deductible on a $5,000 repair means you pay $1,000 and your insurer pays $4,000. Higher deductibles reduce premiums. Deductibles apply per claim, not per year. Liability coverage has no deductible — it pays from the first dollar.", relatedTerms: ["Collision Coverage","Comprehensive Coverage","Premium"] },
  { term: "Endorsement", letter: "E", definition: "A written modification to a standard insurance policy that adds, removes, or changes coverage. Examples: rental reimbursement endorsement, roadside assistance endorsement, rideshare endorsement, GAP coverage endorsement. Read your endorsements — they frequently define the scope of critical coverages.", relatedTerms: ["Declarations Page","Rider","Policy"] },
  { term: "FR-44", letter: "F", definition: "A certificate of financial responsibility required in Florida and Virginia — similar to SR-22 but with higher minimum liability requirements. Florida requires FR-44 for DUI offenders, mandating 100/300/50 liability limits (double the state minimum). Virginia requires 50/100/40.", relatedTerms: ["SR-22","DUI","Liability Coverage"] },
  { term: "GAP Insurance", letter: "G", definition: "Guaranteed Asset Protection — covers the difference between your vehicle's actual cash value (what the insurer pays on a total loss) and your outstanding loan or lease balance. Critical if you financed with less than 20% down, took a long loan term, or financed an EV (which depreciates faster). Never buy from the dealer — bank and insurer rates are 40–60% cheaper.", relatedTerms: ["Actual Cash Value","Total Loss","Financed Vehicle"] },
  { term: "High-Risk Driver", letter: "H", definition: "An insurer's designation for a driver whose profile suggests a higher-than-average probability of filing a claim. Triggers include: DUI/DWI, multiple moving violations, at-fault accidents, young driver status (under 25), lapsed coverage, or SR-22/FR-44 requirements. High-risk drivers pay significantly higher premiums and may be placed in non-standard or assigned-risk markets.", relatedTerms: ["SR-22","Assigned Risk Pool","Non-Standard Market"] },
  { term: "Loss Ratio", letter: "L", definition: "The ratio of claims paid to premiums collected, expressed as a percentage. A loss ratio of 65% means the insurer paid $65 in claims for every $100 collected in premiums. Loss ratios above 100% indicate the insurer is paying more in claims than it collects — unsustainable without investment income or reserve releases. Publicly traded insurers disclose loss ratios quarterly.", relatedTerms: ["Combined Ratio","Premium","Claims"] },
  { term: "Named Insured", letter: "N", definition: "The person or entity named on the declarations page as the primary policyholder. Named insureds have full policy rights, including cancellation rights and the ability to make changes. Drivers listed on a policy but not named as insured have coverage but not full policy rights. Lienholders on financed vehicles are typically listed as 'additional insureds' or 'loss payees.'", relatedTerms: ["Additional Insured","Declarations Page","Policy"] },
  { term: "No-Fault Insurance", letter: "N", definition: "A system used in 12 US states (including Florida, Michigan, New York, and New Jersey) where each driver's own insurer pays for their own medical expenses and lost wages after an accident, regardless of fault. Implemented through Personal Injury Protection (PIP) coverage. Intended to reduce litigation; critics argue it increases fraud and premiums.", relatedTerms: ["Personal Injury Protection","Fault State","PIP"] },
  { term: "Personal Injury Protection (PIP)", abbr: "PIP", letter: "P", definition: "Coverage required in no-fault states that pays for your own medical expenses, lost wages, and related costs after an accident, regardless of who caused it. Limits vary by state: Florida requires $10,000; Michigan allows driver-selected tiers; New York requires $50,000. PIP does not cover vehicle damage.", relatedTerms: ["No-Fault Insurance","Medical Payments","Bodily Injury Liability"] },
  { term: "Prior Approval State", letter: "P", definition: "A state where insurance companies must submit rate changes to the Department of Insurance for review and approval before they take effect. The alternative is a 'file-and-use' state, where rates can be implemented immediately and reviewed afterward. Prior approval states tend to have slower rate increases but also slower decreases.", relatedTerms: ["Rate Filing","Department of Insurance","File-and-Use"] },
  { term: "Property Damage Liability (PD)", abbr: "PD", letter: "P", definition: "Coverage that pays for damage to other people's property (vehicles, structures, fixtures) when you are at fault in an accident. Expressed as the third number in a liability limit trio (e.g., 100/300/100 — the last 100 is $100,000 PD per accident). Does not cover damage to your own vehicle.", relatedTerms: ["Bodily Injury Liability","Collision Coverage","Liability Coverage"] },
  { term: "Rate Filing", letter: "R", definition: "A formal submission by an insurance company to a state Department of Insurance requesting approval to change premium rates. Filings include actuarial justification, loss projections, and the proposed effective date. Public filings are searchable through state DOI databases and SERFF (System for Electronic Rate and Form Filing).", relatedTerms: ["Prior Approval State","Department of Insurance","SERFF"] },
  { term: "Salvage Title", letter: "S", definition: "A vehicle title designation applied after an insurer declares a vehicle a total loss and pays the claim. The insurer takes ownership of the salvage, which can be repaired and resold with a branded title. Salvage-titled vehicles are significantly harder to insure for full coverage, harder to finance, and worth 20–40% less than clean-titled equivalents.", relatedTerms: ["Total Loss","Actual Cash Value","Rebuilt Title"] },
  { term: "SR-22", letter: "S", definition: "A certificate of financial responsibility — not an insurance policy — filed by your insurer with your state DMV proving you carry required minimum liability coverage. Required after certain violations (DUI, driving uninsured, license suspension). Typically required for three years. Any lapse in coverage triggers immediate DMV notification and usually license suspension.", relatedTerms: ["FR-44","High-Risk Driver","Assigned Risk Pool"] },
  { term: "Subrogation", letter: "S", definition: "The legal right of your insurer to pursue the at-fault party for reimbursement after paying your claim. If your insurer pays you for damage caused by another driver, it can sue that driver's insurer to recover the payment. Subrogation is why you should not release a third party from liability without your insurer's consent.", relatedTerms: ["At-Fault","Liability Coverage","Claims"] },
  { term: "Telematics", letter: "T", definition: "Technology that monitors driving behavior — speed, braking, acceleration, time of day, mileage — through a smartphone app, OBD-II device, or connected-car API. Used by insurers in usage-based insurance (UBI) programs to offer discounts to verified safe drivers. Discounts typically range from 10–25%. Risky driver behaviors — hard braking, late-night driving — can result in surcharges at some carriers.", relatedTerms: ["Usage-Based Insurance","OBD-II","UBI"] },
  { term: "Total Loss", letter: "T", definition: "An insurer's determination that repairing a damaged vehicle is uneconomical — typically when repair cost exceeds 70–80% of the vehicle's ACV, though thresholds vary by state and carrier. On a total loss, the insurer pays ACV minus deductible and takes ownership of the salvage. If your loan balance exceeds ACV, GAP insurance covers the difference.", relatedTerms: ["Actual Cash Value","GAP Insurance","Salvage Title"] },
  { term: "Umbrella Policy", letter: "U", definition: "A personal liability policy that provides additional coverage above the limits of your underlying auto and home policies. A $1M umbrella policy typically costs $200–400 per year and requires underlying auto liability of at least 100/300. Activates when underlying limits are exhausted. Covers claims that may not be covered by underlying policies, including certain personal liability claims.", relatedTerms: ["Liability Coverage","Named Insured","Excess Liability"] },
  { term: "Uninsured/Underinsured Motorist (UM/UIM)", abbr: "UM/UIM", letter: "U", definition: "Coverage that pays for your medical bills and sometimes vehicle damage when you are hit by a driver who has no insurance (UM) or insufficient insurance (UIM) to cover your losses. Required in some states, optional in others. Should be carried at the same limits as your liability coverage. Approximately 13% of US drivers are uninsured.", relatedTerms: ["Bodily Injury Liability","No-Fault Insurance","Personal Injury Protection"] },
  { term: "Usage-Based Insurance (UBI)", abbr: "UBI", letter: "U", definition: "Auto insurance priced partly or fully based on actual driving behavior, measured through telematics. Includes pay-per-mile programs (Metromile, Just) and behavior-based programs (Root, Progressive Snapshot, State Farm Drive Safe & Save). Discounts are available to verified safe and low-mileage drivers; surcharges apply at some carriers for identified risky behaviors.", relatedTerms: ["Telematics","Pay-Per-Mile","OBD-II"] },
];


// ── INSURTECH SECTION ─────────────────────────────────────────────────────────

const InsurTechTicker = () => {
  const lang = useLang();
  const items = window.AIW_DATA.INSURTECH_TICKER;
  return (
    <div className="bg-ink text-paper overflow-hidden">
      <div className="max-w-[1280px] mx-auto px-6 h-10 flex items-center gap-4">
        <span className="label text-rust text-[11px] uppercase tracking-widest flex-shrink-0">{tp("insurtech.eyebrow")}</span>
        <div className="flex items-center gap-8 overflow-hidden" style={{maskImage:"linear-gradient(to right,transparent,black 40px,black calc(100% - 40px),transparent)"}}>
          {[...items,...items].map((it0,i) => { const e = window.esTicker ? (window.esTicker(it0.co) || {}) : {}; const it = { ...it0, ...e }; return (
            <span key={i} className="flex items-center gap-2 text-[12px] flex-shrink-0 data">
              <span className="text-rust font-semibold">{it.co}</span>
              <span className="text-paper/60">·</span>
              <span className="text-paper/85">{it.note}</span>
              <span className="border border-rust/60 text-rust px-1.5 py-0.5 text-[9px] tracking-wider">{it.tag}</span>
            </span>
          ); })}
        </div>
      </div>
    </div>
  );
};

const InsurTechCard = ({ co: co0, onExpand, expanded }) => { const co = { ...co0, ...(window.esInsurtech ? (window.esInsurtech(co0.slug) || {}) : {}) }; return (
  <div className={`border-2 transition-colors ${expanded ? "border-cobalt" : "border-rule hover:border-ink"} bg-paper`}>
    <div className="p-6">
      <div className="flex items-start justify-between gap-4 mb-4">
        <div>
          <div className="flex items-center gap-2 mb-2">
            <span className="border border-rule text-[10px] data uppercase tracking-widest px-2 py-0.5 text-mute">{co.tag}</span>
            <span className="border border-rule text-[10px] data uppercase tracking-widest px-2 py-0.5 text-cobalt border-cobalt/40">{co.category}</span>
          </div>
          <h3 className="font-display font-bold text-[20px] text-ink h-tight">{co.name}</h3>
          <p className="text-[13px] text-ink2 mt-1">{co.tagline}</p>
        </div>
        <div className="flex-shrink-0 text-right">
          <div className="label text-rust text-[10px] mb-1">{co.stage}</div>
          <div className="font-display font-bold text-[18px] text-ink">{co.raised}</div>
          <div className="text-[11px] text-mute">{co.hq}</div>
        </div>
      </div>

      <p className="text-[14px] text-ink2 leading-relaxed mb-4">{co.summary}</p>

      <ul className="space-y-1.5 mb-5">
        {co.highlights.map((h,i) => (
          <li key={i} className="flex items-start gap-2 text-[13px]">
            <span className="text-cobalt mt-0.5 flex-shrink-0">✓</span>
            <span className="text-ink2">{h}</span>
          </li>
        ))}
      </ul>

      <div className="flex items-center justify-between pt-4 border-t border-rule">
        <div className="flex items-center gap-2 text-[11px] text-mute data">
          {co.sources.map((s,i) => <span key={i} className="border border-rule px-2 py-0.5">{s}</span>)}
          <span>· {tp("insurtech.lastVerified")} {co.lastVerified}</span>
        </div>
        <button onClick={() => onExpand(co.slug)} className="label text-cobalt text-[12px] hover:underline">
          {expanded ? tp("insurtech.collapse") : tp("insurtech.readMore")}
        </button>
      </div>
    </div>
  </div>
); };

const InsurTechPage = () => {
  const lang = useLang();
  const [expanded, setExpanded] = useState(null);
  const toggle = slug => setExpanded(e => e === slug ? null : slug);

  return (
    <div className="max-w-[1280px] mx-auto px-6 py-12">
      <AdSlot id="insurtech-leaderboard" size="728×90 · Leaderboard" className="mb-10" />

      <div className="mb-10">
        <div className="label text-rust mb-3">{tp("insurtech.eyebrow")}</div>
        <h1 className="font-display font-extrabold text-[48px] h-tight mb-4 leading-none">
          {tp("insurtech.title")}<br/>{tp("insurtech.titleBreak")}
        </h1>
        <p className="text-[17px] text-ink2 leading-relaxed max-w-[68ch]">
          {tp("insurtech.blurb")}
        </p>
        <div className="mt-6 flex items-center gap-6 text-[13px] text-mute data uppercase tracking-wider">
          <span>{INSURTECH_COMPANIES.length} {lang==="es"?"empresas perfiladas":"companies profiled"}</span>
          <span>·</span>
          <span>{lang==="es"?"Actualizado 9 may 2026":"Last updated May 9, 2026"}</span>
          <span>·</span>
          <span>{lang==="es"?"Fuentes":"Sources"}: {window.AIW_DATA.PUBLISHERS.join(" · ")}</span>
        </div>
      </div>

      <InsurTechTicker />

      <div className="grid md:grid-cols-2 gap-6 mt-10 mb-12">
        {INSURTECH_COMPANIES.map(co => (
          <InsurTechCard key={co.slug} co={co} onExpand={toggle} expanded={expanded === co.slug} />
        ))}
      </div>

      <Newsletter />
    </div>
  );
};

window.InsurTechPage = InsurTechPage;


// ── VIDEOS SECTION ────────────────────────────────────────────────────────────

const VideoCard = ({ v: v0, onPlay }) => { const v = { ...v0, ...(window.esVideo ? (window.esVideo(v0.slug) || {}) : {}) }; return (
  <div className="group cursor-pointer" onClick={() => onPlay(v0)}>
    <div className="relative mb-3" style={{aspectRatio:"16/9"}}>
      <HeroArt category={v.category} label={v.thumbnail} ratio="16/9" />
      <div className="absolute inset-0 flex items-center justify-center">
        <div className="w-14 h-14 rounded-full bg-ink/80 flex items-center justify-center group-hover:bg-rust transition-colors">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="white"><polygon points="5,3 19,12 5,21"/></svg>
        </div>
      </div>
      <div className="absolute bottom-2 right-2 bg-ink/90 text-paper text-[11px] data px-2 py-0.5">{v.duration}</div>
    </div>
    <div className="mb-1.5">
      <CategoryPill label={v.category} />
    </div>
    <h3 className="font-display font-semibold text-[17px] h-tight leading-tight mb-1 group-hover:text-cobalt transition-colors">{v.title}</h3>
    <div className="text-[12px] text-mute data uppercase tracking-wider">{v.host} · {v.published} · {v.views} {window.AIW_LANG==="es"?"vistas":"views"}</div>
  </div>
); };

const VideoModal = ({ v: v0, onClose }) => {
  if (!v0) return null;
  const v = { ...v0, ...(window.esVideo ? (window.esVideo(v0.slug) || {}) : {}) };
  return (
    <div className="fixed inset-0 z-50 bg-ink/80 flex items-center justify-center p-6" onClick={onClose}>
      <div className="bg-paper w-full max-w-4xl max-h-[90vh] overflow-auto border-2 border-ink" onClick={e => e.stopPropagation()}>
        <div className="flex items-center justify-between px-6 py-4 border-b border-rule">
          <CategoryPill label={v.category} />
          <button onClick={onClose} className="text-mute hover:text-ink text-[22px] leading-none">×</button>
        </div>
        <div className="relative" style={{aspectRatio:"16/9"}}>
          <HeroArt category={v.category} label={v.thumbnail} ratio="16/9" />
          <div className="absolute inset-0 flex items-center justify-center">
            <div className="w-20 h-20 rounded-full bg-ink/80 flex items-center justify-center">
              <svg width="32" height="32" viewBox="0 0 24 24" fill="white"><polygon points="5,3 19,12 5,21"/></svg>
            </div>
          </div>
          <div className="absolute bottom-3 right-3 bg-ink/90 text-paper text-[12px] data px-2 py-1">{v.duration}</div>
        </div>
        <div className="p-6">
          <h2 className="font-display font-bold text-[26px] h-tight mb-2">{v.title}</h2>
          <div className="text-[13px] text-mute data uppercase tracking-wider mb-4">
            {v.host} · {v.published} · {v.views} {window.AIW_LANG==="es"?"vistas":"views"}
          </div>
          <p className="text-[15px] text-ink2 leading-relaxed mb-6">{v.description}</p>
          <div className="bg-cream border border-rule p-5">
            <div className="label text-mute mb-3">{tp("videos.chapters")}</div>
            <div className="space-y-2">
              {v.chapters.map((ch,i) => (
                <div key={i} className="flex items-center gap-3">
                  <span className="data text-[11px] text-cobalt w-10 flex-shrink-0">{ch.t}</span>
                  <span className="text-[13px] text-ink2">{ch.label}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="mt-6 flex items-center gap-4">
            <a href={window.AIW_DATA.PHONE_HREF} className="inline-flex items-center gap-2 px-5 py-3 bg-rust text-paper hover:bg-ember transition-colors data text-[12px] tracking-wider">
              📞 {window.AIW_DATA.PHONE} — {tp("videos.talkAdvisor")}
            </a>
            <a href={window.midenmi()} target="_blank" rel="noopener" className="inline-flex items-center px-5 py-3 border-2 border-ink text-ink hover:bg-ink hover:text-paper transition-colors data text-[12px] tracking-wider">
              {tp("videos.compareQuotes")}
            </a>
          </div>
        </div>
      </div>
    </div>
  );
};

const VideosPage = () => {
  const lang = useLang();
  const [playing, setPlaying] = useState(null);
  const [filter, setFilter] = useState("All");
  const categories = ["All", ...Array.from(new Set(VIDEOS_DATA.map(v => v.category)))];
  const filtered = filter === "All" ? VIDEOS_DATA : VIDEOS_DATA.filter(v => v.category === filter);
  const featured0 = VIDEOS_DATA[0];
  const featured = { ...featured0, ...(window.esVideo ? (window.esVideo(featured0.slug) || {}) : {}) };

  return (
    <div className="max-w-[1280px] mx-auto px-6 py-12">
      <AdSlot id="videos-leaderboard" size="728×90 · Leaderboard" className="mb-10" />

      <div className="mb-10">
        <div className="label text-rust mb-3">{tp("videos.eyebrow")}</div>
        <h1 className="font-display font-extrabold text-[48px] h-tight leading-none mb-4">
          {tp("videos.title")}<br/>{tp("videos.titleBreak")}
        </h1>
        <p className="text-[17px] text-ink2 leading-relaxed max-w-[60ch]">
          {tp("videos.blurb")}
        </p>
      </div>

      {/* Featured video */}
      <div className="grid md:grid-cols-2 gap-8 mb-12 items-center">
        <div className="relative cursor-pointer group" style={{aspectRatio:"16/9"}} onClick={() => setPlaying(featured0)}>
          <HeroArt category={featured.category} label={featured.thumbnail} ratio="16/9" />
          <div className="absolute inset-0 flex items-center justify-center">
            <div className="w-20 h-20 rounded-full bg-ink/80 flex items-center justify-center group-hover:bg-rust transition-colors">
              <svg width="30" height="30" viewBox="0 0 24 24" fill="white"><polygon points="5,3 19,12 5,21"/></svg>
            </div>
          </div>
          <div className="absolute top-3 left-3 bg-rust text-paper text-[11px] data px-2 py-0.5 uppercase tracking-wider">{tp("videos.featured")}</div>
          <div className="absolute bottom-2 right-2 bg-ink/90 text-paper text-[11px] data px-2 py-0.5">{featured.duration}</div>
        </div>
        <div>
          <CategoryPill label={featured.category} />
          <h2 className="font-display font-bold text-[28px] h-tight mt-2 mb-3 cursor-pointer hover:text-cobalt" onClick={() => setPlaying(featured0)}>{featured.title}</h2>
          <p className="text-[15px] text-ink2 leading-relaxed mb-4">{featured.description}</p>
          <div className="text-[12px] text-mute data uppercase tracking-wider mb-5">{featured.host} · {featured.published} · {featured.views} {lang==="es"?"vistas":"views"}</div>
          <button onClick={() => setPlaying(featured0)} className="inline-flex items-center gap-2 px-5 py-3 bg-ink text-paper hover:bg-cobalt transition-colors data text-[12px] tracking-wider">
            {tp("videos.watchNow")} ({featured.duration})
          </button>
        </div>
      </div>

      {/* Category filter */}
      <div className="flex items-center gap-2 mb-8 flex-wrap">
        {categories.map(c => (
          <button key={c} onClick={() => setFilter(c)} className={`px-4 py-2 border text-[13px] transition-colors ${filter === c ? "bg-ink text-paper border-ink" : "border-rule text-ink2 hover:border-ink"}`}>{c === "All" ? (lang==="es"?"Todo":"All") : c}</button>
        ))}
      </div>

      <div className="grid md:grid-cols-3 gap-8 mb-12">
        {filtered.map(v => <VideoCard key={v.slug} v={v} onPlay={setPlaying} />)}
      </div>

      <VideoModal v={playing} onClose={() => setPlaying(null)} />
      <Newsletter />
    </div>
  );
};

window.VideosPage = VideosPage;


// ── GUIDES SECTION ────────────────────────────────────────────────────────────

const GuideCard = ({ g: g0, onClick }) => { const g = { ...g0, ...(window.esGuide ? (window.esGuide(g0.slug) || {}) : {}) }; return (
  <div onClick={onClick} className="group cursor-pointer border border-rule hover:border-ink bg-paper p-6 transition-colors">
    <div className="flex items-start gap-4">
      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2 mb-2">
          <CategoryPill label={g.category} />
          {g.featured && <span className="label text-rust text-[10px] uppercase tracking-widest">{window.AIW_LANG==="es"?"Guía destacada":"Featured guide"}</span>}
        </div>
        <h3 className="font-display font-semibold text-[19px] h-tight mb-2 group-hover:text-cobalt transition-colors">{g.title}</h3>
        <p className="text-[13px] text-ink2 leading-relaxed line-clamp-2 mb-3">{g.subtitle}</p>
        <div className="flex items-center gap-4 text-[11px] text-mute data uppercase tracking-wider">
          <span>{g.author}</span>
          <span>·</span>
          <span>{g.readTime} {tp("guides.minRead")}</span>
          <span>·</span>
          <span>{tp("guides.verified")} {g.lastVerified}</span>
        </div>
      </div>
      <div className="flex-shrink-0 text-mute group-hover:text-cobalt text-[22px] mt-1 transition-colors">→</div>
    </div>
  </div>
); };

const GuideDetail = ({ g: g0, onBack }) => { const g = { ...g0, ...(window.esGuide ? (window.esGuide(g0.slug) || {}) : {}) }; return (
  <div>
    <div className="bg-cream border-b-2 border-ink">
      <div className="max-w-[1280px] mx-auto px-6 py-10">
        <button onClick={onBack} className="label text-cobalt text-[12px] mb-6 flex items-center gap-1 hover:underline">{tp("guides.backToGuides")}</button>
        <div className="mb-3"><CategoryPill label={g.category} /></div>
        <h1 className="font-display font-extrabold text-[42px] h-tight leading-none mb-3 max-w-[22ch]">{g.title}</h1>
        <p className="text-[18px] text-ink2 max-w-[60ch] leading-relaxed mb-6">{g.subtitle}</p>
        <div className="flex items-center gap-6 text-[12px] text-mute data uppercase tracking-wider">
          <Byline author={g.author} reviewer={g.reviewer} />
          <span>·</span>
          <span>{g.readTime} {tp("guides.minRead")}</span>
          <span>·</span>
          <span>{tp("guides.verified")} {g.lastVerified}</span>
        </div>
      </div>
    </div>

    <div className="max-w-[1280px] mx-auto px-6 py-12">
      <div className="grid md:grid-cols-[1fr_320px] gap-12">
        <div>
          <AdSlot id="guide-top" size="728×90 · In-content" className="mb-8" />

          <p className="text-[17px] text-ink2 leading-relaxed mb-8 border-l-4 border-cobalt pl-5">{g.intro}</p>

          {g.sections.map((s,i) => (
            <div key={i} className="mb-8">
              <h2 className="font-display font-bold text-[26px] h-tight mb-3">{s.h2}</h2>
              <p className="text-[16px] text-ink2 leading-relaxed">{s.body}</p>
            </div>
          ))}

          {g.callout && (
            <div className="my-8 bg-cream border-l-4 border-rust p-5">
              <p className="text-[15px] text-ink leading-relaxed">{g.callout}</p>
              <div className="mt-4">
                <a href={window.midenmi()} target="_blank" rel="noopener" className="inline-flex items-center gap-2 px-5 py-3 bg-rust text-paper hover:bg-ember transition-colors data text-[12px] tracking-wider">
                  {window.AIW_LANG==="es"?"Comparar en midenmi.com →":"Compare quotes at midenmi.com →"}
                </a>
              </div>
            </div>
          )}

          <FAQSection items={g.faq} />

          <PhoneCTA />

          <AdSlot id="guide-bottom" size="728×90 · Post-content" className="mt-8" />
        </div>

        <aside>
          <div className="sticky top-24 space-y-6">
            <div className="bg-cream border border-rule p-5">
              <div className="label text-mute mb-3">{tp("guides.inThisGuide")}</div>
              <ul className="space-y-2">
                {g.sections.map((s,i) => (
                  <li key={i} className="text-[13px] text-cobalt hover:underline cursor-pointer leading-snug">{s.h2}</li>
                ))}
                <li className="text-[13px] text-cobalt hover:underline cursor-pointer">FAQ</li>
              </ul>
            </div>

            <AdSlot id="guide-sidebar" size="300×600 · Sidebar" />

            <div className="bg-ink text-paper p-5">
              <div className="label text-rust mb-2">{tp("guides.needHelp")}</div>
              <p className="text-[13px] text-paper/80 leading-relaxed mb-4">{tp("guides.needHelpBlurb")}</p>
              <a href={window.AIW_DATA.PHONE_HREF} className="flex items-center gap-2 data text-[12px] tracking-wider text-rust hover:text-ember">
                📞 {window.AIW_DATA.PHONE}
              </a>
            </div>
          </div>
        </aside>
      </div>
    </div>
  </div>
); };

const GuidesPage = () => {
  const lang = useLang();
  const [active, setActive] = useState(null);
  if (active) return <GuideDetail g={active} onBack={() => setActive(null)} />;

  const featured = GUIDES_DATA.filter(g => g.featured);
  const rest = GUIDES_DATA.filter(g => !g.featured);

  return (
    <div className="max-w-[1280px] mx-auto px-6 py-12">
      <AdSlot id="guides-leaderboard" size="728×90 · Leaderboard" className="mb-10" />

      <div className="mb-10">
        <div className="label text-rust mb-3">{tp("guides.eyebrow")}</div>
        <h1 className="font-display font-extrabold text-[48px] h-tight leading-none mb-4">
          {tp("guides.title")}<br/>{tp("guides.titleBreak")}
        </h1>
        <p className="text-[17px] text-ink2 leading-relaxed max-w-[64ch]">
          {tp("guides.blurb")}
        </p>
      </div>

      <TrustBand />

      <div className="mt-10 mb-6">
        <div className="label text-mute mb-4">{tp("guides.featuredGuides")}</div>
        <div className="grid md:grid-cols-2 gap-6">
          {featured.map(g => <GuideCard key={g.slug} g={g} onClick={() => setActive(g)} />)}
        </div>
      </div>

      <div className="border-t-2 border-ink pt-8">
        <div className="label text-mute mb-4">{tp("guides.allGuides")}</div>
        <div className="flex flex-col gap-4">
          {rest.map(g => <GuideCard key={g.slug} g={g} onClick={() => setActive(g)} />)}
        </div>
      </div>

      <div className="mt-12"><Newsletter /></div>
    </div>
  );
};

window.GuidesPage = GuidesPage;


// ── GLOSSARY SECTION ──────────────────────────────────────────────────────────

const GlossaryTerm = ({ item: item0, expanded, onToggle }) => { const item = { ...item0, ...(window.esGlossary ? (window.esGlossary(item0.term) || {}) : {}) }; return (
  <div className={`border-b border-rule transition-colors ${expanded ? "bg-cream" : "hover:bg-cream/60"}`}>
    <button
      onClick={() => onToggle(item0.term)}
      className="w-full text-left px-6 py-5 flex items-center justify-between gap-4"
    >
      <div className="flex items-center gap-4">
        {item.abbr && (
          <span className="border border-cobalt/50 text-cobalt text-[10px] data uppercase tracking-wider px-2 py-0.5 flex-shrink-0">{item.abbr}</span>
        )}
        <span className="font-display font-semibold text-[17px] text-ink">{item.term}</span>
      </div>
      <span className="text-mute text-[18px] flex-shrink-0">{expanded ? "−" : "+"}</span>
    </button>
    {expanded && (
      <div className="px-6 pb-6">
        <p className="text-[15px] text-ink2 leading-relaxed mb-4 max-w-[72ch]">{item.definition}</p>
        {item.relatedTerms && (
          <div className="flex items-center gap-2 flex-wrap">
            <span className="text-[11px] text-mute data uppercase tracking-wider">{tp("glossary.related")}</span>
            {item.relatedTerms.map(t => (
              <span key={t} className="text-[12px] text-cobalt border border-cobalt/30 px-2 py-0.5 hover:bg-cobalt hover:text-paper cursor-pointer transition-colors">{t}</span>
            ))}
          </div>
        )}
        <div className="mt-4 pt-4 border-t border-rule flex items-center gap-3">
          <span className="text-[11px] text-mute data">{tp("glossary.schemaNote")}</span>
          <span className="text-mute">·</span>
          <a href={window.midenmi()} target="_blank" rel="noopener" className="text-[11px] data text-rust hover:underline uppercase tracking-wider">{window.AIW_LANG==="es"?"Comparar cotizaciones →":"Compare quotes →"}</a>
        </div>
      </div>
    )}
  </div>
); };

const GlossaryPage = () => {
  const lang = useLang();
  const [search, setSearch] = useState("");
  const [expanded, setExpanded] = useState(null);
  const [activeLetter, setActiveLetter] = useState("All");

  const letters = ["All", ...Array.from(new Set(GLOSSARY_TERMS.map(t => t.letter))).sort()];

  const toggle = term => setExpanded(e => e === term ? null : term);

  const filtered = GLOSSARY_TERMS.filter(t => {
    const matchesLetter = activeLetter === "All" || t.letter === activeLetter;
    const matchesSearch = !search || t.term.toLowerCase().includes(search.toLowerCase()) || t.definition.toLowerCase().includes(search.toLowerCase());
    return matchesLetter && matchesSearch;
  });

  const grouped = letters.filter(l => l !== "All").reduce((acc, l) => {
    const terms = filtered.filter(t => t.letter === l);
    if (terms.length) acc[l] = terms;
    return acc;
  }, {});

  return (
    <div className="max-w-[1280px] mx-auto px-6 py-12">
      <AdSlot id="glossary-leaderboard" size="728×90 · Leaderboard" className="mb-10" />

      <div className="mb-10">
        <div className="label text-rust mb-3">{tp("glossary.eyebrow")}</div>
        <h1 className="font-display font-extrabold text-[48px] h-tight leading-none mb-4">
          {tp("glossary.title")}<br/>{tp("glossary.titleBreak")}
        </h1>
        <p className="text-[17px] text-ink2 leading-relaxed max-w-[64ch]">
          {GLOSSARY_TERMS.length} {tp("glossary.blurb")}
        </p>
      </div>

      {/* Search + filter */}
      <div className="flex flex-col md:flex-row gap-4 mb-8">
        <div className="relative flex-1">
          <svg className="absolute left-4 top-1/2 -translate-y-1/2 text-mute" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
          <input
            value={search}
            onChange={e => { setSearch(e.target.value); setActiveLetter("All"); }}
            placeholder={tp("glossary.searchPlaceholder")}
            className="w-full bg-paper border-2 border-ink px-5 py-3 pl-11 text-[15px] focus:outline-none focus:ring-2 focus:ring-cobalt"
          />
        </div>
        <div className="flex items-center gap-1.5 flex-wrap">
          {letters.map(l => (
            <button key={l} onClick={() => { setActiveLetter(l); setSearch(""); }} className={`w-9 h-9 border text-[13px] data font-semibold transition-colors ${activeLetter === l ? "bg-ink text-paper border-ink" : "border-rule text-ink2 hover:border-ink"}`}>{l}</button>
          ))}
        </div>
      </div>

      {/* Stats bar */}
      <div className="bg-cream border border-rule px-5 py-3 flex items-center gap-6 mb-8 text-[12px] data text-mute uppercase tracking-wider">
        <span>{filtered.length} {tp("glossary.terms")}</span>
        <span>·</span>
        <span>{tp("glossary.schemaNote")}</span>
        <span>·</span>
        <span>{tp("glossary.lastVerified")}</span>
      </div>

      {/* Terms */}
      {search || activeLetter !== "All" ? (
        <div className="border-t-2 border-ink">
          {filtered.map(item => (
            <GlossaryTerm key={item.term} item={item} expanded={expanded === item.term} onToggle={toggle} />
          ))}
          {!filtered.length && (
            <div className="py-16 text-center text-mute">{tp("glossary.noMatch")} "{search}"</div>
          )}
        </div>
      ) : (
        Object.entries(grouped).map(([letter, terms]) => (
          <div key={letter} className="mb-8">
            <div className="flex items-center gap-4 mb-3">
              <span className="font-display font-extrabold text-[36px] text-ink leading-none">{letter}</span>
              <div className="flex-1 border-t-2 border-ink"></div>
            </div>
            <div className="border-t-2 border-ink">
              {terms.map(item => (
                <GlossaryTerm key={item.term} item={item} expanded={expanded === item.term} onToggle={toggle} />
              ))}
            </div>
          </div>
        ))
      )}

      <div className="mt-16 bg-ink text-paper p-8 grid md:grid-cols-2 gap-8 items-center">
        <div>
          <div className="label text-rust mb-3">{tp("glossary.stillConfused")}</div>
          <h3 className="font-display font-bold text-[28px] h-tight mb-3">{tp("glossary.talkFree")}</h3>
          <p className="text-[14px] text-paper/75 leading-relaxed">{tp("glossary.talkBlurb")}</p>
        </div>
        <div className="flex flex-col gap-4">
          <a href={window.AIW_DATA.PHONE_HREF} className="flex items-center justify-center gap-3 px-6 py-4 bg-rust text-paper hover:bg-ember transition-colors data text-[13px] tracking-wider">
            📞 {tp("glossary.callBtn")} {window.AIW_DATA.PHONE}
          </a>
          <a href={window.midenmi()} target="_blank" rel="noopener" className="flex items-center justify-center px-6 py-4 border-2 border-paper text-paper hover:bg-paper hover:text-ink transition-colors data text-[13px] tracking-wider">
            {window.AIW_LANG==="es"?"Comparar en midenmi.com →":"Compare quotes at midenmi.com →"}
          </a>
        </div>
      </div>

      <div className="mt-12"><Newsletter /></div>
    </div>
  );
};

window.GlossaryPage = GlossaryPage;
