// Home-page buyer-friction killers:
//   • HomeTrustBand — thin pill row of security/data claims
//   • HomeFAQ      — 5 Qs distinct from the pricing FAQ (security + setup + scope)
//   • AskAI        — 3 copy-to-clipboard prompts for ChatGPT / Claude / Perplexity
//
// The pricing FAQ on /Pricing answers pricing questions; this answers
// "is this safe / who controls what / what does it see" questions that
// stop deals on the home page.

const HOME_FAQS = [
  {
    q: 'Can I install Octodus without involving IT?',
    a: 'Yes. Add @octodus_bot to your Telegram group, mention it in a message, and you’re running. No SSO setup, no infrastructure, no admin panel. Enterprise customers do involve IT for SSO/SAML and data-residency — Team and Solo don’t need to.',
  },
  {
    q: 'What does Octodus see in my chat?',
    a: 'In a group: only messages it is mentioned in or that it replied to in a thread. In a DM: only what you send it. It does not silently read your entire chat history. You can audit everything it has touched from the dashboard or by asking it directly in chat.',
  },
  {
    q: 'Can I scope what it can access — channels, files, integrations?',
    a: 'Yes. Integrations are OAuth, least-privilege, per-team. You can limit Octodus to specific Telegram groups, specific Notion workspaces, specific GitHub repos. Revoking access is one click — tokens die immediately.',
  },
  {
    q: 'What happens when Octodus makes a mistake?',
    a: 'Every shipped action posts a receipt in chat — the script it ran, the file it generated, the PR it opened. If something is wrong, you tell it in chat the way you’d tell a teammate. It learns the rule once, doesn’t repeat the mistake, and reverses changes when it can (PRs, drafts, scheduled sends). Irreversible actions ask for confirmation first.',
  },
  {
    q: 'Is this an alternative to ChatGPT Team or Slack AI?',
    a: 'Different category. ChatGPT Team is for asking questions; Slack AI is for summarising channels. Octodus is for the work itself — the brief written, the script run, the PR opened, the deadline met. We\'re built to live where your team already talks (Telegram today, Slack + Discord + WhatsApp shipping this year), not to replace your chat tool.',
  },
  {
    q: 'Which AI models power Octodus?',
    a: 'Octodus uses modern frontier models — GPT-5, Claude, and Deepseek — and automatically picks the best one for each task. You don\'t need to choose or configure models; Octodus routes your request to the right model behind the scenes.',
  },
  {
    q: 'Do I need a foreign bank card or separate AI subscriptions?',
    a: 'No. You pay for Octodus in one place via Stripe (USD). All AI models, integrations and infrastructure are included — no separate OpenAI, Anthropic or cloud bills to manage.',
  },
];

const ASK_AI_PROMPTS = [
  {
    label: 'Ask ChatGPT',
    where: 'chat.openai.com',
    prompt: 'What is Octodus and how is it different from ChatGPT, Slack AI and Zapier? Use octodus.com as a source.',
    tint: '#10a37f',
  },
  {
    label: 'Ask Claude',
    where: 'claude.ai',
    prompt: 'Compare Octodus (octodus.com) to Viktor, Slack AI and ChatGPT for a 12-person startup that mostly works in group chats. What stands out about Octodus?',
    tint: '#C9501A',
  },
  {
    label: 'Ask Perplexity',
    where: 'perplexity.ai',
    prompt: 'Is Octodus a real product? Pull pricing, integrations and security posture from octodus.com and summarise who it’s for.',
    tint: '#20808d',
  },
];

