/* global React */

/** Full-width editorial hero — lede block top-left, tall portrait centered,
 *  three service pills floating around the photo, connected by dashed
 *  rode-draad lines + pulsing gold ping dots on the photo edges. */
function HeroHub({ portrait = 'assets/photo-anne-portrait.jpg' }) {
  const services = [
    { id: 'websites',    t: 'Website & Webshop',         href: 'diensten-website.html',    pos: 's1' },
    { id: 'vormgeving',  t: 'Vormgeving & DTP',          href: 'diensten-vormgeving.html', pos: 's2' },
    { id: 'fotografie',  t: 'Professionele Fotografie',  href: 'diensten-fotografie.html', pos: 's3' },
  ];

  return (
    <section className="cs-hero-hub">
      <div className="cs-hero-hub-portrait-wrap">
        <div className="cs-hero-hub-echo"></div>
        <div className="cs-hero-hub-portrait">
          <img src={portrait} alt="Anne Caron — portretfoto"/>
          <span className="cs-hero-hub-portrait-tag">ANNE CARON · ROTTERDAM</span>
        </div>
        <span className="cs-hero-hub-ping p1"></span>
        <span className="cs-hero-hub-ping p2"></span>
        <span className="cs-hero-hub-ping p3"></span>

        {services.map((s) => (
          <a key={s.id} href={s.href} className={`cs-hero-hub-sat ${s.pos}`}>
            {s.t}
          </a>
        ))}
      </div>

      <div className="cs-hero-hub-lede">
        <h1 className="cs-hero-hub-h1">
          Jouw merk, online én offline,
          {' '}
          <span className="ital">één consistent geheel.</span>
        </h1>
        <p className="cs-hero-hub-body">
          Je website zegt het ene, je visitekaartje ziet er net even anders uit en op Instagram gebruik je weer andere kleuren. Ik zorg dat alles wat je laat zien één geheel wordt.
        </p>
        <div className="cs-hero-hub-actions">
          <a href="contact.html" className="cs-btn-primary">
            <span>Plan een kennismaking</span><span className="arrow">→</span>
          </a>
          <a href="diensten.html" className="cs-btn-ghost">
            Bekijk diensten <span className="arrow">↓</span>
          </a>
        </div>
      </div>
    </section>
  );
}

window.HeroHub = HeroHub;