// Pricing page — simple two-tier with $15 free credits.
//   • hero with free-credits banner
//   • Team & Enterprise plans (no monthly/annual toggle)
//   • feature comparison
//   • FAQ
//   • trust strip

const { useState: usePriceState } = React;

const TEAM_PRICE = 50;

const PLANS = [
  {
    id: 'team',
    name: 'Team',
    tagline: 'A teammate in every group chat.',
    price: TEAM_PRICE,
    suffix: '/ seat / month',
    cta: 'Set up Team',
    ctaHref: 'https://calend.ly/emdx',
    highlight: true,
    bullets: [
      'Lives in your group chat',
      'Per-team memory & rules',
      'Long context window',
      'Voice, photo & document input',
      'OAuth integrations (Google, Notion, GitHub, \u2026)',
      'Roles & permissions',
      'Priority response time',
      'Email support',
    ],
    foot: 'Start with $15 of free credits. No card.',
  },
  {
    id: 'enterprise',
    name: 'Enterprise',
    tagline: 'Custom, on your infrastructure.',
    price: null,
    suffix: 'custom',
    cta: 'Talk to sales',
    ctaHref: 'https://calend.ly/emdx',
    highlight: false,
    bullets: [
      'Everything in Team',
      'Dedicated onboarding',
      'Custom integrations & SSO / SAML',
      'Audit logs + data export',
      'Data residency (EU, US, custom)',
      'SLA + 99.95 % uptime',
      'Quarterly reviews',
      'Dedicated Slack channel',
    ],
    foot: 'Designed with you. Typical setup: 1\u20132 weeks.',
  },
];

const FEATURE_GROUPS = [
  {
    title: 'Core',
    rows: [
      ['Surface',                          'Telegram DM',  'Group chat',  'Group + private channels'],
      ['Voice notes in',                   true,           true,          true],
      ['Photos & documents in',            true,           true,          true],
      ['Context window',                   'Standard',     'Long',        'Long + project memory'],
    ],
  },
  {
    title: 'Memory & rules',
    rows: [
      ['Long-term memory',                 'Personal',     'Per-team',    'Per-team + per-project'],
      ['Custom rules (e.g. \u201cdraft, wait for OK\u201d)', true, true,   true],
      ['Per-project workspaces',           false,          true,          true],
    ],
  },
  {
    title: 'Capabilities',
    rows: [
      ['Code prompts & scripts',           true,           true,          true],
      ['Design loops (image gen + edits)', true,           true,          true],
      ['Research & DNS / infra ops',       true,           true,          true],
      ['Multi-org coordination',           false,          true,          true],
      ['Self-healing automation',          false,          true,          true],
    ],
  },
  {
    title: 'Integrations',
    rows: [
      ['Telegram',                         true,           true,          true],
      ['Slack, Discord, WhatsApp',         'Beta',         'Beta',        'GA'],
      ['OAuth (Google, Notion, GitHub, \u2026)', true,     true,          true],
      ['Custom integrations',              false,          false,         true],
      ['Webhook outbound',                 false,          true,          true],
    ],
  },
  {
    title: 'Security & support',
    rows: [
      ['Data stays in your project',       true,           true,          true],
      ['SSO / SAML',                       false,          false,         true],
      ['Audit logs',                       false,          'Basic',       'Full + export'],
      ['Data residency',                   false,          false,         true],
      ['Support',                          'Community',    'Priority',    'Dedicated'],
    ],
  },
];

const FAQS = [
  {
    q: 'What are credits and what do they pay for?',
    a: 'Credits are pre-paid usage. Every shipped action — a brief drafted, a script run, a PDF generated — burns a small amount. $15 is plenty to try Octodus on a real workflow before you commit. Most teams use up the trial credits over 5\u201310 days of normal work.',
  },
  {
    q: 'Do I need a credit card to try Octodus?',
    a: 'No. The $15 in free credits is granted on your first message and works on the same Telegram bot you\u2019ll use forever. You add billing only when you decide to keep using it.',
  },
  {
    q: 'Why one paid tier?',
    a: 'We tried four. They were honestly a tax on understanding the product. Octodus is one teammate, priced like one teammate. When the company really needs custom infra — SSO, data residency, an SLA — that\u2019s Enterprise.',
  },
  {
    q: 'How does the Team plan work for solo founders?',
    a: 'Buy one seat. The bot lives in a private DM (no group chat needed) and you get every Team feature. We don\u2019t enforce a seat minimum.',
  },
  {
    q: 'Do my free credits expire?',
    a: 'No. Free trial credits never expire. Use them whenever you want \u2014 one task today, another next month. They stay on your account until used.',
  },
  {
    q: 'What happens when credits run out?',
    a: 'On Team, you keep going — billing rolls into your monthly seat charge. On the free trial, the bot tells you in chat and waits for you to add billing. Nothing breaks, nothing locks.',
  },
  {
    q: 'Does Octodus train on my data?',
    a: 'No. Every team gets its own isolated memory. We never feed your messages back into model training, and you can wipe memory at any time from the chat itself.',
  },
  {
    q: 'Which languages does it speak?',
    a: 'The product speaks EN, DE, ES and FR out of the box (mixed languages in the same thread are fine). Billing is in USD via Stripe for all regions.',
  },
  {
    q: 'Can I cancel any time?',
    a: 'Yes \u2014 cancel from chat or from the dashboard. Paid period continues to the end of the cycle, no questions asked.',
  },
];

