const MARK_PATH = "M106.882 0C124.62 0.000206159 139 14.3799 139 32.1182V106.882C139 124.62 124.62 139 106.882 139H32.1182C14.3799 139 0.000206171 124.62 0 106.882V32.1182C0.000226775 14.3799 14.3799 0.000202049 32.1182 0H106.882ZM31.0234 113.148H58.8594V31.2031H31.0234V113.148ZM66.1338 112.789H93.9697L107.917 84.8926H80.0811L66.1338 112.789ZM80.0811 77.7979H107.917L93.9697 49.9619H66.1338L80.0811 77.7979Z";

// Inline mark element for sample UI
const SampleMark = ({ color = '#000945', style = {} }) => (
  <svg viewBox="0 0 139 139" fill={color} style={{ width: '1.75em', height: '1.75em', display: 'inline-block', verticalAlign: 'middle', ...style }} aria-hidden="true">
    <path d={MARK_PATH}/>
  </svg>
);

function BreakpointsSection() {
  return (
    <section id="breakpoints" data-screen-label="01 Breakpoints">
      <div className="wrap">
        <div className="section-head">
          <div className="id"><b>01</b> &nbsp;/&nbsp; Breakpoints</div>
          <div>
            <h2 className="h1">Three screens.<br/>One scale.</h2>
            <p className="lede" style={{ marginTop: 16 }}>
              The whole system rides on a single fluid root font-size set in <span className="mono">vw</span>. Every other size — type, padding, gaps, radii — is expressed in <span className="mono">rem</span>. Change the root once per breakpoint and the entire UI scales with it.
            </p>
          </div>
        </div>

        {/* Breakpoint table */}
        <div className="bp-table" style={{ marginBottom: 32 }}>
          <div className="bp-row head">
            <div className="bp-cell">device</div>
            <div className="bp-cell">range</div>
            <div className="bp-cell">root font-size</div>
            <div className="bp-cell">≈ 1 rem at reference</div>
          </div>
          <div className="bp-row">
            <div className="bp-cell">
              <div className="label">tier</div>
              <div className="value">Desktop</div>
            </div>
            <div className="bp-cell">
              <div className="label">viewport width</div>
              <div className="value mono">≥ 1280 px</div>
            </div>
            <div className="bp-cell">
              <div className="label">declaration</div>
              <div className="value mono">1vw</div>
            </div>
            <div className="bp-cell">
              <div className="label">at 1440 px</div>
              <div className="value mono">14.4 px</div>
            </div>
          </div>
          <div className="bp-row">
            <div className="bp-cell">
              <div className="label">tier</div>
              <div className="value">Tablet</div>
            </div>
            <div className="bp-cell">
              <div className="label">viewport width</div>
              <div className="value mono">768 – 1279 px</div>
            </div>
            <div className="bp-cell">
              <div className="label">declaration</div>
              <div className="value mono">1.6vw</div>
            </div>
            <div className="bp-cell">
              <div className="label">at 1024 px</div>
              <div className="value mono">16.4 px</div>
            </div>
          </div>
          <div className="bp-row">
            <div className="bp-cell">
              <div className="label">tier</div>
              <div className="value">Mobile</div>
            </div>
            <div className="bp-cell">
              <div className="label">viewport width</div>
              <div className="value mono">&lt; 768 px</div>
            </div>
            <div className="bp-cell">
              <div className="label">declaration</div>
              <div className="value mono">4vw</div>
            </div>
            <div className="bp-cell">
              <div className="label">at 375 px</div>
              <div className="value mono">15 px</div>
            </div>
          </div>
        </div>

        {/* Code block */}
        <div className="g2">
          <div>
            <div className="eyebrow" style={{ marginBottom: 12 }}>// the rule</div>
            <pre className="code-block"><span className="com">/* The whole system, in 8 lines */</span>{'\n'}
<span className="sel">:root</span> {'{'} <span className="prop">font-size</span>: <span className="num">1vw</span>; {'}'}            <span className="com">/* desktop  ≥ 1280 */</span>{'\n'}
<span className="kw">@media</span> (max-width: <span className="num">1279px</span>) {'{'}{'\n'}
  <span className="sel">:root</span> {'{'} <span className="prop">font-size</span>: <span className="num">1.6vw</span>; {'}'}        <span className="com">/* tablet */</span>{'\n'}
{'}'}{'\n'}
<span className="kw">@media</span> (max-width: <span className="num">767px</span>)  {'{'}{'\n'}
  <span className="sel">:root</span> {'{'} <span className="prop">font-size</span>: <span className="num">4vw</span>; {'}'}          <span className="com">/* mobile */</span>{'\n'}
{'}'}{'\n\n'}
<span className="com">/* everything else uses rem */</span>{'\n'}
<span className="sel">h1</span>    {'{'} <span className="prop">font-size</span>: <span className="num">3rem</span>;     {'}'}{'\n'}
<span className="sel">.card</span> {'{'} <span className="prop">padding</span>:   <span className="num">1.5rem</span>;   {'}'}{'\n'}
<span className="sel">.btn</span>  {'{'} <span className="prop">gap</span>:       <span className="num">0.5rem</span>;   {'}'}</pre>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div className="spec">
              <b>// why vw, not px</b>{'\n'}
              Pixel sizes don't grow with the screen. A 16 px body{'\n'}
              that's comfortable on a 13″ laptop is too small on a{'\n'}
              27″ monitor. <b>vw</b> ties type to viewport width so the{'\n'}
              entire UI breathes naturally.
            </div>
            <div className="spec">
              <b>// why rem for the rest</b>{'\n'}
              Once <b>:root</b> moves, every rem moves with it.{'\n'}
              You set the breakpoint once at the root and the{'\n'}
              whole interface adapts — no per-element media{'\n'}
              queries for typography or spacing.
            </div>
            <div className="spec">
              <b>// the trade-off</b>{'\n'}
              Pure vw can shrink too far on tiny screens or grow{'\n'}
              too big on ultrawides. If that matters, wrap the{'\n'}
              root in <b>clamp(min, vw, max)</b> — same idea,{'\n'}
              safer outer edges.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SampleMark, BreakpointsSection });