/* global React */
// Two-pillar section: Innovation vs Trust (the fascinate advantage)

const { useEffect, useState, useRef } = React;

// Innovation diagram — animated /btw learning loop
function InnovationDiagram() {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 1500);
    return () => clearInterval(id);
  }, []);

  const stages = [
    { label: 'crawl', sub: 'zyte / camoufox' },
    { label: 'rank',  sub: 'haiku 4.5' },
    { label: 'learn', sub: '/btw patches' },
    { label: 'serve', sub: 'rss · json · email' },
  ];
  const active = tick % stages.length;

  return (
    <div style={{
      background: 'var(--bg)',
      borderRadius: 14,
      padding: '24px 22px',
      border: '1px solid var(--line)',
    }}>
      {/* flow */}
      <div style={{
        display: 'flex', alignItems: 'center',
        justifyContent: 'space-between', gap: 0,
        marginBottom: 18,
      }}>
        {stages.map((s, i) => (
          <React.Fragment key={i}>
            <div style={{
              display: 'flex', flexDirection: 'column', alignItems: 'center',
              gap: 6,
              flex: '0 0 auto',
            }}>
              <div style={{
                width: 42, height: 42, borderRadius: 11,
                background: i === active ? 'var(--ink)' : 'var(--paper)',
                color: i === active ? 'var(--signal)' : 'var(--ink-2)',
                border: '1px solid ' + (i === active ? 'var(--ink)' : 'var(--line)'),
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--mono)', fontSize: 12, fontWeight: 500,
                transition: 'all .3s ease',
                position: 'relative',
              }}>
                {i + 1}
                {i === active && (
                  <span style={{
                    position: 'absolute', inset: -6, borderRadius: 14,
                    border: '1.5px solid var(--signal)',
                    animation: 'pulse-ring 1.4s ease-out infinite',
                  }}></span>
                )}
              </div>
              <div style={{
                fontFamily: 'var(--sans)', fontSize: 13, fontWeight: 500,
                color: 'var(--ink)',
              }}>{s.label}</div>
              <div style={{
                fontFamily: 'var(--mono)', fontSize: 10,
                color: 'var(--ink-3)', letterSpacing: '0.04em',
              }}>{s.sub}</div>
            </div>
            {i < stages.length - 1 && (
              <div style={{
                flex: '1 1 auto', height: 1,
                background: 'repeating-linear-gradient(90deg, var(--ink-3) 0 3px, transparent 3px 7px)',
                marginTop: -24,
                position: 'relative',
              }}>
                <span style={{
                  position: 'absolute', top: -3, left: '50%',
                  width: 7, height: 7, borderRadius: '50%',
                  background: 'var(--signal)',
                  animation: 'flow 2.5s linear infinite',
                  animationDelay: `${i * 0.6}s`,
                }}></span>
              </div>
            )}
          </React.Fragment>
        ))}
      </div>

      {/* example /btw command */}
      <div style={{
        background: 'var(--paper)',
        borderRadius: 10,
        padding: 14,
        fontFamily: 'var(--mono)', fontSize: 12,
        border: '1px solid var(--line)',
      }}>
        <div style={{ color: 'var(--ink-3)', fontSize: 10, letterSpacing: '0.08em', marginBottom: 6 }}>
          INLINE FEEDBACK
        </div>
        <div><span style={{ color: 'var(--signal-deep)' }}>/btw</span> more papers, fewer YC linkedin takes</div>
        <div style={{
          marginTop: 6, color: 'var(--ink-3)', fontSize: 11,
          paddingTop: 6, borderTop: '1px dashed var(--line)',
        }}>
          → <span style={{ color: 'var(--ink-2)' }}>topic_weights[arxiv]</span> += 0.5<br/>
          → <span style={{ color: 'var(--ink-2)' }}>blocked_keywords</span> +&quot;hot take&quot;
        </div>
      </div>

      <style>{`
        @keyframes flow {
          0%   { transform: translateX(-40px); opacity: 0; }
          20%  { opacity: 1; }
          80%  { opacity: 1; }
          100% { transform: translateX(40px); opacity: 0; }
        }
      `}</style>
    </div>
  );
}

// Trust diagram — animated receipt
function TrustReceipt() {
  const [verified, setVerified] = useState(false);
  useEffect(() => {
    const id = setInterval(() => setVerified(v => !v), 3200);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="receipt">
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        marginBottom: 12, fontSize: 11,
      }}>
        <span style={{ color: 'var(--signal)', letterSpacing: '0.05em', whiteSpace: 'nowrap' }}>SIGNED · RECEIPT</span>
        <span style={{ color: 'color-mix(in oklab, var(--paper) 60%, transparent)' }}>job_7f3a91c2</span>
      </div>
      {[
        ['model',         'haiku-4-5'],
        ['prompt_hash',   'b41…d72e'],
        ['content_hash',  '9a8…2f01'],
        ['output_hash',   '3c4…b8fa'],
        ['criteria_ver',  'v0.42'],
        ['spent',         '6 650 µcr'],
        ['timestamp',     '14:22Z'],
      ].map(([k, v]) => (
        <div key={k} className="receipt-row">
          <span className="k">{k}</span>
          <span className="v">{v}</span>
        </div>
      ))}
      <div className="receipt-sig">
        ed25519:&nbsp;7f3a 91c2 ee04 b1d9 · 2a8f 4c61 9d72 ee8b<br/>
        c104 9eaa 3f7b 21d4 · 8a9c 4f02 ee18 0a55
      </div>
      <div className="sig-ok" style={{ opacity: verified ? 1 : 0.4, transition: 'opacity .4s' }}>
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
          <circle cx="7" cy="7" r="6" stroke="var(--signal)" strokeWidth="1.4" />
          <path d="M4 7l2 2 4-4" stroke="var(--signal)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
        verified · replayable · auditable
      </div>
    </div>
  );
}

