/* Patient stories — featured quote cards (from credibility-kit, illustrative) */
function Stories() {
  const featured = [
    { img: 'assets/images/story-1.png', quote: 'I had a fever on a Sunday and assumed I\u2019d be stuck waiting for hours somewhere. I checked the wait online, booked a spot, and was home with a plan in under an hour.', name: 'Jordan M.', tag: 'Access without the wait' },
    { img: 'assets/images/story-2.png', quote: 'We take all three kids here. One stop, every age, and nobody made me feel like I was rushing a checklist.', name: 'Marc D.', tag: 'Every age and stage' },
    { img: 'assets/images/story-3.png', quote: 'After two years without a family doctor, having a team that actually remembers my history feels like a luxury. It\u2019s not. It should just be normal.', name: 'Aisha R.', tag: 'A team that knows you' },
  ];
  const more = [
    { quote: 'The doctor let me finish my sentences. I didn\u2019t realise how rare that had become until it happened.', name: 'Priscilla T.', tag: 'Listening comes first' },
    { quote: 'Booking, the forms, my records, all on my phone. The visit itself felt human because the rest was already handled.', name: 'Devon K.', tag: 'Modern tools, human care' },
    { quote: 'I came in for a walk-in cold and left with a real family doctor. I didn\u2019t even know that was possible anymore.', name: 'Nadia S.', tag: 'A team that knows you' },
  ];
  return (
    <Section bg="var(--sand-100)" id="stories">
      <Container>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 16, marginBottom: 48 }}>
          <div style={{ maxWidth: 640 }}>
            <Overline style={{ marginBottom: 14 }}>Patient stories</Overline>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 40, lineHeight: 1.12, letterSpacing: '-0.015em', color: 'var(--ink-900)', margin: '0 0 16px' }}>What it feels like to be a patient here</h2>
            <p style={{ fontFamily: 'var(--font-sans)', fontSize: 18, lineHeight: 1.6, color: 'var(--ink-500)', margin: 0 }}>Real care is best described by the people who receive it.</p>
          </div>
          <IllusTag>Sample testimonials</IllusTag>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {featured.map((s) => (
            <div key={s.name} style={{ background: 'var(--surface)', borderRadius: 'var(--r-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-sm)', border: '1px solid var(--line)', display: 'flex', flexDirection: 'column' }}>
              <div style={{ height: 196, background: `url(${s.img}) center/cover` }}></div>
              <div style={{ padding: '24px 24px 26px', display: 'flex', flexDirection: 'column', flex: 1 }}>
                <Chip variant="sand">{s.tag}</Chip>
                <p style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 19, lineHeight: 1.42, color: 'var(--ink-900)', margin: '16px 0 18px', letterSpacing: '-0.005em', flex: 1, textWrap: 'pretty' }}>{'\u201C'}{s.quote}{'\u201D'}</p>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 600, color: 'var(--ink-500)' }}>{s.name}</div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 24 }}>
          {more.map((s) => (
            <div key={s.name} style={{ background: 'transparent', borderRadius: 'var(--r-lg)', border: '1px solid var(--line-warm)', padding: '24px 26px', display: 'flex', flexDirection: 'column' }}>
              <Icon name="quote" size={22} color="var(--teal-400)" />
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 15.5, lineHeight: 1.55, color: 'var(--ink-700)', margin: '12px 0 16px', flex: 1, textWrap: 'pretty' }}>{s.quote}</p>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10 }}>
                <span style={{ fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 700, color: 'var(--ink-900)' }}>{s.name}</span>
                <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12.5, color: 'var(--teal-600)', fontWeight: 600 }}>{s.tag}</span>
              </div>
            </div>
          ))}
        </div>

        <p style={{ fontFamily: 'var(--font-sans)', fontSize: 12.5, color: 'var(--ink-400)', margin: '28px 0 0' }}>
          Quotes are illustrative placeholders for this demo. Real, consented patient testimonials would replace them before launch.
        </p>
      </Container>
    </Section>
  );
}
window.Stories = Stories;