/* Baltimore Car Accident lander — AccidentTypes, MarylandLaw, AtStake, FAQ, ServiceAreas, FinalCTA, Footer */

function AccidentTypes() {
  const types = [
    ['car-front', 'Car Accidents', 'Rear-end, intersection, head-on and hit-and-run collisions.'],
    ['truck', 'Truck Accidents', 'Big-rig and commercial crashes. We hold trucking companies accountable.'],
    ['bike', 'Motorcycle Accidents', 'Severe-injury cases where bias against riders runs deep.'],
    ['car-taxi-front', 'Rideshare Accidents', 'Hurt in or by an Uber or Lyft? Coverage gets complicated. We untangle it.'],
    ['footprints', 'Pedestrian Accidents', 'The most at-risk road users. Crosswalk and parking-lot strikes.'],
    ['bus', 'Bus & Public Transit', 'Injuries on or caused by buses and commercial passenger vehicles.'],
  ];
  return (
    <section style={{ background: 'var(--bg-surface)' }}>
      <Container style={{ padding: '82px 28px' }}>
        <Eyebrow>Every kind of crash</Eyebrow>
        <h2 style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 'clamp(2.1rem,4vw,3.4rem)', lineHeight: .95, margin: '14px 0 40px', maxWidth: 640 }}>
          If you were hit,<br />we can help.
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px,1fr))', gap: 20 }}>
          {types.map(([ic, t, d]) => (
            <div key={t} className="type-card" style={{ background: 'var(--ink)', color: '#fff', borderRadius: 8, padding: 26, boxShadow: 'var(--shadow-hard)', transition: 'all .14s ease-out', minHeight: 178, display: 'flex', flexDirection: 'column' }}>
              <i data-lucide={ic} style={{ width: 40, height: 40, color: 'var(--red)' }}></i>
              <h3 style={{ fontFamily: 'var(--font-headline)', textTransform: 'uppercase', fontWeight: 700, fontSize: 23, lineHeight: .98, margin: '16px 0 8px' }}>{t}</h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 14.5, lineHeight: 1.5, color: 'var(--fg-on-dark-2)', margin: 0 }}>{d}</p>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

function MarylandLaw() {
  return (
    <section style={{ background: 'var(--bg-page)' }}>
      <Container style={{ padding: '82px 28px' }}>
        <div style={{ maxWidth: 700, marginBottom: 40 }}>
          <Eyebrow>The clock is ticking</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 'clamp(2.1rem,4vw,3.4rem)', lineHeight: .95, margin: '14px 0 0' }}>
            Maryland law won't<br />wait for you.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px,1fr))', gap: 22 }}>
          <div style={{ background: 'var(--ink)', color: '#fff', borderRadius: 8, padding: 34, position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', top: -10, right: 18, fontFamily: 'var(--font-display)', fontSize: 150, color: 'rgba(206,18,23,.16)', lineHeight: 1 }}>3</div>
            <i data-lucide="alarm-clock" style={{ width: 34, height: 34, color: 'var(--red)' }}></i>
            <h3 style={{ fontFamily: 'var(--font-headline)', textTransform: 'uppercase', fontWeight: 700, fontSize: 24, margin: '16px 0 10px', position: 'relative' }}>3-Year Deadline</h3>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.6, color: 'var(--fg-on-dark-2)', margin: 0, position: 'relative' }}>
              In Maryland, you have just <strong style={{ color: '#fff' }}>three years</strong> from the date of the crash to file a personal injury lawsuit. Miss it and you can lose your right to recover anything, forever. Evidence and witnesses fade much faster than that.
            </p>
          </div>
          <div style={{ background: '#fff', border: '2px solid var(--ink)', borderRadius: 8, padding: 34, boxShadow: 'var(--shadow-hard)' }}>
            <i data-lucide="scale" style={{ width: 34, height: 34, color: 'var(--red)' }}></i>
            <h3 style={{ fontFamily: 'var(--font-headline)', textTransform: 'uppercase', fontWeight: 700, fontSize: 24, margin: '16px 0 10px', color: 'var(--ink)' }}>Contributory Negligence</h3>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.6, color: 'var(--fg2)', margin: 0 }}>
              Maryland is a <strong style={{ color: 'var(--ink)' }}>contributory negligence state</strong>. If you're found even slightly at fault, you can be barred from recovery. Insurers weaponize this. We fight back hard.
            </p>
          </div>
        </div>
      </Container>
    </section>
  );
}