function Pillars() {
  return (
    <section>
      <div className="container">
        <div style={{ marginBottom: 56, maxWidth: 720 }}>
          <span className="eyebrow">The fascinate advantage</span>
          <h2 className="h-section" style={{ marginTop: 14 }}>
            We win on <em>two</em> things —<br/>
            <span style={{ fontStyle: 'italic', color: 'var(--signal-deep)' }}>innovation</span> and <em>trust</em>.
          </h2>
          <p className="lede" style={{ marginTop: 16 }}>
            Anyone can write a cron job that scrapes a URL. The interesting questions are
            <em style={{ fontFamily: 'var(--serif)' }}> how well does it learn </em>
            and <em style={{ fontFamily: 'var(--serif)' }}>how honestly does it bill you</em>.
            We took both seriously from day one.
          </p>
        </div>

        <div className="split">
          {/* INNOVATION */}
          <div className="pillar innovation">
            <div>
              <span className="eyebrow">01 — Innovation</span>
              <h3 className="h-section" style={{ fontSize: 'clamp(28px, 3vw, 40px)', marginTop: 12 }}>
                An agent that <em>learns from how you read</em>.
              </h3>
            </div>
            <p style={{ color: 'var(--ink-2)', fontSize: 16, lineHeight: 1.55, margin: 0 }}>
              Type <span style={{ fontFamily: 'var(--mono)', color: 'var(--signal-deep)' }}>/btw less rust drama, more allocator deep-dives</span> right in the CLI.
              The patch lands in your preference profile as a strict JSON diff — never as freeform text the
              ranker could be tricked by. Smart routing picks Haiku for skims, Sonnet for the hard re-rank, Opus only when it pays for itself.
            </p>
            <InnovationDiagram />
            <ul style={{
              listStyle: 'none', padding: 0, margin: 0,
              display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px 18px',
              fontFamily: 'var(--mono)', fontSize: 12,
              color: 'var(--ink-2)',
            }}>
              {[
                'inline /btw learning',
                'haiku · sonnet · opus routing',
                'per-niche cached rerank',
                'deterministic numeric scores',
              ].map(t => (
                <li key={t} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{
                    width: 14, height: 14, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    background: 'var(--signal)', borderRadius: 4,
                  }}>
                    <svg width="9" height="9" viewBox="0 0 9 9" fill="none">
                      <path d="M2 4.5 L4 6.5 L7.5 3" stroke="var(--ink)" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  </span>
                  {t}
                </li>
              ))}
            </ul>
          </div>

          {/* TRUST */}
          <div className="pillar trust">
            <div>
              <span className="eyebrow">02 — Trust</span>
              <h3 className="h-section" style={{ fontSize: 'clamp(28px, 3vw, 40px)', marginTop: 12 }}>
                Every job <em style={{ color: 'var(--signal)' }}>signed</em>,<br/>
                every dollar <em style={{ color: 'var(--signal)' }}>pre-quoted</em>.
              </h3>
            </div>
            <p style={{ color: 'color-mix(in oklab, var(--paper) 75%, transparent)', fontSize: 16, lineHeight: 1.55, margin: 0 }}>
              Before a single token leaves our dispatcher, we reserve credits inside a serializable
              Postgres transaction. Every job produces an Ed25519 receipt binding
              <em style={{ fontFamily: 'var(--serif)', color: 'var(--signal)' }}> (prompt, content, output, criteria, timestamp) </em>
              — the same hash on your machine and ours, forever replayable.
            </p>
            <TrustReceipt />
            <ul style={{
              listStyle: 'none', padding: 0, margin: 0,
              display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px 18px',
              fontFamily: 'var(--mono)', fontSize: 12,
              color: 'color-mix(in oklab, var(--paper) 80%, transparent)',
            }}>
              {[
                'ed25519 signed receipts',
                'hard-capped budgets',
                'prompt-injection corpus',
                'replay any past job',
              ].map(t => (
                <li key={t} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{
                    width: 14, height: 14, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    background: 'var(--signal)', borderRadius: 4,
                  }}>
                    <svg width="9" height="9" viewBox="0 0 9 9" fill="none">
                      <path d="M2 4.5 L4 6.5 L7.5 3" stroke="var(--ink)" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  </span>
                  {t}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Pillars });