function PricingHero() {
  return (
    <section className="page-hero pricing-hero">
      <div className="container page-hero-body">
        <div className="eyebrow">Pricing</div>
        <h1>
          A teammate, not a tool.<br/>
          <em>Priced like one too.</em>
        </h1>
        <p className="page-hero-sub">
          One paid plan. Per seat. No tokens, no per-task billing, no surprise overages.
          Try with <strong>$15 of free credits</strong> on your first message — no card. Credits never expire.
        </p>

        <div className="hero-credits">
          <div className="hero-credits-mark" aria-hidden="true">$15</div>
          <div className="hero-credits-text">
            <div className="hero-credits-line">In free credits. On your first message.</div>
            <div className="hero-credits-sub">Enough to ship 5–10 real workflows. Use them on anything. No card to start. Credits never expire.</div>
          </div>
          <a className="btn btn-primary hero-credits-cta" href="https://calend.ly/emdx" target="_blank" rel="noopener">
            {Icons.telegram({ width: 18, height: 18 })} Claim credits
          </a>
        </div>
      </div>

      <style>{`
        .pricing-hero { padding-bottom: 56px; }
        .pricing-hero h1 strong { color: var(--accent-light); font-weight: 700; }
        .page-hero-sub strong {
          color: var(--accent-light);
          font-weight: 600;
          background: var(--accent-soft);
          padding: 1px 8px;
          border-radius: 6px;
          border: 1px solid color-mix(in oklch, var(--accent) 25%, transparent);
        }

        .hero-credits {
          margin-top: 36px;
          display: flex;
          align-items: center;
          gap: 22px;
          padding: 18px 22px 18px 26px;
          background:
            radial-gradient(ellipse 70% 100% at 0% 50%, var(--accent-soft), transparent 70%),
            var(--bg-card);
          border: 1px solid var(--border);
          border-radius: 999px;
          max-width: 760px;
          flex-wrap: wrap;
        }
        .hero-credits-mark {
          font-family: var(--font-heading);
          font-size: 38px;
          font-weight: 800;
          letter-spacing: -0.04em;
          line-height: 1;
          color: var(--accent-light);
          text-shadow: 0 0 40px var(--accent-tint-50);
          flex-shrink: 0;
        }
        .hero-credits-text {
          flex: 1;
          min-width: 220px;
        }
        .hero-credits-line {
          font-size: 15px;
          font-weight: 600;
          color: var(--text);
        }
        .hero-credits-sub {
          margin-top: 2px;
          font-size: 13px;
          color: var(--text-secondary);
          line-height: 1.5;
        }
        .hero-credits-cta {
          height: 44px;
          padding: 0 18px;
          font-size: 14px;
          flex-shrink: 0;
        }
        @media (max-width: 640px) {
          .hero-credits {
            border-radius: 18px;
            flex-direction: column;
            align-items: flex-start;
          }
        }
      `}</style>
    </section>
  );
}

function PlanCard({ plan }) {
  const isCustom = plan.price === null;
  return (
    <article className={`plan ${plan.highlight ? 'plan-on' : ''}`}>
      {plan.highlight && <div className="plan-badge">Most teams pick this</div>}

      <header className="plan-head">
        <h3 className="plan-name">{plan.name}</h3>
        <p className="plan-tagline">{plan.tagline}</p>
      </header>

      <div className="plan-amount">
        {isCustom ? (
          <>
            <span className="plan-val">Talk</span>
            <span className="plan-suffix">to us — {plan.suffix}</span>
          </>
        ) : (
          <>
            <span className="plan-currency">$</span>
            <span className="plan-val">{plan.price}</span>
            <span className="plan-suffix">{plan.suffix}</span>
          </>
        )}
      </div>

      <a
        href={plan.ctaHref}
        target={isCustom ? '_self' : '_blank'}
        rel="noopener"
        className={`btn ${plan.highlight ? 'btn-primary' : 'btn-ghost'} plan-cta`}
      >
        {plan.cta} {Icons.arrow({ width: 14, height: 14 })}
      </a>

      <ul className="plan-bullets">
        {plan.bullets.map((b) => (
          <li key={b}>
            <span className="plan-check">{Icons.check({ width: 11, height: 11 })}</span>
            <span>{b}</span>
          </li>
        ))}
      </ul>

      <div className="plan-foot">{plan.foot}</div>
    </article>
  );
}

