/* WaaS — "The model" explainer section, between Services and Pricing */

function WaaS() {
  return (
    <section id="waas" className="waas">
      <div className="container">
        <div className="waas-inner">
          <div className="waas-copy">
            <span className="eyebrow">The model</span>
            <h2>Website as a service.</h2>
            <p>
              Most studios sell you a website and disappear. Six months later your plugins are out of date, the SSL has lapsed, and the photos are still from launch day.
            </p>
            <p>
              We do it differently. One setup fee, then a small subscription covers everything — hosting, domain, email, security, edits, updates. One number to call. One bill a month. One website that just works.
            </p>
          </div>
          <div className="waas-pillars" aria-hidden="true">
            <div className="waas-pillar">
              <span className="waas-pillar-num">01</span>
              <span className="waas-pillar-label">Setup once</span>
            </div>
            <div className="waas-pillar-divider" />
            <div className="waas-pillar">
              <span className="waas-pillar-num">02</span>
              <span className="waas-pillar-label">Subscribe monthly</span>
            </div>
            <div className="waas-pillar-divider" />
            <div className="waas-pillar">
              <span className="waas-pillar-num">03</span>
              <span className="waas-pillar-label">We handle the rest</span>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        .waas {
          background: var(--paper-warm);
          padding: clamp(56px, 8vw, 96px) 0;
        }

        .waas-inner {
          display: grid;
          grid-template-columns: 1.1fr 1fr;
          gap: clamp(40px, 6vw, 80px);
          align-items: center;
          max-width: 1040px;
        }
        @media (max-width: 800px) {
          .waas-inner {
            grid-template-columns: 1fr;
            gap: 40px;
          }
        }

        .waas-copy .eyebrow { margin-bottom: 16px; display: block; }
        .waas-copy h2 {
          font-family: var(--font-display);
          font-weight: 700;
          font-size: clamp(28px, 3.4vw, 44px);
          line-height: 1.1;
          letter-spacing: -0.025em;
          color: var(--ink);
          margin: 0 0 24px;
        }
        .waas-copy p {
          font-size: clamp(15px, 1.2vw, 17px);
          line-height: 1.7;
          color: var(--fg-soft);
          margin: 0 0 16px;
          max-width: 58ch;
        }
        .waas-copy p:last-child { margin-bottom: 0; }

        /* Three-step visual */
        .waas-pillars {
          display: flex;
          flex-direction: column;
          gap: 0;
          background: var(--surface);
          border: 1px solid var(--border);
          border-radius: var(--r-lg);
          overflow: hidden;
          box-shadow: 0 2px 8px rgba(20,20,20,0.04);
        }
        .waas-pillar {
          display: flex;
          align-items: center;
          gap: 18px;
          padding: 22px 26px;
        }
        .waas-pillar-divider {
          height: 1px;
          background: var(--border);
          margin: 0 26px;
        }
        .waas-pillar-num {
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 13px;
          letter-spacing: -0.01em;
          color: var(--paper);
          background: var(--primary);
          width: 32px;
          height: 32px;
          border-radius: 50%;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
        }
        .waas-pillar-label {
          font-family: var(--font-body);
          font-weight: 600;
          font-size: 15px;
          color: var(--ink);
          letter-spacing: -0.01em;
        }
        @media (max-width: 800px) {
          .waas-pillars { max-width: 400px; }
        }
      `}</style>
    </section>
  );
}

window.WaaS = WaaS;