/* ============================================================
   sections2.jsx — argument, stats, features, install, footer
   ============================================================ */

/* ---------------- WHY (the two provided text blocks) ---------------- */
function Why() {
  return (
    <section id="why" style={{ borderTop: 'var(--bw) solid var(--line)', background: 'var(--bg-panel)' }}>
      <div className="wrap" style={{ padding: '78px 28px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '.8fr 1.2fr', gap: 54, alignItems: 'start' }} className="why-grid">
          <div className="reveal" style={{ position: 'sticky', top: 96 }}>
            <span className="eyebrow" style={{ color: 'var(--muted)' }}>// the case for libraries</span>
            <h2 className="black" style={{ fontSize: 'clamp(34px, 4.6vw, 56px)', letterSpacing: '-.03em', lineHeight: .96, margin: '12px 0 0' }}>
              STOP<br/>RE-BUILDING<br/>THE&nbsp;
              <span style={{ background: 'var(--accent)', color: '#0A0A0A', padding: '0 .1em', boxDecorationBreak: 'clone', WebkitBoxDecorationBreak: 'clone' }}>BUTTON.</span>
            </h2>
            <a href="#install" className="btn btn-accent" style={{ marginTop: 26 }}>Adopt the system <Arrow s={16}/></a>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
            <div className="shell reveal" style={{ padding: 28, boxShadow: 'var(--shadow) var(--shadow) 0 0 var(--accent-3)' }}>
              <span className="black" style={{ fontSize: 30, lineHeight: 1, color: 'var(--accent-3)', WebkitTextStroke: '1.5px var(--line)' }}>01</span>
              <p style={{ fontSize: 19, fontWeight: 500, lineHeight: 1.55, margin: '14px 0 0' }}>
                Building every UI element from scratch wastes time — <strong style={{ background: 'var(--accent)', color: '#0A0A0A', padding: '0 4px' }}>47% longer</strong> than using design systems — and creates inconsistency. When five developers build five different buttons, users notice the chaos. Component libraries solve this by giving everyone the same building blocks.
              </p>
            </div>
            <div className="shell reveal" style={{ padding: 28, boxShadow: 'var(--shadow) var(--shadow) 0 0 var(--accent-2)' }}>
              <span className="black" style={{ fontSize: 30, lineHeight: 1, color: 'var(--accent-2)', WebkitTextStroke: '1.5px var(--line)' }}>02</span>
              <p style={{ fontSize: 19, fontWeight: 500, lineHeight: 1.55, margin: '14px 0 0' }}>
                Production apps need more than pretty interfaces. They need accessibility for users with disabilities — <strong style={{ background: 'var(--accent-2)', color: '#0A0A0A', padding: '0 4px' }}>96% of top websites</strong> have accessibility errors — performance optimization for fast loading, and maintainable code that won't break when you update it. Quality libraries handle these concerns so you don't have to become an expert in every aspect of UI development.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- STATS BAND ---------------- */
function Stats() {
  const data = [
    ['47%', 'longer to build UI from scratch vs. a design system', 'var(--accent)'],
    ['96%', 'of top websites ship accessibility errors', 'var(--accent-2)'],
    ['15', 'accessible components, batteries included', 'var(--accent-4)'],
    ['3kb', 'core bundle gzipped, tree-shakeable & typed', 'var(--accent-3)'],
  ];
  return (
    <section style={{ borderTop: 'var(--bw) solid var(--line)', borderBottom: 'var(--bw) solid var(--line)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)' }} className="stats-grid">
        {data.map(([n, l, c], i) => (
          <div key={i} className="reveal" style={{ padding: '40px 26px', borderRight: i < 3 ? 'var(--bw) solid var(--line)' : 'none',
            background: i % 2 ? 'var(--bg)' : 'var(--bg-panel)' }}>
            <div className="black" style={{ fontSize: 'clamp(44px, 6vw, 72px)', lineHeight: .9, letterSpacing: '-.04em',
              color: c, WebkitTextStroke: '2px var(--line)' }}>{n}</div>
            <p style={{ fontWeight: 600, fontSize: 15, marginTop: 12, color: 'var(--fg)' }}>{l}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------------- FEATURES ---------------- */
const Glyph = ({ kind }) => {
  const s = 30;
  const common = { width: s, height: s, fill: 'none', stroke: 'currentColor', strokeWidth: 2.4, strokeLinecap: 'square' };
  if (kind === 'a11y') return (<svg viewBox="0 0 24 24" {...common}><circle cx="12" cy="4" r="2"/><path d="M3 8h18M12 8v6M12 14l-4 7M12 14l4 7"/></svg>);
  if (kind === 'perf') return (<svg viewBox="0 0 24 24" {...common}><path d="M13 2L4 14h6l-1 8 9-12h-6z"/></svg>);
  return (<svg viewBox="0 0 24 24" {...common}><path d="M8 6L3 12l5 6M16 6l5 6-5 6M13 4l-2 16"/></svg>);
};

function Features() {
  const feats = [
    ['a11y', 'Accessibility, handled', 'WAI-ARIA roles, keyboard nav, focus management and screen-reader tests baked into every primitive. Pass audits without becoming an a11y expert.', 'var(--accent)'],
    ['perf', 'Performance by default', 'Tree-shakeable ESM, ~14kb core, zero runtime dependencies. Lazy where it counts so your bundle and your Time-to-Interactive stay tiny.', 'var(--accent-4)'],
    ['code', 'Maintainable code', 'Strict TypeScript, semantic versioning and a documented theming contract. Update the library without your app breaking underneath you.', 'var(--accent-2)'],
  ];
  return (
    <section className="wrap" style={{ padding: '78px 28px' }}>
      <div className="reveal" style={{ marginBottom: 40, maxWidth: 640 }}>
        <span className="eyebrow" style={{ color: 'var(--muted)' }}>// more than pretty</span>
        <h2 className="black" style={{ fontSize: 'clamp(34px, 5vw, 58px)', letterSpacing: '-.03em', lineHeight: .96, margin: '10px 0 0' }}>
          PRODUCTION-GRADE, NOT JUST GOOD-LOOKING.
        </h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }} className="feat-grid">
        {feats.map(([k, t, d, c], i) => (
          <div key={i} className="shell reveal" style={{ padding: 26, display: 'flex', flexDirection: 'column', gap: 16 }}>
            <span aria-hidden="true" style={{ width: 56, height: 56, background: c, color: '#0A0A0A',
              border: 'var(--bw) solid var(--line)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
              <Glyph kind={k}/>
            </span>
            <h3 className="black" style={{ fontSize: 23, letterSpacing: '-.02em', margin: 0 }}>{t}</h3>
            <p style={{ fontWeight: 500, fontSize: 16, color: 'var(--fg)', margin: 0, lineHeight: 1.5 }}>{d}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------------- INSTALL / CODE ---------------- */
function Install() {
  const [copied, setCopied] = useState(false);
  const [pm, setPm] = useState('npm');
  const cmd = { npm: 'npm i brutalist-ui-library', pnpm: 'pnpm add brutalist-ui-library', yarn: 'yarn add brutalist-ui-library' };
  const copy = () => {
    const text = cmd[pm];
    if (navigator.clipboard) navigator.clipboard.writeText(text).catch(() => {});
    setCopied(true); setTimeout(() => setCopied(false), 1600);
  };
  return (
    <section id="install" style={{ borderTop: 'var(--bw) solid var(--line)', background: 'var(--bg-panel)' }}>
      <div className="wrap" style={{ padding: '78px 28px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'center' }} className="install-grid">
          <div className="reveal">
            <span className="eyebrow" style={{ color: 'var(--muted)' }}>// 30 seconds to your first component</span>
            <h2 className="black" style={{ fontSize: 'clamp(34px, 5vw, 56px)', letterSpacing: '-.03em', lineHeight: .96, margin: '10px 0 22px' }}>
              ONE COMMAND.<br/>THEN SHIP.
            </h2>
            <div style={{ display: 'flex', gap: 0, marginBottom: 16 }}>
              {Object.keys(cmd).map(k => (
                <button key={k} onClick={() => setPm(k)} style={{ padding: '8px 16px', fontWeight: 800, fontSize: 13, cursor: 'pointer',
                  border: 'var(--bw) solid var(--line)', marginRight: -1, background: pm === k ? 'var(--accent)' : 'var(--bg-panel)', color: '#0A0A0A' }}>{k}</button>
              ))}
            </div>
            <div className="shell" style={{ padding: '0', display: 'flex', alignItems: 'stretch', overflow: 'hidden' }}>
              <code className="mono" style={{ flex: 1, padding: '15px 18px', fontSize: 16, fontWeight: 700 }}>
                <span style={{ color: 'var(--muted)' }}>$ </span>{cmd[pm]}
              </code>
              <button onClick={copy} aria-label="Copy install command" style={{ padding: '0 18px', cursor: 'pointer', fontWeight: 800, fontSize: 13,
                borderLeft: 'var(--bw) solid var(--line)', background: copied ? 'var(--accent-4)' : 'var(--accent)', color: '#0A0A0A' }}>
                {copied ? 'COPIED!' : 'COPY'}
              </button>
            </div>
          </div>

          {/* code block */}
          <div className="shell reveal" style={{ overflow: 'hidden', boxShadow: 'var(--shadow) var(--shadow) 0 0 var(--accent-2)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '11px 15px', borderBottom: 'var(--bw) solid var(--line)', background: 'var(--accent)' }}>
              <i style={{ width: 11, height: 11, background: '#0A0A0A', borderRadius: 999, display: 'block' }}/>
              <i style={{ width: 11, height: 11, background: '#0A0A0A', borderRadius: 999, display: 'block' }}/>
              <i style={{ width: 11, height: 11, background: '#0A0A0A', borderRadius: 999, display: 'block' }}/>
              <span className="mono" style={{ marginLeft: 8, fontWeight: 700, fontSize: 12, color: '#0A0A0A' }}>App.tsx</span>
            </div>
            <pre className="mono" style={{ margin: 0, padding: '18px 18px', fontSize: 13.5, lineHeight: 1.7, overflowX: 'auto', color: 'var(--fg)' }}>
{`import { Button, Card, Switch } from 'brutalist-ui-library'
import 'brutalist-ui-library/style.css'

export function Settings() {
  return (
    <Card heading="Settings">
      <Button variant="primary">
        Save changes
      </Button>
      <Switch defaultChecked label="Dark mode" />
    </Card>
  )
}`}
            </pre>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- CTA + FOOTER ---------------- */
function Footer() {
  return (
    <footer style={{ borderTop: 'var(--bw) solid var(--line)' }}>
      <div style={{ background: 'var(--accent)', color: '#0A0A0A', borderBottom: 'var(--bw) solid var(--line)' }}>
        <div className="wrap" style={{ padding: '64px 28px', textAlign: 'center' }}>
          <h2 className="black reveal" style={{ fontSize: 'clamp(40px, 8vw, 104px)', letterSpacing: '-.04em', lineHeight: .88, margin: 0 }}>
            BUILD IT ONCE.<br/>USE IT EVERYWHERE.
          </h2>
          <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap', marginTop: 30 }}>
            <a href="#install" className="btn btn-lg" style={{ background: '#0A0A0A', color: 'var(--accent)' }}>Get BRUTAL/UI <Arrow s={16}/></a>
            <a href="#showcase" className="btn btn-lg" style={{ background: '#fff', color: '#0A0A0A' }}>Browse components</a>
          </div>
        </div>
      </div>
      <div className="wrap" style={{ padding: '44px 28px', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 28 }}>
        <div>
          <span className="black" style={{ fontSize: 22 }}>BRUTAL<span style={{ color: 'var(--muted)' }}>/UI</span></span>
          <p className="mono" style={{ fontSize: 13, color: 'var(--muted)', marginTop: 10, maxWidth: 260 }}>
            The component library with a backbone. MIT licensed. Built in the open.
          </p>
        </div>
        <div style={{ display: 'flex', gap: 54, flexWrap: 'wrap' }}>
          {[['Product', ['Components', 'Themes', 'Changelog', 'Roadmap']],
            ['Resources', ['Docs', 'Playground', 'Figma kit', 'GitHub']],
            ['Company', ['About', 'Blog', 'License', 'Contact']]].map(([h, links]) => (
            <div key={h}>
              <div className="eyebrow" style={{ color: 'var(--muted)', marginBottom: 12 }}>{h}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
                {links.map(l => <a key={l} href="#top" style={{ fontWeight: 700, fontSize: 14, textDecoration: 'none' }}>{l}</a>)}
              </div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ borderTop: 'var(--bw) solid var(--line)' }}>
        <div className="wrap" style={{ padding: '16px 28px', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 10 }}>
          <span className="mono" style={{ fontSize: 12, color: 'var(--muted)' }}>© 2026 BRUTAL/UI — no rounded corners were harmed.</span>
          <span className="mono" style={{ fontSize: 12, color: 'var(--muted)' }}>Made with concrete & care.</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Why, Stats, Features, Install, Footer });