function PlansGrid() {
  return (
    <section className="plans">
      <div className="container">
        <div className="plans-grid">
          {PLANS.map((p) => <PlanCard plan={p} key={p.id} />)}
        </div>
        <div className="plans-note">
          <span>·</span> Both plans run on the <strong>same Claude brain</strong>. Enterprise adds custom infra, SSO, data residency and a dedicated team.
        </div>
      </div>

      <style>{`
        .plans { padding-top: 0; padding-bottom: 80px; }
        .plans-grid {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 20px;
          max-width: 900px;
          margin: 0 auto;
        }
        @media (max-width: 720px) { .plans-grid { grid-template-columns: 1fr; } }

        .plan {
          position: relative;
          padding: 36px 32px 32px;
          background: var(--bg-card);
          border: 1px solid var(--border);
          border-radius: 24px;
          display: flex;
          flex-direction: column;
          gap: 24px;
          transition: border-color 240ms var(--ease-out), background 240ms var(--ease-out), transform 240ms var(--ease-out);
        }
        .plan:hover {
          border-color: var(--accent-tint-30);
          transform: translateY(-3px);
        }
        .plan-on {
          background:
            radial-gradient(ellipse 60% 50% at 100% 0%, var(--accent-soft), transparent 60%),
            linear-gradient(180deg, var(--accent-tint-10) 0%, var(--bg-card) 70%);
          border-color: var(--accent-tint-40);
          box-shadow: 0 0 0 1px var(--accent-tint-18), 0 24px 80px -30px var(--accent-tint-40);
        }
        .plan-badge {
          position: absolute;
          top: -12px; left: 32px;
          padding: 5px 14px;
          background: var(--accent);
          color: var(--on-accent);
          font-family: var(--font-mono);
          font-size: 10.5px;
          font-weight: 600;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          border-radius: 999px;
          white-space: nowrap;
          box-shadow: 0 4px 20px var(--accent-tint-40);
        }
        .plan-head { }
        .plan-name {
          font-size: 24px;
          font-weight: 700;
          letter-spacing: -0.025em;
          margin-bottom: 6px;
        }
        .plan-tagline {
          font-size: 14.5px;
          color: var(--text-muted);
          line-height: 1.45;
        }
        .plan-amount {
          display: flex;
          align-items: baseline;
          gap: 8px;
          flex-wrap: wrap;
          padding-bottom: 22px;
          border-bottom: 1px dashed var(--border);
        }
        .plan-currency {
          font-family: var(--font-heading);
          font-size: 28px;
          font-weight: 700;
          color: var(--text-secondary);
          line-height: 1;
        }
        .plan-val {
          font-family: var(--font-heading);
          font-size: 64px;
          font-weight: 800;
          letter-spacing: -0.04em;
          line-height: 1;
          color: var(--text);
        }
        .plan-suffix {
          font-size: 13.5px;
          color: var(--text-muted);
        }
        .plan-cta {
          width: 100%;
          justify-content: center;
          height: 52px;
          font-size: 15px;
        }
        .plan-bullets {
          list-style: none;
          display: flex; flex-direction: column;
          gap: 12px;
          padding-top: 4px;
        }
        .plan-bullets li {
          display: flex;
          gap: 12px;
          font-size: 14.5px;
          line-height: 1.5;
          color: var(--text-secondary);
        }
        .plan-check {
          width: 18px; height: 18px;
          border-radius: 50%;
          background: var(--accent-tint-18);
          color: var(--accent-light);
          display: inline-flex; align-items: center; justify-content: center;
          flex-shrink: 0;
          margin-top: 2px;
        }
        .plan-foot {
          margin-top: auto;
          padding-top: 18px;
          border-top: 1px dashed var(--border);
          font-family: var(--font-mono);
          font-size: 12px;
          color: var(--text-muted);
          letter-spacing: 0.02em;
          line-height: 1.5;
        }

        .plans-note {
          margin-top: 32px;
          text-align: center;
          font-family: var(--font-mono);
          font-size: 12.5px;
          color: var(--text-muted);
          letter-spacing: 0.03em;
          max-width: 760px;
          margin-left: auto;
          margin-right: auto;
        }
        .plans-note strong { color: var(--accent-light); font-weight: 600; }
        .plans-note span { color: var(--accent-light); margin-right: 4px; }
      `}</style>
    </section>
  );
}

