import React from 'react';

const avatarColors = ['#6366f1', '#8b5cf6', '#ec4899', '#f59e0b', '#10b981'];
const avatarInitials = ['MK', 'AW', 'TR', 'JP', 'KL'];

const Hero = () => {
  return (
    <section className="hero" aria-label="Sekcja główna">
      <div className="hero__bg" aria-hidden="true" />

      <div className="hero__inner">

        {/* ── LEWA STRONA: treść ── */}
        <div className="hero__content">

          <div className="hero__eyebrow">
            <span className="hero__eyebrow-dot" aria-hidden="true" />
            Dla developerów i profesjonalistów AI w Polsce
          </div>

          <h1 className="hero__headline">
            Nigdy więcej nie przegap<br />
            <span className="hero__headline-accent">ważnej aktualizacji AI</span>
          </h1>

          <p className="hero__subtitle">
            Codziennie ręcznie selekcjonowane wiadomości AI, tutoriale i głębokie analizy —
            bez szumu informacyjnego. Polska platforma dla praktyków, którzy chcą budować,
            a nie tylko śledzić trendy.
          </p>

          <div className="hero__cta-group">
            <button className="hero__btn-primary">
              Zacznij czytać za darmo →
            </button>
            <button className="hero__btn-ghost">
              Zobacz przykładowy artykuł
            </button>
          </div>

          <div className="hero__proof">
            <div className="hero__avatars" aria-hidden="true">
              {avatarInitials.map((init, i) => (
                <div key={i} className="hero__avatar" style={{ background: avatarColors[i] }}>
                  {init}
                </div>
              ))}
            </div>
            <div className="hero__proof-text">
              <span className="hero__stars" aria-label="Ocena 5 gwiazdek">★★★★★</span>
              <strong>Zaufało nam już 12&nbsp;000+ czytelników</strong>
            </div>
          </div>
        </div>

        {/* ── PRAWA STRONA: animowany robot ── */}
        <div className="hero__image-wrap" aria-hidden="true">

          {/* warstwa 1: cień pod robotem */}
          <div className="hero__robot-shadow" />

          {/* warstwa 2: float — korpus robota lata razem z poświatą */}
          <div className="hero__robot-float">
            <div className="hero__robot-body-glow" />
            <div className="hero__robot-layers">
              <img
                src="/robot.svg"
                alt="Robot"
                className="hero__robot-layer hero__robot-layer--body"
              />
            </div>
          </div>

          {/* warstwa 5: niezależna żarówka (poza kontenerem float) */}
          <div className="hero__robot-bulb-container">
            <img
              src="/zarowka.svg"
              alt="Żarówka"
              className="hero__robot-layer hero__robot-layer--bulb"
            />
          </div>
        </div>

      </div>
    </section>
  );
};

export default Hero;
