/* Inland Empire lander — Marquee, Reviews, Attorney bio, Corridors, Insurance tactics */

/* striped placeholder for photography not yet supplied */
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', '149 five-star reviews', '$100M+ 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 the 215, the insurance company offered me almost nothing. Big Al's team got me more than five times their first offer.", name: 'Marie Castillo', city: 'San Bernardino', 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: 'Mark Silber', city: 'Riverside', 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: 'Leah Brown', city: 'Fontana', 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: 'Ayo A.', city: 'Rancho Cucamonga', tag: 'Rideshare injury' },
  ];
  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>Rated 5.0 by 149 clients</Eyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 'clamp(2.1rem,4vw,3.4rem)', lineHeight: .95, margin: '14px 0 0', maxWidth: 640 }}>
              The Inland Empire<br />trusts 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 · Google Reviews</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' }}>
            <img src="assets/ken-klein-headshot.jpg" alt="Attorney Kenneth Klein - Inland Empire Car Accident Lawyer" style={{ width: '100%', height: 460, objectFit: 'cover', objectPosition: 'top center', display: 'block' }} />
          </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 Ken Klein, the man behind "Big Al," has spent more than three decades taking on insurance companies on behalf of injured Californians. His office has handled <strong style={{ color: 'var(--ink)' }}>over 10,000 cases</strong> and recovered <strong style={{ color: 'var(--ink)' }}>more than $100 million</strong> for clients across the Inland Empire and beyond.
            </p>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.6, color: 'var(--fg2)', margin: '16px 0 0', maxWidth: 560 }}>
              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-10', name: 'The San Bernardino Freeway', blurb: 'Heavy commuter traffic and constant merging from Ontario to Redlands make high-speed rear-end and lane-change crashes common.' },
    { road: 'I-15', name: 'The Cajon Pass corridor', blurb: 'Steep grades, sudden slowdowns and freight traffic toward Vegas turn the 15 into one of the region\'s most dangerous stretches.' },
    { road: 'I-215', name: 'The inland connector', blurb: 'Construction zones and warehouse truck traffic around San Bernardino and Riverside cause serious multi-vehicle collisions.' },
  ];
  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 the<br />Inland Empire's worst freeways.
          </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 corridors where Inland Empire 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 });