/* Inland Empire lander — AccidentTypes, CaliforniaLaw, 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 CaliforniaLaw() {
  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' }}>
            California 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 }}>2</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' }}>2-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 most California injury cases you have just <strong style={{ color: '#fff' }}>two years</strong> from the date of the crash to file. 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)' }}>Partly At Fault? Still Recover.</h3>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.6, color: 'var(--fg2)', margin: 0 }}>
              California uses <strong style={{ color: 'var(--ink)' }}>pure comparative negligence</strong>. Even if you were partially to blame, you can still recover compensation, reduced by your share of fault. Insurers love to exaggerate your fault. We push back.
            </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 the Inland Empire?', 'Yes. We represent injured clients throughout San Bernardino and Riverside County, including Riverside, San Bernardino, Fontana, Ontario, Rancho Cucamonga, Moreno Valley, Corona, and the surrounding communities.'],
  ['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 California?', 'Generally two years from the date of the accident. But evidence disappears fast, so the sooner you call, the stronger your case. Don\'t wait.'],
  ['What if the accident was partly my fault?', 'You may still recover. California follows pure comparative negligence, so you can be compensated even if you were partially at fault. Your recovery is just reduced by your percentage of fault.'],
  ['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 = [
    ['San Bernardino County', ['San Bernardino', 'Fontana', 'Ontario', 'Rancho Cucamonga', 'Rialto', 'Chino', 'Upland', 'Redlands']],
    ['Riverside County', ['Riverside', 'Moreno Valley', 'Corona', 'Murrieta', 'Temecula', 'Jurupa Valley', 'Hemet', 'Eastvale']],
  ];
  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 the entire Inland Empire</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(([county, cities]) => (
            <div key={county} 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 }}>{county}</h3>
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
                {cities.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="1-800-HURT-123 · Attorney Big Al" 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 Office of Attorney Ken Klein<br />13949 Ventura Boulevard, Sherman Oaks, CA 91423<br />Serving the Inland Empire &amp; all of California.
            </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 SoCal 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 Office of Attorney Ken 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, CaliforniaLaw, AtStake, FAQ, ServiceAreas, FinalCTA, Footer });