// HERO — Iris is the centerpiece. Right side is a live, interactive
// voice-agent panel with waveform + transcript-in-progress + big mic button.

function Hero() {
  return (
    <section style={{ position: "relative", paddingTop: 48, paddingBottom: 96 }}>
      <div className="shell">

        {/* Status pill row */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 56, flexWrap: "wrap", gap: 16 }}>
          <button
            type="button"
            data-iris-open
            className="pill"
            style={{ border: "1px solid var(--ink)", background: "var(--paper)", color: "var(--ink)", cursor: "pointer" }}
          >
            <span className="dot"></span>
            Iris is live · talk to our AI agent
          </button>
          <span className="mono" style={{ fontSize: 12, color: "var(--ink-mute)", letterSpacing: "0.08em", textTransform: "uppercase" }}>
            Agentforce · Voice · Token-efficient by default
          </span>
        </div>

        {/* Editorial headline grid */}
        <div className="hero-grid">
          <div className="hero-copy">
            <h1 className="display-xxl serif" style={{ margin: 0, textWrap: "balance" }}>
              The AI agents your Salesforce <span style={{ background: "var(--persimmon)", color: "var(--ink)", padding: "0 0.12em", display: "inline-block", transform: "rotate(-1deg)", marginInline: "0.05em" }}>should already</span> be running.
            </h1>

            <p className="lead" style={{ marginTop: 32, maxWidth: "50ch" }}>
              We're a small studio of Salesforce engineers and AI builders. We design
              Agentforce setups that ship in <span style={{ background: "var(--ink)", color: "var(--bone)", padding: "0 0.2em", fontWeight: 600 }}>three weeks, not three quarters</span> —
              and voice agents that pick up, listen, and convert.
            </p>

            <div style={{ display: "flex", gap: 12, marginTop: 36, flexWrap: "wrap" }}>
              <button type="button" data-iris-open className="btn btn-accent">
                Talk to Iris now <span className="arr">→</span>
              </button>
              <a href="#discovery" className="btn btn-ghost">
                Map agents for my business
              </a>
            </div>

            {/* sub-stats — qualitative, not invented metrics */}
            <div className="hero-stats" style={{
              marginTop: 56,
              display: "grid",
              gridTemplateColumns: "1fr 1fr 1fr",
              gap: 4,
              borderTop: "1px solid var(--rule)",
              paddingTop: 24,
            }}>
              {[
                { k: "Three-week", v: "average ship-to-prod" },
                { k: "Fixed-scope", v: "no hourly billing games" },
                { k: "Token-aware", v: "every prompt audited" },
              ].map((s, i) => (
                <div key={i} style={{ paddingRight: 16 }}>
                  <div className="serif" style={{ fontSize: 28, lineHeight: 1, letterSpacing: "-0.015em" }}>{s.k}</div>
                  <div className="mono" style={{ fontSize: 11, color: "var(--ink-soft)", marginTop: 8, textTransform: "uppercase", letterSpacing: "0.1em" }}>{s.v}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Right — IRIS PANEL (the centerpiece) */}
          <div className="hero-demo">
            <IrisPanel />
          </div>
        </div>
      </div>

      <style>{`
        .hero-grid {
          display: grid;
          grid-template-columns: 1.05fr 1fr;
          gap: clamp(40px, 6vw, 96px);
          align-items: start;
        }
        @media (max-width: 980px) {
          .hero-grid { grid-template-columns: 1fr; }
        }
      `}</style>
    </section>
  );
}

// ── IRIS PANEL ────────────────────────────────────────────────────
// The right-side centerpiece. Big mic button, live waveform, looped
// transcript demo. Clicking the mic opens the actual Iris widget.

function IrisPanel() {
  const lines = [
    { who: "agent", text: "Hi — I'm Iris. What are you trying to fix with AI agents on Salesforce?" },
    { who: "user", text: "We have a queue problem — too many inbound support tickets, not enough humans." },
    { who: "agent", text: "Got it. Sales Cloud, Service Cloud, or both? And roughly how many tickets a week?" },
    { who: "user", text: "Service Cloud, about 1,400 a week." },
    { who: "agent", text: "Right in our wheelhouse. We'd start with a Tier-1 Agentforce topic — handles password, billing, and how-do-I in-channel. Want me to book a 20-minute scoping call?" },
    { who: "user", text: "Yes — Tuesday morning Pacific?" },
    { who: "agent", text: "Tuesday at 10 Pacific is open. What's your email?" },
  ];

  const [step, setStep] = useState(0);
  const [typed, setTyped] = useState("");
  const speaking = step < lines.length && lines[step]?.who === "agent";

  // Loop the demo
  useEffect(() => {
    if (step >= lines.length) {
      const t = setTimeout(() => { setStep(0); setTyped(""); }, 4000);
      return () => clearTimeout(t);
    }
    const line = lines[step];
    let i = 0;
    setTyped("");
    const id = setInterval(() => {
      i++;
      setTyped(line.text.slice(0, i));
      if (i >= line.text.length) {
        clearInterval(id);
        setTimeout(() => setStep(s => s + 1), 900);
      }
    }, 22 + Math.random() * 12);
    return () => clearInterval(id);
  }, [step]);

  const visible = lines.slice(Math.max(0, step - 3), step);

  return (
    <div style={{
      background: "var(--paper)",
      border: "1px solid var(--ink)",
      borderRadius: 4,
      overflow: "hidden",
      position: "relative",
      boxShadow: "12px 12px 0 var(--persimmon)",
    }}>
      {/* Header */}
      <div style={{
        padding: "14px 18px",
        borderBottom: "1px solid var(--ink)",
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        background: "var(--paper-2)",
        fontFamily: "var(--font-mono)",
        fontSize: 11,
        letterSpacing: "0.1em",
        textTransform: "uppercase",
        color: "var(--ink-soft)",
      }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
          <span style={{
            display: "inline-block",
            width: 7,
            height: 7,
            borderRadius: "50%",
            background: "var(--persimmon)",
            boxShadow: "0 0 0 4px color-mix(in oklab, var(--persimmon) 30%, transparent)",
            animation: "pulse 2s ease-in-out infinite",
          }}></span>
          IRIS · Live front-desk agent
        </span>
        <span style={{ color: "var(--ink-mute)" }}>v2.6 · realtime</span>
      </div>

      {/* Waveform display */}
      <div style={{
        padding: "32px 28px",
        background: "var(--ink)",
        color: "var(--bone)",
        position: "relative",
        overflow: "hidden",
      }}>
        <BigWave active={speaking} />
        <div style={{ position: "relative", zIndex: 1, textAlign: "center", marginTop: 16 }}>
          <div className="mono" style={{ fontSize: 10, letterSpacing: "0.16em", color: "color-mix(in oklab, var(--bone) 50%, transparent)", textTransform: "uppercase", marginBottom: 12 }}>
            {speaking ? "↳ IRIS SPEAKING" : "↳ LISTENING"}
          </div>
          <button
            type="button"
            data-iris-open
            style={{
              width: 88,
              height: 88,
              borderRadius: "50%",
              border: "none",
              background: "var(--persimmon)",
              color: "var(--bone)",
              cursor: "pointer",
              display: "inline-grid",
              placeItems: "center",
              transition: "transform 0.15s",
              boxShadow: "0 0 0 8px color-mix(in oklab, var(--persimmon) 25%, transparent), 0 0 0 16px color-mix(in oklab, var(--persimmon) 12%, transparent)",
            }}
            onMouseEnter={e => e.currentTarget.style.transform = "scale(1.06)"}
            onMouseLeave={e => e.currentTarget.style.transform = "scale(1)"}
            aria-label="Talk to Iris"
          >
            <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <rect x="9" y="2" width="6" height="12" rx="3"/>
              <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
              <line x1="12" y1="19" x2="12" y2="22"/>
            </svg>
          </button>
          <div style={{ marginTop: 14, fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 15, letterSpacing: "-0.01em" }}>
            Press to talk · or type below
          </div>
        </div>
      </div>

      {/* Transcript scroll */}
      <div style={{ padding: 18, minHeight: 200, maxHeight: 240, overflow: "hidden", background: "var(--paper)" }}>
        {visible.map((line, i) => <PanelLine key={step * 100 + i} line={line} />)}
        {step < lines.length && (
          <PanelLine line={{ ...lines[step], text: typed }} typing />
        )}
      </div>

      {/* Footer with quick prompts */}
      <div style={{
        padding: "14px 18px",
        borderTop: "1px solid var(--rule)",
        background: "var(--paper-2)",
        display: "flex",
        gap: 8,
        flexWrap: "wrap",
      }}>
        {["What do you do?", "How much?", "Book a call"].map(p => (
          <button
            key={p}
            type="button"
            data-iris-open
            style={{
              fontFamily: "var(--font-mono)",
              fontSize: 11,
              letterSpacing: "0.04em",
              padding: "6px 12px",
              background: "var(--paper)",
              border: "1px solid var(--rule-strong)",
              color: "var(--ink-2)",
              cursor: "pointer",
              borderRadius: 999,
              transition: "all 0.18s",
            }}
            onMouseEnter={e => { e.currentTarget.style.background = "var(--ink)"; e.currentTarget.style.color = "var(--bone)"; e.currentTarget.style.borderColor = "var(--ink)"; }}
            onMouseLeave={e => { e.currentTarget.style.background = "var(--paper)"; e.currentTarget.style.color = "var(--ink-2)"; e.currentTarget.style.borderColor = "var(--rule-strong)"; }}
          >
            ↳ "{p}"
          </button>
        ))}
      </div>
    </div>
  );
}

function PanelLine({ line, typing }) {
  const isAgent = line.who === "agent";
  return (
    <div style={{
      display: "flex",
      gap: 10,
      alignItems: "flex-start",
      marginBottom: 12,
      opacity: typing ? 1 : 0.85,
    }}>
      <div style={{
        flexShrink: 0,
        width: 22,
        height: 22,
        background: isAgent ? "var(--ink)" : "transparent",
        border: isAgent ? "none" : "1px solid var(--rule-strong)",
        color: isAgent ? "var(--persimmon)" : "var(--ink-soft)",
        display: "grid",
        placeItems: "center",
        fontFamily: "var(--font-mono)",
        fontSize: 9,
        fontWeight: 700,
      }}>
        {isAgent ? "IR" : "YOU"}
      </div>
      <div style={{
        flex: 1,
        fontSize: 13,
        lineHeight: 1.4,
        color: isAgent ? "var(--ink)" : "var(--ink-soft)",
      }}>
        {line.text}{typing && <span className="caret"></span>}
      </div>
    </div>
  );
}

// Animated waveform — bigger, more dramatic than the inline <Wave />
function BigWave({ active }) {
  const bars = 32;
  return (
    <div style={{
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      gap: 3,
      height: 56,
    }}>
      {Array.from({ length: bars }).map((_, i) => (
        <span
          key={i}
          style={{
            display: "block",
            width: 3,
            background: i % 3 === 0 ? "var(--persimmon)" : "color-mix(in oklab, var(--bone) 65%, transparent)",
            height: active ? `${20 + Math.random() * 80}%` : "12%",
            animation: active ? `bigwave 1.1s ease-in-out ${i * 0.04}s infinite` : "none",
            transition: "height 0.3s",
          }}
        />
      ))}
      <style>{`
        @keyframes bigwave {
          0%, 100% { transform: scaleY(0.3); }
          50% { transform: scaleY(1); }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { Hero, IrisPanel });