/* Baltimore Car Accident lander — Marquee, Reviews, Attorney bio, Corridors, Insurance tactics */

function ImgPlaceholder({ label, height = '100%', dark, style }) {
  const stroke = dark ? 'rgba(255,255,255,.10)' : 'rgba(14,14,14,.07)';
  const txt = dark ? 'rgba(255,255,255,.5)' : 'rgba(14,14,14,.4)';
  return (
    <div style={{ position: 'relative', width: '100%', height, background: dark ? '#161616' : 'var(--gray-200)',
      backgroundImage: `repeating-linear-gradient(45deg, ${stroke} 0 2px, transparent 2px 11px)`,
      display: 'flex', alignItems: 'center', justifyContent: 'center', ...style }}>
      <span style={{ fontFamily: 'ui-monospace, Menlo, monospace', fontSize: 12, letterSpacing: '.04em', color: txt, textTransform: 'uppercase', textAlign: 'center', padding: 16 }}>{label}</span>
    </div>
  );
}

function Marquee() {
  const phrases = ['No fee unless we win', '30+ years experience', '$250M+ recovered', 'Open 24/7', 'Free case review'];
  const run = [...phrases, ...phrases, ...phrases];
  return (
    <section style={{ background: 'var(--red)', overflow: 'hidden', padding: '13px 0' }}>
      <div style={{ display: 'flex', whiteSpace: 'nowrap', animation: 'ie-marquee 30s linear infinite', width: 'max-content' }}>
        {run.map((p, i) => (
          <span key={i} style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 22, color: '#fff', padding: '0 22px', display: 'inline-flex', alignItems: 'center', gap: 22 }}>
            {p}<i data-lucide="star" style={{ width: 16, height: 16, fill: '#fff', color: '#fff' }}></i>
          </span>
        ))}
      </div>
    </section>
  );
}

function Reviews() {
  const items = [
    { q: "After my crash on I-95, the insurance company offered me almost nothing. Big Al's team got me more than five times their first offer.", name: 'Sarah Mitchell', city: 'Baltimore', tag: 'Rear-end collision' },
    { q: "They handled everything: the calls, the paperwork, the medical bills. I focused on getting better. I never paid a dime out of pocket.", name: 'James Rodriguez', city: 'Columbia', tag: 'Multi-car pileup' },
    { q: "Honest, fast, and they actually answer the phone at 2 a.m. when you're scared and don't know what to do. Highly recommend.", name: 'Patricia Chen', city: 'Annapolis', tag: 'Truck accident' },
    { q: "I thought I couldn't afford a lawyer. Turns out it cost me nothing unless they won, and they won. Life-changing.", name: 'Michael T.', city: 'Silver Spring', tag: 'Intersection crash' },
  ];
  return (
    <section style={{ background: 'var(--bg-surface)' }}>
      <Container style={{ padding: '78px 28px' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap', marginBottom: 40 }}>
          <div>
            <Eyebrow>BBB Accredited · 5.0 Rating</Eyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 'clamp(2.1rem,4vw,3.4rem)', lineHeight: .95, margin: '14px 0 0', maxWidth: 640 }}>
              Baltimore & the DMV<br />trust Big Al.
            </h2>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 20px', border: '2px solid var(--ink)', borderRadius: 8, boxShadow: 'var(--shadow-hard)', background: '#fff' }}>
            <div style={{ display: 'flex', gap: 2 }}>
              {Array.from({ length: 5 }).map((_, s) => <i key={s} data-lucide="star" style={{ width: 20, height: 20, fill: 'var(--red)', color: 'var(--red)' }}></i>)}
            </div>
            <span style={{ fontFamily: 'var(--font-headline)', textTransform: 'uppercase', fontWeight: 700, fontSize: 14, letterSpacing: '.05em', color: 'var(--ink)' }}>5.0 · BBB Accredited</span>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(270px,1fr))', gap: 22 }}>
          {items.map((it, i) => (
            <div key={i} style={{ background: '#fff', border: '2px solid var(--ink)', borderRadius: 8, padding: 26, boxShadow: 'var(--shadow-hard)', display: 'flex', flexDirection: 'column' }}>
              <div style={{ display: 'flex', gap: 2, marginBottom: 14 }}>
                {Array.from({ length: 5 }).map((_, s) => <i key={s} data-lucide="star" style={{ width: 18, height: 18, fill: 'var(--red)', color: 'var(--red)' }}></i>)}
              </div>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.55, color: 'var(--fg1)', margin: 0, flex: 1 }}>"{it.q}"</p>
              <div style={{ marginTop: 18, paddingTop: 16, borderTop: '1px solid var(--line)' }}>
                <p style={{ fontFamily: 'var(--font-headline)', textTransform: 'uppercase', fontWeight: 700, fontSize: 14, letterSpacing: '.04em', color: 'var(--ink)', margin: 0 }}>{it.name}</p>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--fg3)', margin: '4px 0 0' }}>{it.city} · {it.tag}</p>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

function Attorney({ onForm }) {
  return (
    <section style={{ background: 'var(--bg-page)' }}>
      <Container style={{ padding: '84px 28px' }}>
        <div className="attorney-grid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,.85fr) minmax(0,1.15fr)', gap: 52, alignItems: 'center' }}>
          <div style={{ border: '3px solid var(--ink)', boxShadow: 'var(--shadow-hard)', borderRadius: 8, overflow: 'hidden', background: '#fff' }}>
            <ImgPlaceholder label="Richard S. Klein Headshot" height={460} />
          </div>
          <div>
            <Eyebrow>Meet your attorney</Eyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 'clamp(2.2rem,4.2vw,3.6rem)', lineHeight: .93, margin: '14px 0 0' }}>
              30+ years.<br /><span style={{ color: 'var(--red)' }}>One mission.</span> Your justice.
            </h2>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.6, color: 'var(--fg2)', margin: '22px 0 0', maxWidth: 560 }}>
              Attorney Richard S. Klein, the man behind "Attorney Big Al," has spent more than three decades taking on insurance companies on behalf of injured residents throughout Maryland, Virginia, and DC. His office has handled <strong style={{ color: 'var(--ink)' }}>over 10,000 cases</strong> and recovered <strong style={{ color: 'var(--ink)' }}>more than $250 million</strong> for clients across the Baltimore region and beyond.
            </p>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.6, color: 'var(--fg2)', margin: '16px 0 0', maxWidth: 560 }}>
              BBB Accredited. White-glove service, straight talk, and a team that answers the phone 24/7 in English and Español.
            </p>
            <div style={{ display: 'flex', gap: 14, marginTop: 30, flexWrap: 'wrap' }}>
              <PhoneButton />
              <GhostButton variant="outline" icon="file-text" onClick={onForm}>Start Free Review</GhostButton>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

