function HowItWorks() {
  return (
    <section id="how">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">How it works</div>
          <h2>Three gestures and a side of your screen.</h2>
          <p className="lede">
            Flik bolts onto muscle memory you already have. Push your cursor.
            Drop a file. Forget about it.
          </p>
        </div>

        <div className="steps">
          <div className="step glass">
            <div>
              <div className="step-num">01 · FLICK</div>
              <h3>Push your cursor to the edge.</h3>
              <p>The shelf slides out — gradient-soft, edge-anchored, never in the way. No clicks. No keyboard shortcut to memorize.</p>
            </div>
            <div className="step-vis">
              <StepFlickVis />
            </div>
          </div>

          <div className="step glass">
            <div>
              <div className="step-num">02 · LAND</div>
              <h3>Files arrive on their own.</h3>
              <p>Anything that lands in <code style={{ fontFamily: "var(--font-mono)", fontSize: 12, background: "rgba(255,255,255,0.18)", padding: "1px 6px", borderRadius: 4 }}>~/Downloads</code> shows up on the shelf instantly. The shelf pops out when a new file arrives.</p>
            </div>
            <div className="step-vis">
              <StepLandVis />
            </div>
          </div>

          <div className="step glass">
            <div>
              <div className="step-num">03 · MOVE ON</div>
              <h3>Drag it where it goes — or don't.</h3>
              <p>Drag into Mail, Slack, Figma, anywhere. After two days, untouched files quietly move to a tidy archive, sorted by date.</p>
            </div>
            <div className="step-vis">
              <StepMoveOnVis />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function StepFlickVis() {
  // A cursor approaching the right edge; a thin shelf slides in.
  return (
    <svg viewBox="0 0 320 140" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      <rect x="266" y="14" width="40" height="112" rx="14" fill="rgba(255,255,255,0.5)" stroke="rgba(255,255,255,0.7)" />
      <text x="286" y="32" textAnchor="middle" fontSize="9" fill="rgba(0,0,0,0.7)" fontWeight="600" fontFamily="-apple-system">Flik</text>
      <rect x="272" y="42" width="28" height="76" rx="8" stroke="rgba(0,0,0,0.18)" strokeDasharray="3 3" fill="rgba(255,255,255,0.4)"/>
      {/* cursor approaching from left */}
      <g transform="translate(180,68)">
        <path d="M0 0 L14 6 L7 8 L10 16 L7 17 L4 9 L-1 14 Z" fill="white" stroke="rgba(0,0,0,0.5)" strokeWidth="0.8"/>
      </g>
      <g stroke="white" strokeWidth="1.5" strokeDasharray="3 4" fill="none" opacity="0.7">
        <path d="M180 68 L260 70" />
      </g>
    </svg>
  );
}

function StepLandVis() {
  // A file appears on the shelf with a soft drop-in.
  return (
    <svg viewBox="0 0 320 140" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      <rect x="220" y="14" width="88" height="112" rx="14" fill="rgba(255,255,255,0.5)" stroke="rgba(255,255,255,0.7)" />
      <text x="264" y="32" textAnchor="middle" fontSize="9" fill="rgba(0,0,0,0.7)" fontWeight="600" fontFamily="-apple-system">Flik</text>
      <g transform="translate(232,42)">
        <rect width="64" height="56" rx="8" fill="oklch(82% 0.10 240)"/>
        <circle cx="22" cy="24" r="5" fill="rgba(255,255,255,0.85)"/>
        <path d="M8 50 L24 36 L34 44 L48 30 L56 50 Z" fill="rgba(255,255,255,0.85)"/>
      </g>
      <text x="264" y="116" textAnchor="middle" fontSize="8" fill="rgba(0,0,0,0.55)" fontFamily="-apple-system">Screensh…png</text>
      {/* arrow from "downloads" to the shelf */}
      <g transform="translate(40,52)">
        <rect width="48" height="38" rx="4" fill="rgba(255,255,255,0.15)" stroke="rgba(255,255,255,0.4)" strokeDasharray="3 3"/>
        <text x="24" y="24" textAnchor="middle" fontSize="8" fill="rgba(255,255,255,0.85)" fontFamily="-apple-system">Downloads</text>
      </g>
      <path d="M96 70 L210 70" stroke="white" strokeWidth="1.6" strokeDasharray="3 4" fill="none" opacity="0.7"/>
      <path d="M205 66 L212 70 L205 74" stroke="white" strokeWidth="1.6" fill="none"/>
    </svg>
  );
}

function StepMoveOnVis() {
  // A file dragging out of the shelf into "Slack" / archive split.
  return (
    <svg viewBox="0 0 320 140" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      <rect x="14" y="14" width="80" height="112" rx="14" fill="rgba(255,255,255,0.5)" stroke="rgba(255,255,255,0.7)" />
      <text x="54" y="32" textAnchor="middle" fontSize="9" fill="rgba(0,0,0,0.7)" fontWeight="600" fontFamily="-apple-system">Flik</text>
      <g transform="translate(26,42)">
        <rect width="56" height="48" rx="8" fill="oklch(78% 0.10 320)"/>
        <path d="M20 12 L42 24 L20 36 Z" fill="rgba(255,255,255,0.92)"/>
      </g>
      {/* drag arrow */}
      <path d="M104 64 Q160 40 220 50" stroke="white" strokeWidth="1.6" strokeDasharray="3 4" fill="none" opacity="0.75"/>
      <path d="M215 46 L222 50 L215 54" stroke="white" strokeWidth="1.6" fill="none"/>
      {/* destination "Slack" */}
      <g transform="translate(228,30)">
        <rect width="74" height="38" rx="8" fill="white" stroke="rgba(0,0,0,0.12)"/>
        <text x="37" y="23" textAnchor="middle" fontSize="11" fill="rgba(0,0,0,0.75)" fontFamily="-apple-system" fontWeight="600">Slack</text>
      </g>
      {/* archive line */}
      <g transform="translate(228,82)">
        <rect width="74" height="36" rx="8" fill="rgba(255,255,255,0.18)" stroke="rgba(255,255,255,0.4)" strokeDasharray="3 3"/>
        <text x="37" y="16" textAnchor="middle" fontSize="8" fill="rgba(255,255,255,0.85)" fontFamily="-apple-system">~/Flik Expired</text>
        <text x="37" y="28" textAnchor="middle" fontSize="7" fill="rgba(255,255,255,0.65)" fontFamily="-apple-system">after 2 days</text>
      </g>
    </svg>
  );
}

window.HowItWorks = HowItWorks;
