// Home-page positioning blocks:
//   • PartnerStrip — slim "Built on" logo band under the hero
//   • CompareTeaser — condensed Compare grid before FinalCTA
//
// These exist to surface credibility (logos) and anti-positioning
// (you're already paying for AI; the work is still on your list) on
// the home page, where the full Compare + PoweredBand sections only
// live on /Capabilities.

function PartnerStrip() {
  const logos = [
    { src: 'public/partners/anthropic.png',    name: 'Anthropic',    tag: 'Claude · the brain' },
    { src: 'public/partners/googlecloud.png',  name: 'Google Cloud', tag: 'compute' },
    { src: 'public/partners/eigenlayer.png',   name: 'EigenLayer',   tag: 'crypto rails' },
    { src: 'public/partners/ditto.png',        name: 'Ditto',        tag: 'on-chain agents' },
  ];

  return (
    <section className="partner-strip" aria-label="Built on">
      <div className="container partner-strip-inner">
        <div className="partner-strip-label">
          <span className="partner-strip-rule" />
          Built on
        </div>
        <div className="partner-strip-row">
          {logos.map((l) => (
            <div className="partner-strip-cell" key={l.name} title={l.tag}>
              <img src={l.src} alt={l.name} loading="lazy" />
            </div>
          ))}
        </div>
        <a className="partner-strip-cta" href="Capabilities.html#stack">
          See the stack {Icons.arrow({ width: 12, height: 12 })}
        </a>
      </div>

      <style>{`
        .partner-strip {
          padding: 28px 0 16px;
          border-top: 1px solid var(--border);
        }
        .partner-strip-inner {
          display: flex;
          align-items: center;
          gap: 32px;
          flex-wrap: wrap;
        }
        .partner-strip-label {
          display: inline-flex;
          align-items: center;
          gap: 12px;
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--text-muted);
          flex-shrink: 0;
        }
        .partner-strip-rule {
          display: inline-block;
          width: 22px; height: 1px;
          background: var(--accent);
        }
        .partner-strip-row {
          display: flex;
          align-items: center;
          gap: 24px;
          flex: 1;
          flex-wrap: wrap;
        }
        .partner-strip-cell {
          padding: 8px 16px;
          background: rgba(255,255,255,0.85);
          border: 1px solid var(--border);
          border-radius: 10px;
          display: inline-flex;
          align-items: center;
          height: 40px;
          transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out);
        }
        .partner-strip-cell:hover {
          border-color: var(--accent-tint-30);
          background: #fff;
        }
        .partner-strip-cell img {
          height: 18px;
          width: auto;
          max-width: 110px;
          object-fit: contain;
          opacity: 0.85;
        }
        .partner-strip-cta {
          font-family: var(--font-mono);
          font-size: 11.5px;
          letter-spacing: 0.05em;
          color: var(--text-muted);
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 6px 12px;
          border-radius: 999px;
          border: 1px solid var(--border);
          background: var(--bg-card);
          flex-shrink: 0;
          transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out);
        }
        .partner-strip-cta:hover {
          color: var(--accent-light);
          border-color: var(--accent-tint-40);
        }
        @media (max-width: 720px) {
          .partner-strip { padding: 22px 0 12px; }
          .partner-strip-inner { gap: 18px; }
          .partner-strip-row { gap: 14px; }
          .partner-strip-cell { height: 36px; padding: 6px 12px; }
          .partner-strip-cell img { height: 16px; max-width: 90px; }
        }
      `}</style>
    </section>
  );
}

