/* global React */

/* ── SECTION 2 · THE PROBLEM, IN THEIR WORDS ───────────────────────────────
   The page used to go hero -> press logos -> stats -> framework, which meant a
   founder read six credentials about Nick before reading one sentence about
   themselves. This is the recognition beat that was missing: plain lines a
   stuck founder has actually lived, then the reframe that sets up the
   framework underneath it.

   Deliberately no stats, no logos and no name. The only job of this section is
   for someone to think "that's me" before anyone asks them for anything. */
function SoundLikeYou() {
  const lines = [
    "You check your phone on vacation. Twice an hour.",
    "Nobody on the team decides anything without you.",
    "Revenue went up. Your calendar got worse.",
    "You hired someone to take it off your plate. You still do it.",
    "You're busier now than you were at half the size.",
    "A week away and things would start falling over.",
  ];
  return (
    <section id="sound-like-you" className="theme-bone" style={{ padding: "var(--section) 0" }}>
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="eyebrow"><span className="dot" />Does this sound like you?</div>
            <h2 className="display">
              You're the one<br />
              everything <span className="italic">waits on.</span>
            </h2>
          </div>
          <div>
            <p className="body-lg">
              You won't see yourself in every line. If you see yourself in three,
              keep reading. This page is for you.
            </p>
          </div>
        </div>

        <ul className="sly-list reveal">
          {lines.map((l, i) => (
            <li key={i} className="sly-item">
              <span className="sly-n">{String(i + 1).padStart(2, "0")}</span>
              <span className="sly-t">{l}</span>
            </li>
          ))}
        </ul>

        <div className="sly-turn reveal">
          <p className="body-lg" style={{ margin: 0 }}>
            That isn't six problems. It's one, and it's creating the other five.
            Most founders spend years working on the loudest one instead of the
            real one.
          </p>
          <a href="assessment.html" className="btn btn-primary" style={{ marginTop: 22 }}>
            Find your bottleneck
          </a>
          <div className="sly-fine">Free · 3 minutes · no email</div>
        </div>
      </div>

      <style>{`
        .sly-list { list-style: none; margin: 48px 0 0; padding: 0;
          display: grid; grid-template-columns: repeat(2, 1fr);
          border-top: 1px solid var(--line); }
        .sly-item { display: flex; gap: 16px; align-items: baseline;
          padding: 22px 28px 22px 0; border-bottom: 1px solid var(--line); }
        .sly-item:nth-child(odd) { padding-right: 40px; border-right: 1px solid var(--line); }
        .sly-item:nth-child(even) { padding-left: 32px; }
        .sly-n { font-family: var(--display); font-size: 13px; letter-spacing: .08em;
          color: var(--accent); flex: none; }
        .sly-t { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.45; }
        .sly-turn { margin-top: 44px; max-width: 62ch; }
        .sly-fine { margin-top: 12px; font-size: 12px; letter-spacing: .1em;
          text-transform: uppercase; color: var(--ink-mute); }
        @media (max-width: 860px) {
          .sly-list { grid-template-columns: 1fr; }
          .sly-item, .sly-item:nth-child(odd), .sly-item:nth-child(even) {
            padding: 18px 0; border-right: none; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { SoundLikeYou });