function FeatureCell({ value }) {
  if (value === true)  return <span className="cmp-yes">{Icons.check({ width: 14, height: 14 })}</span>;
  if (value === false) return <span className="cmp-no">—</span>;
  return <span className="cmp-txt">{value}</span>;
}

function ComparisonTable() {
  return (
    <section className="compare-table" id="compare">
      <div className="container">
        <header className="cmp-head">
          <div className="eyebrow">Side by side</div>
          <h2>What you get in each tier.</h2>
          <p>The honest list. Free credits, Team, Enterprise — same engine, different boundaries.</p>
        </header>

        <div className="cmp-wrap">
          <table className="cmp">
            <thead>
              <tr>
                <th className="cmp-rowhead-h"></th>
                <th>
                  <div className="cmp-col-name">$15 credits</div>
                  <div className="cmp-col-sub">trial · no card</div>
                </th>
                <th className="cmp-col-on">
                  <div className="cmp-col-name">Team</div>
                  <div className="cmp-col-sub">${TEAM_PRICE} / seat / mo</div>
                </th>
                <th>
                  <div className="cmp-col-name">Enterprise</div>
                  <div className="cmp-col-sub">custom</div>
                </th>
              </tr>
            </thead>
            <tbody>
              {FEATURE_GROUPS.map((g) => (
                <React.Fragment key={g.title}>
                  <tr className="cmp-group">
                    <th colSpan={4}>{g.title}</th>
                  </tr>
                  {g.rows.map((row, i) => (
                    <tr key={i}>
                      <th className="cmp-rowhead">{row[0]}</th>
                      <td><FeatureCell value={row[1]} /></td>
                      <td className="cmp-col-on"><FeatureCell value={row[2]} /></td>
                      <td><FeatureCell value={row[3]} /></td>
                    </tr>
                  ))}
                </React.Fragment>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <style>{`
        .compare-table { padding-top: 60px; padding-bottom: 120px; }
        .cmp-head { max-width: 600px; margin-bottom: 40px; }
        .cmp-head h2 {
          font-size: clamp(2rem, 3.5vw, 2.8rem);
          letter-spacing: -0.04em;
          margin: 10px 0 12px;
        }
        .cmp-head p {
          color: var(--text-secondary);
          font-size: 15px;
        }
        .cmp-wrap {
          background: var(--bg-card);
          border: 1px solid var(--border);
          border-radius: 20px;
          overflow: hidden;
          overflow-x: auto;
        }
        table.cmp {
          width: 100%;
          border-collapse: collapse;
          min-width: 640px;
          font-size: 14px;
        }
        .cmp th, .cmp td {
          padding: 14px 18px;
          text-align: center;
          border-bottom: 1px solid var(--border);
          vertical-align: middle;
        }
        .cmp thead th {
          padding: 22px 18px 20px;
          background: var(--bg-elev);
          border-bottom: 1px solid var(--border);
          font-weight: 700;
        }
        .cmp-col-name {
          font-family: var(--font-heading);
          font-size: 18px;
          letter-spacing: -0.02em;
          color: var(--text);
        }
        .cmp-col-sub {
          margin-top: 4px;
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.06em;
          color: var(--text-muted);
          font-weight: 400;
        }
        .cmp-col-on {
          background: linear-gradient(180deg, var(--accent-tint-06), transparent 80%) !important;
          position: relative;
        }
        thead .cmp-col-on::after {
          content: "";
          position: absolute;
          top: 0; left: 0; right: 0;
          height: 3px;
          background: var(--accent);
        }
        .cmp-rowhead-h { background: var(--bg-elev); }
        .cmp-rowhead {
          text-align: left !important;
          font-weight: 500;
          color: var(--text);
          background: var(--bg-elev);
          font-size: 14px;
          font-family: var(--font-sans);
        }
        .cmp-group th {
          text-align: left !important;
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: var(--accent-light);
          padding: 22px 18px 10px !important;
          background: var(--bg) !important;
          border-bottom: 1px dashed var(--border) !important;
          font-weight: 600;
        }
        .cmp-yes {
          display: inline-flex;
          width: 22px; height: 22px;
          border-radius: 50%;
          background: var(--accent-soft);
          color: var(--accent-light);
          align-items: center;
          justify-content: center;
          border: 1px solid color-mix(in oklch, var(--accent) 30%, transparent);
        }
        .cmp-no { color: var(--text-muted); font-family: var(--font-mono); }
        .cmp-txt { font-family: var(--font-mono); font-size: 12px; color: var(--text); letter-spacing: 0.02em; }
      `}</style>
    </section>
  );
}

function FAQ() {
  const [open, setOpen] = usePriceState(0);
  return (
    <section className="faq" id="faq">
      <div className="container">
        <header className="faq-head">
          <div className="eyebrow">FAQ</div>
          <h2>Common questions.</h2>
        </header>

        <div className="faq-list">
          {FAQS.map((item, i) => (
            <details
              key={i}
              className="faq-item"
              open={open === i}
              onToggle={(e) => { if (e.target.open) setOpen(i); }}
            >
              <summary>
                <span>{item.q}</span>
                <span className="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="faq-answer">{item.a}</div>
            </details>
          ))}
        </div>

        <div className="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>{`
        .faq { padding-top: 0; padding-bottom: 120px; }
        .faq-head { max-width: 600px; margin-bottom: 40px; }
        .faq-head h2 {
          font-size: clamp(2rem, 3.5vw, 2.8rem);
          letter-spacing: -0.04em;
          margin-top: 10px;
        }
        .faq-list {
          display: flex;
          flex-direction: column;
          border: 1px solid var(--border);
          border-radius: 18px;
          overflow: hidden;
        }
        .faq-item {
          border-bottom: 1px solid var(--border);
          background: var(--bg-card);
        }
        .faq-item:last-child { border-bottom: none; }
        .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);
        }
        .faq-item summary:hover { background: var(--bg-card-hover); }
        .faq-item summary::-webkit-details-marker { display: none; }
        .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;
        }
        .faq-item[open] .faq-marker {
          transform: rotate(180deg);
          background: var(--accent-soft);
          color: var(--accent-light);
        }
        .faq-answer {
          padding: 0 28px 24px;
          color: var(--text-secondary);
          font-size: 15px;
          line-height: 1.65;
          max-width: 760px;
        }

        .faq-foot {
          margin-top: 40px;
          padding-top: 28px;
          border-top: 1px solid var(--border);
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 18px;
          flex-wrap: wrap;
        }
      `}</style>
    </section>
  );
}

function TrustStrip() {
  return (
    <section className="trust">
      <div className="container">
        <div className="trust-grid">
          <div className="trust-cell">
            <div className="trust-num">$15</div>
            <div className="trust-lbl">in free credits, no card</div>
          </div>
          <div className="trust-cell">
            <div className="trust-num">$0</div>
            <div className="trust-lbl">setup fee, ever</div>
          </div>
          <div className="trust-cell">
            <div className="trust-num">1 min</div>
            <div className="trust-lbl">to install in chat</div>
          </div>
          <div className="trust-cell">
            <div className="trust-num">99.95%</div>
            <div className="trust-lbl">uptime on Enterprise</div>
          </div>
        </div>
      </div>
      <style>{`
        .trust {
          padding: 60px 0;
          border-top: 1px solid var(--border);
          border-bottom: 1px solid var(--border);
          background: linear-gradient(180deg, transparent, rgba(235, 227, 210, 0.60));
        }
        .trust-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 0;
        }
        @media (max-width: 720px) {
          .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 0; }
        }
        .trust-cell {
          padding: 0 24px;
          border-left: 1px solid var(--border);
          text-align: center;
        }
        .trust-cell:first-child { border-left: none; }
        @media (max-width: 720px) {
          .trust-cell { border-left: none; }
        }
        .trust-num {
          font-family: var(--font-heading);
          font-size: clamp(1.8rem, 3vw, 2.4rem);
          font-weight: 800;
          letter-spacing: -0.04em;
          color: var(--text);
        }
        .trust-lbl {
          margin-top: 8px;
          font-family: var(--font-mono);
          font-size: 11.5px;
          letter-spacing: 0.05em;
          color: var(--text-muted);
        }
      `}</style>
    </section>
  );
}

function PricingPage() {
  return (
    <>
      <SiteEffects />
      <SiteNav active="pricing" />
      <PricingHero />
      <PlansGrid />
      <TrustStrip />
      <ComparisonTable />
      <FAQ />
      <FinalCTA
        heading={<>Stop renting tools.<br/><em>Hire a teammate.</em></>}
        sub="Claim $15 of credits in Telegram — no card, no setup call. Credits never expire. You can start before this minute is up."
        ctaLabel="Claim $15 credits"
      />
      <SiteFooter />
      <SiteTweaks />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<PricingPage />);