// CompareTeaser — homepage anti-positioning + condensed Compare grid.
// The full Compare component (with all 5 columns + detail bars) lives on
// /Capabilities — this teaser names the villain on the home page and
// points buyers to the full comparison.
function CompareTeaser() {
  // Three peers most prospects mention. Slack AI added per Viktor positioning.
  // Order matches buyer mental model: smartest answers → docs AI → workflow tool.
  const peers = [
    {
      name: 'ChatGPT',
      label: 'A.I.',
      miss: 'Smart answers. Still in another tab. Still needs you to copy-paste the work.',
      color: '#5fb494',
    },
    {
      name: 'Slack AI',
      label: 'A.I. inside Slack',
      miss: "Lives in Slack — if your team isn't there yet, neither is the AI. Summarises. Doesn't ship.",
      color: '#a78bfa',
    },
    {
      name: 'Zapier',
      label: 'Automation',
      miss: 'If this, then that. But every "if" needs a human to wire — and "context" isn’t a trigger.',
      color: '#fb7185',
    },
  ];

  return (
    <section className="cmp-teaser" id="why-octodus">
      <div className="container">
        <header className="cmp-teaser-head" data-reveal>
          <div className="eyebrow">
            <span className="cmp-teaser-rule" />
            Why octodus
          </div>
          <h2 className="cmp-teaser-title">
            You’re already paying for AI.<br/>
            <em>The work is still on your list.</em>
          </h2>
          <p className="cmp-teaser-sub">
            ChatGPT, Slack AI, Zapier — each does a slice. Each leaves the copy-paste,
            the wiring, and the &ldquo;did anyone actually ship this?&rdquo; to you.
          </p>
        </header>

        <div className="cmp-teaser-grid" data-stagger>
          {peers.map((p, i) => (
            <article className="cmp-teaser-card" key={p.name} style={{ '--c-tint': p.color, '--i': i }}>
              <div className="cmp-teaser-card-head">
                <h3 className="cmp-teaser-name">{p.name}</h3>
                <span className="cmp-teaser-label">{p.label}</span>
              </div>
              <p className="cmp-teaser-miss">{p.miss}</p>
              <div className="cmp-teaser-bar">
                <div className="cmp-teaser-bar-fill" />
                <div className="cmp-teaser-bar-label">does <em>some</em> of it</div>
              </div>
            </article>
          ))}

          <article className="cmp-teaser-card cmp-teaser-us" style={{ '--i': 3 }}>
            <div className="cmp-teaser-us-bg" />
            <div className="cmp-teaser-card-head">
              <h3 className="cmp-teaser-name cmp-teaser-name-us">
                <OctodusLogo size={18} /> octodus
              </h3>
              <span className="cmp-teaser-label cmp-teaser-label-us">A.I. + action</span>
            </div>
            <p className="cmp-teaser-miss cmp-teaser-miss-us">
              Lives in the chat your team is already in. Reads context. Decides. Acts. Posts receipts.
              Not yet another tool to wire up.
            </p>
            <div className="cmp-teaser-bar cmp-teaser-bar-us">
              <div className="cmp-teaser-bar-fill cmp-teaser-bar-fill-us" />
              <div className="cmp-teaser-bar-label cmp-teaser-bar-label-us">does the whole job</div>
            </div>
          </article>
        </div>

        <div className="cmp-teaser-foot" data-reveal>
          <span className="cmp-teaser-foot-rule" />
          <a className="cmp-teaser-foot-link" href="Capabilities.html#compare">
            See the full side-by-side {Icons.arrow({ width: 14, height: 14 })}
          </a>
          <span className="cmp-teaser-foot-rule" />
        </div>
      </div>

      <style>{`
        .cmp-teaser {
          padding: 120px 0;
          border-top: 1px solid var(--border);
          background:
            radial-gradient(ellipse 50% 40% at 50% 0%, var(--accent-tint-06), transparent 70%);
        }
        .cmp-teaser-head {
          max-width: 720px;
          margin: 0 auto 56px;
          text-align: center;
        }
        .cmp-teaser-head .eyebrow {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--accent-light);
        }
        .cmp-teaser-rule {
          display: inline-block;
          width: 22px; height: 1px;
          background: var(--accent);
        }
        .cmp-teaser-title {
          font-size: clamp(2.2rem, 4.2vw, 3.6rem);
          line-height: 1.0;
          letter-spacing: -0.04em;
          margin: 16px 0 18px;
        }
        .cmp-teaser-title em {
          font-style: normal;
          background: linear-gradient(120deg, var(--accent-light), var(--accent));
          -webkit-background-clip: text; background-clip: text; color: transparent;
        }
        .cmp-teaser-sub {
          font-size: 16px;
          line-height: 1.6;
          color: var(--text-secondary);
          max-width: 560px;
          margin: 0 auto;
          text-wrap: pretty;
        }

        .cmp-teaser-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 14px;
          max-width: 1100px;
          margin: 0 auto;
        }
        @media (max-width: 1000px) { .cmp-teaser-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 560px) { .cmp-teaser-grid { grid-template-columns: 1fr; } }

        .cmp-teaser-card {
          position: relative;
          padding: 22px 20px 20px;
          background: var(--bg-card);
          border: 1px solid var(--border);
          border-radius: 18px;
          display: flex;
          flex-direction: column;
          min-height: 220px;
          overflow: hidden;
        }
        .cmp-teaser-card-head {
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          margin-bottom: 12px;
        }
        .cmp-teaser-name {
          font-size: 16px;
          font-weight: 700;
          letter-spacing: -0.01em;
          color: var(--text-secondary);
        }
        .cmp-teaser-label {
          font-family: var(--font-mono);
          font-size: 9.5px;
          letter-spacing: 0.16em;
          text-transform: uppercase;
          color: var(--text-muted);
          padding: 3px 7px;
          border-radius: 999px;
          border: 1px solid var(--border);
        }
        .cmp-teaser-miss {
          font-size: 13.5px;
          color: var(--text-muted);
          line-height: 1.55;
          flex: 1;
          text-wrap: pretty;
        }
        .cmp-teaser-bar {
          margin-top: 16px;
          padding-top: 12px;
          border-top: 1px dashed var(--border);
        }
        .cmp-teaser-bar-fill {
          height: 4px;
          border-radius: 999px;
          background: linear-gradient(90deg, var(--c-tint) 0%, transparent 100%);
          width: 35%;
          margin-bottom: 8px;
          opacity: 0.65;
        }
        .cmp-teaser-bar-label {
          font-family: var(--font-mono);
          font-size: 10px;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          color: var(--text-muted);
        }
        .cmp-teaser-bar-label em {
          font-style: italic;
          color: var(--c-tint);
        }

        /* Octodus card */
        .cmp-teaser-us {
          background: linear-gradient(180deg, var(--accent-tint-10), var(--bg-card) 80%);
          border-color: var(--accent-tint-40);
          box-shadow: 0 0 0 1px var(--accent-tint-15), 0 30px 80px -30px var(--accent-tint-50);
        }
        .cmp-teaser-us-bg {
          position: absolute; inset: -1px;
          border-radius: 18px; padding: 1px;
          background: linear-gradient(135deg, var(--accent-tint-60), transparent 60%);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
          -webkit-mask-composite: xor;
          pointer-events: none;
        }
        .cmp-teaser-name-us {
          display: flex; align-items: center; gap: 6px;
          color: var(--text);
        }
        .cmp-teaser-label-us {
          background: var(--accent);
          color: var(--on-accent);
          border-color: var(--accent);
        }
        .cmp-teaser-miss-us { color: var(--text); }
        .cmp-teaser-bar-fill-us {
          width: 100%;
          background: linear-gradient(90deg, var(--accent-light), var(--accent));
          opacity: 1;
          box-shadow: 0 0 12px var(--accent-tint-40);
        }
        .cmp-teaser-bar-label-us em {
          color: var(--accent-light);
          font-style: normal;
          font-weight: 700;
        }

        .cmp-teaser-foot {
          margin-top: 48px;
          display: grid;
          grid-template-columns: 1fr auto 1fr;
          align-items: center;
          gap: 24px;
        }
        .cmp-teaser-foot-rule { height: 1px; background: var(--border); }
        .cmp-teaser-foot-link {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          padding: 10px 18px;
          border-radius: 999px;
          border: 1px solid var(--border-light);
          font-family: var(--font-mono);
          font-size: 12.5px;
          letter-spacing: 0.05em;
          color: var(--text-secondary);
          background: var(--bg-card);
          transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out), background 200ms var(--ease-out);
          white-space: nowrap;
        }
        .cmp-teaser-foot-link:hover {
          color: var(--accent-light);
          border-color: var(--accent-tint-45);
          background: var(--accent-soft);
        }
      `}</style>
    </section>
  );
}

