/* ============================================================
 * 10. OUTCOMES (ROI)
 * Editorial typographic numbers, no fabricated metrics.
 * ============================================================ */

const outcomes = [
  {
    big: "Direct",
    suffix: " bookings",
    title: "More direct bookings.",
    body: "Convert OTA-acquired guests into repeat direct guests through every channel they use.",
  },
  {
    big: "Owned",
    suffix: " data",
    title: "More captured guest data.",
    body: "Promote anonymous contacts into reachable CRM profiles automatically, growing your owned database every day.",
  },
  {
    big: "Higher",
    suffix: " upsell",
    title: "Higher upsell conversion.",
    body: "Pre-stay and in-stay journeys offer the right service, at the right moment, in the channel the guest already uses.",
  },
  {
    big: "Less",
    suffix: " load",
    title: "Less operational load.",
    body: "AI agents resolve the majority of repetitive guest questions, freeing your team for the conversations that matter.",
  },
];

const SectionOutcomes = () => (
  <section className="section-pad outcomes-section">
    <div className="container">
      <div className="outcomes-head">
        <Reveal><div className="eyebrow">Outcomes</div></Reveal>
        <Reveal delay={120}>
          <h2 className="h-1" style={{ marginTop: 24, maxWidth: 800 }}>
            Designed to drive <span className="italic-accent">measurable revenue.</span>
          </h2>
        </Reveal>
        <Reveal delay={220}>
          <p className="lead" style={{ marginTop: 24, maxWidth: 640 }}>
            GuestMaker doesn't just modernize your guest communication. It changes what your business can do.
          </p>
        </Reveal>
      </div>

      <div className="outcomes-grid">
        {outcomes.map((o, i) => (
          <Reveal key={i} delay={i * 80}>
            <div className="outcome">
              <div className="outcome-big">
                <span className="serif italic">{o.big}</span>
                <span className="outcome-suffix">{o.suffix}</span>
              </div>
              <h3 className="h-3" style={{ fontSize: 21, margin: "20px 0 10px" }}>{o.title}</h3>
              <p className="body" style={{ fontSize: 14 }}>{o.body}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </div>

    <style>{`
      .outcomes-section { background: var(--bg); }
      .outcomes-head { margin-bottom: 80px; }
      .outcomes-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        border-top: 1px solid var(--hairline);
      }
      .outcome {
        padding: 40px 28px 8px 0;
        border-right: 1px solid var(--hairline);
      }
      .outcome:last-child { border-right: 0; }
      .outcome:not(:first-child) { padding-left: 28px; }
      .outcome-big {
        display: flex; flex-direction: column;
        font-family: var(--f-display);
        line-height: 0.95;
        letter-spacing: -0.02em;
      }
      .outcome-big .italic {
        font-size: clamp(48px, 5.5vw, 80px);
        font-style: italic;
        color: var(--accent);
      }
      .outcome-suffix {
        font-family: var(--f-sans);
        font-size: 13px;
        font-weight: 500;
        color: var(--ink-3);
        letter-spacing: 0.02em;
        margin-top: 8px;
        text-transform: uppercase;
      }
      @media (max-width: 900px) {
        .outcomes-grid { grid-template-columns: repeat(2, 1fr); }
        .outcome { border-bottom: 1px solid var(--hairline); }
        .outcome:nth-child(2n) { border-right: 0; }
      }
      @media (max-width: 540px) {
        .outcomes-grid { grid-template-columns: 1fr; }
        .outcome { border-right: 0; }
      }
    `}</style>
  </section>
);

window.SectionOutcomes = SectionOutcomes;