/* eslint-disable */
// Hero — terminal feed + stacked wordmark + scope panel.

const __HERO_FEED = [
  { t: "wti@console ~ ", c: "scope", tail: { t: "init --identity wtic2", c: "" }},
  { t: "  -> 4 operating verticals  ", c: "dim", tail: { t: "[ MOUNTED ]", c: "ok" }},
  { t: "  -> jurisdiction:state-of-texas  ", c: "dim", tail: { t: "[ OK ]", c: "ok" }},
  { t: "  -> outside capital  ", c: "dim", tail: { t: "[ NONE ]", c: "ok" }},
  { t: "Standing by.", c: "" }
];

function Hero({ density }) {
  const [terminalLines, setTerminalLines] = React.useState([]);

  React.useEffect(() => {
    let cancelled = false;
    let timeoutId = null;
    function pump(i) {
      if (cancelled) return;
      if (i >= __HERO_FEED.length) return;
      const next = __HERO_FEED[i];
      setTerminalLines(prev => [...prev, next]);
      timeoutId = setTimeout(() => pump(i + 1), 320);
    }
    pump(0);
    return () => {
      cancelled = true;
      if (timeoutId) clearTimeout(timeoutId);
    };
  }, []);

  return (
    <section className="hero" id="top">
      <div className="hero__bg"></div>
      <div className="hero__grid-bg"></div>
      <div className="container hero__inner">
        <div>
          <div className="hero__eyebrow reveal is-visible">01 // OPERATING COMPANY · TX-LLC</div>

          <div className="hero__terminal" aria-live="polite">
            {terminalLines.map((l, i) => {
              if (!l) return null;
              return (
                <div key={i}>
                  <span className={l.c || ""}>{l.t}</span>
                  {l.tail ? <span className={l.tail.c || ""}>{l.tail.t}</span> : null}
                </div>
              );
            })}
            <span className="hero__terminal__caret"></span>
          </div>

          <h1 className="hero__title">
            <span className="hero__title-line reveal is-visible" data-delay="2">Whiskey</span>
            <span className="hero__title-line reveal is-visible" data-delay="3">Tango</span>
            <span className="hero__title-line hero__title-line--accent reveal is-visible" data-delay="4">Industries</span>
          </h1>

          <p className="hero__lede reveal is-visible" data-delay="5">
            An independent operating company headquartered in Texas. We build,
            run, and own consumer brands across coffee, media, digital products,
            and publishing.
          </p>

          <div className="hero__metadata reveal is-visible" data-delay="6">
            <Cell label="Established" value="2024" />
            <Cell label="Jurisdiction" value="Texas" />
            <Cell label="Structure" value="LLC" />
            <Cell label="OPS Active" value="03 / 04" />
          </div>
        </div>

        <Scope />
      </div>

      <a href="#operations" className="scroll-cue" aria-label="Scroll to operations">
        <span>Brief</span>
      </a>
    </section>
  );
}

function Cell({ label, value }) {
  return (
    <div className="hero__meta-cell">
      <span className="hero__meta-label">{label}</span>
      <span className="hero__meta-value">{value}</span>
    </div>
  );
}

window.Hero = Hero;