// Footer.jsx — drafting-sheet metadata strip
const PlumbFooter = () => (
  <footer className="ft" data-screen-label="footer">
    <div className="page">
      <div className="ft-top">
        <div className="ft-mark">
          <svg width="20" height="40" viewBox="0 0 20 40" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <line x1="10" y1="0" x2="10" y2="6" stroke="#1A1A1A" strokeWidth="0.7"/>
            <rect x="8" y="6" width="4" height="3" fill="#1A1A1A"/>
            <path d="M 2 9 L 18 9 L 10 38 Z" fill="#1A1A1A"/>
          </svg>
          <div className="ft-mark-text">
            <span className="ft-name">plumb</span>
            <span className="readout ft-tag">true from drawing to delivery</span>
          </div>
        </div>
        <div className="ft-cols">
          <div>
            <span className="readout ft-h">product</span>
            <a href="#how">How it works</a>
            <a href="#demo">Live preview</a>
            <a href="#before-after">Before / after</a>
            <a href="#pricing">Pricing</a>
          </div>
          <div>
            <span className="readout ft-h">company</span>
            <a href="#founders">Founders' note</a>
            <a href="mailto:hello@plumb.eng">hello@plumb.eng</a>
            <a href="#waitlist">Request access</a>
          </div>
        </div>
      </div>

      <div className="ft-strip">
        <span className="readout">doc 001 · plumb · sheet 1 of 1</span>
        <span className="readout">rev a · 2026</span>
        <span className="readout">© plumb, inc. · five people, not five hundred</span>
        <span className="readout">made on a tuesday</span>
      </div>
    </div>

    <style>{`
      .ft {
        background: var(--color-surface-dark);
        color: var(--color-vellum);
        padding: 64px 0 0;
        position: relative;
      }
      .ft-top {
        display: grid;
        grid-template-columns: 1fr;
        gap: 48px;
        padding-bottom: 48px;
        border-bottom: 1px solid rgba(232,226,213,0.1);
      }
      @media (min-width: 768px) { .ft-top { grid-template-columns: 1fr 2fr; gap: 64px; } }

      .ft-mark { display: flex; gap: 14px; align-items: flex-start; }
      .ft-mark svg path, .ft-mark svg rect, .ft-mark svg line {
        fill: var(--color-vellum); stroke: var(--color-vellum);
      }
      .ft-mark-text { display: flex; flex-direction: column; gap: 6px; }
      .ft-name {
        font-family: var(--font-grotesk);
        font-size: 22px; font-weight: 500;
        letter-spacing: -0.02em;
      }
      .ft-tag {
        font-size: 10px;
        color: rgba(232,226,213,0.55);
        letter-spacing: 0.08em;
      }

      .ft-cols {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
      }
      .ft-cols > div { display: flex; flex-direction: column; gap: 10px; }
      .ft-h {
        font-size: 10px; letter-spacing: 0.14em;
        color: rgba(232,226,213,0.5);
        margin-bottom: 8px;
      }
      .ft-cols a {
        font-family: var(--font-grotesk);
        font-size: 13px;
        color: var(--color-vellum);
        text-decoration: none;
        opacity: 0.8;
        transition: opacity 120ms var(--ease-standard);
      }
      .ft-cols a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
      .ft-not {
        font-family: var(--font-grotesk);
        font-size: 13px;
        color: rgba(232,226,213,0.45);
        font-style: italic;
      }

      .ft-strip {
        display: flex; flex-wrap: wrap;
        justify-content: space-between; gap: 12px;
        padding: 18px 0;
        font-size: 10px;
        color: rgba(232,226,213,0.42);
        letter-spacing: 0.08em;
      }
    `}</style>
  </footer>
);

window.PlumbFooter = PlumbFooter;