// Mission whisper — three sentences, one CTA. Sits between Audience and
// Closing. Intentionally small, intentionally separate from the product pitch.

function Mission() {
  return (
    <section className="section mission">
      <style>{`
        .mission {
          padding-block: clamp(70px, 10vh, 120px);
          position: relative;
        }
        .mission-card {
          position: relative;
          max-width: 820px; margin: 0 auto;
          padding: clamp(40px, 6vw, 64px) clamp(28px, 5vw, 56px);
          border-radius: 24px;
          background:
            radial-gradient(ellipse 80% 60% at 50% 0%, oklch(0.74 0.175 35 / 0.10), transparent 70%),
            linear-gradient(180deg, oklch(0.19 0.009 60 / 0.65), oklch(0.16 0.008 60 / 0.5));
          border: 1px solid var(--hairline);
          overflow: hidden;
          text-align: center;
        }
        .mission-card::before {
          content: "";
          position: absolute; top: 0; left: 0; right: 0; height: 1px;
          background: linear-gradient(90deg, transparent, var(--accent), transparent);
          opacity: .7;
        }
        .mission-eye {
          display: inline-flex; align-items: center; gap: 10px;
          font-family: var(--font-mono);
          font-size: 11px; letter-spacing: 0.16em;
          text-transform: uppercase;
          color: var(--accent);
        }
        .mission-eye::before, .mission-eye::after {
          content: ""; width: 24px; height: 1px;
          background: oklch(0.74 0.175 35 / 0.4);
        }
        .mission-title {
          margin-top: 18px;
          font-size: clamp(28px, 3.6vw, 44px);
          font-weight: 500;
          letter-spacing: -0.025em;
          line-height: 1.08;
          text-wrap: balance;
        }
        .mission-title em {
          font-style: normal;
          background: linear-gradient(180deg, var(--accent), oklch(0.62 0.18 18));
          -webkit-background-clip: text; background-clip: text;
          color: transparent;
        }
        .mission-body {
          margin-top: 22px;
          font-size: clamp(15px, 1.55vw, 18px);
          color: var(--fg-dim);
          line-height: 1.6;
          max-width: 580px; margin-inline: auto;
          text-wrap: balance;
        }
        .mission-body b {
          color: var(--fg);
          font-weight: 500;
        }
        .mission-cta {
          margin-top: 28px;
          display: inline-flex; align-items: center; gap: 8px;
          padding: 10px 16px;
          border-radius: 999px;
          font-size: 14px;
          font-weight: 500;
          color: var(--accent);
          border: 1px solid oklch(0.74 0.175 35 / 0.4);
          background: oklch(0.74 0.175 35 / 0.08);
          transition: background .15s, transform .12s, border-color .15s;
        }
        .mission-cta:hover {
          background: oklch(0.74 0.175 35 / 0.16);
          border-color: oklch(0.74 0.175 35 / 0.6);
          transform: translateY(-1px);
        }
      `}</style>

      <div className="wrap">
        <div className="mission-card">
          <div className="mission-eye">Why Vibn exists</div>
          <h2 className="mission-title">
            This is bigger than software.
            <br/>It's <em>the golden age of small business.</em>
          </h2>
          <p className="mission-body">
            For twenty years, small business got the leftovers — generic tools, monthly rent,
            software built for someone else. <b>AI changes the math.</b> The custom system a business
            needs to actually thrive is finally something they can have, own, and afford.
          </p>
          <a href="#" className="mission-cta">
            Read our mission <Arrow size={12} />
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Mission });