// RoleLinks — homepage discovery surface for /for-* pages.
// Sits between SkillsTeaser and StoriesTeaser, bridging the
// "what it does" → "who uses it" arc of the page.
function RoleLinks() {
  const roles = [
    {
      id: 'creator',
      href: 'for-creators.html',
      label: 'Solo creators',
      tag:   'weekend launches',
      sub:   'Founder, designer, dev, marketer — all one person.',
      tint:  'var(--t-code)',
      icon:  'code',
    },
    {
      id: 'agency',
      href: 'for-agencies.html',
      label: 'Agencies',
      tag:   '10+ clients',
      sub:   'Concurrent pipelines without doubling headcount.',
      tint:  'var(--t-design)',
      icon:  'pen',
    },
    {
      id: 'eng',
      href: 'for-engineers.html',
      label: 'Engineers',
      tag:   'no more dashboards',
      sub:   'Logs read, bugs diagnosed, fixes shipped — in chat.',
      tint:  'var(--t-auto)',
      icon:  'gear',
    },
    {
      id: 'ops',
      href: 'for-ops.html',
      label: 'Ops & programs',
      tag:   'no PM needed',
      sub:   'Coordinate orgs, brief calls, chase paperwork.',
      tint:  'var(--t-plan)',
      icon:  'calendar',
    },
  ];

  return (
    <section className="role-links" id="for-you">
      <div className="container">
        <header className="role-links-head" data-reveal>
          <div className="eyebrow">
            <span className="role-links-rule" />
            Built for
          </div>
          <h2>
            Whatever the role,<br/>
            <em>same teammate.</em>
          </h2>
          <p className="role-links-sub">
            Pick the closest fit — each page has the workflows, stories and pricing
            framed for your day.
          </p>
        </header>

        <div className="role-links-grid" data-stagger>
          {roles.map((r, i) => (
            <a className="role-link" key={r.id} href={r.href} style={{ '--tint': r.tint, '--i': i }}>
              <div className="role-link-top">
                <div className="role-link-icon">{Icons[r.icon]({ width: 18, height: 18 })}</div>
                <div className="role-link-tag">{r.tag}</div>
              </div>
              <div className="role-link-label">{r.label}</div>
              <div className="role-link-sub">{r.sub}</div>
              <div className="role-link-cta">
                Open page {Icons.arrow({ width: 13, height: 13 })}
              </div>
            </a>
          ))}
        </div>
      </div>

      <style>{`
        .role-links {
          padding: 100px 0;
          border-top: 1px solid var(--border);
          background:
            radial-gradient(ellipse 60% 40% at 20% 100%, var(--accent-tint-04), transparent 70%);
        }
        .role-links-head {
          max-width: 640px;
          margin-bottom: 40px;
        }
        .role-links-head .eyebrow {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--accent-light);
          margin-bottom: 14px;
        }
        .role-links-rule {
          display: inline-block;
          width: 22px; height: 1px;
          background: var(--accent);
        }
        .role-links-head h2 {
          font-size: clamp(2rem, 3.6vw, 3rem);
          letter-spacing: -0.04em;
          line-height: 1.0;
        }
        .role-links-head h2 em {
          font-style: normal;
          color: var(--accent-light);
        }
        .role-links-sub {
          margin-top: 14px;
          font-size: 15px;
          color: var(--text-secondary);
          line-height: 1.6;
          max-width: 520px;
        }

        .role-links-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 14px;
        }
        @media (max-width: 960px) { .role-links-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 520px) { .role-links-grid { grid-template-columns: 1fr; } }

        .role-link {
          position: relative;
          padding: 22px 22px 20px;
          background: var(--bg-card);
          border: 1px solid var(--border);
          border-radius: 18px;
          display: flex;
          flex-direction: column;
          gap: 12px;
          color: inherit;
          overflow: hidden;
          transition:
            border-color 240ms var(--ease-out),
            background 240ms var(--ease-out),
            transform 240ms var(--ease-out),
            box-shadow 280ms var(--ease-out);
        }
        .role-link::before {
          content: "";
          position: absolute;
          inset: 0;
          background: radial-gradient(ellipse 80% 60% at 100% 0%, color-mix(in oklch, var(--tint) 14%, transparent), transparent 60%);
          pointer-events: none;
        }
        .role-link:hover {
          border-color: color-mix(in oklch, var(--tint) 40%, var(--border));
          background: var(--bg-card-hover);
          transform: translateY(-2px);
          box-shadow: 0 20px 36px -28px color-mix(in oklch, var(--tint) 50%, transparent);
        }
        .role-link-top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
          position: relative;
          z-index: 1;
        }
        .role-link-icon {
          width: 36px; height: 36px;
          border-radius: 10px;
          background: color-mix(in oklch, var(--tint) 12%, transparent);
          color: var(--tint);
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border: 1px solid color-mix(in oklch, var(--tint) 25%, transparent);
        }
        .role-link-tag {
          font-family: var(--font-mono);
          font-size: 10.5px;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          color: var(--tint);
          padding: 4px 8px;
          border-radius: 999px;
          border: 1px solid color-mix(in oklch, var(--tint) 30%, transparent);
          background: color-mix(in oklch, var(--tint) 8%, transparent);
          white-space: nowrap;
        }
        .role-link-label {
          font-family: var(--font-heading);
          font-size: 22px;
          font-weight: 700;
          letter-spacing: -0.025em;
          color: var(--text);
          line-height: 1.1;
          position: relative;
          z-index: 1;
        }
        .role-link-sub {
          font-size: 14px;
          line-height: 1.5;
          color: var(--text-secondary);
          flex: 1;
          text-wrap: pretty;
          position: relative;
          z-index: 1;
        }
        .role-link-cta {
          font-family: var(--font-mono);
          font-size: 11.5px;
          font-weight: 600;
          letter-spacing: 0.05em;
          color: var(--tint);
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding-top: 12px;
          border-top: 1px solid var(--border);
          transition: gap 180ms var(--ease-out);
          position: relative;
          z-index: 1;
        }
        .role-link:hover .role-link-cta { gap: 9px; }
      `}</style>
    </section>
  );
}

Object.assign(window, { PartnerStrip, CompareTeaser, RoleLinks });