// hybrid-stack.jsx — "Where your agent works" section.

const __STACK_CSS = `
  .stack-tabs-wrap {
    position: sticky;
    top: 76px;
    z-index: 30;
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
    pointer-events: none;
  }
  .stack-tabs {
    pointer-events: auto;
    display: inline-flex; gap: 4px; padding: 5px;
    background: rgba(250,246,235,0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--rule);
    border-radius: 999px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  }
  .stack-tab {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 22px; min-width: 80px;
    border-radius: 999px; border: 0;
    background: transparent; cursor: pointer;
    transition: background .15s, color .15s;
  }
  .stack-tab[aria-selected="true"] { background: var(--ink); }
  .stack-tab img { height: 18px; width: auto; transition: filter .15s; }
  .stack-tab[aria-selected="true"] img { filter: brightness(0) invert(1); }

  .stack-canvas {
    position: relative;
    max-width: 1320px;
    margin: 0 auto;
    padding: 60px 220px 60px;
  }

  .stack-frame {
    position: relative;
    background: var(--paper);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--rule);
    box-shadow: 0 24px 64px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.04);
  }
  .stack-chrome {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--rule);
  }
  .stack-chrome .lights { display: flex; gap: 6px; }
  .stack-chrome .lights span { width: 12px; height: 12px; border-radius: 50%; }
  .stack-chrome .url { flex: 1; text-align: center; font: 500 12px 'JetBrains Mono', monospace; color: var(--ink-3); }

  .annot {
    position: absolute;
    width: 200px;
    z-index: 4;
  }
  .annot-left { left: 0; text-align: right; }
  .annot-right { right: 0; text-align: left; }
  .annot .eb {
    font: 700 10px 'JetBrains Mono', monospace;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-deep);
    margin-bottom: 6px;
  }
  .annot .tx {
    font: 500 14px/1.4 'Geist', sans-serif;
    color: var(--ink);
  }

  /* ── Responsive ── */
  @media (max-width: 1024px) {
    .stack-canvas { padding: 40px 80px 40px !important; }
    .annot { display: none !important; }
  }
  @media (max-width: 640px) {
    .stack-canvas { padding: 24px 16px 24px !important; }
    .annot { display: none !important; }
    .stack-tabs-wrap { top: 60px; }
  }
`;

(function injectStackCss() {
  if (document.getElementById('__stack_css')) return;
  const s = document.createElement('style');
  s.id = '__stack_css';
  s.textContent = __STACK_CSS;
  document.head.appendChild(s);
})();

const STACK_TABS = [
  {
    id: 'slack',
    label: 'Slack',
    logo: 'assets/logos/slack.svg',
    url: 'verdanagoods.slack.com/messages/support',
    render: () => <FakeSlack />,
    narrative: {
      headline: 'Your agent lives in your channels.',
      sub: 'No new tool. Sarah K. joins #support, picks up DMs, threads with your team — the same way a teammate would.',
    },
    annots: [
      { side: 'left',  y: 90,  eyebrow: '★ in your sidebar',  text: 'Your dedicated agent shows up as a DM in your existing workspace.',  },
      { side: 'left',  y: 320, eyebrow: 'same channel',        text: "#support stays #support — we don't ask you to migrate anywhere.", },
    ],
  },
  {
    id: 'gorgias',
    label: 'Gorgias',
    logo: 'assets/logos/gorgias.svg',
    url: 'verdanagoods.gorgias.com/inbox/unassigned',
    render: () => <FakeGorgias />,
    narrative: {
      headline: 'Your Gorgias queue. Our hands.',
      sub: "Your 1st-verse agent picks up tickets straight from your Unassigned view. Same shortcuts, same macros, same SLA timer.",
    },
    annots: [
      { side: 'left',  y: 90,  eyebrow: '★ picks up Unassigned', text: 'Your agent claims tickets the moment they land in Unassigned.', },
      { side: 'right', y: 340, eyebrow: 'context loaded',          text: 'Customer history, orders, lifetime value — right there in the panel.', },
    ],
  },
  {
    id: 'zendesk',
    label: 'Zendesk',
    logo: 'assets/logos/zendesk.svg',
    url: 'verdanagoods.zendesk.com/agent/tickets/4823',
    render: () => <FakeZendesk />,
    narrative: {
      headline: 'Already on Zendesk? Stay on Zendesk.',
      sub: "Add a 1st-verse agent to your Zendesk org. Same triggers, same automations, same workflows — just a new pair of hands picking up tickets.",
    },
    annots: [
      { side: 'left',  y: 90,  eyebrow: '★ added as a seat',     text: 'We get added as an agent seat in your existing Zendesk — no migration.', },
      { side: 'left',  y: 340, eyebrow: 'your macros, intact',    text: 'Every macro, trigger, and SLA you rely on — used as-is by your agent.', },
      { side: 'right', y: 200, eyebrow: 'real assignee',           text: 'Sarah K. shows up as a real assignee — your team sees who picked it up.', },
    ],
  },
];

