// Stories page — hero + featured story + filter chips + full grid.

const StoriesPage = () => {
  const { isMobile, isTablet } = useBreakpoint();
  const [filter, setFilter] = React.useState('All');
  const countries = ['All', ...Array.from(new Set(NURSE_STORIES.map(s => s.country)))];
  const featured = NURSE_STORIES[1];
  const list = filter === 'All' ? NURSE_STORIES : NURSE_STORIES.filter(s => s.country === filter);
  const gridCols = isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)';
  const heroPad = isMobile ? '100px 20px 40px' : '160px 60px 64px';

  return (
    <>
      <section style={{ textAlign: 'center', background: 'var(--warm-band)' }}>
        <div style={{ maxWidth: 920, margin: '0 auto', padding: heroPad }}>
          <Eyebrow color="var(--accent-warm-deep)">Stories from our nurses</Eyebrow>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontWeight: 700,
            fontSize: isMobile ? 32 : 56,
            letterSpacing: '-0.02em', color: 'var(--ink-900)', margin: '14px auto 18px', lineHeight: 1.15, textWrap: 'balance',
          }}>
            Every nurse you meet here is a real Nucleus alum.
          </h1>
          <p style={{ fontFamily: 'var(--font-ui)', fontSize: isMobile ? 15 : 18, color: 'var(--ink-700)', maxWidth: 720, margin: '0 auto', lineHeight: 1.6 }}>
            They came from across Latin America. Today they're building careers — and lives — in the United States.
          </p>
        </div>
      </section>

      <FeaturedStory story={featured} />

      <section style={{ padding: isMobile ? '32px 20px 64px' : '40px 80px 100px', background: 'var(--cream)' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, justifyContent: 'center', marginBottom: 36 }}>
            {countries.map(c => (
              <button key={c} onClick={() => setFilter(c)} style={{
                background: filter === c ? 'var(--stability-50)' : '#fff',
                color: filter === c ? '#fff' : 'var(--ink-900)',
                border: '1px solid ' + (filter === c ? 'var(--stability-50)' : 'var(--ink-300)'),
                padding: '8px 18px', borderRadius: 1000, cursor: 'pointer',
                fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 13,
              }}>{c}</button>
            ))}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: gridCols, gap: 20 }}>
            {list.map(s => <NurseCard key={s.name} story={s} />)}
          </div>
        </div>
      </section>
    </>
  );
};

window.StoriesPage = StoriesPage;