/* Who We Serve, Expectations, Process */

function WhoSection() {
  const caseTypes = [
    'Motor vehicle accidents',
    'Rideshare accidents',
    'Truck & commercial vehicle',
    'Pedestrian accidents',
    'Uninsured motorist claims',
  ];
  return (
    <section id="who" className="section" style={{ background: 'var(--bg)', borderTop: '1px solid var(--line-soft)' }}>
      <div className="container">
        <div className="reveal" style={{ marginBottom: 80 }}>
          <div className="kicker-line"><span className="eyebrow">Who We Serve</span></div>
          <h2 className="display display-md" style={{ maxWidth: 1100 }}>
            Built exclusively for <em>personal injury law.</em>
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 40, alignItems: 'start' }}>
          <div className="reveal" style={{ gridColumn: 'span 7' }}>
            <p className="pull" style={{ marginBottom: 32, color: 'var(--fg)' }}>
              We work exclusively with PI attorneys and law firms specializing in motor vehicle accidents.
            </p>
            <p style={{ fontSize: 17, color: 'var(--fg-muted)', lineHeight: 1.7, marginBottom: 24 }}>
              Every lead is pre-qualified, exclusive to your firm, and never shared with a competing attorney.
              Whether you're a solo practitioner building your caseload or an established firm looking to scale,
              we deliver the cases to make it happen.
            </p>
            <p style={{ fontSize: 14, color: 'var(--accent)', letterSpacing: '0.04em' }}>
              Your competitors are still waiting on referrals. You don't have to.
            </p>
          </div>

          <div className="reveal" style={{ gridColumn: 'span 5', borderLeft: '1px solid var(--accent-line)', paddingLeft: 32 }}>
            <div className="eyebrow-dim" style={{ marginBottom: 24 }}>Cases We Source</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
              {caseTypes.map((c, i) => (
                <li key={i} style={{ display: 'flex', alignItems: 'center', gap: 16, padding: '18px 0', borderBottom: i < caseTypes.length - 1 ? '1px solid var(--line-soft)' : 'none' }}>
                  <span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--fg-dim)', minWidth: 24 }}>0{i+1}</span>
                  <span className="serif" style={{ fontSize: 22, color: 'var(--fg)', fontWeight: 400 }}>{c}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function ExpectationsSection() {
  const cards = [
    { eyebrow: '01', title: 'Exclusive Leads', body: "Every lead is yours alone — never sold or shared with another firm. Each prospect has shown real intent and is actively looking for representation right now." },
    { eyebrow: '02', title: 'Pre-Qualified Cases', body: "We verify intent, injury, and fit before a lead reaches you. No tire-kickers. No time-wasters. Just claimants ready to sign." },
    { eyebrow: '03', title: 'Fast Delivery', body: "First leads can arrive as soon as the next day, with most firms onboarded and live within 7–14 days. No waiting months to see if it works." },
    { eyebrow: '04', title: 'Full Transparency', body: "You know exactly where every lead came from, how it was qualified, and what you paid. No black boxes, ever." },
  ];
  return (
    <section id="expectations" className="section" style={{ background: 'var(--bg-elev)' }}>
      <div className="container">
        <div className="reveal" style={{ marginBottom: 72 }}>
          <div className="kicker-line"><span className="eyebrow">What You'll Receive</span></div>
          <h2 className="display display-md" style={{ marginBottom: 24 }}>What should you <em>expect?</em></h2>
          <p style={{ fontSize: 18, color: 'var(--fg-muted)', maxWidth: 640 }}>
            Real results — not vanity metrics. We focus on what actually grows your caseload.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 1, background: 'var(--line-soft)', border: '1px solid var(--line-soft)' }}>
          {cards.map((c, i) => (
            <div key={i} className="reveal lift-card" style={{ background: 'var(--bg-elev)', borderRadius: 0, border: 0, padding: '44px 40px' }}>
              <div className="mono" style={{ fontSize: 12, color: 'var(--accent)', marginBottom: 20, letterSpacing: '0.18em' }}>— {c.eyebrow}</div>
              <h3 className="serif" style={{ fontSize: 30, fontWeight: 400, color: 'var(--fg)', marginTop: 0, marginBottom: 16, letterSpacing: '-0.01em' }}>{c.title}</h3>
              <p style={{ color: 'var(--fg-muted)', fontSize: 15, lineHeight: 1.7, margin: 0 }}>{c.body}</p>
            </div>
          ))}
        </div>

        {/* Stat strip */}
        <div className="reveal" style={{ marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: '1px solid var(--line-soft)' }}>
          {[
            { v: '100%', l: 'Exclusive — never shared' },
            { v: '24h', l: 'Possible first lead' },
            { v: '3×', l: 'Average client ROI' },
          ].map((s, i) => (
            <div key={i} style={{ padding: '36px 32px', textAlign: 'center', borderRight: i < 2 ? '1px solid var(--line-soft)' : 'none' }}>
              <div className="serif" style={{ fontSize: 56, color: 'var(--accent)', fontWeight: 300, lineHeight: 1, marginBottom: 12 }}>{s.v}</div>
              <div style={{ fontSize: 12, color: 'var(--fg-muted)', letterSpacing: '0.04em' }}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ProcessSection() {
  const steps = [
    { n: '01', title: 'Discovery Call', body: "We learn about your firm, your ideal case profile, and your goals. Everything is built around your specific market — no generic playbooks." },
    { n: '02', title: 'Lead Strategy Setup', body: "We identify the highest-intent channels for your case types and configure targeting to attract claimants ready to sign — not just browsing." },
    { n: '03', title: 'Leads Delivered', body: "Qualified, exclusive leads start flowing directly to your intake team. Full contact details and qualification notes included — ready to close." },
    { n: '04', title: 'Ongoing Optimization', body: "We monitor performance, refine targeting, and ensure lead quality stays high. You get better results over time, not just at launch." },
  ];
  return (
    <section id="process" className="section" style={{ background: 'var(--bg)' }}>
      <div className="container">
        <div className="reveal" style={{ marginBottom: 80, display: 'grid', gridTemplateColumns: '1fr auto', gap: 40, alignItems: 'end' }}>
          <div>
            <div className="kicker-line"><span className="eyebrow">How It Works</span></div>
            <h2 className="display display-md" style={{ marginBottom: 0 }}>Simple. Fast. <em>Effective.</em></h2>
          </div>
          <div style={{ maxWidth: 360 }}>
            <p style={{ fontSize: 16, color: 'var(--fg-muted)', margin: 0 }}>
              From first call to first lead — a straightforward process built around your firm.
            </p>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: '1px solid var(--line-soft)' }}>
          {steps.map((s, i) => (
            <div key={i} className="reveal step-card" style={{ padding: '40px 32px 48px', borderRight: i < 3 ? '1px solid var(--line-soft)' : 'none', position: 'relative', transition: 'background .35s' }}
              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-elev)'}
              onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
              <div className="step-num" style={{ marginBottom: 28 }}>{s.n}</div>
              <h3 className="serif" style={{ fontSize: 24, fontWeight: 400, color: 'var(--fg)', margin: '0 0 14px', letterSpacing: '-0.01em' }}>{s.title}</h3>
              <p style={{ fontSize: 14, color: 'var(--fg-muted)', lineHeight: 1.65, margin: 0 }}>{s.body}</p>
              {/* Connecting tick */}
              {i < 3 && <span style={{ position: 'absolute', right: -5, top: 60, width: 9, height: 9, background: 'var(--bg)', border: '1px solid var(--accent-line)', borderRadius: '50%' }} />}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { WhoSection, ExpectationsSection, ProcessSection });