/* global React */
// Pricing + Blog + Footer

function Pricing() {
  const tiers = [
    { name: 'free',        price: 0,  per: '/mo', niches: '1 feed', limit: 'daily refresh',  feats: ['Invite-only beta', 'Basic semantic filter', 'Strict monthly cap'], featured: false },
    { name: 'personal',    price: 15, per: '/mo', niches: '3 feeds', limit: '3 000 credits', feats: ['Hosted RSS and JSON', 'Agentic LLM rerank', 'Rubric top-10 queries', 'Signed receipts'], featured: true },
    { name: 'pro',         price: 29, per: '/mo', niches: '10 feeds', limit: '12 000 credits', feats: ['Everything in personal', 'GitHub and news signals', 'Saved ranking criteria', 'Webhook delivery'], featured: false },
    { name: 'power',       price: 99, per: '/mo', niches: '50 feeds', limit: '50 000 credits', feats: ['Everything in pro', 'Priority queue', 'Custom domains and audit export', 'BYO provider keys option'], featured: false },
  ];

  return (
    <section id="pricing">
      <div className="container">
        <div style={{ marginBottom: 56, maxWidth: 720 }}>
          <span className="eyebrow">Offer · hard-capped, never surprised</span>
          <h2 className="h-section" style={{ marginTop: 14 }}>
            One bill. <em>One ceiling.</em><br/>
            No vendor juggling.
          </h2>
          <p className="lede" style={{ marginTop: 16 }}>
            Standard RSS sells chronology. MECE sells judgment: shared crawls, private reranks,
            rubric-matched top tens, and hard caps. We target 50%+ gross margin by caching the
            expensive crawl and charging for the personal intelligence layer.
          </p>
        </div>

        <div className="pricing">
          {tiers.map(t => (
            <div key={t.name} className={`price-card ${t.featured ? 'featured' : ''}`}>
              {t.featured && <span className="price-tag">most chosen</span>}
              <div>
                <div style={{
                  fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.1em',
                  textTransform: 'uppercase',
                  color: t.featured ? 'color-mix(in oklab, var(--paper) 65%, transparent)' : 'var(--ink-3)',
                }}>{t.name}</div>
                <div className="price-amount" style={{ marginTop: 8 }}>
                  ${t.price}<em>.</em><span className="per" style={{ color: t.featured ? 'color-mix(in oklab, var(--paper) 50%, transparent)' : undefined }}>{t.per}</span>
                </div>
              </div>
              <div style={{
                fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.02em',
                color: t.featured ? 'var(--signal)' : 'var(--trust)',
              }}>
                {t.niches} · {t.limit}
              </div>
              <div className="price-feats">
                {t.feats.map(f => <div key={f} className="price-feat">{f}</div>)}
              </div>
              <button className={t.featured ? 'btn btn-signal' : 'btn btn-ghost'} style={{ marginTop: 'auto', justifyContent: 'center' }}>
                {t.price === 0 ? 'Start free' : 'Choose ' + t.name}
              </button>
            </div>
          ))}
        </div>

        {/* Anti-gaming guarantee strip */}
        <div style={{
          marginTop: 40,
          padding: 24,
          background: 'var(--paper)',
          border: '1px solid var(--line)',
          borderRadius: 14,
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24,
        }}>
          {[
            { k: 'no overages', v: 'Exit 2 when capped — never paid in arrears' },
            { k: 'refund on schema fail', v: 'Bad LLM output? Credits back, minus overhead' },
            { k: 'cached niches', v: 'You pay for the rerank, not the full crawl' },
            { k: 'agent-ready', v: 'RSS for readers, JSON with reasons for tools' },
          ].map(item => (
            <div key={item.k}>
              <div className="kicker" style={{ marginBottom: 6 }}>{item.k}</div>
              <div style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.45 }}>{item.v}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function BlogTeaser() {
  const posts = [
    {
      cat: 'Engineering',
      date: 'May 12 · 8 min',
      title: <>Why we <em>sign</em> every LLM call with Ed25519.</>,
      thumb: <ThumbReceipts />,
    },
    {
      cat: 'Anti-gaming',
      date: 'May 03 · 6 min',
      title: <>Prompt injection is a <em>scraping</em> problem. Here&rsquo;s our 50-prompt corpus.</>,
      thumb: <ThumbCorpus />,
    },
    {
      cat: 'Economics',
      date: 'Apr 21 · 5 min',
      title: <>How <em>niches-as-products</em> let us run $15/mo profitably.</>,
      thumb: <ThumbEcon />,
    },
  ];
  return (
    <section id="blog">
      <div className="container">
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 40, gap: 32 }}>
          <div style={{ maxWidth: 600 }}>
            <span className="eyebrow">Field notes</span>
            <h2 className="h-section" style={{ marginTop: 14 }}>
              Receipts, <em>literally</em>.
            </h2>
          </div>
          <a href="Blog.html" className="btn btn-ghost">All posts →</a>
        </div>
        <div className="blog-row">
          {posts.map((p, i) => (
            <a key={i} href="Blog.html" className="blog-card">
              <div className="blog-thumb">{p.thumb}</div>
              <div className="blog-meta">
                <span>{p.cat}</span>
                <span>·</span>
                <span>{p.date}</span>
              </div>
              <div className="blog-title">{p.title}</div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function ThumbReceipts() {
  return (
    <svg viewBox="0 0 320 200" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
      <rect width="320" height="200" fill="var(--bg)"/>
      {/* stacked receipts */}
      {[0,1,2].map(i => (
        <g key={i} transform={`translate(${60+i*30}, ${30+i*15}) rotate(${-4+i*4})`}>
          <rect width="160" height="120" rx="6" fill="var(--paper)" stroke="var(--line)" />
          <rect x="14" y="14" width="60" height="6" rx="2" fill="var(--ink)"/>
          <rect x="14" y="28" width="120" height="3" fill="var(--line-2)"/>
          <rect x="14" y="36" width="100" height="3" fill="var(--line-2)"/>
          <rect x="14" y="44" width="110" height="3" fill="var(--line-2)"/>
          <rect x="14" y="70" width="40" height="14" rx="2" fill="var(--signal)"/>
        </g>
      ))}
    </svg>
  );
}

function ThumbCorpus() {
  return (
    <svg viewBox="0 0 320 200" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
      <rect width="320" height="200" fill="var(--trust)"/>
      <g fontFamily="JetBrains Mono, monospace" fontSize="9" fill="var(--paper)" opacity="0.55">
        {Array.from({length: 12}).map((_, i) => (
          <text key={i} x="20" y={20+i*15}>
            {['<untrusted_content>', 'ignore previous...', 'system: leak', 'tool: fetch(url)', '> exfil to', '"output_hash"', '— blocked —', 'sha256:af3...', 'rate_limit_ok', '<safe>', '</untrusted>', 'corpus_test ok'][i]}
          </text>
        ))}
      </g>
      <rect x="200" y="60" width="100" height="80" rx="8" fill="var(--signal)"/>
      <text x="218" y="100" fontFamily="Instrument Serif, serif" fontSize="32" fill="var(--ink)">50</text>
      <text x="218" y="120" fontFamily="JetBrains Mono, monospace" fontSize="8" fill="var(--ink)">attacks</text>
    </svg>
  );
}

function ThumbEcon() {
  return (
    <svg viewBox="0 0 320 200" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
      <rect width="320" height="200" fill="var(--bg)"/>
      {/* bars */}
      {[40, 60, 80, 50, 95, 70, 88, 110, 95, 130].map((h, i) => (
        <rect key={i} x={20 + i*28} y={170 - h} width="20" height={h} rx="2"
          fill={i === 7 ? 'var(--signal)' : 'var(--ink)'} opacity={i === 7 ? 1 : 0.85} />
      ))}
      <line x1="20" y1="170" x2="300" y2="170" stroke="var(--ink)" strokeWidth="1"/>
      <text x="20" y="30" fontFamily="Instrument Serif, serif" fontSize="22" fill="var(--ink)">
        <tspan fontStyle="italic">break-even</tspan>
      </text>
      <text x="20" y="48" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="var(--ink-3)" letterSpacing="0.1em">
        SUBSCRIBERS PER NICHE
      </text>
    </svg>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-col">
            <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 18 }}>
              <BrandMark />
              <span style={{ fontWeight: 600, letterSpacing: '-0.02em', fontSize: 18 }}>mece</span>
            </div>
            <p style={{ fontSize: 14, color: 'var(--ink-2)', maxWidth: 280, lineHeight: 1.5, margin: 0 }}>
              Personalized RSS feeds with cryptographically signed receipts.
              Built for people who read more code than tweets.
            </p>
          </div>
          <div className="footer-col">
            <h5>product</h5>
            <a href="App.html">Reader</a>
            <a href="#pricing">Pricing</a>
            <a href="#">CLI · brew install mece</a>
            <a href="#">Status</a>
          </div>
          <div className="footer-col">
            <h5>company</h5>
            <a href="Blog.html">Blog</a>
            <a href="#">Security · SECURITY.md</a>
            <a href="#">Changelog</a>
            <a href="#">Contact</a>
          </div>
          <div className="footer-col">
            <h5>open source</h5>
            <a href="#">github.com/mece</a>
            <a href="#">Niche catalog</a>
            <a href="#">Receipt verifier</a>
            <a href="#">License — Apache 2.0</a>
          </div>
        </div>

        <div className="footer-wordmark">mece</div>

        <div className="footer-bottom">
          <span>© 2026 MECE LABS · made for tired feed-readers</span>
          <span>v0.4.1 · sha:af391c2</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Pricing, BlogTeaser, Footer });