function StackSection() {
  const [active, setActive] = React.useState('slack');
  const tab = STACK_TABS.find((t) => t.id === active);

  return (
    <section id="integrations" style={{ padding: '90px 32px', background: 'var(--bg)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 24 }}>
          <div className="eyebrow">Where your agent works</div>
          <h2 className="h2" style={{ marginTop: 12 }}>Same tools you use. Plus a teammate.</h2>
          <p className="lead" style={{ marginTop: 14, maxWidth: 620, marginLeft: 'auto', marginRight: 'auto' }}>
            Your 1st-verse agent shows up where you already work. No new dashboards to log into, no second source of truth.
          </p>
        </div>

        <div className="stack-tabs-wrap">
          <div className="stack-tabs" role="tablist">
            {STACK_TABS.map((t) => (
              <button key={t.id} role="tab" aria-selected={t.id === active}
                      aria-label={t.label} title={t.label}
                      className="stack-tab" onClick={() => setActive(t.id)}>
                <img src={t.logo} alt="" />
              </button>
            ))}
          </div>
        </div>

        <div style={{ textAlign: 'center', marginBottom: 12, maxWidth: 720, marginLeft: 'auto', marginRight: 'auto' }}>
          <h3 className="h3" style={{ fontSize: 26 }}>{tab.narrative.headline}</h3>
          <p className="body" style={{ marginTop: 8 }}>{tab.narrative.sub}</p>
        </div>

        <div className="stack-canvas">
          <div className="stack-frame">
            <div className="stack-chrome">
              <div className="lights">
                <span style={{ background: '#ED6A5E' }} />
                <span style={{ background: '#F5BF4F' }} />
                <span style={{ background: '#62C554' }} />
              </div>
              <div className="url">{tab.url}</div>
              <div style={{ width: 48 }} />
            </div>
            <div style={{ aspectRatio: '16/9' }}>{tab.render()}</div>
          </div>

          {tab.annots.map((a, i) => (
            <div key={i} className={`annot annot-${a.side}`} style={{ top: a.y }}>
              <div className="eb">{a.eyebrow}</div>
              <div className="tx">{a.text}</div>
            </div>
          ))}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginTop: 24, maxWidth: 1180, marginLeft: 'auto', marginRight: 'auto' }}>
          {[
            ['No migration', 'We connect via API. Your data stays in your tool.'],
            ['No new logins', 'Your team keeps using what they already know.'],
            ['No vendor lock-in', 'Pause anytime. Your tickets and history stay with you.'],
          ].map(([t, d]) => (
            <div key={t} style={{ padding: '14px 16px', background: 'var(--paper)', border: '1px solid var(--rule)', borderRadius: 10 }}>
              <div className="eyebrow" style={{ color: 'var(--accent-deep)' }}>✓ {t}</div>
              <div className="body" style={{ marginTop: 6, fontSize: 13 }}>{d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { StackSection });