function AtStake({ onForm }) {
  const items = ['Medical bills & future care', 'Lost wages & earning power', 'Pain, suffering & trauma', 'Vehicle & property damage'];
  return (
    <section style={{ background: 'var(--red)', color: '#fff', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: 0, left: 0, width: '38%', height: '100%', background: 'var(--ink)', clipPath: 'polygon(0 0, 72% 0, 100% 100%, 0 100%)', opacity: .15, pointerEvents: 'none' }}></div>
      <Container style={{ padding: '78px 28px', position: 'relative' }}>
        <div className="stake-grid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1fr)', gap: 48, alignItems: 'center' }}>
          <div>
            <span className="t-eyebrow" style={{ color: '#fff', opacity: .9 }}>What's on the line</span>
            <h2 style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 'clamp(2.2rem,4.4vw,3.8rem)', lineHeight: .92, margin: '14px 0 18px' }}>
              Don't pay out<br />of your own pocket.
            </h2>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.6, color: 'rgba(255,255,255,.9)', maxWidth: 460, marginBottom: 30 }}>
              A serious crash can cost you for years. The right lawyer fights to make the at-fault driver's insurance pay for all of it, not you.
            </p>
            <GhostButton variant="white" icon="phone-call" href={`tel:${TEL}`}>Call {PHONE}</GhostButton>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }} className="stake-items">
            {items.map(it => (
              <div key={it} style={{ background: 'rgba(0,0,0,.22)', border: '1px solid rgba(255,255,255,.25)', borderRadius: 8, padding: '22px 20px', display: 'flex', alignItems: 'center', gap: 13 }}>
                <i data-lucide="check" style={{ width: 22, height: 22, color: '#fff', flexShrink: 0 }}></i>
                <span style={{ fontFamily: 'var(--font-headline)', textTransform: 'uppercase', fontWeight: 600, fontSize: 15, lineHeight: 1.1, letterSpacing: '.02em' }}>{it}</span>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

const FAQS = [
  ['How much does it cost to hire Attorney Big Al?', 'Nothing up front. We work on contingency, which means you pay no attorney fees unless we win your case. The consultation is always free.'],
  ['Do you serve my city in Maryland, Virginia, or DC?', 'Yes. We represent injured clients throughout Maryland (Baltimore, Anne Arundel, Howard, Prince George\'s, Montgomery), Northern Virginia, and DC. Call to confirm your specific location.'],
  ['Should I talk to the insurance company before calling a lawyer?', 'No. Call us first. Anything you say to an adjuster can be used to reduce your claim. We handle all communication so you don\'t accidentally hurt your case.'],
  ['How long do I have to file a claim in Maryland?', 'Generally three years from the date of the accident for personal injury cases. But evidence disappears fast, so the sooner you call, the stronger your case. Don\'t wait.'],
  ['What if the accident was partly my fault?', 'Maryland is a contributory negligence state. Even if you were partially at fault, our job is to fight to minimize that blame. Call us to discuss your specific situation.'],
  ['Do you speak Spanish?', 'Sí. Our team helps clients in English and Español, 24 hours a day, 7 days a week.'],
];

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section style={{ background: 'var(--bg-surface)' }}>
      <Container style={{ padding: '82px 28px', maxWidth: 880 }}>
        <Eyebrow>Questions?</Eyebrow>
        <h2 style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 'clamp(2.1rem,4vw,3.4rem)', lineHeight: .95, margin: '14px 0 36px' }}>
          Answers, straight up.
        </h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {FAQS.map(([q, a], i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ background: '#fff', border: '2px solid var(--ink)', borderRadius: 6, overflow: 'hidden' }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
                  padding: '20px 22px', background: isOpen ? 'var(--ink)' : '#fff', color: isOpen ? '#fff' : 'var(--ink)',
                  border: 'none', cursor: 'pointer', textAlign: 'left',
                  fontFamily: 'var(--font-headline)', textTransform: 'uppercase', fontWeight: 700, fontSize: 17.5, lineHeight: 1.15,
                }}>
                  {q}
                  <i data-lucide={isOpen ? 'minus' : 'plus'} style={{ width: 22, height: 22, color: 'var(--red)', flexShrink: 0 }}></i>
                </button>
                {isOpen && <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.6, color: 'var(--fg2)', margin: 0, padding: '4px 22px 22px' }}>{a}</p>}
              </div>
            );
          })}
        </div>
      </Container>
    </section>
  );
}

