function ShieldCheck() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path
        d="M8 1.5 2.5 4v3.5c0 3 2.3 5.4 5.5 7 3.2-1.6 5.5-4 5.5-7V4L8 1.5Z"
        stroke="#1C5D4C"
        strokeWidth="1.3"
        strokeLinejoin="round"
      />
      <path
        d="m5.6 8 1.7 1.7L10.6 6"
        stroke="#1C5D4C"
        strokeWidth="1.3"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

export default function Recipe() {
  return (
    <section className="section" id="recipe">
      <div className="wrap">
        <div className="recipe-head reveal">
          <span className="spec">Read an actual recipe</span>
          <h2>Every entry is a workflow you can run.</h2>
          <p>
            Here’s a real one from the founding library — the whole thing, exactly as it
            appears in the guide. This is the format behind every workflow.
          </p>
        </div>

        <div className="recipe reveal">
          <div className="recipe-top">
            <span className="recipe-id">
              recipe <b>RE-04</b> · v1.2 · ~15 min
            </span>
            <span className="recipe-vert">Real Estate</span>
          </div>
          <div className="recipe-body">
            <h3 className="recipe-title">
              Draft a property-market brief with an AI agent — without leaking client data.
            </h3>

            <div className="row">
              <div className="k">Problem</div>
              <div className="v">
                You need a sharp neighborhood market brief for a client meeting, fast — but
                the listing sheet and client notes can’t go into a public model.{" "}
                <span className="sub">
                  Job: turn messy local data into a credible one-pager in minutes, safely.
                </span>
              </div>
            </div>

            <div className="row">
              <div className="k">Method</div>
              <div className="v">
                <ol className="steps">
                  <li>Strip identifiers from the source data locally (a provided script does this).</li>
                  <li>Prompt the agent with the anonymized sample and a fixed brief template.</li>
                  <li>Review the draft against the checklist before anything leaves your machine.</li>
                </ol>
                <div className="term" role="img" aria-label="Sample terminal output from the workflow">
                  <div className="term-bar">
                    <i></i>
                    <i></i>
                    <i></i>
                    <span>agent — property-brief · sample dataset (non-confidential)</span>
                  </div>
                  <pre>
                    <span className="c-dim">{"$ "}</span>
                    <span className="c-user">{"brief"}</span>
                    {" --input "}
                    <span className="c-key">{"sample_listings.csv"}</span>
                    {" --template market-1pager\n\n"}
                    <span className="c-dim">{"✓ redacted 3 fields (owner_name, phone, exact_address)\n✓ 41 comps in radius · median $/sqft computed\n\n"}</span>
                    <span className="c-ok">{"MARKET BRIEF — Maple Heights (sample)\n"}</span>
                    {" · Median list: $420/sqft  (▲ 4.1% QoQ)\n · Days on market: 22  (was 31)\n · Inventory: 1.8 mo — seller-leaning\n · Read: price to comp, expect <2 wks at ask\n\n"}
                    <span className="c-dim">{"# cost this run: $0.03 · model: claude · 2,140 tokens"}</span>
                  </pre>
                </div>
              </div>
            </div>

            <div className="row">
              <div className="k">Safeguards</div>
              <div className="v">
                <div className="guard">
                  <ShieldCheck />
                  <span>
                    Redaction runs <b style={{ color: "var(--color-ink)" }}>on your machine</b> —
                    raw client data never reaches the model.
                  </span>
                </div>
                <div className="guard">
                  <ShieldCheck />
                  <span>
                    A human review step is required before the brief is shared. The checklist
                    is part of the recipe.
                  </span>
                </div>
              </div>
            </div>

            <div className="row">
              <div className="k">Try it</div>
              <div className="v">
                Run the same brief on the included sample dataset (no real client data) in
                about 15 minutes — then swap in your own, safely.{" "}
                <span className="chip">◷ cost to try ≈ $0.03</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}