// Hero.jsx — hero with animated dashboard mockup
function Hero({ onBook, onContact }) {
  return (
    <section className="hero" id="top">
      <div className="container hero-inner">
        <div>
          <div className="hero-pill reveal in">
            <span className="dot"></span>
            <span>AI automation · BPO · Custom software</span>
          </div>
          <h1 className="reveal in d1">
            The back office, <span className="accent">handled.</span>
          </h1>
          <p className="lead reveal in d2">
            DuckTask runs the operational layer of your business — HR, inventory, admin,
            social, and custom AI agents — so your team can spend the day on the work that grows it.
          </p>
          <div className="hero-ctas reveal in d3">
            <button className="btn primary lg" onClick={onBook}>
              Book a consultation
              <i data-lucide="arrow-right" className="ic"></i>
            </button>
            <button className="btn secondary lg" onClick={onContact}>
              Get pricing
            </button>
          </div>
          <div className="hero-meta reveal in d4">
            <span className="item">
              <i data-lucide="check" className="ic"></i>
              No setup fees
            </span>
            <span className="item">
              <i data-lucide="check" className="ic"></i>
              Pay-as-you-go
            </span>
            <span className="item">
              <i data-lucide="check" className="ic"></i>
              One-week kick-off
            </span>
          </div>
        </div>

        <HeroDashboard />
      </div>
    </section>
  );
}

function HeroDashboard() {
  // Cycle through which workflow is "running"
  const [running, setRunning] = React.useState(2);
  const [savedHrs, setSavedHrs] = React.useState(0);

  React.useEffect(() => {
    const id = setInterval(() => {
      setRunning((r) => (r + 1) % 5);
    }, 2200);
    return () => clearInterval(id);
  }, []);

  React.useEffect(() => {
    // count up hours saved
    let v = 0;
    const id = setInterval(() => {
      v += 4;
      if (v >= 184) { v = 184; clearInterval(id); }
      setSavedHrs(v);
    }, 28);
    return () => clearInterval(id);
  }, []);

  const rows = [
    { ic: "package", name: "Inventory · nightly count", meta: "412 SKUs", state: "done" },
    { ic: "receipt-text", name: "AP · invoices to Xero", meta: "14 synced", state: "done" },
    { ic: "users", name: "HR · payroll cycle", meta: "9 of 9", state: "done" },
    { ic: "megaphone", name: "Social · weekly post", meta: "queued · 09:00", state: "queued" },
    { ic: "bot", name: "Agent · email triage", meta: "running", state: "running" },
  ];

  return (
    <div className="hero-visual">
      {/* Floating top-left card */}
      <div className="dash-side tl">
        <div className="row1">
          <div className="ic-circle">
            <i data-lucide="zap" style={{ width: 16, height: 16 }}></i>
          </div>
          <div>
            <div className="title">Saved this week</div>
            <div className="sub">across 23 workflows</div>
          </div>
        </div>
        <div className="num">{savedHrs}<span className="unit"> hrs</span></div>
        <div className="bar"><span></span></div>
      </div>

      {/* Floating bottom-right card */}
      <div className="dash-side br">
        <div className="row1">
          <div className="ic-circle ink">
            <i data-lucide="bot" style={{ width: 16, height: 16 }}></i>
          </div>
          <div>
            <div className="title">Agent uptime</div>
            <div className="sub">last 30 days</div>
          </div>
        </div>
        <div className="num">99.94<span className="unit">%</span></div>
        <div style={{ marginTop: 10, display: "flex", gap: 4, alignItems: "flex-end", height: 28 }}>
          {[8,10,14,12,16,11,18,15,20,17,22,19].map((h, i) => (
            <div key={i} style={{
              flex: 1, height: h, borderRadius: 2,
              background: i === 11 ? "var(--bill-500)" : "var(--slate-200)"
            }}></div>
          ))}
        </div>
      </div>

      {/* Main dashboard card */}
      <div className="dash-card">
        <div className="dash-head">
          <div className="left">
            <div className="dots"><span></span><span></span><span></span></div>
            <div className="crumb">workspaces / <strong>lumae-collectives</strong> / today</div>
          </div>
          <div className="live">
            <span className="d"></span>
            Live
          </div>
        </div>

        <h3 className="dash-title">Today, automated</h3>
        <div className="dash-subtitle">5 workflows running for you · 184h saved this week</div>

        <div className="dash-stats">
          <div className="dash-stat">
            <div className="lbl">Tasks</div>
            <div className="val">218</div>
            <div className="delta">↑ 12% vs last wk</div>
          </div>
          <div className="dash-stat">
            <div className="lbl">Agents</div>
            <div className="val">7</div>
            <div className="delta">all healthy</div>
          </div>
          <div className="dash-stat">
            <div className="lbl">Cost</div>
            <div className="val">$0.42</div>
            <div className="delta">per task avg</div>
          </div>
        </div>

        <div className="dash-rows">
          {rows.map((r, i) => (
            <div key={r.name} className={`dash-row ${i === running ? "is-running" : ""}`}>
              <span className="lbl">
                <i data-lucide={r.ic} className="ic"></i>
                <span className="name">{r.name}</span>
              </span>
              <span className="meta">
                {i === running ? (
                  <span className="pill warm"><span className="d"></span>Running · {r.meta}</span>
                ) : r.state === "queued" ? (
                  <span className="pill muted"><span className="d"></span>{r.meta}</span>
                ) : (
                  <span className="pill success"><span className="d"></span>Done · {r.meta}</span>
                )}
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

window.Hero = Hero;