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

/**
 * Paired typewriter: drives the hero TITLE and SUB in lockstep so they
 * appear and disappear together.
 *  - typing:   both grow one char per tick; advances to "holding" only once
 *              BOTH strings are fully typed
 *  - holding:  full pair sits on screen
 *  - deleting: both shrink one char per tick; advances to the next pair only
 *              once BOTH strings are empty
 * Result: synchronized start, hold, and clear regardless of length difference.
 */
function usePairedTypewriter(pairs, { typeSpeed = 46, deleteSpeed = 20, hold = 3400, startDelay = 600 } = {}) {
  const [titleText, setTitleText] = useStateHero("");
  const [subText, setSubText] = useStateHero("");
  const [idx, setIdx] = useStateHero(0);
  const [phase, setPhase] = useStateHero("idle"); // idle, typing, holding, deleting
  const startedRef = useRefHero(false);

  useEffectHero(() => {
    if (startedRef.current) return;
    startedRef.current = true;
    const t = setTimeout(() => setPhase("typing"), startDelay);
    return () => clearTimeout(t);
  }, [startDelay]);

  useEffectHero(() => {
    if (phase === "idle") return;
    const { title, sub } = pairs[idx];

    if (phase === "typing") {
      const full = titleText.length >= title.length && subText.length >= sub.length;
      if (!full) {
        const t = setTimeout(() => {
          setTitleText(title.slice(0, titleText.length + 1));
          setSubText(sub.slice(0, subText.length + 1));
        }, typeSpeed);
        return () => clearTimeout(t);
      }
      const t = setTimeout(() => setPhase("deleting"), hold);
      return () => clearTimeout(t);
    }

    if (phase === "deleting") {
      const empty = titleText.length === 0 && subText.length === 0;
      if (!empty) {
        const t = setTimeout(() => {
          setTitleText((s) => s.slice(0, -1));
          setSubText((s) => s.slice(0, -1));
        }, deleteSpeed);
        return () => clearTimeout(t);
      }
      setIdx((i) => (i + 1) % pairs.length);
      setPhase("typing");
    }
  }, [phase, titleText, subText, idx, pairs, typeSpeed, deleteSpeed, hold]);

  return [titleText, subText];
}

/* Title + sub are paired 1:1 so they cycle together */
const HERO_PAIRS = [
  {
    title: "AI automation, architected to ship.",
    sub: "We design, build, and operate the agent systems your team would build if it had three more engineers.",
  },
  {
    title: "Workflows that don't break on Monday.",
    sub: "Stop being the integration between your tools. We wire LangGraph, n8n, and your CRM into one system that runs without you.",
  },
  {
    title: "Build agents that actually run.",
    sub: "Four weeks to ship. Then it runs without you. We carry the pager.",
  },
  {
    title: "We architect what you're paying salaries for.",
    sub: "The automation layer your business already funds in headcount — built, shipped, and operated by us.",
  },
];

function Hero() {
  const [title, sub] = usePairedTypewriter(HERO_PAIRS, { startDelay: 600, typeSpeed: 46, deleteSpeed: 20, hold: 3400 });

  const videoRef = useRefHero(null);
  useEffectHero(() => {
    const v = videoRef.current;
    if (!v) return;
    v.play().catch(() => {/* autoplay blocked — leave paused poster */});
  }, []);

  return (
    <section className="at-hero" id="top">
      <video
        ref={videoRef}
        className="at-hero-video"
        autoPlay
        muted
        loop
        playsInline
        preload="auto"
        aria-hidden="true">
        
        <source src={(window.__resources && window.__resources.heroVideo) || "assets/hero-bg.mp4"} type="video/mp4" />
      </video>
      <div className="at-hero-veil" aria-hidden="true"></div>
      <div className="at-hero-orb" aria-hidden="true"></div>
      <div className="at-hero-grid" aria-hidden="true" data-comment-anchor="6a1baa1c64-div-88-7"></div>

      <div className="at-hero-inner">
        <div className="at-hero-content">
          <h1 className="at-hero-title" data-comment-anchor="ad18f21974-h1-115-9">
            <span className="at-typed">{title}</span>
            <span className="at-caret"></span>
          </h1>

          <p className="at-hero-sub">
            <span className="at-typed">{sub}</span>
            <span className="at-caret"></span>
          </p>

          <div className="at-hero-ctas">
            <a href="/booking" className="at-btn at-btn--primary" data-cursor-label="book audit">
              Book a 30-min audit
              <i data-lucide="arrow-right"></i>
            </a>
            <a href="#work" className="at-btn at-btn--ghost" data-cursor-label="see the work">
              See the work
            </a>
          </div>

          <div className="at-hero-meta">
            <span><i data-lucide="circle-check" style={{ width: 12, height: 12, color: '#2EA84A' }}></i> 50+ projects delivered</span>
            <span>·</span>
            <span>$360K+ saved per build</span>
            <span>·</span>
            <span>99.8% accuracy</span>
          </div>
        </div>
      </div>

      <div className="at-scroll-hint">
        <span>scroll</span>
        <span className="at-scroll-hint-line"></span>
      </div>
    </section>);

}

window.Hero = Hero;