/* global React, CAL_LINK, Arrow */
const { useEffect: useEffectHero, useState: useStateHero, useRef: useRefHero } = React;

const HERO_LOGS = [
  { t: '07:42', tag: 'SYS',  cls: 'info', body: 'Morning scan started · 18 arrivals today' },
  { t: '07:42', tag: 'PM System',  cls: 'info', body: 'Hostfully synced · 4 same-day bookings' },
  { t: '07:43', tag: 'CHECK', cls: 'ok',  body: 'Clean confirmed → 412 Ridgeway · Maria' },
  { t: '07:43', tag: 'CHECK', cls: 'ok',  body: 'Clean confirmed → 88 Larkspur Lane · Diego' },
  { t: '07:44', tag: 'RISK',  cls: 'warn', body: '15 Pine Hollow · cleaner idle 31m, no reply' },
  { t: '07:44', tag: 'ESC',   cls: 'warn', body: 'Backup cleaner Jenna notified · WhatsApp' },
  { t: '07:46', tag: 'CHECK', cls: 'ok',   body: 'Jenna accepted · ETA 09:20 · 4hr buffer' },
  { t: '07:48', tag: 'OWNER', cls: 'info', body: 'Daily digest queued for 12 owners @ 09:00' },
  { t: '07:50', tag: 'OK',    cls: 'ok',   body: 'All 18 arrivals covered · 0 unresolved' },
];

function Console() {
  const [visible, setVisible] = useStateHero(0);
  useEffectHero(() => {
    if (visible >= HERO_LOGS.length) {
      const t = setTimeout(() => setVisible(0), 4200);
      return () => clearTimeout(t);
    }
    const t = setTimeout(() => setVisible((v) => v + 1), visible === 0 ? 200 : 520);
    return () => clearTimeout(t);
  }, [visible]);

  return (
    <div className="console" aria-hidden="true">
      <div className="console-bar">
        <span className="console-title">futureready · live operations feed</span>
        <span className="console-status">running</span>
      </div>
      <div className="console-body">
        {HERO_LOGS.slice(0, visible).map((l, i) => (
          <div key={i} className={`log-row ${l.cls}`} style={{ animationDelay: '0ms' }}>
            <span className="t">{l.t}</span>
            <span className="body">
              <span className="tag">{l.tag}</span>{l.body}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

function Hero() {
  return (
    <section className="hero" id="top">
      <div className="wrap">
        <div className="hero-grid">
          <div>
            <Reveal>
              <span className="eyebrow">Ops automation · Short-term rentals</span>
            </Reveal>
            <Reveal delay={80}>
              <h1 className="h-display" style={{ marginTop: 28 }}>
                24/7 automation for <br/>
                short-term rental <em>operations.</em>
              </h1>
            </Reveal>
            <Reveal delay={180}>
              <p className="lead" style={{ marginTop: 28 }}>
                We build operations automation for short-term rental managers that checks in with cleaners automatically, catches turnover failures before check-in, and keeps owners informed. Without adding headcount.
              </p>
            </Reveal>
            <Reveal delay={260} className="hero-cta">
              <a href={CAL_LINK} target="_blank" rel="noopener noreferrer" className="btn btn-primary">
                Book a Free Discovery Call <Arrow />
              </a>
              <span className="hero-subnote">15 minutes · No pitch · Just a clear next step</span>
            </Reveal>
          </div>
          <Reveal delay={200}>
            <Console />
          </Reveal>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;