function ServiceAreas() {
  const cols = [
    ['Maryland', ['Baltimore', 'Baltimore County', 'Anne Arundel County', 'Howard County', 'Prince George\'s County', 'Montgomery County']],
    ['Northern Virginia & DC', ['Arlington', 'Alexandria', 'Fairfax', 'Prince William County', 'Washington DC', 'Northern Virginia']],
  ];
  return (
    <section style={{ background: 'var(--ink)', color: '#fff' }}>
      <Container style={{ padding: '78px 28px' }}>
        <div style={{ textAlign: 'center', marginBottom: 44 }}>
          <span className="t-eyebrow" style={{ color: 'var(--red)', justifyContent: 'center', display: 'inline-flex' }}>Serving Maryland, Virginia & DC</span>
          <h2 style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 'clamp(2rem,4vw,3.2rem)', lineHeight: .95, margin: '14px 0 0' }}>
            Local help, wherever you were hit.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px,1fr))', gap: 22 }}>
          {cols.map(([region, areas]) => (
            <div key={region} style={{ background: 'var(--ink-soft)', border: '2px solid #2a2a2a', borderRadius: 8, padding: 28 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
                <i data-lucide="map-pin" style={{ width: 24, height: 24, color: 'var(--red)' }}></i>
                <h3 style={{ fontFamily: 'var(--font-headline)', textTransform: 'uppercase', fontWeight: 700, fontSize: 20, margin: 0 }}>{region}</h3>
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
                {areas.map(c => (
                  <span key={c} style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--fg-on-dark-2)', background: 'rgba(255,255,255,.06)', borderRadius: 4, padding: '7px 12px' }}>{c}</span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

function FinalCTA() {
  return (
    <section style={{ background: 'var(--red)', color: '#fff', textAlign: 'center' }}>
      <Container style={{ padding: '84px 28px' }}>
        <span className="t-eyebrow" style={{ color: '#fff', opacity: .9, justifyContent: 'center', display: 'inline-flex' }}>Free · Confidential · 24/7</span>
        <h2 style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 'clamp(2.6rem,6vw,5rem)', lineHeight: .9, margin: '16px auto 8px', maxWidth: 900 }}>
          Injured? Call Big Al.<br />No fee until we win.
        </h2>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 19, lineHeight: 1.5, color: 'rgba(255,255,255,.92)', maxWidth: 560, margin: '0 auto 34px' }}>
          One call starts your free case review. We'll handle the insurance company so you can focus on getting better.
        </p>
        <div style={{ display: 'inline-flex', flexWrap: 'wrap', gap: 16, justifyContent: 'center' }}>
          <a href={`tel:${TEL}`} style={{
            display: 'inline-flex', alignItems: 'center', gap: 14, background: '#fff', color: 'var(--red)', textDecoration: 'none',
            borderRadius: 999, padding: '20px 38px', boxShadow: 'var(--shadow-hard)', fontFamily: 'var(--font-headline)',
          }}>
            <i data-lucide="phone-call" style={{ width: 30, height: 30 }}></i>
            <span style={{ textAlign: 'left', lineHeight: 1 }}>
              <span style={{ display: 'block', textTransform: 'uppercase', fontSize: 12, letterSpacing: '.14em', opacity: .8 }}>Call now · 24/7</span>
              <span style={{ display: 'block', fontFamily: 'var(--font-display)', fontSize: 38, marginTop: 5, whiteSpace: 'nowrap' }}>{PHONE}</span>
            </span>
          </a>
        </div>
      </Container>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{ background: 'var(--ink)', color: '#fff', borderTop: '4px solid var(--red)' }}>
      <Container style={{ padding: '60px 28px 120px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 40, flexWrap: 'wrap', alignItems: 'flex-start' }}>
          <div style={{ maxWidth: 380 }}>
            <img src="assets/logo-white.webp" alt="Attorney Big Al · Baltimore Car Accident Lawyer" style={{ height: 38, marginBottom: 20 }} />
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.6, color: 'var(--fg-on-dark-2)', margin: 0 }}>
              Law Offices of Richard S. Klein<br />Baltimore, Maryland<br />Serving Maryland, Virginia &amp; DC.
            </p>
            <a href={`tel:${TEL}`} style={{ display: 'inline-block', marginTop: 18, fontFamily: 'var(--font-display)', fontSize: 30, color: 'var(--red)', textDecoration: 'none' }}>{PHONE}</a>
          </div>
          <div style={{ display: 'flex', gap: 22, flexWrap: 'wrap' }}>
            {[['shield-check', 'No fee unless we win'], ['clock', 'Open 24 / 7'], ['languages', 'Hablamos Español'], ['radio', 'As heard on the radio']].map(([ic, tx]) => (
              <span key={tx} style={{ display: 'flex', alignItems: 'center', gap: 10, fontFamily: 'var(--font-headline)', textTransform: 'uppercase', fontWeight: 600, fontSize: 13, letterSpacing: '.04em' }}>
                <i data-lucide={ic} style={{ width: 18, height: 18, color: 'var(--red)' }}></i>{tx}
              </span>
            ))}
          </div>
        </div>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 12, lineHeight: 1.6, color: 'var(--gray-500)', marginTop: 44, paddingTop: 24, borderTop: '1px solid #2a2a2a', maxWidth: 940 }}>
          © 2026 Law Offices of Richard S. Klein. Attorney Advertising. This website is for informational purposes only and does not constitute legal advice. Past results do not guarantee future outcomes; every case is unique with different facts and circumstances. Contacting us does not create an attorney-client relationship. No fee unless we win refers to attorney fees on a contingency basis; case costs may apply.
        </p>
      </Container>
    </footer>
  );
}

Object.assign(window, { AccidentTypes, MarylandLaw, AtStake, FAQ, ServiceAreas, FinalCTA, Footer });