// Fear Recognition — names the emotional moment before reassuring.
// Sits between Hero and Problem. Three short paragraphs, no bullets, no icons.
function FearRecognition() {
  return (
    <section
      id="fear"
      style={{
        background: "var(--paper)",
        paddingTop: 64,
        paddingBottom: 64,
        borderTop: "1px solid var(--line-2)",
        borderBottom: "1px solid var(--line-2)",
      }}
    >
      <div className="container">
        <div
          style={{
            maxWidth: 760,
            margin: "0 auto",
            display: "flex",
            flexDirection: "column",
            gap: 20,
          }}
        >
          <p
            className="display"
            style={{
              fontSize: "clamp(26px, 3.2vw, 38px)",
              lineHeight: 1.2,
              margin: 0,
              color: "var(--ink)",
              letterSpacing: "-0.012em",
              textWrap: "pretty",
            }}
          >
            You've been thinking about this for a while. You've done the
            research. You've already made the decision.
          </p>

          <p
            className="display"
            style={{
              fontSize: "clamp(26px, 3.2vw, 38px)",
              lineHeight: 1.2,
              margin: 0,
              color: "var(--accent-deep)",
              letterSpacing: "-0.012em",
              fontStyle: "italic",
              textWrap: "pretty",
            }}
          >
            What you haven't done is the first one.
          </p>

          <p
            style={{
              fontSize: 18,
              lineHeight: 1.6,
              color: "var(--ink-2)",
              margin: 0,
              maxWidth: "58ch",
              textWrap: "pretty",
            }}
          >
            We built this kit for that week. The week before. The night of. The
            moment your hands are full and you want someone who has done this
            before to tell you what comes next. The kit is that.
          </p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { FearRecognition });