// Hero with live "work console"

const { useEffect, useState, useRef } = React;

const WORK_EVENTS = [
{ who: "ezra", mark: "E", msg: "parsed OM · CBRE · Atlanta MF · 212 units", status: "scored · pass", tone: "ok" },
{ who: "mia", mark: "M", msg: "inbound call · 14:02 · booked next-day diag", status: "on dispatch", tone: "ok" },
{ who: "watchdog", mark: "W", msg: "workflow audit · day 2 · 47 steps mapped", status: "in progress", tone: "" },
{ who: "ezra", mark: "E", msg: "DAT query · 3,712 lanes · fuel rules applied", status: "bid ready", tone: "ok" },
{ who: "mia", mark: "M", msg: "ES-MX caller · maintenance plan · upsold", status: "booked", tone: "ok" },
{ who: "ezra", mark: "E", msg: "weekly summary · drafted · awaiting GP review", status: "pending", tone: "" },
{ who: "mia", mark: "M", msg: "after-hours · warranty · escalated to owner", status: "handoff", tone: "" },
{ who: "ezra", mark: "E", msg: "OM intake · Newmark · Phoenix · 88 units", status: "scored · pass", tone: "ok" },
{ who: "watchdog", mark: "W", msg: "artifact delivered · 3PL Chicago", status: "complete", tone: "ok" },
{ who: "mia", mark: "M", msg: "HVAC inbound · service area check · booked", status: "on dispatch", tone: "ok" },
{ who: "ezra", mark: "E", msg: "broker email · Loopnet link · pass · out of box", status: "scored · pass", tone: "" },
{ who: "mia", mark: "M", msg: "follow-up sweep · 38 calls · 11 reschedules", status: "complete", tone: "ok" }];


function fmtTime(d) {
  const hh = String(d.getHours()).padStart(2, "0");
  const mm = String(d.getMinutes()).padStart(2, "0");
  const ss = String(d.getSeconds()).padStart(2, "0");
  return `${hh}:${mm}:${ss}`;
}

function WorkConsole() {
  const [rows, setRows] = useState(() => {
    const now = new Date();
    return WORK_EVENTS.slice(0, 7).map((e, i) => ({
      ...e,
      time: fmtTime(new Date(now.getTime() - (7 - i) * 37_000)),
      id: i,
      isNew: false
    }));
  });
  const nextIdx = useRef(7);
  const nextId = useRef(7);

  useEffect(() => {
    const tick = setInterval(() => {
      const ev = WORK_EVENTS[nextIdx.current % WORK_EVENTS.length];
      nextIdx.current += 1;
      const id = nextId.current++;
      setRows((prev) => {
        const next = [
        { ...ev, time: fmtTime(new Date()), id, isNew: true },
        ...prev.map((r) => ({ ...r, isNew: false }))];

        return next.slice(0, 7);
      });
    }, 3800);
    return () => clearInterval(tick);
  }, []);

  return (
    <div className="console" aria-label="Live work console">
      <div className="console-head">
        <span className="live">ONTARA · LIVE</span>
        <span>work · today</span>
      </div>
      <div className="console-body">
        {rows.map((r) =>
        <div key={r.id} className={`console-row${r.isNew ? " new" : ""}`}>
            <div className="time">{r.time}</div>
            <div className={`who ${r.who}`}>{r.mark}</div>
            <div className="msg">{r.msg}</div>
            <div className={`status ${r.tone}`}>{r.status}</div>
          </div>
        )}
      </div>
      <div className="console-foot">
        <span>watchdog · ezra · mia</span>
        <span>streaming</span>
      </div>
    </div>);

}

function HeroConsole() {
  return (
    <section className="hero">
      <div className="container">
        <div className="hero-eyebrow-row">
          <span className="eyebrow"><span className="dot" /> Ontara — productized AI services</span>
          <span className="eyebrow-num">Est. 2025 · Real estate · Logistics · Services</span>
        </div>
        <div className="hero-grid">
          <div>
            <h1>
              Not a tool.<br />
              A <em>team.</em>
            </h1>
            <p className="hero-sub">
              Watchdog, Ezra, and Mia — three AI employees built for the back office of real estate, logistics, and property service operators. They audit your operations, run on your knowledge, and answer your phone.
            </p>
            <div className="hero-cta-row">
              <a href="https://tally.so/r/jaMNq4" target="_blank" rel="noopener" className="btn btn-lg">
                Start with the audit <span className="arrow">→</span>
              </a>
              <span className="hero-meta">3-day audit · fixed scope · artifact delivered</span>
            </div>
          </div>
          <WorkConsole />
        </div>

        <div className="hero-stats">
          <div className="cell">
            <div className="num"><em>3</em></div>
            <div className="lbl">Named AI employees, not a product catalog</div>
          </div>
          <div className="cell">
            <div className="num"><em>3</em><span style={{ color: "var(--ink-soft)" }}>-day</span></div>
            <div className="lbl">Fixed-scope audit before any commitment</div>
          </div>
          <div className="cell">
            <div className="num">2 <span style={{ color: "var(--ink-soft)", fontSize: "0.5em", verticalAlign: "0.25em" }}>wks</span></div>
            <div className="lbl">Live against your stack — no rip-and-replace</div>
          </div>
        </div>
      </div>
    </section>);

}

