/* Inland Empire lander — Hero with embedded live lead form + trust stats */

const GHL_FORM = 'https://link.lukrah.com/widget/form/FpUVsmkBpYGEa0PKbXrJ';

function LeadCard() {
  return (
    <div id="form" style={{ background: '#fff', borderRadius: 10, boxShadow: '10px 10px 0 var(--red)', border: '3px solid var(--ink)', overflow: 'hidden' }}>
      <div style={{ background: 'var(--ink)', color: '#fff', padding: '20px 26px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
          <i data-lucide="badge-check" style={{ width: 20, height: 20, color: 'var(--red)' }}></i>
          <span style={{ fontFamily: 'var(--font-headline)', textTransform: 'uppercase', fontWeight: 600, fontSize: 12, letterSpacing: '.14em', color: 'var(--red)' }}>100% free · no obligation</span>
        </div>
        <h2 style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', fontSize: 32, lineHeight: .95, margin: 0 }}>
          Free case review
        </h2>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--fg-on-dark-2)', margin: '8px 0 0', lineHeight: 1.45 }}>
          Tell us what happened. We'll call you back fast, day or night.
        </p>
      </div>
      <div style={{ padding: '8px 12px 12px', background: '#fff' }}>
        <iframe
          src={GHL_FORM}
          title="Free Case Review form"
          style={{ width: '100%', minHeight: 432, border: 'none', borderRadius: 6, display: 'block' }}
          id="inline-FpUVsmkBpYGEa0PKbXrJ"
          scrolling="no"
        ></iframe>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: '12px 20px 18px', background: '#fff', borderTop: '1px solid var(--line)' }}>
        <i data-lucide="lock" style={{ width: 14, height: 14, color: 'var(--fg3)' }}></i>
        <span style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--fg3)' }}>Secure &amp; confidential · Your info is never sold.</span>
      </div>
    </div>
  );
}

function Hero({ onForm }) {
  return (
    <section id="top" data-screen-label="Hero" style={{ background: 'var(--ink)', color: '#fff', position: 'relative', overflow: 'hidden' }}>
      {/* diagonal red slash accent */}
      <div style={{ position: 'absolute', top: 0, right: 0, width: '46%', height: '100%', background: 'var(--red)', clipPath: 'polygon(34% 0, 100% 0, 100% 100%, 0% 100%)', opacity: .12, pointerEvents: 'none' }}></div>
      {/* faint roadway hairlines */}
      <div style={{ position: 'absolute', inset: 0, opacity: .05, backgroundImage: 'repeating-linear-gradient(90deg, transparent 0 78px, #fff 78px 80px)', pointerEvents: 'none' }}></div>

      <Container style={{ position: 'relative', padding: '64px 28px 72px' }}>
        <div className="hero-grid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.05fr) minmax(0,.95fr)', gap: 56, alignItems: 'center' }}>
          {/* LEFT */}
          <div>
            <Eyebrow style={{ color: 'var(--red)' }}>Inland Empire Car Accident Lawyer</Eyebrow>
            <h1 style={{ fontFamily: 'var(--font-display)', textTransform: 'uppercase', lineHeight: .95, fontSize: 'clamp(3.4rem, 7.5vw, 6.4rem)', margin: '20px 0 0', letterSpacing: '-.01em' }}>
              Hurt on the<br /><span style={{ color: 'var(--red)' }}>I-10, I-15</span> or <span style={{ color: 'var(--red)' }}>I-215?</span>
            </h1>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 'clamp(1.05rem,1.7vw,1.35rem)', color: 'var(--fg-on-dark-2)', maxWidth: 520, marginTop: 22, lineHeight: 1.5 }}>
              Before you call the insurance company, call Attorney Big Al. We fight for injured drivers across San Bernardino &amp; Riverside County, and you pay <strong style={{ color: '#fff' }}>nothing</strong> unless we win.
            </p>

            <div style={{ display: 'flex', gap: 16, marginTop: 34, flexWrap: 'wrap', alignItems: 'center' }}>
              <PhoneButton big />
              <GhostButton variant="outlineLight" icon="arrow-down" onClick={onForm}>Free Case Review</GhostButton>
            </div>

            <div style={{ display: 'flex', gap: 28, marginTop: 40, flexWrap: 'wrap' }}>
              {[['shield-check', 'No fee unless we win'], ['clock', 'Open 24/7'], ['languages', 'Hablamos Español']].map(([ic, tx]) => (
                <span key={tx} style={{ display: 'flex', alignItems: 'center', gap: 10, color: '#fff', fontFamily: 'var(--font-headline)', textTransform: 'uppercase', fontWeight: 600, fontSize: 14, letterSpacing: '.04em' }}>
                  <i data-lucide={ic} style={{ width: 21, height: 21, color: 'var(--red)' }}></i>{tx}
                </span>
              ))}
            </div>
          </div>

          {/* RIGHT — form */}
          <div className="hero-form"><LeadCard /></div>
        </div>
      </Container>
    </section>
  );
}

function StatsBar() {
  const stats = [['10K', '+', 'Cases Handled'], ['$100M', '+', 'Recovered'], ['149', '', 'Google Reviews'], ['30', '+', 'Years Fighting']];
  return (
    <section style={{ background: 'var(--bg-surface)', borderBottom: '3px solid var(--ink)' }}>
      <Container style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18, padding: '40px 28px' }} className="stats-grid">
        {stats.map(([n, plus, label], i) => (
          <div key={label} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', borderLeft: i ? '1px solid var(--line)' : 'none' }} className="stat-cell">
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(2.4rem,5vw,4rem)', lineHeight: .85, color: 'var(--ink)' }}>
              {n}<span style={{ color: 'var(--red)' }}>{plus}</span>
            </span>
            <span style={{ fontFamily: 'var(--font-headline)', textTransform: 'uppercase', fontWeight: 600, fontSize: 12.5, letterSpacing: '.12em', color: 'var(--fg2)', marginTop: 10 }}>{label}</span>
          </div>
        ))}
      </Container>
    </section>
  );
}

Object.assign(window, { Hero, StatsBar, LeadCard });