/* Shared UI primitives + the LiveDemo product mock used by all variations. */

// ── Lucide-ish stroke icons (1.5px) ───────────────────────────────
const Icon = ({ name, size = 16, color = "currentColor" }) => {
  const paths = {
    mic: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3zM5 11v1a7 7 0 0 0 14 0v-1M12 19v3M8 22h8",
    sparkle: "M12 3v6m0 6v6m-9-9h6m6 0h6M5.6 5.6l4.2 4.2m4.4 4.4l4.2 4.2m0-12.8l-4.2 4.2m-4.4 4.4l-4.2 4.2",
    check: "M5 12l5 5 9-11",
    arrow: "M5 12h14m-6-6 6 6-6 6",
    chev: "M9 6l6 6-6 6",
    chevd: "M6 9l6 6 6-6",
    chevup: "M6 15l6-6 6 6",
    plus: "M12 5v14M5 12h14",
    dot: "M12 12 m -1 0 a 1 1 0 1 0 2 0 a 1 1 0 1 0 -2 0",
    eye: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7S2 12 2 12zM12 9a3 3 0 1 1 0 6 3 3 0 0 1 0-6z",
    lock: "M5 11h14v10H5zM8 11V7a4 4 0 0 1 8 0v4",
    pause: "M6 4h4v16H6zM14 4h4v16h-4z",
    play: "M6 4l14 8-14 8z",
    target: "M12 12 m -10 0 a 10 10 0 1 0 20 0 a 10 10 0 1 0 -20 0M12 12 m -6 0 a 6 6 0 1 0 12 0 a 6 6 0 1 0 -12 0M12 12 m -2 0 a 2 2 0 1 0 4 0 a 2 2 0 1 0 -4 0",
    waveform: "M3 12h2m2-4h2v8H7zm6-4h2v16h-2zm6 4h2v8h-2zM3 8h2v8H3z",
    headset: "M3 14v-2a9 9 0 0 1 18 0v2M3 14h4v6H5a2 2 0 0 1-2-2v-4zM21 14h-4v6h2a2 2 0 0 0 2-2v-4z",
    branch: "M6 3v18M6 9a6 6 0 0 0 6 6 6 6 0 0 1 6 6M18 3v6",
    chart: "M3 21V3M21 21H3M7 17v-6m5 6V9m5 8V5",
    ear: "M6 18a4 4 0 0 0 4-4V8a4 4 0 1 1 8 0M14 12a2 2 0 0 0-2 2v6a2 2 0 0 1-4 0",
    bolt: "M13 2L4 14h7l-1 8 9-12h-7z",
    quote: "M7 7h4v4H7zm0 4c0 3 1 4 4 4M13 7h4v4h-4zm0 4c0 3 1 4 4 4"
  };
  const d = paths[name] || paths.dot;
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d={d}></path>
    </svg>);

};

// ── Top app nav bar (dark) ─────────────────────────────────────────
const TopBar = ({ tone = "dark", cta = "Pre-order", onCtaClick }) => {
  const isDark = tone === "dark";
  return (
    <header className={`zn-nav-bar ${isDark ? "is-dark" : "is-light"}`}>
      <div className="zn-nav-bar__inner">
        <a className="zn-nav-bar__brand" href="#">
          <img src={isDark ? "ds/logos/wordmark-dark.svg" : "ds/logos/wordmark-light.svg"} alt="zernote" height="14" style={{ height: 14 }} />
        </a>
        <nav className="zn-nav-bar__nav">
          <a href="#features">What it does</a>
          <a href="#how">Promises</a>
          <a href="#pricing">Pre-order</a>
        </nav>
        <div className="zn-nav-bar__right">
          {onCtaClick ? (
            <button onClick={onCtaClick} className="zn-btn zn-btn--primary zn-btn--sm">{cta} <Icon name="arrow" size={14} /></button>
          ) : (
            <a href="#pricing" className="zn-btn zn-btn--primary zn-btn--sm">{cta} <Icon name="arrow" size={14} /></a>
          )}
        </div>
      </div>
    </header>);

};