/* Variation B — headline-only, centered */
function HeroCentered() {
  return (
    <section className="hero">
      <div className="container">
        <div className="hero-eyebrow-row">
          <span className="eyebrow"><span className="dot" /> Ontara — productized AI services</span>
          <span className="eyebrow-num">Est. 2025</span>
        </div>
        <div style={{ textAlign: "center", padding: "80px 0" }}>
          <h1 style={{ maxWidth: "14ch", margin: "0 auto" }}>
            Not a tool.<br /><em>A team.</em>
          </h1>
          <p className="hero-sub" style={{ margin: "32px auto 0" }}>
            Watchdog, Ezra, and Mia — three AI employees built for the back office of real estate, logistics, and property service operators.
          </p>
          <div style={{ marginTop: 40, display: "inline-flex" }}>
            <a href="https://tally.so/r/jaMNq4" target="_blank" rel="noopener" className="btn btn-lg">
              Start with the audit <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </div>
    </section>);

}

/* Variation C — stat headline */
function HeroStat() {
  return (
    <section className="hero">
      <div className="container">
        <div className="hero-eyebrow-row">
          <span className="eyebrow"><span className="dot" /> Ontara — productized AI services</span>
          <span className="eyebrow-num">Case · Chicago 3PL · 2026</span>
        </div>
        <div className="hero-grid" style={{ alignItems: "start" }}>
          <div>
            <h1>
              Not a tool.<br /><em>A team.</em>
            </h1>
            <p className="hero-sub">
              Watchdog, Ezra, and Mia — three AI employees built for the back office of operators who coordinate dozens of outside parties every day.
            </p>
            <div className="hero-cta-row">
              <a href="https://tally.so/r/jaMNq4" target="_blank" rel="noopener" className="btn btn-lg">
                Start with the audit <span className="arrow">→</span>
              </a>
            </div>
          </div>
          <div style={{ border: "1px solid var(--ink)", padding: "40px 36px", background: "var(--paper)" }}>
            <div className="eyebrow-num" style={{ marginBottom: 14 }}>RECENT · RFP CYCLE</div>
            <div style={{ fontFamily: "var(--serif)", fontSize: "clamp(48px,6vw,96px)", lineHeight: 0.95, letterSpacing: "-0.025em" }}>
              <span style={{ color: "var(--ink-soft)", textDecoration: "line-through" }}>40 hrs</span>
              <span style={{ color: "var(--accent)", fontStyle: "italic" }}> → 1 hr</span>
            </div>
            <p style={{ marginTop: 20, fontSize: 15, lineHeight: 1.55, color: "var(--ink-muted)" }}>
              A Chicago 3PL priced 3,712 lanes in one RFP cycle. Ezra pulled DAT, applied fuel rules, and produced a review-ready bid in Excel.
            </p>
          </div>
        </div>
      </div>
    </section>);

}

/* Variation D — "On shift" editorial */
function HeroShift() {
  return (
    <section className="hero hero-shift">
      <div className="container">
        <div>
          <h1 className="shift-headline">
            Your back office,<br />
            <em>on shift.</em>
          </h1>
          <p className="shift-body">
            Every ops-heavy business runs on the same pattern: dozens of outside parties
            scattered across half a dozen systems and four inboxes. Nobody's full-time
            job is holding it together.
          </p>
          <ul className="shift-roster">
            <li><b>Watchdog</b> maps how your business actually runs.</li>
            <li><b>Ezra</b> runs the knowledge work every day after.</li>
            <li><b>Mia</b> picks up the phone.</li>
          </ul>
          <div className="shift-cta">
            <a href="https://tally.so/r/jaMNq4" target="_blank" rel="noopener" className="btn btn-lg">
              Book an audit <span className="arrow">→</span>
            </a>
          </div>
        </div>
        <CalendarBlock />
      </div>
    </section>);

}

function Hero() {
  const [variant, setVariant] = useState(
    () => document.body.dataset.hero || "shift"
  );
  useEffect(() => {
    const obs = new MutationObserver(() => setVariant(document.body.dataset.hero || "shift"));
    obs.observe(document.body, { attributes: true, attributeFilter: ["data-hero"] });
    return () => obs.disconnect();
  }, []);
  if (variant === "console") return <HeroConsole />;
  if (variant === "centered") return <HeroCentered />;
  if (variant === "stat") return <HeroStat />;
  return <HeroShift />;
}

window.Hero = Hero;