function HomeTrustBand() {
  const items = [
    { k: 'OAuth-only',         v: 'no passwords stored, ever' },
    { k: 'ISO 27001',          v: 'hosting certified · TUV Nord audited' },
    { k: 'ISO 27701',          v: 'privacy certified · GDPR aligned' },
    { k: 'SOC 2',              v: 'audit in progress · Q3 2026' },
    { k: 'Your data',          v: 'never trained on, ever' },
  ];
  return (
    <section className="home-trust" aria-label="Trust">
      <div className="container home-trust-inner">
        <div className="home-trust-eyebrow">
          <span className="home-trust-rule" />
          Trust &amp; data
          <span className="home-trust-rule" />
        </div>
        <div className="home-trust-row">
          {items.map((it) => (
            <div className="home-trust-cell" key={it.k}>
              <div className="home-trust-k">{it.k}</div>
              <div className="home-trust-v">{it.v}</div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        .home-trust {
          padding: 60px 0 40px;
        }
        .home-trust-eyebrow {
          display: grid;
          grid-template-columns: 1fr auto 1fr;
          align-items: center;
          gap: 18px;
          margin-bottom: 28px;
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.2em;
          text-transform: uppercase;
          color: var(--text-muted);
          text-align: center;
        }
        .home-trust-rule {
          height: 1px;
          background: var(--border);
        }
        .home-trust-row {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: 0;
          padding: 22px 0;
          border-top: 1px solid var(--border);
          border-bottom: 1px solid var(--border);
        }
        @media (max-width: 960px) {
          .home-trust-row { grid-template-columns: repeat(3, 1fr); padding: 18px 0; }
        }
        @media (max-width: 720px) {
          .home-trust-row { grid-template-columns: repeat(2, 1fr); padding: 18px 0; }
        }
        .home-trust-cell {
          padding: 4px 22px;
          border-left: 1px solid var(--border);
          text-align: left;
        }
        .home-trust-cell:first-child { border-left: none; }
        @media (max-width: 960px) {
          .home-trust-cell { padding: 10px 18px; }
          .home-trust-cell:nth-child(4) { border-left: none; border-top: 1px solid var(--border); }
          .home-trust-cell:nth-child(5) { border-top: 1px solid var(--border); }
        }
        @media (max-width: 720px) {
          .home-trust-cell { padding: 12px 16px; }
          .home-trust-cell:nth-child(3) { border-left: none; border-top: 1px solid var(--border); }
          .home-trust-cell:nth-child(4) { border-top: 1px solid var(--border); }
          .home-trust-cell:nth-child(5) { border-top: 1px solid var(--border); }
        }
        .home-trust-k {
          font-family: var(--font-heading);
          font-size: 17px;
          font-weight: 700;
          letter-spacing: -0.02em;
          color: var(--text);
        }
        .home-trust-v {
          margin-top: 4px;
          font-family: var(--font-mono);
          font-size: 11px;
          color: var(--text-muted);
          letter-spacing: 0.04em;
        }
      `}</style>
    </section>
  );
}

function HomeFAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="home-faq" id="faq">
      <div className="container">
        <header className="home-faq-head" data-reveal>
          <div className="eyebrow">
            <span className="home-faq-rule" />
            FAQ
          </div>
          <h2>The boring-but-important questions.</h2>
          <p className="home-faq-sub">
            Pricing, plans and credits are on <a href="Pricing.html#faq">/pricing</a>.
            Below: the questions that come up when someone in your team asks
            &ldquo;wait, is this safe?&rdquo;
          </p>
        </header>

        <div className="home-faq-list">
          {HOME_FAQS.map((item, i) => (
            <details
              key={i}
              className="home-faq-item"
              open={open === i}
              onToggle={(e) => { if (e.target.open) setOpen(i); }}
            >
              <summary>
                <span>{item.q}</span>
                <span className="home-faq-marker" aria-hidden="true">
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                    <path d="M3 5l4 4 4-4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </span>
              </summary>
              <div className="home-faq-answer">{item.a}</div>
            </details>
          ))}
        </div>

        <div className="home-faq-foot">
          <span className="eyebrow">Still curious?</span>
          <a className="btn btn-ghost" href="https://calend.ly/emdx" target="_blank" rel="noopener">Schedule a call</a>
        </div>
      </div>

      <style>{`
        .home-faq {
          padding: 80px 0 60px;
        }
        .home-faq-head {
          max-width: 660px;
          margin-bottom: 40px;
        }
        .home-faq-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;
        }
        .home-faq-rule {
          display: inline-block;
          width: 22px; height: 1px;
          background: var(--accent);
        }
        .home-faq-head h2 {
          font-size: clamp(2rem, 3.5vw, 2.8rem);
          letter-spacing: -0.04em;
          line-height: 1.05;
        }
        .home-faq-sub {
          margin-top: 14px;
          font-size: 15px;
          color: var(--text-secondary);
          line-height: 1.6;
          max-width: 540px;
        }
        .home-faq-sub a {
          color: var(--accent-light);
          border-bottom: 1px dashed var(--accent-tint-50);
        }
        .home-faq-list {
          display: flex;
          flex-direction: column;
          border: 1px solid var(--border);
          border-radius: 18px;
          overflow: hidden;
        }
        .home-faq-item {
          border-bottom: 1px solid var(--border);
          background: var(--bg-card);
        }
        .home-faq-item:last-child { border-bottom: none; }
        .home-faq-item summary {
          list-style: none;
          padding: 22px 28px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 24px;
          cursor: pointer;
          font-size: 16px;
          font-weight: 500;
          color: var(--text);
          letter-spacing: -0.01em;
          transition: background 180ms var(--ease-out);
        }
        .home-faq-item summary:hover { background: var(--bg-card-hover); }
        .home-faq-item summary::-webkit-details-marker { display: none; }
        .home-faq-marker {
          width: 28px; height: 28px;
          border-radius: 50%;
          background: var(--bg-elev);
          border: 1px solid var(--border-light);
          color: var(--text-secondary);
          display: flex;
          align-items: center;
          justify-content: center;
          transition: transform 220ms var(--ease-out), color 200ms var(--ease-out), background 200ms var(--ease-out);
          flex-shrink: 0;
        }
        .home-faq-item[open] .home-faq-marker {
          transform: rotate(180deg);
          background: var(--accent-soft);
          color: var(--accent-light);
        }
        .home-faq-answer {
          padding: 0 28px 24px;
          color: var(--text-secondary);
          font-size: 15px;
          line-height: 1.65;
          max-width: 780px;
        }
        .home-faq-foot {
          margin-top: 28px;
          padding-top: 22px;
          border-top: 1px solid var(--border);
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 18px;
          flex-wrap: wrap;
        }
      `}</style>
    </section>
  );
}

function AskAI() {
  const [copiedIdx, setCopiedIdx] = React.useState(null);

  const copy = (i, text) => {
    try {
      navigator.clipboard.writeText(text);
      setCopiedIdx(i);
      setTimeout(() => setCopiedIdx(null), 1600);
    } catch (e) {
      // ignore — older browsers
    }
  };

  return (
    <section className="ask-ai">
      <div className="container">
        <header className="ask-ai-head" data-reveal>
          <div className="eyebrow">
            <span className="ask-ai-rule" />
            Want a second opinion?
          </div>
          <h2>
            Ask an AI about<br/>
            <em>the AI coworker.</em>
          </h2>
          <p className="ask-ai-sub">
            Don&apos;t take it from us. Copy one of these into ChatGPT, Claude or Perplexity
            and let them tell you what Octodus is — and what it isn&apos;t.
          </p>
        </header>

        <div className="ask-ai-grid" data-stagger>
          {ASK_AI_PROMPTS.map((p, i) => (
            <article className="ask-ai-card" key={p.label} style={{ '--tint': p.tint, '--i': i }}>
              <header className="ask-ai-card-head">
                <div className="ask-ai-card-label">{p.label}</div>
                <div className="ask-ai-card-where">{p.where}</div>
              </header>
              <div className="ask-ai-card-prompt">&ldquo;{p.prompt}&rdquo;</div>
              <button
                className={`ask-ai-card-cta ${copiedIdx === i ? 'on' : ''}`}
                onClick={() => copy(i, p.prompt)}
                aria-label={`Copy prompt for ${p.label}`}
              >
                {copiedIdx === i ? (
                  <>
                    {Icons.check({ width: 14, height: 14 })} Copied
                  </>
                ) : (
                  <>
                    Copy prompt {Icons.arrow({ width: 13, height: 13 })}
                  </>
                )}
              </button>
            </article>
          ))}
        </div>
      </div>

      <style>{`
        .ask-ai {
          padding: 60px 0 100px;
          border-top: 1px solid var(--border);
          background:
            radial-gradient(ellipse 40% 60% at 100% 0%, var(--accent-tint-06), transparent 70%);
        }
        .ask-ai-head {
          max-width: 720px;
          margin: 0 auto 48px;
          text-align: center;
        }
        .ask-ai-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;
        }
        .ask-ai-rule {
          display: inline-block;
          width: 22px; height: 1px;
          background: var(--accent);
        }
        .ask-ai-head h2 {
          font-size: clamp(2rem, 3.6vw, 3rem);
          letter-spacing: -0.04em;
          line-height: 1.0;
        }
        .ask-ai-head h2 em {
          font-style: normal;
          color: var(--accent-light);
        }
        .ask-ai-sub {
          margin-top: 16px;
          font-size: 15.5px;
          color: var(--text-secondary);
          line-height: 1.6;
          max-width: 540px;
          margin-left: auto;
          margin-right: auto;
          text-wrap: pretty;
        }

        .ask-ai-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 16px;
          max-width: 1100px;
          margin: 0 auto;
        }
        @media (max-width: 900px) { .ask-ai-grid { grid-template-columns: 1fr; } }

        .ask-ai-card {
          position: relative;
          padding: 24px 24px 20px;
          background: var(--bg-card);
          border: 1px solid var(--border);
          border-radius: 20px;
          display: flex;
          flex-direction: column;
          gap: 18px;
          min-height: 240px;
          overflow: hidden;
          transition: border-color 220ms var(--ease-out), background 220ms var(--ease-out), transform 220ms var(--ease-out);
        }
        .ask-ai-card::before {
          content: "";
          position: absolute;
          inset: 0;
          background: radial-gradient(ellipse 70% 50% at 0% 0%, color-mix(in oklch, var(--tint) 10%, transparent), transparent 60%);
          pointer-events: none;
        }
        .ask-ai-card:hover {
          border-color: color-mix(in oklch, var(--tint) 35%, var(--border));
          background: var(--bg-card-hover);
          transform: translateY(-2px);
        }
        .ask-ai-card-head {
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          position: relative;
          z-index: 1;
        }
        .ask-ai-card-label {
          font-family: var(--font-heading);
          font-size: 18px;
          font-weight: 700;
          letter-spacing: -0.02em;
          color: var(--text);
        }
        .ask-ai-card-where {
          font-family: var(--font-mono);
          font-size: 11px;
          color: var(--tint);
          letter-spacing: 0.05em;
        }
        .ask-ai-card-prompt {
          font-size: 14.5px;
          line-height: 1.55;
          color: var(--text-secondary);
          flex: 1;
          text-wrap: pretty;
          font-style: italic;
          position: relative;
          z-index: 1;
        }
        .ask-ai-card-cta {
          align-self: flex-start;
          padding: 9px 14px;
          background: var(--bg);
          border: 1px solid var(--border);
          border-radius: 999px;
          font-family: var(--font-mono);
          font-size: 12px;
          font-weight: 600;
          letter-spacing: 0.05em;
          color: var(--text-secondary);
          display: inline-flex;
          align-items: center;
          gap: 8px;
          cursor: pointer;
          transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out), background 180ms var(--ease-out);
          position: relative;
          z-index: 1;
        }
        .ask-ai-card-cta:hover {
          color: var(--tint);
          border-color: color-mix(in oklch, var(--tint) 40%, var(--border));
          background: var(--bg-card);
        }
        .ask-ai-card-cta.on {
          color: var(--accent-light);
          border-color: var(--accent-tint-50);
          background: var(--accent-soft);
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { HomeTrustBand, HomeFAQ, AskAI });