// ── Section wrapper (handles container width + vertical rhythm) ────
const Section = ({ id, children, tone = "light", className = "", padTop = 96, padBottom = 96 }) =>
<section id={id} className={`zn-sec zn-sec--${tone} ${className}`} style={{ paddingTop: padTop, paddingBottom: padBottom }}>
    <div className="zn-sec__inner">{children}</div>
  </section>;


// ── Footer ─────────────────────────────────────────────────────────
const Footer = () =>
<footer className="zn-foot">
    <div className="zn-foot__inner">
      <div className="zn-foot__brand">
        <img src="ds/logos/full-logo-dark.svg" alt="zernote" style={{ height: 28 }} />
        <p className="zn-foot__tag">Tools for user researchers, by Zernote Inc.</p>
      </div>
      <div className="zn-foot__cols">
        <div>
          <h5>Product</h5>
          <a href="#">Researches</a>
          <a href="#">Jobs-tree</a>
          <a href="#">Ideas</a>
          <a href="#">Insights</a>
        </div>
        <div>
          <h5>Coming soon</h5>
          <a href="#">Interview Companion</a>
          <a href="#">Auto-clustering</a>
          <a href="#">Live transcript</a>
        </div>
        <div>
          <h5>Company</h5>
          <a href="#">Changelog</a>
          <a href="#">Privacy</a>
          <a href="#">Contact</a>
        </div>
      </div>
    </div>
    <div className="zn-foot__bottom">
      <span>© 2026 Zernote Inc.</span>
      <span>zernote.com</span>
    </div>
  </footer>;


// ── Block fill bar (for the 6 JTBD blocks) ─────────────────────────
const BlockBar = ({ block, value, compact = false }) => {
  const pct = Math.min(100, Math.max(0, value || 0));
  return (
    <div className={`zn-block ${compact ? "is-compact" : ""}`}>
      <div className="zn-block__row">
        <span className="zn-block__dot" style={{ background: block.color }}></span>
        <span className="zn-block__label">{block.label}</span>
        <span className="zn-block__pct" style={{ color: pct > 50 ? block.color : "var(--fg-3)" }}>{Math.round(pct)}%</span>
      </div>
      <div className="zn-block__track">
        <div className="zn-block__fill" style={{ width: `${pct}%`, background: block.color }}></div>
      </div>
      {!compact && <span className="zn-block__hint">{block.hint}</span>}
    </div>);

};

