/* ============================================================
 * Module Page Template
 * Hero · Features (3-up) · How it works (3 steps) · Use Cases
 * Integrations · Testimonial · FAQ · CTA
 * Used by every /platform/<module>.html page
 * ============================================================ */

const ModulePage = ({ module, content }) => {
  const Ic = (window.moduleIconMap || {})[module.icon];
  const accent = module.hue;

  return (
    <>
      <SectionNav basePath="../" current="platform" />

      {content.heroOverride}

      {/* === HERO === */}
      {!content.heroOverride && (
      <section className="mp-hero">
        <div className="mp-hero-bg" aria-hidden="true">
          <div className="mp-hero-glow" style={{ background: `radial-gradient(closest-side, color-mix(in srgb, ${accent} 30%, transparent), transparent 70%)` }} />
        </div>
        <div className="container mp-hero-inner">
          <Reveal>
            <div className="mp-crumb">
              <a href="../index-v2.html#system-overview">Platform</a>
              <span className="mp-crumb-sep">/</span>
              <span style={{ color: "var(--ink)" }}>{module.label}</span>
            </div>
          </Reveal>

          <div className="mp-hero-grid">
            <div>
              <Reveal>
                <div className="mp-hero-icon" style={{ color: accent, background: `color-mix(in srgb, ${accent} 12%, transparent)`, borderColor: `color-mix(in srgb, ${accent} 30%, transparent)` }}>
                  {Ic && <Ic size={28} color={accent} />}
                </div>
              </Reveal>
              <Reveal delay={80}>
                <div className="eyebrow" style={{ marginTop: 24, color: accent }} dangerouslySetInnerHTML={{ __html: content.eyebrow || module.label }} />
              </Reveal>
              <Reveal delay={140}>
                <h1 className="mp-h1" dangerouslySetInnerHTML={{ __html: content.h1 }} />
              </Reveal>
              <Reveal delay={220}>
                <p className="mp-lead">{content.lead}</p>
              </Reveal>
              <Reveal delay={280}>
                <div className="mp-hero-cta">
                  <a href={DEMO_URL} className="mp-btn mp-btn-primary">Book a demo <IconArrow size={14} /></a>
                  <a href="#features" className="mp-btn mp-btn-ghost">See how it works</a>
                </div>
              </Reveal>
              <Reveal delay={360}>
                <div className="mp-hero-stats">
                  {content.stats.map((s, i) => (
                    <div key={i} className="mp-hero-stat">
                      <div className="mp-hero-stat-num" style={{ color: accent }}>{s.value}</div>
                      <div className="mp-hero-stat-label">{s.label}</div>
                    </div>
                  ))}
                </div>
              </Reveal>
            </div>

            <Reveal delay={300} className="mp-hero-visual-wrap">
              <div className="mp-hero-visual" style={{ borderColor: `color-mix(in srgb, ${accent} 22%, transparent)` }}>
                {content.heroVisual}
              </div>
            </Reveal>
          </div>
        </div>
      </section>
      )}

      {/* === FEATURE TRIO === */}
      {!content.hideDefaults && (
      <section className="mp-section" id="features">
        <div className="container">
          <Reveal><div className="eyebrow">What it does</div></Reveal>
          <Reveal delay={80}>
            <h2 className="mp-h2" dangerouslySetInnerHTML={{ __html: content.featuresTitle }} />
          </Reveal>

          <div className="mp-features-grid">
            {content.features.map((f, i) => (
              <Reveal key={i} delay={i * 100}>
                <article className="mp-feature">
                  <div className="mp-feature-num" style={{ color: accent }}>0{i + 1}</div>
                  <h3 className="mp-feature-h">{f.title}</h3>
                  <p className="mp-feature-p">{f.body}</p>
                  {f.bullets && (
                    <ul className="mp-feature-bullets">
                      {f.bullets.map((b, j) => (
                        <li key={j}><span className="mp-feature-tick" style={{ color: accent }}>✓</span> {b}</li>
                      ))}
                    </ul>
                  )}
                </article>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
      )}

      {/* === HOW IT WORKS === */}
      {!content.hideDefaults && (
      <section className="mp-section mp-howitworks" style={{ background: `linear-gradient(180deg, transparent, color-mix(in srgb, ${accent} 4%, transparent))` }}>
        <div className="container">
          <Reveal><div className="eyebrow">How it works</div></Reveal>
          <Reveal delay={80}>
            <h2 className="mp-h2" dangerouslySetInnerHTML={{ __html: content.howTitle }} />
          </Reveal>

          <div className="mp-steps">
            {content.steps.map((s, i) => (
              <Reveal key={i} delay={i * 120}>
                <div className="mp-step">
                  <div className="mp-step-rail">
                    <div className="mp-step-dot" style={{ background: accent }}>{i + 1}</div>
                    {i < content.steps.length - 1 && <div className="mp-step-line" />}
                  </div>
                  <div className="mp-step-body">
                    <h3 className="mp-step-h">{s.title}</h3>
                    <p className="mp-step-p">{s.body}</p>
                    {s.detail && <div className="mp-step-detail">{s.detail}</div>}
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
      )}

      {/* === USE CASES === */}
      {!content.hideDefaults && (
      <section className="mp-section">
        <div className="container">
          <Reveal><div className="eyebrow">Use cases</div></Reveal>
          <Reveal delay={80}>
            <h2 className="mp-h2" dangerouslySetInnerHTML={{ __html: content.useCasesTitle }} />
          </Reveal>

          <div className="mp-usecases">
            {content.useCases.map((u, i) => (
              <Reveal key={i} delay={i * 80}>
                <article className="mp-usecase">
                  <div className="mp-usecase-tag" style={{ color: accent, borderColor: `color-mix(in srgb, ${accent} 30%, transparent)`, background: `color-mix(in srgb, ${accent} 8%, transparent)` }}>
                    {u.tag}
                  </div>
                  <h3 className="mp-usecase-h">{u.title}</h3>
                  <p className="mp-usecase-p">{u.body}</p>
                  <div className="mp-usecase-meta">
                    <span className="mp-usecase-meta-k">Outcome</span>
                    <span className="mp-usecase-meta-v">{u.outcome}</span>
                  </div>
                </article>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
      )}

      {/* === INTEGRATIONS / CONNECTS === */}
      {!content.hideDefaults && content.integrations && (
        <section className="mp-section mp-integrations">
          <div className="container">
            <div className="mp-integ-grid">
              <div>
                <Reveal><div className="eyebrow">Connects to</div></Reveal>
                <Reveal delay={80}>
                  <h2 className="mp-h2" style={{ marginTop: 16 }} dangerouslySetInnerHTML={{ __html: content.integrationsTitle || "Plugs into your existing stack" }} />
                </Reveal>
                <Reveal delay={160}>
                  <p className="mp-lead" style={{ maxWidth: 480 }}>{content.integrationsBody || "We connect to the systems you already use, your PMS, your booking engine, your channel manager, so guest data stays in sync."}</p>
                </Reveal>
              </div>
              <Reveal delay={200}>
                <div className="mp-integ-list">
                  {content.integrations.map((g, i) => (
                    <div key={i} className="mp-integ-group">
                      <div className="mp-integ-group-h">{g.label}</div>
                      <div className="mp-integ-chips">
                        {g.items.map((it, j) => (
                          <span key={j} className="mp-integ-chip">{it}</span>
                        ))}
                      </div>
                    </div>
                  ))}
                </div>
              </Reveal>
            </div>
          </div>
        </section>
      )}

      {/* === TESTIMONIAL === */}
      {!content.hideDefaults && content.testimonial && (
        <section className="mp-section">
          <div className="container">
            <Reveal>
              <div className="mp-testimonial" style={{ borderColor: `color-mix(in srgb, ${accent} 18%, transparent)` }}>
                <div className="mp-testimonial-mark" style={{ color: accent }}>"</div>
                <blockquote className="mp-testimonial-q" dangerouslySetInnerHTML={{ __html: content.testimonial.quote }} />
                <div className="mp-testimonial-by">
                  <div className="mp-testimonial-avatar" style={{ background: `linear-gradient(135deg, ${accent}, color-mix(in srgb, ${accent} 60%, #000))` }}>
                    {content.testimonial.name.split(" ").map(n => n[0]).join("").slice(0, 2)}
                  </div>
                  <div>
                    <div className="mp-testimonial-name">{content.testimonial.name}</div>
                    <div className="mp-testimonial-role">{content.testimonial.role}</div>
                  </div>
                </div>
              </div>
            </Reveal>
          </div>
        </section>
      )}

      {/* === FAQ === */}
      <section className="mp-section">
        <div className="container">
          <div className="mp-faq-wrap">
            <div>
              <Reveal><div className="eyebrow">FAQ</div></Reveal>
              <Reveal delay={80}>
                <h2 className="mp-h2" style={{ marginTop: 16, fontSize: "clamp(28px, 3.5vw, 44px)" }}>
                  Common questions about <span className="italic-accent">{module.label}</span>.
                </h2>
              </Reveal>
              <Reveal delay={160}>
                <p className="mp-lead" style={{ maxWidth: 380, marginTop: 16 }}>
                  Don't see yours? <a href="../#cta" style={{ color: "var(--accent)", borderBottom: "1px solid currentColor" }}>Talk to the team</a>.
                </p>
              </Reveal>
            </div>
            <div className="mp-faq-list">
              {content.faq.map((q, i) => <FAQItem key={i} q={q.q} a={q.a} />)}
            </div>
          </div>
        </div>
      </section>

      <UpNextModule currentSlug={module.slug} basePath="../" />

      {/* === CTA ===
         Was two bespoke treatments (.mp-cta / .mp-bigcta, gated by
         content.useBigCta) neither of which matched the shared .gm-cta
         every non-ModulePage product page uses (cdp/crm/crm-b2b/knowledge/
         inbox). One template serving two pages had drifted into its own
         third design system. useBigCta is intentionally ignored now — this
         is the only CTA ModulePage renders. */}
      <section className="section-pad gm-cta" id="cta">
        <div className="container">
          <div className="gm-cta__inner">
            <Reveal><div className="eyebrow gm-cta__eyebrow">Book a demo</div></Reveal>
            <Reveal delay={80}>
              <h2 className="gm-cta__h" dangerouslySetInnerHTML={{ __html: content.ctaTitle || `See ${module.label} <span class="italic-accent">in your hotel</span>.` }} />
            </Reveal>
            <Reveal delay={140}>
              <p className="gm-cta__lead">{content.ctaBody || "30-minute demo with a real conversation, your data, and the team that built it."}</p>
            </Reveal>
            <Reveal delay={200}>
              <div className="gm-cta__actions">
                <a href={DEMO_URL} className="btn btn-primary">Book a demo <IconArrow size={14} className="arrow" /></a>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      <SectionFooter basePath="../" />

      <style>{`
        /* ===== Module page tokens ===== */
        /* .container is NOT redefined here. styles.css owns it, and this
           copy paid out a literal 32px where the canonical rule pays
           var(--gutter) — identical today, silently divergent the moment
           the gutter moves. That is exactly how loyalty.html ended up
           16px short on every section while measuring the right number. */
        .mp-section { padding: 96px 0; }
        @media (max-width: 800px) { .mp-section { padding: 64px 0; } }

        .mp-h1 {
          font-family: var(--f-display);
          font-size: clamp(44px, 6.5vw, 84px);
          line-height: 1.02;
          letter-spacing: -0.02em;
          color: var(--ink);
          margin: 18px 0 0;
          font-weight: 400;
          text-wrap: balance;
        }
        .mp-h2 {
          font-family: var(--f-display);
          font-size: clamp(34px, 4.5vw, 56px);
          line-height: 1.05;
          letter-spacing: -0.02em;
          color: var(--ink);
          margin: 16px 0 48px;
          font-weight: 400;
          max-width: 880px;
          text-wrap: balance;
        }
        .mp-lead {
          font-family: var(--f-sans);
          font-size: clamp(17px, 1.4vw, 20px);
          line-height: 1.55;
          color: var(--ink-2);
          max-width: 560px;
          margin: 22px 0 0;
        }
        .italic-accent { font-style: italic; color: var(--accent); }

        .mp-btn {
          display: inline-flex; align-items: center; gap: 8px;
          padding: 12px 20px;
          font-family: var(--f-sans); font-size: 14px; font-weight: 500;
          border-radius: 999px;
          transition: all .15s ease;
          white-space: nowrap;
        }
        .mp-btn.lg { padding: 16px 26px; font-size: 15px; }
        .mp-btn-primary {
          background: var(--ink); color: var(--bg); border: 1px solid var(--ink);
        }
        .mp-btn-primary:hover {
          background: var(--accent); border-color: var(--accent); color: white;
          transform: translateY(-1px);
          box-shadow: 0 16px 36px -14px var(--accent-glow);
        }
        .mp-btn-ghost {
          color: var(--ink); border: 1px solid var(--hairline-strong);
        }
        .mp-btn-ghost:hover { border-color: var(--ink-2); background: var(--bg-elev-1); }

        /* ===== Hero ===== */
        .mp-hero {
          position: relative;
          padding: 80px 0 96px;
          overflow: hidden;
        }
        .mp-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
        .mp-hero-glow {
          position: absolute;
          width: 900px; height: 900px;
          top: -200px; right: -200px;
          opacity: .55;
          filter: blur(40px);
        }
        .mp-hero-inner { position: relative; z-index: 1; }
        .mp-crumb {
          font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em;
          color: var(--ink-3);
          margin-bottom: 32px;
        }
        .mp-crumb a { color: var(--ink-3); }
        .mp-crumb a:hover { color: var(--ink); }
        .mp-crumb-sep { margin: 0 10px; opacity: 0.5; }

        .mp-hero-grid {
          display: grid;
          grid-template-columns: 1.1fr 1fr;
          gap: 80px;
          align-items: center;
        }
        @media (max-width: 1000px) {
          .mp-hero-grid { grid-template-columns: 1fr; gap: 56px; }
        }
        .mp-hero-icon {
          width: 64px; height: 64px;
          display: grid; place-items: center;
          border-radius: 18px;
          border: 1px solid;
        }
        .mp-hero-cta {
          margin-top: 36px;
          display: flex; gap: 12px; flex-wrap: wrap;
        }
        .mp-hero-stats {
          margin-top: 56px;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 32px;
          padding-top: 32px;
          border-top: 1px solid var(--hairline);
          max-width: 520px;
        }
        .mp-hero-stat-num {
          font-family: var(--f-display);
          font-size: clamp(28px, 3vw, 40px);
          line-height: 1;
          letter-spacing: -0.02em;
          font-weight: 400;
        }
        .mp-hero-stat-label {
          margin-top: 6px;
          font-size: 12px; color: var(--ink-3);
          line-height: 1.4;
        }

        .mp-hero-visual-wrap { width: 100%; }
        .mp-hero-visual {
          position: relative;
          padding: 24px;
          background: var(--bg-elev-1);
          border: 1px solid;
          border-radius: 24px;
          box-shadow: 0 30px 80px -30px rgba(0,0,0,0.25);
          overflow: hidden;
        }

        /* ===== Feature trio ===== */
        .mp-features-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 4px;
          border-top: 1px solid var(--hairline);
          border-bottom: 1px solid var(--hairline);
        }
        .mp-feature {
          padding: 36px 28px 36px 0;
          padding-right: 28px;
          border-right: 1px solid var(--hairline);
        }
        .mp-features-grid > *:last-child .mp-feature { border-right: 0; }
        .mp-feature-num {
          font-family: var(--f-mono); font-size: 12px; font-weight: 500;
          letter-spacing: 0.1em;
        }
        .mp-feature-h {
          font-family: var(--f-display);
          font-size: 28px; line-height: 1.15;
          margin: 14px 0 12px;
          font-weight: 400; letter-spacing: -0.01em;
          color: var(--ink);
        }
        .mp-feature-p {
          font-size: 15px; line-height: 1.6;
          color: var(--ink-2);
          margin: 0 0 16px;
        }
        .mp-feature-bullets {
          list-style: none; margin: 0; padding: 0;
        }
        .mp-feature-bullets li {
          display: flex; gap: 8px; align-items: flex-start;
          font-size: 13.5px; color: var(--ink-2);
          margin-bottom: 6px;
          line-height: 1.5;
        }
        .mp-feature-tick { font-weight: 700; flex-shrink: 0; }
        @media (max-width: 900px) {
          .mp-features-grid { grid-template-columns: 1fr; }
          .mp-feature { border-right: 0; border-bottom: 1px solid var(--hairline); padding: 28px 0; }
          .mp-features-grid > *:last-child .mp-feature { border-bottom: 0; }
        }

        /* ===== Steps ===== */
        .mp-steps { display: flex; flex-direction: column; gap: 8px; }
        .mp-step {
          display: grid;
          grid-template-columns: 64px 1fr;
          gap: 28px;
        }
        .mp-step-rail {
          display: flex; flex-direction: column; align-items: center;
        }
        .mp-step-dot {
          width: 36px; height: 36px;
          border-radius: 50%;
          color: white;
          font-family: var(--f-mono); font-size: 14px; font-weight: 600;
          display: grid; place-items: center;
          flex-shrink: 0;
        }
        .mp-step-line {
          flex: 1;
          width: 1px;
          background: var(--hairline);
          margin: 8px 0;
          min-height: 32px;
        }
        .mp-step-body { padding-bottom: 36px; }
        .mp-step-h {
          font-family: var(--f-display);
          font-size: 26px; line-height: 1.2;
          margin: 4px 0 10px;
          font-weight: 400; letter-spacing: -0.01em;
          color: var(--ink);
        }
        .mp-step-p {
          font-size: 16px; line-height: 1.6;
          color: var(--ink-2);
          max-width: 620px;
        }
        .mp-step-detail {
          margin-top: 14px;
          padding: 14px 16px;
          background: var(--bg-elev-1);
          border: 1px solid var(--hairline);
          border-radius: 10px;
          font-family: var(--f-mono);
          font-size: 13px;
          color: var(--ink-2);
          line-height: 1.55;
          max-width: 620px;
        }

        /* ===== Use cases ===== */
        .mp-usecases {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 16px;
        }
        @media (max-width: 900px) { .mp-usecases { grid-template-columns: 1fr; } }
        .mp-usecase {
          padding: 28px 24px;
          background: var(--bg-elev-1);
          border: 1px solid var(--hairline);
          border-radius: 16px;
          display: flex; flex-direction: column;
        }
        .mp-usecase-tag {
          align-self: flex-start;
          padding: 4px 10px;
          font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.08em;
          text-transform: uppercase;
          border: 1px solid;
          border-radius: 999px;
          margin-bottom: 18px;
        }
        .mp-usecase-h {
          font-family: var(--f-display); font-weight: 400;
          font-size: 22px; line-height: 1.2;
          margin: 0 0 12px;
          letter-spacing: -0.01em; color: var(--ink);
        }
        .mp-usecase-p {
          font-size: 14.5px; line-height: 1.6;
          color: var(--ink-2);
          margin: 0 0 18px;
          flex: 1;
        }
        .mp-usecase-meta {
          padding-top: 14px;
          border-top: 1px dashed var(--hairline);
          font-size: 13px;
        }
        .mp-usecase-meta-k {
          font-family: var(--f-mono); font-size: 11px;
          letter-spacing: 0.08em; text-transform: uppercase;
          color: var(--ink-3);
          margin-right: 10px;
        }
        .mp-usecase-meta-v { color: var(--ink); font-weight: 500; }

        /* ===== Integrations block ===== */
        .mp-integ-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 64px;
          align-items: start;
        }
        @media (max-width: 1000px) { .mp-integ-grid { grid-template-columns: 1fr; gap: 40px; } }
        .mp-integ-list { display: flex; flex-direction: column; gap: 24px; }
        .mp-integ-group-h {
          font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em;
          text-transform: uppercase; color: var(--ink-3);
          margin-bottom: 12px;
        }
        .mp-integ-chips { display: flex; flex-wrap: wrap; gap: 8px; }
        .mp-integ-chip {
          padding: 8px 14px;
          background: var(--bg-elev-1);
          border: 1px solid var(--hairline);
          border-radius: 999px;
          font-size: 13px; color: var(--ink-2);
          font-family: var(--f-sans);
        }

        /* ===== Testimonial ===== */
        .mp-testimonial {
          padding: 56px 64px;
          border: 1px solid;
          border-radius: 22px;
          background: var(--bg-elev-1);
          position: relative;
          max-width: 980px;
          margin: 0 auto;
        }
        .mp-testimonial-mark {
          font-family: var(--f-display);
          font-size: 120px;
          line-height: 0.8;
          position: absolute; top: 24px; left: 36px;
          opacity: 0.3;
        }
        .mp-testimonial-q {
          font-family: var(--f-display);
          font-size: clamp(24px, 2.4vw, 32px);
          line-height: 1.35;
          color: var(--ink);
          margin: 0 0 32px;
          font-weight: 400; letter-spacing: -0.01em;
          font-style: italic;
          position: relative;
          z-index: 1;
        }
        .mp-testimonial-by { display: flex; align-items: center; gap: 14px; }
        .mp-testimonial-avatar {
          width: 48px; height: 48px;
          border-radius: 50%;
          color: white;
          display: grid; place-items: center;
          font-family: var(--f-sans);
          font-size: 14px; font-weight: 600;
        }
        .mp-testimonial-name { font-size: 14px; font-weight: 500; color: var(--ink); }
        .mp-testimonial-role { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
        @media (max-width: 700px) {
          .mp-testimonial { padding: 44px 28px; }
          .mp-testimonial-mark { left: 16px; top: 16px; font-size: 80px; }
        }

        /* ===== FAQ ===== */
      `}</style>
    </>
  );
};

const FAQItem = ({ q, a }) => {
  const [open, setOpen] = useState(false);
  return (
    <div className="mp-faq-item">
      <button className="mp-faq-q" onClick={() => setOpen(o => !o)}>
        <span>{q}</span>
        <span className={`mp-faq-icon ${open ? "open" : ""}`}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 5v14M5 12h14" strokeLinecap="round" /></svg>
        </span>
      </button>
      <div className={"mp-faq-a" + (open ? " open" : "")}><div><p dangerouslySetInnerHTML={{ __html: a }} /></div></div>
    </div>
  );
};

window.ModulePage = ModulePage;
window.FAQItem = FAQItem;