// Stories.jsx — projects gallery (NEW improvement section)
// 3-card grid of project stories with photo + title + short blurb.
function Stories({ lang }) {
  const t = lang === 'pl'
    ? {
        kicker: 'Projekty i historie',
        h2: 'Co już udało nam się zrobić',
        intro: 'Krótki przegląd projektów, w które jesteśmy zaangażowani lokalnie w Krakowie i okolicach.',
        items: [
          {
            tag: 'Edukacja cyfrowa',
            title: 'Warsztaty cyfrowe dla seniorów',
            body: 'Cykl spotkań w bibliotekach Krakowa: smartfony, bezpieczeństwo w sieci, e-administracja.',
            img: 'https://images.unsplash.com/photo-1556157382-97eda2d62296?auto=format&fit=crop&w=900&q=80',
          },
          {
            tag: 'Reintegracja',
            title: 'Doradztwo zawodowe — powrót na rynek pracy',
            body: 'Indywidualne sesje doradcze dla osób długotrwale bezrobotnych.',
            img: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=900&q=80',
          },
          {
            tag: 'Włączenie społeczne',
            title: 'Spotkania międzypokoleniowe',
            body: 'Cykl warsztatów łączących młodzież i seniorów wokół wspólnych projektów lokalnych.',
            img: 'https://images.unsplash.com/photo-1517486808906-6ca8b3f04846?auto=format&fit=crop&w=900&q=80',
          },
        ],
      }
    : {
        kicker: 'Projects & stories',
        h2: 'What we\u2019ve achieved so far',
        intro: 'A short overview of projects we are engaged in locally in Kraków and surroundings.',
        items: [
          {
            tag: 'Digital education',
            title: 'Digital workshops for seniors',
            body: 'A series of meetings in Kraków libraries: smartphones, online safety, e-administration.',
            img: 'https://images.unsplash.com/photo-1556157382-97eda2d62296?auto=format&fit=crop&w=900&q=80',
          },
          {
            tag: 'Reintegration',
            title: 'Career advisory — return to the labour market',
            body: 'Individual advisory sessions for the long-term unemployed.',
            img: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=900&q=80',
          },
          {
            tag: 'Social inclusion',
            title: 'Inter-generational meetings',
            body: 'Workshops connecting youth and seniors around shared local projects.',
            img: 'https://images.unsplash.com/photo-1517486808906-6ca8b3f04846?auto=format&fit=crop&w=900&q=80',
          },
        ],
      };

  return (
    <section id="projekty" className="section">
      <div className="container">
        <p className="kicker">{t.kicker}</p>
        <h2>{t.h2}</h2>
        <p className="section-intro">{t.intro}</p>
        <div className="stories">
          {t.items.map((s, i) => (
            <article className="story-card" key={i}>
              <div className="story-img">
                <img loading="lazy" alt="" src={s.img}/>
                <span className="story-tag">{s.tag}</span>
              </div>
              <div className="story-body">
                <h3>{s.title}</h3>
                <p>{s.body}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Stories = Stories;