// ── The product mock: live co-pilot panel ──────────────────────────
const LiveDemo = ({ variant = "full" }) => {
  const { state, running, setRunning, restart } = useDemoState();

  return (
    <div className={`copilot copilot--${variant}`}>
      {/* Top strip: status + controls */}
      <div className="copilot__bar">
        <div className="copilot__status">
          <span className={`copilot__pulse copilot__pulse--${state.status}`}></span>
          <span className="copilot__status-label">
            {state.status === "recording" ? "Live · interview in progress" : "Listening for microphone…"}
          </span>
        </div>
        <div className="copilot__bar-right">
          <span className="copilot__time">00:{String(Math.floor(state.tick / 1000)).padStart(2, "0")}</span>
          <button className="copilot__ctrl" onClick={() => setRunning((r) => !r)} title={running ? "Pause" : "Play"}>
            <Icon name={running ? "pause" : "play"} size={14} />
          </button>
          <button className="copilot__ctrl" onClick={restart} title="Restart"><Icon name="bolt" size={14} /></button>
        </div>
      </div>

      <div className="copilot__grid">
        {/* LEFT — interview guide with asked/un-asked */}
        <div className="copilot__col copilot__col--guide">
          <div className="copilot__col-head">
            <span className="t-overline">Guide</span>
            <span className="copilot__head-count">{state.askedIds.size}/{GUIDE_QUESTIONS.length}</span>
          </div>
          <ul className="copilot__qs">
            {GUIDE_QUESTIONS.map((q) => {
              const asked = state.askedIds.has(q.id);
              return (
                <li key={q.id} className={`copilot__q ${asked ? "is-asked" : ""}`}>
                  <span className={`copilot__q-check ${asked ? "is-on" : ""}`}>
                    {asked ? <Icon name="check" size={12} color="white" /> : null}
                  </span>
                  <div className="copilot__q-body">
                    <span className="copilot__q-text">{q.text}</span>
                    <span className="copilot__q-tag" data-group={q.group}>{q.group}</span>
                  </div>
                </li>);

            })}
          </ul>
        </div>

        {/* CENTER — transcript + next-question suggestion */}
        <div className="copilot__col copilot__col--feed">
          <div className="copilot__col-head">
            <span className="t-overline">Live transcript</span>
            <span className="copilot__head-meta"><Icon name="waveform" size={12} /> EN · 99%</span>
          </div>
          <div className="copilot__feed">
            {state.transcript.map((tr, i) =>
            <div key={`${tr.t}-${i}`} className={`copilot__line copilot__line--${tr.speaker}`}>
                <span className="copilot__line-who">{tr.speaker === "interviewer" ? "You" : "Marina"}</span>
                <p className="copilot__line-text">{tr.text}</p>
              </div>
            )}
            {state.transcript.length === 0 && <div className="copilot__feed-empty">Waiting for first answer…</div>}
          </div>
          {state.suggestion &&
          <div className="copilot__hint" key={state.suggestion.t}>
              <div className="copilot__hint-row">
                <Icon name="sparkle" size={14} color="#006DFA" />
                <span className="copilot__hint-label">Companion suggests</span>
                <span className="copilot__hint-tag">{state.suggestion.priority}</span>
              </div>
              <p className="copilot__hint-text">{state.suggestion.value}</p>
              <div className="copilot__hint-cta">
                <button className="zn-btn zn-btn--sm zn-btn--secondary">Dismiss</button>
                <button className="zn-btn zn-btn--sm zn-btn--primary">Ask it <Icon name="arrow" size={12} /></button>
              </div>
            </div>
          }
        </div>

        {/* RIGHT — block coverage */}
        <div className="copilot__col copilot__col--blocks">
          <div className="copilot__col-head">
            <span className="t-overline">Coverage</span>
            <span className="copilot__head-meta">JTBD blocks</span>
          </div>
          <div className="copilot__blocks">
            {BLOCKS.map((b) => <BlockBar key={b.id} block={b} value={state.blocks[b.id]} compact />)}
          </div>
          <div className="copilot__blocks-foot">
            <span className="copilot__avg">
              Average coverage
              <strong>{Math.round(Object.values(state.blocks).reduce((a, b) => a + b, 0) / BLOCKS.length)}%</strong>
            </span>
          </div>
        </div>
      </div>
    </div>);

};

// ── Pricing card (shared) ──────────────────────────────────────────
const PricingCard = ({ accent = false, name, price, period, features, cta, badge, footnote }) =>
<div className={`zn-price ${accent ? "is-accent" : ""}`}>
    {badge && <span className="zn-price__badge">{badge}</span>}
    <h3 className="zn-price__name">{name}</h3>
    <div className="zn-price__amount">
      <span className="zn-price__num">{price}</span>
      <span className="zn-price__per">{period}</span>
    </div>
    <ul className="zn-price__feats">
      {features.map((f, i) =>
    <li key={i}><Icon name="check" size={14} color={accent ? "white" : "#0E7C3A"} /><span>{f}</span></li>
    )}
    </ul>
    <a href="#" className={`zn-btn ${accent ? "zn-btn--white" : "zn-btn--primary"} zn-btn--lg zn-price__cta`}>{cta} <Icon name="arrow" size={14} /></a>
    {footnote && <span className="zn-price__foot">{footnote}</span>}
  </div>;


Object.assign(window, { Icon, TopBar, Section, Footer, BlockBar, LiveDemo, PricingCard });