// "What it does" — 6 tentacle skills + Powered by Claude band + Live demo

function PoweredBand() {
  return (
    <section className="powered" id="stack">
      <div className="container">
        <div className="powered-head">
          <div className="eyebrow">The stack</div>
          <h2 className="powered-title">
            Built on serious infrastructure.<br/>
            <em>So octodus actually ships work.</em>
          </h2>
        </div>

        <div className="powered-grid">
          {/* Featured: Claude */}
          <article className="powered-feat">
            <div className="powered-feat-bg" />
            <div className="powered-feat-tag">
              <span className="powered-feat-dot" />
              The brain
            </div>
            <div className="powered-feat-logo">
              <img src="public/partners/anthropic.png" alt="Anthropic" />
            </div>
            <h3 className="powered-feat-line">
              Claude does the thinking.
            </h3>
            <p className="powered-feat-body">
              Every action — drafting, planning, fixing, coordinating —
              runs through Claude (Anthropic), tuned for the way your team
              actually talks in chat.
            </p>
            <div className="powered-feat-meta">
              <span>OAuth-only integrations</span>
              <span className="dot">·</span>
              <span>Your data stays in your project</span>
            </div>
          </article>

          {/* Stack pills */}
          <div className="powered-pills">
            <div className="powered-pill" style={{ '--p-tint': '#60a5fa' }}>
              <div className="powered-pill-label">Surface</div>
              <div className="powered-pill-logo telegram-logo">
                {Icons.telegram({ width: 22, height: 22 })}
                <span>Telegram</span>
              </div>
              <div className="powered-pill-meta">today · Slack · Discord · WhatsApp soon</div>
            </div>

            <div className="powered-pill" style={{ '--p-tint': '#34d399' }}>
              <div className="powered-pill-label">Compute</div>
              <div className="powered-pill-logo">
                <img src="public/partners/googlecloud.png" alt="Google Cloud" />
              </div>
              <div className="powered-pill-meta">low-latency, dedicated workers</div>
            </div>

            <div className="powered-pill" style={{ '--p-tint': '#a78bfa' }}>
              <div className="powered-pill-label">Crypto rails</div>
              <div className="powered-pill-stack">
                <div className="powered-pill-logo small">
                  <img src="public/partners/eigenlayer.png" alt="EigenLayer" />
                </div>
                <div className="powered-pill-logo small">
                  <img src="public/partners/ditto.png" alt="Ditto Network" />
                </div>
              </div>
              <div className="powered-pill-meta">for on-chain tasks &amp; agents</div>
            </div>

            <div className="powered-pill" style={{ '--p-tint': '#fb923c' }}>
              <div className="powered-pill-label">Trial</div>
              <div className="powered-pill-logo plain">
                <span className="pill-big">$15</span>
                <span className="pill-sub">credits · no card</span>
              </div>
              <div className="powered-pill-meta">enough for 5–10 workflows</div>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .powered {
          padding: 100px 0;
          border-top: 1px solid var(--border);
          border-bottom: 1px solid var(--border);
          background: linear-gradient(180deg, transparent, rgba(235, 227, 210, 0.50));
          position: relative;
        }
        .powered-head { max-width: 720px; margin-bottom: 48px; }
        .powered-title {
          font-size: clamp(2rem, 4vw, 3.2rem);
          line-height: 1.05;
          letter-spacing: -0.04em;
          margin-top: 14px;
        }
        .powered-title em {
          font-style: normal;
          color: var(--text-secondary);
          font-weight: 600;
        }

        .powered-grid {
          display: grid;
          grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
          gap: 20px;
        }
        @media (max-width: 960px) {
          .powered-grid { grid-template-columns: 1fr; }
        }

        /* Featured card */
        .powered-feat {
          position: relative;
          padding: 36px 32px;
          background:
            radial-gradient(ellipse 60% 50% at 70% 30%, var(--accent-tint-10), transparent 70%),
            linear-gradient(180deg, var(--bg-card) 0%, var(--bg-elev) 100%);
          border: 1px solid var(--border);
          border-radius: 24px;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          gap: 16px;
        }
        .powered-feat-bg {
          position: absolute;
          inset: -1px;
          border-radius: 24px;
          padding: 1px;
          background: linear-gradient(135deg, var(--accent-tint-35), transparent 50%);
          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;
        }
        .powered-feat-tag {
          display: inline-flex; align-items: center; gap: 6px;
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--accent-light);
          align-self: flex-start;
        }
        .powered-feat-dot {
          width: 6px; height: 6px;
          border-radius: 50%;
          background: var(--accent-light);
          box-shadow: 0 0 8px var(--accent-light);
        }

        .powered-pill-stack {
          display: flex;
          flex-direction: row;
          gap: 8px;
          flex-wrap: wrap;
          align-self: flex-start;
        }
        .powered-pill-logo.small {
          padding: 8px 12px;
        }
        .powered-pill-logo.small img {
          height: 16px;
          max-width: 90px;
        }
        .powered-feat-logo {
          padding: 18px 26px;
          background: rgba(255,255,255,0.95);
          border-radius: 14px;
          align-self: flex-start;
          box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4), 0 12px 30px -10px rgba(58, 49, 32, 0.10);
          display: inline-flex;
        }
        .powered-feat-logo img {
          height: 32px;
          width: auto;
          max-width: 200px;
          object-fit: contain;
        }

        .powered-feat-line {
          font-size: clamp(1.5rem, 2.5vw, 2rem);
          font-weight: 700;
          letter-spacing: -0.025em;
          line-height: 1.15;
        }
        .powered-feat-body {
          font-size: 15.5px;
          color: var(--text-secondary);
          line-height: 1.6;
          max-width: 500px;
        }
        .powered-feat-meta {
          margin-top: auto;
          padding-top: 16px;
          display: flex;
          align-items: center;
          gap: 8px;
          font-family: var(--font-mono);
          font-size: 11.5px;
          color: var(--text-muted);
          letter-spacing: 0.05em;
          flex-wrap: wrap;
        }
        .powered-feat-meta .dot { opacity: 0.5; }

        /* Pills grid */
        .powered-pills {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 14px;
        }
        @media (max-width: 480px) { .powered-pills { grid-template-columns: 1fr; } }

        .powered-pill {
          position: relative;
          padding: 20px 20px 18px;
          background: var(--bg-card);
          border: 1px solid var(--border);
          border-radius: 18px;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          gap: 12px;
          min-height: 160px;
          transition: border-color 220ms var(--ease-out), background 220ms var(--ease-out);
        }
        .powered-pill::before {
          content: "";
          position: absolute;
          inset: 0;
          background: radial-gradient(ellipse 80% 60% at 100% 0%, color-mix(in oklch, var(--p-tint) 10%, transparent), transparent 60%);
          pointer-events: none;
        }
        .powered-pill:hover {
          border-color: color-mix(in oklch, var(--p-tint) 35%, var(--border));
          background: var(--bg-card-hover);
        }
        .powered-pill-label {
          font-family: var(--font-mono);
          font-size: 10.5px;
          font-weight: 600;
          letter-spacing: 0.2em;
          text-transform: uppercase;
          color: var(--p-tint);
        }
        .powered-pill-logo {
          padding: 12px 16px;
          background: rgba(255,255,255,0.94);
          border-radius: 10px;
          display: inline-flex;
          align-items: center;
          gap: 10px;
          flex-wrap: wrap;
          align-self: flex-start;
        }
        .powered-pill-logo img {
          height: 22px;
          width: auto;
          max-width: 110px;
          object-fit: contain;
        }
        .powered-pill-logo.telegram-logo {
          background: linear-gradient(135deg, #2aabee 0%, #229ed9 100%);
          color: #fff;
          font-family: var(--font-heading);
          font-weight: 700;
          font-size: 16px;
          letter-spacing: -0.01em;
        }
        .powered-pill-logo.plain {
          background: transparent;
          padding: 0;
          align-items: baseline;
          gap: 8px;
        }
        .pill-big {
          font-family: var(--font-heading);
          font-size: 36px;
          font-weight: 800;
          letter-spacing: -0.04em;
          color: var(--p-tint);
          line-height: 1;
        }
        .pill-sub {
          font-family: var(--font-mono);
          font-size: 11px;
          color: var(--text-muted);
          letter-spacing: 0.05em;
        }
        .powered-pill-meta {
          margin-top: auto;
          font-family: var(--font-mono);
          font-size: 11px;
          color: var(--text-muted);
          letter-spacing: 0.03em;
        }
      `}</style>
    </section>
  );
}

function Skills() {
  return (
    <section className="skills" id="skills">
      <div className="container">
        <div className="skills-head" id="arms">
          <div>
            <div className="eyebrow">Capabilities</div>
            <h2 className="skills-title">
              One coworker.<br/>
              <em>Every kind of work.</em>
            </h2>
            <p className="skills-sub">
              Whatever you mention in chat, Octodus picks up. These are the most-used
              capabilities — the list grows weekly as the team ships new ones.
            </p>
          </div>
        </div>

        <div className="skills-grid">
          {TENTACLES.map((t, i) => (
            <article className="skill-card" key={t.id}>
              <div className="skill-card-meta">
                <div className="skill-card-icon">
                  {Icons[t.icon]({ width: 22, height: 22 })}
                </div>
                <div className="skill-num">{String(i + 1).padStart(2, '0')}</div>
              </div>
              <div className="skill-body">
                <div className="skill-tag">{t.label}</div>
                <h3 className="skill-headline">{t.one}</h3>
                <p className="skill-deep">{t.deep}</p>
              </div>
            </article>
          ))}
        </div>

        <div className="skills-foot">
          <span className="skills-foot-rule" />
          <a href="https://t.me/octodusdev" target="_blank" rel="noopener" className="skills-foot-link">
            <span className="skills-foot-plus">+</span>
            <span>15 more capabilities in beta — see the changelog</span>
            {Icons.arrow({ width: 14, height: 14 })}
          </a>
          <span className="skills-foot-rule" />
        </div>
      </div>

      <style>{`
        .skills {
          padding: 140px 0;
          background: var(--bg);
          border-top: 1px solid var(--border);
        }
        .skills-head { margin-bottom: 64px; max-width: 760px; }
        .skills-title {
          font-size: clamp(2.4rem, 4.5vw, 4rem);
          line-height: 1.0;
          letter-spacing: -0.04em;
          margin: 12px 0 20px;
        }
        .skills-title em {
          font-style: normal;
          color: var(--accent-light);
        }
        .skills-sub {
          font-size: 17px;
          line-height: 1.6;
          color: var(--text-secondary);
          max-width: 560px;
        }

        .skills-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 1px;
          background: var(--border);
          border: 1px solid var(--border);
          border-radius: 16px;
          overflow: hidden;
        }
        @media (max-width: 1000px) { .skills-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 660px) { .skills-grid { grid-template-columns: 1fr; } }

        .skill-card {
          position: relative;
          padding: 32px 28px 34px;
          background: var(--bg);
          transition: background 240ms var(--ease-out);
          min-height: 240px;
          display: flex;
          flex-direction: column;
        }
        .skill-card:hover {
          background: var(--bg-card);
        }
        .skill-card::after {
          content: "";
          position: absolute;
          left: 0; right: 0; bottom: 0;
          height: 2px;
          background: var(--accent);
          transform: scaleX(0);
          transform-origin: left;
          transition: transform 320ms var(--ease-out);
        }
        .skill-card:hover::after { transform: scaleX(1); }

        .skill-card-meta {
          display: flex; justify-content: space-between; align-items: center;
          margin-bottom: 32px;
        }
        .skill-card-icon {
          width: 44px; height: 44px;
          border-radius: 10px;
          background: var(--accent-soft);
          color: var(--accent-light);
          display: flex; align-items: center; justify-content: center;
          border: 1px solid color-mix(in oklch, var(--accent) 25%, transparent);
        }
        .skill-num {
          font-family: var(--font-mono);
          font-size: 11px;
          color: var(--text-muted);
          letter-spacing: 0.18em;
        }
        .skill-tag {
          font-family: var(--font-mono);
          font-size: 11px;
          font-weight: 500;
          letter-spacing: 0.2em;
          text-transform: uppercase;
          color: var(--accent-light);
          margin-bottom: 12px;
        }
        .skill-headline {
          font-size: 22px;
          font-weight: 700;
          letter-spacing: -0.025em;
          line-height: 1.2;
          color: var(--text);
          margin-bottom: 12px;
        }
        .skill-deep {
          font-size: 14.5px;
          line-height: 1.6;
          color: var(--text-secondary);
        }

        .skills-foot {
          margin-top: 48px;
          display: grid;
          grid-template-columns: 1fr auto 1fr;
          align-items: center;
          gap: 24px;
        }
        .skills-foot-rule { height: 1px; background: var(--border); }
        .skills-foot-link {
          display: flex; align-items: center; gap: 12px;
          font-family: var(--font-mono);
          font-size: 12px;
          letter-spacing: 0.05em;
          color: var(--text-secondary);
          transition: color 200ms var(--ease-out);
        }
        .skills-foot-link:hover { color: var(--accent-light); }
        .skills-foot-plus {
          width: 22px; height: 22px;
          border-radius: 50%;
          border: 1px solid var(--accent);
          color: var(--accent-light);
          display: flex; align-items: center; justify-content: center;
          font-size: 14px;
          font-weight: 600;
        }
      `}</style>
    </section>
  );
}

function _UnusedLiveDemo() {
  return (
    <section className="live-demo" id="demo">
      <div className="container live-demo-inner">
        <div className="live-demo-copy">
          <div className="eyebrow">Live in your chat</div>
          <h2 className="live-demo-title">
            Drop anything in.
            <br/>
            <em>Useful comes out.</em>
          </h2>
          <p className="live-demo-sub">
            No prompt engineering. No dashboards. Just send a voice note, a photo, or a panicked
            "is this working?" — and watch octodus reply like a teammate who already knows the project.
          </p>

          <ul className="live-demo-features">
            <li>
              <span className="feat-num">01</span>
              <div>
                <strong>Speaks chat, not API.</strong>
                <span>Natural language goes in; finished work comes out.</span>
              </div>
            </li>
            <li>
              <span className="feat-num">02</span>
              <div>
                <strong>Remembers your rules.</strong>
                <span>"Draft, wait for OK, then publish." Once learned, never repeated.</span>
              </div>
            </li>
            <li>
              <span className="feat-num">03</span>
              <div>
                <strong>Takes action, not just notes.</strong>
                <span>Verifies bug fixes, ships scripts, files tasks, schedules reminders.</span>
              </div>
            </li>
          </ul>

          <div className="live-demo-aside">
            <span className="eyebrow">Watching</span>
            <span className="live-demo-aside-id">3 real chat scenes auto-playing →</span>
          </div>
        </div>

        <div className="live-demo-chat">
          <AnimatedChat tall />
        </div>
      </div>

      <style>{`
        .live-demo {
          padding-top: 100px;
          padding-bottom: 100px;
          position: relative;
          background:
            radial-gradient(ellipse 60% 40% at 30% 30%, var(--accent-tint-06), transparent 70%),
            radial-gradient(ellipse 40% 40% at 80% 70%, var(--accent-tint-04), transparent 70%);
        }
        .live-demo-inner {
          display: grid;
          grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
          gap: 64px;
          align-items: center;
        }
        @media (max-width: 1000px) {
          .live-demo-inner { grid-template-columns: 1fr; gap: 48px; }
        }
        .live-demo-title {
          font-size: clamp(2.4rem, 4.5vw, 4rem);
          line-height: 1.0;
          letter-spacing: -0.04em;
          margin: 18px 0 22px;
        }
        .live-demo-title em {
          font-style: normal;
          color: var(--accent-light);
          text-shadow: 0 0 50px var(--accent-tint-30);
        }
        .live-demo-sub {
          font-size: 17px;
          color: var(--text-secondary);
          line-height: 1.6;
          max-width: 500px;
        }
        .live-demo-features {
          margin-top: 32px;
          list-style: none;
          display: flex; flex-direction: column;
          gap: 14px;
        }
        .live-demo-features li {
          display: flex; gap: 16px; align-items: flex-start;
          padding: 14px 18px;
          border-radius: 14px;
          background: var(--bg-card);
          border: 1px solid var(--border);
          transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out);
        }
        .live-demo-features li:hover {
          border-color: var(--accent-tint-30);
          background: var(--bg-card-hover);
        }
        .feat-num {
          font-family: var(--font-mono);
          font-size: 12px;
          color: var(--accent-light);
          flex-shrink: 0;
          padding-top: 2px;
          letter-spacing: 0.1em;
        }
        .live-demo-features strong {
          display: block;
          font-size: 15px;
          color: var(--text);
          margin-bottom: 2px;
        }
        .live-demo-features span {
          font-size: 14px;
          color: var(--text-secondary);
        }
        .live-demo-aside {
          margin-top: 30px;
          display: flex; align-items: center; gap: 14px;
          padding-top: 22px;
          border-top: 1px dashed var(--border);
        }
        .live-demo-aside-id {
          font-family: var(--font-mono);
          font-size: 12px;
          color: var(--text-muted);
          letter-spacing: 0.05em;
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { PoweredBand, Skills });