// PracticeAreas.jsx — home practice-area section. Cards are real links to each practice
// page. Hover/focus a card to preview it in the dark detail panel below.
function PracticeAreas() {
  const [active, setActive] = React.useState(0);
  
  const A = PRACTICES[active];

  return (
    <section id="practices" style={{ background: 'var(--bg-base)', padding: '110px 32px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>How We Help</div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(2.2rem,3.6vw,3rem)', color: 'var(--navy-800)', lineHeight: 1.06, marginBottom: 12 }}>
            Practice areas
          </h2>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: '1.05rem', color: 'var(--fg2)', maxWidth: 620, margin: '0 auto', lineHeight: 1.6 }}>
            Plaintiff-side representation across the cases that matter most to injured Californians.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 16, marginBottom: 36 }}>
          {PRACTICES.map((p, idx) => {
            const on = idx === active;
            return (
              <a key={p.slug} href={`/${p.slug}.html`}
                onMouseEnter={() => setActive(idx)}
                onFocus={() => setActive(idx)}
                style={{
                  position: 'relative', background: on ? '#fff' : 'var(--bg-elevated)',
                  border: '1px solid ' + (on ? 'var(--brass-400)' : 'var(--line)'),
                  borderRadius: 'var(--radius-sm)', padding: '22px 18px',
                  textDecoration: 'none',
                  display: 'block',
                  transition: 'all var(--dur-fast)',
                  boxShadow: on ? 'var(--shadow-md)' : 'none',
                  transform: on ? 'translateY(-2px)' : 'none',
                }}>
                {on && <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 2, background: 'var(--brass-500)', borderRadius: '2px 2px 0 0' }} />}
                <span style={{ display: 'inline-flex', marginBottom: 14, color: on ? 'var(--crimson-600)' : 'var(--navy-800)' }}><Icon name={p.icon} size={24} /></span>
                <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: '0.95rem', color: 'var(--ink)', marginBottom: 6 }}>{p.name}</div>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: '0.82rem', color: 'var(--ink-muted)', lineHeight: 1.45, marginBottom: 14 }}>{p.blurb}</div>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: '0.74rem', fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: on ? 'var(--crimson-600)' : 'var(--brass-600)', display: 'flex', alignItems: 'center', gap: 6 }}>
                  Learn more <span style={{ fontSize: '0.85rem' }}>→</span>
                </div>
              </a>
            );
          })}
        </div>

        {/* Dark detail panel for the hovered/active area */}
        <div style={{ background: 'var(--navy-800)', borderRadius: 'var(--radius-md)', padding: '40px 44px', color: '#fff', display: 'grid', gridTemplateColumns: '1fr auto', gap: 28, alignItems: 'center' }}>
          <div>
            <div className="eyebrow" style={{ color: 'var(--brass-400)', marginBottom: 10 }}>{A.name}</div>
            <p style={{ fontFamily: 'var(--font-serif)', fontSize: 'clamp(1.05rem,1.5vw,1.25rem)', lineHeight: 1.55, color: 'rgba(255,255,255,0.92)', maxWidth: 720 }}>
              {A.detail}
            </p>
          </div>
          <a href={`/${A.slug}.html`} style={{
            background: 'var(--crimson-600)', color: '#fff', textDecoration: 'none',
            padding: '14px 22px', borderRadius: 'var(--radius-sm)',
            fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: '0.88rem',
            letterSpacing: '0.04em', whiteSpace: 'nowrap',
            transition: 'background var(--dur-fast)',
          }}
            onMouseEnter={(e) => (e.target.style.background = 'var(--crimson-700)')}
            onMouseLeave={(e) => (e.target.style.background = 'var(--crimson-600)')}>
            Open {A.name} →
          </a>
        </div>
      </div>
    </section>
  );
}