function FormsSection() {
  return (
    <section id="forms" data-screen-label="06 Forms">
      <div className="wrap">
        <div className="section-head">
          <div className="id"><b>06</b> &nbsp;/&nbsp; Forms</div>
          <div>
            <h2 className="h1">Inputs that<br/>get out of the way.</h2>
            <p className="lede" style={{ marginTop: 16 }}>
              Quiet by default, loud when something needs attention. Always pair an input with a label — never rely on placeholder text alone.
            </p>
          </div>
        </div>

        <div className="showcase bd-root" style={{ fontSize: 16 }}>
          <div className="label">// text inputs</div>
          <div className="g2" style={{ gap: 24, marginBottom: 32 }}>
            <div className="bd-field">
              <label className="bd-label">Full name</label>
              <input className="bd-input" type="text" defaultValue="Woo Weng Han"/>
              <div className="bd-help">As it should appear on the invoice.</div>
            </div>
            <div className="bd-field">
              <label className="bd-label">Email</label>
              <input className="bd-input" type="email" placeholder="you@company.com"/>
            </div>
            <div className="bd-field">
              <label className="bd-label">Company URL</label>
              <input className="bd-input" type="url" defaultValue="boolland.com"/>
            </div>
            <div className="bd-field">
              <label className="bd-label">Phone</label>
              <input className="bd-input" type="tel" placeholder="+60 12 345 6789" aria-invalid="true"/>
              <div className="bd-help" style={{ color: 'var(--bd-danger)' }}>Format: country code first.</div>
            </div>
          </div>

          <div className="label">// select & textarea</div>
          <div className="g2" style={{ gap: 24, marginBottom: 32 }}>
            <div className="bd-field">
              <label className="bd-label">Project type</label>
              <select className="bd-select" defaultValue="ecommerce">
                <option value="ecommerce">E-commerce website</option>
                <option value="bespoke">Bespoke web system</option>
                <option value="mobile">Mobile app</option>
                <option value="audit">Audit / consultation</option>
              </select>
            </div>
            <div className="bd-field">
              <label className="bd-label">Budget range</label>
              <select className="bd-select" defaultValue="medium">
                <option value="small">Under RM 30k</option>
                <option value="medium">RM 30k – 100k</option>
                <option value="large">RM 100k – 250k</option>
                <option value="enterprise">RM 250k+</option>
              </select>
            </div>
            <div className="bd-field" style={{ gridColumn: '1 / -1' }}>
              <label className="bd-label">Brief</label>
              <textarea className="bd-textarea" placeholder="Tell us what you're trying to build — and what's stopping you today."></textarea>
            </div>
          </div>

          <div className="label">// choices</div>
          <div className="g2" style={{ gap: 24, marginBottom: 32, alignItems: 'start' }}>
            <div className="cmp-col">
              <div className="bd-eyebrow">checkboxes</div>
              <label className="bd-check"><input type="checkbox" defaultChecked/> I have an existing brand</label>
              <label className="bd-check"><input type="checkbox"/> Need design from scratch</label>
              <label className="bd-check"><input type="checkbox" defaultChecked/> Need engineering only</label>
              <label className="bd-check"><input type="checkbox"/> Subscribe to updates</label>
            </div>
            <div className="cmp-col">
              <div className="bd-eyebrow">radios</div>
              <label className="bd-check"><input type="radio" name="r1" defaultChecked/> One-time project</label>
              <label className="bd-check"><input type="radio" name="r1"/> Monthly retainer</label>
              <label className="bd-check"><input type="radio" name="r1"/> Not sure yet</label>
            </div>
          </div>

          <div className="label">// toggles</div>
          <div className="cmp-row" style={{ gap: 32 }}>
            <label className="bd-toggle"><input type="checkbox" defaultChecked/><span className="track"></span> Subscribe to newsletter</label>
            <label className="bd-toggle"><input type="checkbox"/><span className="track"></span> Two-factor auth</label>
            <label className="bd-toggle"><input type="checkbox" defaultChecked/><span className="track"></span> Show usage analytics</label>
          </div>
        </div>

        <div className="g3" style={{ marginTop: 24 }}>
          <div className="spec">
            <b>// height</b>{'\n'}
            Inputs match button medium height.<br/>
            Padding: <b>0.6875em / 0.9375em</b><br/>
            Radius: <b>--bd-r-md</b>
          </div>
          <div className="spec">
            <b>// focus ring</b>{'\n'}
            All inputs use a <b>3 px ring</b><br/>
            of Signal Blue at 15% opacity<br/>
            plus a solid border in Signal.
          </div>
          <div className="spec">
            <b>// validation</b>{'\n'}
            Errors use Danger only.<br/>
            Show under the input — never<br/>
            beside it (breaks on mobile).
          </div>
        </div>
      </div>
    </section>
  );
}

window.FormsSection = FormsSection;