function Corridors() {
  const roads = [
    { road: 'I-95', name: "Baltimore's main corridor", blurb: 'The busiest North-South artery through Baltimore. Heavy commuter traffic, frequent lane changes, and truck traffic make rear-end and multi-vehicle crashes common.' },
    { road: 'I-695', name: 'The Baltimore Beltway', blurb: 'Curves, transitions, and aggressive merging around the harbor make this ring road a crash hotspot. Speed changes and visibility issues add to the danger.' },
    { road: 'I-83', name: 'The Jones Falls Expressway', blurb: 'Steep grades and busy downtown connections create accident-prone sections, especially in poor weather. Construction zones add unpredictability.' },
  ];
  return (
    <section style={{ background: 'var(--ink)', color: '#fff' }}>
      <Container style={{ padding: '84px 28px' }}>
        <div style={{ maxWidth: 720 }}>
          <Eyebrow>We know these roads</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 'clamp(2.1rem,4vw,3.4rem)', lineHeight: .95, margin: '14px 0 16px' }}>
            Built for Baltimore&apos;s<br />most dangerous corridors.
          </h2>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.6, color: 'var(--fg-on-dark-2)' }}>
            Local crashes need a local fight. We know the I-95, I-695, and I-83 corridors where Baltimore wrecks happen, and how insurers try to downplay them.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px,1fr))', gap: 22, marginTop: 44 }}>
          {roads.map(r => (
            <div key={r.road} style={{ background: 'var(--ink-soft)', border: '2px solid #2a2a2a', borderRadius: 8, padding: 28 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 16 }}>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 40, color: 'var(--red)', lineHeight: .8 }}>{r.road}</span>
                <i data-lucide="map-pin" style={{ width: 24, height: 24, color: '#fff', marginLeft: 'auto' }}></i>
              </div>
              <h3 style={{ fontFamily: 'var(--font-headline)', textTransform: 'uppercase', fontWeight: 700, fontSize: 19, letterSpacing: '.02em', margin: '0 0 10px' }}>{r.name}</h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.55, color: 'var(--fg-on-dark-2)', margin: 0 }}>{r.blurb}</p>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

function InsuranceTactics({ onForm }) {
  const tactics = [
    ['phone-off', 'The fast lowball call', 'They call within days with a quick offer, hoping you sign before you know what your injuries are really worth.'],
    ['mic', 'The recorded statement', 'A friendly adjuster asks for a "quick recorded statement," then uses your own words to reduce or deny your claim.'],
    ['hourglass', 'Delay, deny, defend', 'They drag out your claim, betting that mounting bills will pressure you into accepting far less than you deserve.'],
    ['user-x', '"You don\'t need a lawyer"', 'The one piece of advice that always benefits them, not you. Represented clients consistently recover more.'],
  ];
  return (
    <section style={{ background: 'var(--bg-page)' }}>
      <Container style={{ padding: '84px 28px' }}>
        <div className="tactics-grid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,.9fr) minmax(0,1.1fr)', gap: 52, alignItems: 'start' }}>

          <div style={{ position: 'sticky', top: 96 }}>
            <Eyebrow>Don't go it alone</Eyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 'clamp(2.1rem,4vw,3.4rem)', lineHeight: .95, margin: '14px 0 18px' }}>
              The insurance company<br />is <span style={{ color: 'var(--red)' }}>not on your side.</span>
            </h2>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.6, color: 'var(--fg2)', maxWidth: 460 }}>
              Their job is to pay you as little as possible. Here's how they do it, and why you should call us first.
            </p>
            <div style={{ marginTop: 28 }}><PhoneButton /></div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {tactics.map(([ic, t, d]) => (
              <div key={t} style={{ background: '#fff', border: '2px solid var(--ink)', borderRadius: 8, padding: 24, display: 'flex', gap: 18, alignItems: 'flex-start' }}>
                <div style={{ flexShrink: 0, width: 52, height: 52, background: 'var(--red-tint)', borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <i data-lucide={ic} style={{ width: 26, height: 26, color: 'var(--red)' }}></i>
                </div>
                <div>
                  <h3 style={{ fontFamily: 'var(--font-headline)', textTransform: 'uppercase', fontWeight: 700, fontSize: 19, margin: '2px 0 8px', color: 'var(--ink)' }}>{t}</h3>
                  <p style={{ fontFamily: 'var(--font-body)', fontSize: 15.5, lineHeight: 1.55, color: 'var(--fg2)', margin: 0 }}>{d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { ImgPlaceholder, Marquee, Reviews, Attorney, Corridors, InsuranceTactics });