// Local / Free / OSS — manifesto-style editorial
const LocalFree = () => {
  const principles = [
    {
      n: '①',
      title: 'Local-first.',
      body: 'Everything renders on your machine. Your code never sees a remote server. No telemetry, no analytics beacons, no "we promise" privacy policy — just files on your disk.',
      tag: 'OFFLINE-CAPABLE',
    },
    {
      n: '②',
      title: 'Bring-your-own model.',
      body: 'pitchkit is a tool, not a service. Claude Code or Cursor does the thinking — pitchkit just orchestrates and renders. No API keys to provision, no per-seat pricing.',
      tag: 'NO API KEYS',
    },
    {
      n: '③',
      title: 'MIT, forever.',
      body: 'Open source under MIT. Fork it. Strip the watermark. Sell the consultancy on top. Add your studio\'s template pack. The kit is yours.',
      tag: 'MIT LICENSE',
    },
    {
      n: '④',
      title: 'No SaaS exit.',
      body: 'No rug-pull. No "pro tier coming Q3." No private repo behind a paywall. The whole thing is a CLI and a folder of templates, and it stays that way.',
      tag: 'NO PAID TIER',
    },
  ];

  return (
    <section className="dark" id="local">
      <div className="container">
        {/* Manifesto title */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(120px, 200px) 1fr',
          gap: 'clamp(24px, 5vw, 64px)',
          alignItems: 'baseline',
          marginBottom: 'clamp(40px, 7vh, 96px)',
        }}>
          <div className="eyebrow"><span className="dot"></span> 04 — The principles</div>
          <h2 className="display h-l" style={{maxWidth: '13ch', color: 'var(--paper)'}}>
            Local. Free. <span className="it" style={{color:'var(--vermillion)'}}>Open.</span><br/>
            Not a freemium trick.
          </h2>
        </div>

        {/* Lede */}
        <div style={{
          maxWidth: 720,
          marginBottom: 'clamp(48px, 8vh, 100px)',
          paddingTop: 32,
          borderTop: '1px solid color-mix(in srgb, var(--paper) 14%, transparent)',
        }}>
          <p style={{
            fontFamily: 'var(--serif)',
            fontSize: 'clamp(22px, 2.8vw, 38px)',
            lineHeight: 1.2,
            letterSpacing: '-0.01em',
            color: 'var(--paper)',
            fontStyle: 'italic',
          }}>
            “There is no server. There is no waitlist. There is no founding-team
            pricing email in your inbox in&nbsp;four months. It is a CLI and a
            folder of templates, and that is the&nbsp;point.”
          </p>
          <div className="mono" style={{
            marginTop: 18,
            fontSize: 11,
            letterSpacing: '0.16em',
            textTransform: 'uppercase',
            color: 'color-mix(in srgb, var(--paper) 55%, transparent)',
          }}>— README.md · line 1</div>
        </div>

        {/* Grid */}
        <div className="principles-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 0,
          borderTop: '1px solid color-mix(in srgb, var(--paper) 14%, transparent)',
        }}>
          {principles.map((p, i) => (
            <div key={i} style={{
              padding: 'clamp(28px, 4vw, 44px) clamp(20px, 2vw, 30px)',
              borderRight: i < 3 ? '1px solid color-mix(in srgb, var(--paper) 14%, transparent)' : 'none',
              position: 'relative',
            }}>
              <div className="display" style={{
                fontSize: 'clamp(36px, 4vw, 56px)',
                color: 'var(--vermillion)',
                fontStyle: 'italic',
                lineHeight: 1,
                marginBottom: 24,
              }}>{p.n}</div>
              <h3 className="display" style={{
                fontSize: 'clamp(22px, 2.2vw, 32px)',
                lineHeight: 1.05,
                color: 'var(--paper)',
                marginBottom: 14,
                letterSpacing: '-0.01em',
              }}>{p.title}</h3>
              <p style={{
                fontSize: 15,
                lineHeight: 1.55,
                color: 'color-mix(in srgb, var(--paper) 75%, transparent)',
                marginBottom: 28,
              }}>
                {p.body}
              </p>
              <div className="mono" style={{
                fontSize: 10,
                letterSpacing: '0.18em',
                textTransform: 'uppercase',
                color: 'var(--vermillion)',
                paddingTop: 16,
                borderTop: '1px solid color-mix(in srgb, var(--paper) 14%, transparent)',
              }}>{p.tag}</div>
            </div>
          ))}
        </div>

        {/* Comparison strip */}
        <div style={{
          marginTop: 'clamp(48px, 7vh, 96px)',
          padding: 'clamp(28px, 4vw, 48px)',
          border: '1px solid color-mix(in srgb, var(--paper) 14%, transparent)',
          borderRadius: 14,
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 'clamp(24px, 5vw, 64px)',
        }} className="compare-grid">
          <div>
            <div className="mono" style={{
              fontSize: 10,
              letterSpacing: '0.18em',
              textTransform: 'uppercase',
              color: 'color-mix(in srgb, var(--paper) 55%, transparent)',
              marginBottom: 16,
            }}>The other guys</div>
            <ul style={{listStyle:'none', padding: 0, margin: 0, display:'grid', gap: 10}}>
              {['$49/mo "creator" tier','Logs your repo to their cloud','Watermark unless you pay','Sunset in 18 months'].map(t => (
                <li key={t} style={{
                  fontFamily: 'var(--mono)',
                  fontSize: 13,
                  color: 'color-mix(in srgb, var(--paper) 65%, transparent)',
                  display:'flex', gap: 10,
                }}>
                  <span style={{color: 'var(--vermillion)'}}>✕</span> {t}
                </li>
              ))}
            </ul>
          </div>
          <div>
            <div className="mono" style={{
              fontSize: 10,
              letterSpacing: '0.18em',
              textTransform: 'uppercase',
              color: 'var(--vermillion)',
              marginBottom: 16,
            }}>pitchkit</div>
            <ul style={{listStyle:'none', padding: 0, margin: 0, display:'grid', gap: 10}}>
              {['Free. Forever. MIT.','Code never leaves your laptop','No watermark, no signup','Owned by everyone who clones it'].map(t => (
                <li key={t} style={{
                  fontFamily: 'var(--mono)',
                  fontSize: 13,
                  color: 'var(--paper)',
                  display:'flex', gap: 10,
                }}>
                  <span style={{color:'#9ad19a'}}>✓</span> {t}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .principles-grid { grid-template-columns: repeat(2, 1fr) !important; }
          .principles-grid > div:nth-child(2) { border-right: none !important; }
          .principles-grid > div:nth-child(3), .principles-grid > div:nth-child(4) {
            border-top: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
          }
          .compare-grid { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 540px) {
          .principles-grid { grid-template-columns: 1fr !important; }
          .principles-grid > div { border-right: none !important; }
          .principles-grid > div + div { border-top: 1px solid color-mix(in srgb, var(--paper) 14%, transparent); }
        }
      `}</style>
    </section>
  );
};

window.LocalFree = LocalFree;