// Hero.jsx — landing hero with companion image collage
function Hero({ lang }) {
  const copy = {
    pl: {
      eyebrow: 'Organizacja pożytku społecznego · Kraków',
      h1: 'Wspieramy ludzi, którzy chcą wrócić do gry.',
      lead: (
        <>
          Fundacja PK KAR działa na rzecz{' '}
          <strong>włączenia społecznego, edukacji i rozwoju kompetencji</strong> — od reintegracji osób zagrożonych wykluczeniem, przez kompetencje cyfrowe, po wsparcie seniorów i osób z niepełnosprawnościami.
        </>
      ),
      cta1: 'Wesprzyj fundację',
      cta2: 'Zobacz, co robimy',
      meta: 'KRS 0001239670 · NIP 6793366270 · Kraków',
    },
    en: {
      eyebrow: 'Public-benefit organisation · Kraków',
      h1: 'We support people who want to get back in the game.',
      lead: (
        <>
          Fundacja PK KAR works for{' '}
          <strong>social inclusion, education and skills development</strong> — from reintegrating people at risk of exclusion, through digital competencies, to supporting seniors and people with disabilities.
        </>
      ),
      cta1: 'Support the foundation',
      cta2: 'See what we do',
      meta: 'KRS 0001239670 · NIP 6793366270 · Kraków, Poland',
    },
  }[lang];

  return (
    <section className="hero" id="main">
      <div className="container hero-grid">
        <div className="hero-copy">
          <p className="eyebrow">{copy.eyebrow}</p>
          <h1>{copy.h1}</h1>
          <p className="lead">{copy.lead}</p>
          <div className="hero-cta">
            <a className="btn btn-primary" href="#wesprzyj">{copy.cta1}</a>
            <a className="btn btn-ghost"   href="#obszary">{copy.cta2}</a>
          </div>
          <p className="hero-meta">{copy.meta}</p>
        </div>
        <div className="hero-collage" aria-hidden="true">
          <figure className="hc-1">
            <img loading="lazy" alt=""
              src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?auto=format&fit=crop&w=600&q=80"/>
          </figure>
          <figure className="hc-2">
            <img loading="lazy" alt=""
              src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=600&q=80"/>
          </figure>
          <figure className="hc-3">
            <img loading="lazy" alt=""
              src="https://images.unsplash.com/photo-1559027615-cd4628902d4a?auto=format&fit=crop&w=600&q=80"/>
          </figure>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;