const Hero = ({ accent }) => {
  const [uptime, setUptime] = React.useState(99.987);
  const [tickets, setTickets] = React.useState(3);
  const [latency, setLatency] = React.useState(184);
  const [clock, setClock] = React.useState("");

  React.useEffect(() => {
    const fmt = () => {
      const d = new Date();
      const pad = (n) => String(n).padStart(2, "0");
      setClock(`${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`);
    };
    fmt();
    const id = setInterval(() => {
      fmt();
      setLatency((v) => Math.max(120, Math.min(260, v + Math.round((Math.random() - 0.5) * 20))));
    }, 1000);
    return () => clearInterval(id);
  }, []);

  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="hero__ribbon">
        <span className="hero__ribbon-dot" />
        <span>LIVE — Centrum monitoringu Gorilla</span>
        <span className="hero__ribbon-sep">·</span>
        <span className="mono">{clock} CET</span>
        <span className="hero__ribbon-sep">·</span>
        <span className="mono">PL · 24/7</span>
      </div>

      <div className="hero__grid">
        <div className="hero__left">
          <div className="hero__eyebrow mono">
            <span>§01</span>
            <span>Wsparcie techniczne e-commerce</span>
          </div>
          <h1 className="hero__title">
            Twój sklep <em>nigdy</em> nie&nbsp;śpi.<br />
            My&nbsp;też <u>nie</u>.
          </h1>
          <p className="hero__lede">
            Stała opieka techniczna, monitoring i dedykowany Help Desk <strong>24 godziny na dobę,
            7 dni w tygodniu</strong>. Dla właścicieli i menadżerów sklepów, którzy nie chcą tracić
            sprzedaży na przestojach.
          </p>

          <div className="hero__cta">
            <a href="#pakiety" className="btn btn--primary">
              <span>Zobacz pakiety SLA</span>
              <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">
                <path d="M2 8h11M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="square" />
              </svg>
            </a>
            <a href="#audyt" className="btn btn--ghost">Bezpłatny audyt 24h</a>
          </div>

          <ul className="hero__bullets mono">
            <li><span className="check">✓</span> Reakcja od 4&nbsp;h <span className="muted">— pakiet Premium</span></li>
            <li><span className="check">✓</span> Sylius · Shopify · PrestaShop · WooCommerce · Shoper</li>
            <li><span className="check">✓</span> Dedykowany opiekun i miesięczny raport PDF</li>
          </ul>
        </div>

        <aside className="hero__right">
          <div className="dash">
            <div className="dash__head">
              <div className="dash__head-l">
                <span className="dash__dot" />
                <span className="mono">store.example.pl</span>
              </div>
              <span className="mono dash__head-r">SLA · Premium</span>
            </div>

            <div className="dash__metrics">
              <div className="metric">
                <div className="metric__label mono">UPTIME · 30D</div>
                <div className="metric__value">{uptime.toFixed(3)}<span>%</span></div>
                <div className="metric__bar"><div style={{ width: `${uptime}%` }} /></div>
              </div>
              <div className="metric">
                <div className="metric__label mono">LATENCY P95</div>
                <div className="metric__value">{latency}<span>ms</span></div>
                <div className="metric__spark">
                  {Array.from({ length: 28 }).map((_, i) => (
                    <span key={i} style={{ height: `${20 + ((i * 13 + latency) % 60)}%` }} />
                  ))}
                </div>
              </div>
              <div className="metric">
                <div className="metric__label mono">TICKETS · OPEN</div>
                <div className="metric__value">{tickets}<span>/ 12</span></div>
                <div className="metric__chips">
                  <span className="chip chip--ok">P3 · 2</span>
                  <span className="chip chip--warn">P2 · 1</span>
                </div>
              </div>
            </div>

            <div className="dash__log">
              <div className="dash__log-row">
                <span className="mono dim">04:12</span>
                <span className="tag tag--ok">DEPLOY</span>
                <span>Hotfix koszyka · #4821</span>
              </div>
              <div className="dash__log-row">
                <span className="mono dim">03:58</span>
                <span className="tag tag--info">CHECK</span>
                <span>Backup nightly · OK (3.2&nbsp;GB)</span>
              </div>
              <div className="dash__log-row">
                <span className="mono dim">02:41</span>
                <span className="tag tag--warn">ALERT</span>
                <span>Spike CPU 81% · auto-skalowanie</span>
              </div>
              <div className="dash__log-row">
                <span className="mono dim">02:42</span>
                <span className="tag tag--ok">RESOLVE</span>
                <span>CPU 22% · 47s downtime: 0</span>
              </div>
            </div>

            <button className="dash__pill mono" onClick={() => setTickets((t) => Math.max(0, t - 1))}>
              <span className="dash__dot dash__dot--small" />
              Inżynier dyżurny: Marek K.
              <span className="dim">→ przejmij zgłoszenie</span>
            </button>
          </div>

          <div className="hero__stack mono">
            <span>Stack:</span>
            <span className="pill">Sylius</span>
            <span className="pill">Shopify</span>
            <span className="pill">PrestaShop</span>
            <span className="pill">WooCommerce</span>
            <span className="pill">Shoper</span>
          </div>
        </aside>
      </div>
    </section>
  );
};

window.Hero = Hero;