/* global React */
// "How it works" — 3-card row + big quote + nav

function HowItWorks() {
  const cards = [
    {
      k: 'one',
      t: 'Pick a niche, not a keyword.',
      d: 'Each niche is a curated product: sources, allowed domains, refresh cadence. We crawl once across subscribers, then personalize your rerank for cents.',
      icon: <IconNiche />,
    },
    {
      k: 'two',
      t: 'Ask like an agent, not a feed reader.',
      d: 'Say "show me robotic demos" or paste a rubric. The output includes scores, reasons, confidence, source metadata, and cost.',
      icon: <IconChat />,
    },
    {
      k: 'three',
      t: 'Drop the URL anywhere.',
      d: 'Private RSS, JSON, email, or webhook. Works in Feedly, Reeder, NetNewsWire, your CI, your inbox. Bring your own reader.',
      icon: <IconRSS />,
    },
  ];

  return (
    <section className="compact">
      <div className="container">
        <div style={{
          display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
          marginBottom: 36, gap: 32,
        }}>
          <h2 className="h-section" style={{ maxWidth: 660 }}>
            Ranked RSS in three steps. <em>No feed sludge.</em>
          </h2>
          <span className="kicker">how it works</span>
        </div>

        <div className="feature-grid">
          {cards.map(c => (
            <div key={c.k} className="feature">
              <div className="feature-icon">{c.icon}</div>
              <div className="kicker">{c.k}</div>
              <h3 className="h-card">{c.t}</h3>
              <p style={{ margin: 0, color: 'var(--ink-2)', fontSize: 14, lineHeight: 1.5 }}>{c.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function IconNiche() {
  return (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
      <rect x="1" y="1" width="7" height="7" rx="1.5" fill="var(--signal)"/>
      <rect x="10" y="1" width="7" height="7" rx="1.5" stroke="var(--ink)" strokeWidth="1.3"/>
      <rect x="1" y="10" width="7" height="7" rx="1.5" stroke="var(--ink)" strokeWidth="1.3"/>
      <rect x="10" y="10" width="7" height="7" rx="1.5" stroke="var(--ink)" strokeWidth="1.3"/>
    </svg>
  );
}
function IconChat() {
  return (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
      <path d="M2 4a2 2 0 012-2h10a2 2 0 012 2v6a2 2 0 01-2 2H7l-3 3v-3H4a2 2 0 01-2-2V4z" stroke="var(--ink)" strokeWidth="1.3"/>
      <circle cx="6" cy="7" r="1" fill="var(--signal-deep)"/>
      <circle cx="9" cy="7" r="1" fill="var(--signal-deep)"/>
      <circle cx="12" cy="7" r="1" fill="var(--signal-deep)"/>
    </svg>
  );
}
function IconRSS() {
  return (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
      <path d="M3 3c7 0 12 5 12 12" stroke="var(--ink)" strokeWidth="1.5" strokeLinecap="round" fill="none"/>
      <path d="M3 8a7 7 0 017 7" stroke="var(--ink)" strokeWidth="1.5" strokeLinecap="round" fill="none"/>
      <circle cx="4" cy="14" r="1.5" fill="var(--signal-deep)"/>
    </svg>
  );
}

// CLI demo wrapper section
function CLISection() {
  return (
    <section style={{ background: 'var(--paper)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'center' }} className="cli-grid">
          <div>
            <span className="eyebrow">CLI · agent-consumable</span>
            <h2 className="h-section" style={{ marginTop: 14 }}>
              Made for <em>other agents</em><br/>to chain into.
            </h2>
            <p className="lede" style={{ marginTop: 16 }}>
              JSON-out by default, RSS on request. Time-window flags, natural-language ranking prompts,
              and signed receipts you can pipe to <span style={{fontFamily:'var(--mono)', color: 'var(--trust)'}}>jq</span>.
              Agents can ask for the top ten matches to a rubric; humans can read the same result in Reeder.
            </p>
            <div style={{
              fontFamily: 'var(--mono)', fontSize: 13,
              marginTop: 24, padding: '14px 16px',
              background: 'var(--bg)',
              border: '1px solid var(--line)',
              borderRadius: 10,
              color: 'var(--ink-2)',
            }}>
              <span style={{color:'var(--ink-3)'}}># install</span><br/>
              <span style={{color:'var(--signal-deep)'}}>$</span> brew install mece-labs/mece<br/>
              <span style={{color:'var(--signal-deep)'}}>$</span> mece login
            </div>
          </div>
          <CLIDemo />
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) { .cli-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

// Marquee strip of niches
function NicheMarquee() {
  const niches = [
    'ai-agents-daily', 'rust-systems-weekly', 'indie-hacker-repos',
    'kernel-hackers', 'crypto-zk-research', 'paper-of-the-day',
    'devtools-launches', 'compiler-internals', 'arxiv-cs.LG-filtered',
    'security-disclosures', 'design-systems-quarterly', 'pg-internals-weekly',
  ];
  return (
    <div style={{
      borderTop: '1px solid var(--line)',
      borderBottom: '1px solid var(--line)',
      overflow: 'hidden', padding: '22px 0',
      background: 'var(--paper)',
    }}>
      <div style={{
        display: 'flex', gap: 56, whiteSpace: 'nowrap',
        animation: 'marq 50s linear infinite',
        fontFamily: 'var(--mono)', fontSize: 13,
        color: 'var(--ink-2)',
      }}>
        {[...niches, ...niches, ...niches].map((n, i) => (
          <span key={i} style={{ display: 'inline-flex', gap: 10, alignItems: 'center' }}>
            <span style={{
              width: 6, height: 6, borderRadius: '50%',
              background: 'var(--signal-deep)',
            }}></span>
            {n}
          </span>
        ))}
      </div>
      <style>{`
        @keyframes marq {
          from { transform: translateX(0); }
          to   { transform: translateX(-33.333%); }
        }
      `}</style>
    </div>
  );
}

// Nav
function Nav() {
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a href="index.html" className="brand">
          <BrandMark />
          <span>mece</span>
          <span style={{
            fontFamily: 'var(--mono)', fontSize: 10,
            background: 'var(--bg)',
            border: '1px solid var(--line)',
            padding: '2px 6px', borderRadius: 999,
            color: 'var(--ink-3)', letterSpacing: '0.05em',
            marginLeft: 4,
          }}>v0.4</span>
        </a>
        <div className="nav-links">
          <a href="#how">How it works</a>
          <a href="#pricing">Pricing</a>
          <a href="App.html">Reader</a>
          <a href="Blog.html">Blog</a>
          <a href="#">Docs</a>
        </div>
        <button className="nav-cta">
          Start free
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
            <path d="M2 6h7m0 0L6 3M9 6l-3 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
          </svg>
        </button>
      </div>
    </nav>
  );
}

// Final CTA strip
function FinalCTA() {
  return (
    <section style={{ padding: '120px 0' }}>
      <div className="container">
        <div style={{
          background: 'var(--ink)',
          color: 'var(--paper)',
          borderRadius: 22,
          padding: '80px 56px',
          position: 'relative',
          overflow: 'hidden',
        }}>
          {/* decorative grid */}
          <div style={{
            position: 'absolute', inset: 0,
            backgroundImage:
              'linear-gradient(color-mix(in oklab, var(--paper) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--paper) 6%, transparent) 1px, transparent 1px)',
            backgroundSize: '40px 40px',
            maskImage: 'radial-gradient(ellipse at 70% 30%, black, transparent 70%)',
          }}></div>
          <div style={{ position: 'relative', maxWidth: 820 }}>
            <span className="eyebrow" style={{
              color: 'color-mix(in oklab, var(--paper) 70%, transparent)',
            }}>
              Free tier · no card · 1 niche forever
            </span>
            <h2 className="h-display" style={{
              color: 'var(--paper)',
              fontSize: 'clamp(40px, 5.5vw, 80px)',
              marginTop: 18, marginBottom: 28,
            }}>
              Stop reading <em style={{ color: 'var(--signal)' }}>everything</em>.<br/>
              Start reading <em style={{ color: 'var(--signal)' }}>the right things</em>.
            </h2>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button className="btn btn-signal" style={{ padding: '16px 26px', fontSize: 16 }}>
                Get your private RSS URL →
              </button>
              <a href="#pricing" className="btn" style={{
                background: 'transparent',
                color: 'var(--paper)',
                border: '1px solid color-mix(in oklab, var(--paper) 30%, transparent)',
                padding: '16px 26px', fontSize: 16,
              }}>
                See pricing
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HowItWorks, CLISection, NicheMarquee, Nav, FinalCTA });