/* global ChannelChip */

/* ============================================================
 * CHANNELS ACROSS THE GUEST JOURNEY
 *
 * Four stages, one column each. The section's argument is that the
 * channel MIX genuinely shifts across the stay — so the chips have to be
 * accurate per stage, not decorative. WhatsApp is dim before a booking
 * (no number yet) and primary after it; campaigns only light up post-stay.
 * If you edit a stage's channels, edit them because the claim changed.
 *
 * Motion: this section is a timeline, so the hover gesture is PROGRESSION.
 * Hovering a stage fills its rail left-to-right, solidifies its node, and
 * brings its channels and sample messages up in sequence. Everything is a
 * transition (not an animation), so unhover plays the whole thing in
 * reverse and every intermediate frame is composed. Nothing loops.
 * ============================================================ */

const stages = [
  {
    key: "prebooking",
    name: "Pre-booking",
    sub: "A prospect, not yet a guest.",
    tagline: "Objections answered, and the right hotel chosen.",
    primary: ["webchat", "meta", "voice", "emailIn"],
    dim: ["whatsapp", "emailOut"],
    examples: [
      { lang: "en", text: "What does the all-inclusive plan include?" },
      { lang: "es", text: "¿Puedo llevar a mi perro? ¿Tiene coste extra?" },
      { lang: "en", text: "Which Mallorca hotel has sea views and a kids' club?" },
    ],
    note: "Every channel returns live availability and a one-tap booking deeplink, so an answered objection converts in the same conversation.",
  },
  {
    key: "prestay",
    name: "Pre-stay",
    sub: "Booked, not yet arrived.",
    tagline: "Modifications, special requests, arrival logistics.",
    primary: ["whatsapp", "emailIn", "emailOut", "voice"],
    dim: ["webchat", "meta"],
    examples: [
      { lang: "en", text: "Can I add a crib for our second child?" },
      { lang: "es", text: "Llegamos a la 1am, ¿es posible el late check-in?" },
      { lang: "es", text: "¿Pueden organizar transfer del aeropuerto para 4?" },
    ],
    note: "The booking carries a phone number, so WhatsApp becomes primary here and proactive journeys start running on their own.",
  },
  {
    key: "instay",
    name: "In-stay",
    sub: "On the property, right now.",
    tagline: "Real-time service. Right-moment upsell.",
    primary: ["whatsapp", "voice"],
    dim: ["webchat", "meta", "emailIn", "emailOut"],
    examples: [
      { lang: "en", text: "Can we extend our stay by two nights?" },
      { lang: "es", text: "¿A qué hora cierra el spa hoy?" },
      { lang: "en", text: "Can someone bring extra towels to room 312?" },
    ],
    note: "The Brain knows the guest is on-property. Replies are immediate, and anything needing a human is routed to the department that owns it.",
  },
  {
    key: "poststay",
    name: "Post-stay",
    sub: "Checked out, not gone.",
    tagline: "Feedback, loyalty, and the next booking.",
    primary: ["whatsapp", "emailOut"],
    dim: ["webchat", "meta", "voice", "emailIn"],
    examples: [
      { lang: "en", text: "We loved the spa. Any deals for October?" },
      { lang: "es", text: "¿Pueden enviarme la factura del transfer?" },
      { lang: "en", text: "Silver → Gold · reactivation window opens in 11 months" },
    ],
    note: "The return conversation is held by the same Brain that hosted the stay. Full memory, nothing re-asked, no re-onboarding.",
  },
];

const SectionJourney = () => {
  return (
    <section className="section-pad journey" id="journey">
      <div className="container-wide">
        <div className="journey-head">
          <Reveal><div className="eyebrow">Across every stage of the stay</div></Reveal>
          <Reveal delay={120}>
            <h2 className="h-1" style={{ marginTop: 24, maxWidth: 980 }}>
              The right channel, at the right moment, <span className="italic-accent">in the right way.</span>
            </h2>
          </Reveal>
          <Reveal delay={220}>
            <p className="lead" style={{ marginTop: 28, maxWidth: 780 }}>
              Pre-booking guests browse and ask. Booked guests modify, request, and arrive. In-stay guests need answers in seconds. Post-stay guests come back when invited the right way. GuestMaker knows which stage every guest is in, and routes the conversation through the channels that actually fit.
            </p>
          </Reveal>
        </div>

        <div className="journey-grid">
          {stages.map((s, i) => (
            <Reveal key={s.key} delay={i * 100} className="stage-cell">
              <article className="stage" tabIndex={0}>
                {/* The rail lives INSIDE the column rather than as one SVG
                    spanning the grid. A spanning SVG has to guess where the
                    column centres are and drifts at every breakpoint; this
                    is aligned by construction at all three layouts. */}
                <div className="stage-rail" aria-hidden="true">
                  <span className="stage-rail-line" />
                  <span className="stage-rail-fill" />
                  <span className="stage-rail-node" />
                </div>

                <header className="stage-head">
                  <span className="stage-num">0{i + 1}</span>
                  <h3 className="stage-name">{s.name}</h3>
                  <p className="stage-sub">{s.sub}</p>
                </header>

                <p className="stage-tagline">{s.tagline}</p>

                <div className="stage-channels">
                  <div className="stage-label">Active channels</div>
                  <div className="stage-chips">
                    {s.primary.map((c) => (
                      <span key={c} className="stage-chip on"><ChannelChip kind={c} status="primary" small /></span>
                    ))}
                    {s.dim.map((c) => (
                      <span key={c} className="stage-chip off"><ChannelChip kind={c} status="dim" small /></span>
                    ))}
                  </div>
                </div>

                <div className="stage-bubbles">
                  <div className="stage-label">What they actually say</div>
                  {s.examples.map((ex, j) => (
                    <div key={j} className="stage-bubble">
                      <span className="stage-bubble-flag">{ex.lang === "es" ? "ES" : "EN"}</span>
                      <span>{ex.text}</span>
                    </div>
                  ))}
                </div>

                <p className="stage-note">{s.note}</p>
              </article>
            </Reveal>
          ))}
        </div>
      </div>

      <style>{`
        .journey { background: var(--bg); --e: cubic-bezier(0.22, 1, 0.36, 1); }
        .journey-head { margin-bottom: 64px; max-width: 1100px; }

        .journey-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 0;
        }
        /* Reveal is the grid item, the article is its child — both need to
           stretch or the four columns stop agreeing on a baseline. */
        .stage-cell { display: flex; height: 100%; }
        .stage {
          flex: 1;
          position: relative;
          padding: 34px 26px 30px;
          border-right: 1px solid var(--hairline);
          display: flex; flex-direction: column; gap: 22px;
          outline: none;
          transition: background 520ms var(--e);
        }
        .stage:last-child { border-right: 0; }
        .stage:hover, .stage:focus-visible { background: var(--bg-elev-1); }

        /* ---- rail ------------------------------------------------ */
        .stage-rail { position: absolute; inset: 0 0 auto 0; height: 1px; }
        .stage-rail-line {
          position: absolute; inset: 0;
          background: var(--hairline);
        }
        .stage-rail-fill {
          position: absolute; inset: 0;
          background: var(--accent);
          transform: scaleX(0); transform-origin: left center;
          transition: transform 760ms var(--e);
        }
        .stage-rail-node {
          position: absolute; left: 26px; top: -3px;
          width: 7px; height: 7px; border-radius: 50%;
          background: var(--bg);
          border: 1px solid var(--accent);
          transition: background 420ms var(--e), box-shadow 420ms var(--e);
        }
        .stage:hover .stage-rail-fill,
        .stage:focus-within .stage-rail-fill { transform: scaleX(1); }
        .stage:hover .stage-rail-node,
        .stage:focus-within .stage-rail-node {
          background: var(--accent);
          box-shadow: 0 0 0 4px var(--accent-glow);
        }

        /* ---- head ------------------------------------------------ */
        .stage-head { display: flex; flex-direction: column; gap: 4px; }
        .stage-num {
          font-family: var(--f-mono);
          font-size: 11px; letter-spacing: 0.1em;
          color: var(--ink-3);
          transition: color 420ms var(--e);
        }
        .stage:hover .stage-num,
        .stage:focus-within .stage-num { color: var(--accent); }
        .stage-name {
          font-family: var(--f-display);
          font-size: 32px; letter-spacing: -0.01em; line-height: 1;
          margin: 6px 0 5px;
        }
        .stage-sub { font-size: 13px; color: var(--ink-3); margin: 0; }
        .stage-tagline {
          font-size: 14.5px; color: var(--ink);
          font-weight: 500; line-height: 1.45; margin: 0;
        }

        .stage-label {
          font-family: var(--f-mono);
          font-size: 9.5px; letter-spacing: 0.13em;
          text-transform: uppercase;
          color: var(--ink-3);
          margin-bottom: 10px;
        }

        /* ---- channels -------------------------------------------- */
        .stage-chips { display: flex; flex-wrap: wrap; gap: 6px; }
        /* Rest is QUIET, not empty — dim chips sit at 0.5, active ones at
           0.82, so the column reads as legible before any pointer arrives.
           Hover lifts the active ones the rest of the way, in sequence. */
        .stage-chip { display: inline-flex; transition: opacity 420ms var(--e), transform 420ms var(--e); }
        .stage-chip.on { opacity: 0.82; }
        .stage-chip.off { opacity: 0.5; }
        .stage:hover .stage-chip.on,
        .stage:focus-within .stage-chip.on { opacity: 1; transform: translateY(-1px); }
        .stage:hover .stage-chip.on:nth-child(1) { transition-delay: 60ms; }
        .stage:hover .stage-chip.on:nth-child(2) { transition-delay: 120ms; }
        .stage:hover .stage-chip.on:nth-child(3) { transition-delay: 180ms; }
        .stage:hover .stage-chip.on:nth-child(4) { transition-delay: 240ms; }
        .stage:hover .stage-chip.off,
        .stage:focus-within .stage-chip.off { opacity: 0.32; }

        /* ---- sample messages ------------------------------------- */
        .stage-bubbles { display: flex; flex-direction: column; gap: 7px; }
        .stage-bubble {
          display: flex; gap: 10px;
          padding: 10px 12px;
          background: var(--bg-elev-1);
          border: 1px solid var(--hairline);
          border-radius: 10px;
          font-size: 12.5px; color: var(--ink-2); line-height: 1.45;
          transition: transform 520ms var(--e), border-color 520ms var(--e), background 520ms var(--e);
        }
        .stage:hover .stage-bubble,
        .stage:focus-within .stage-bubble {
          transform: translateX(3px);
          border-color: var(--accent-glow);
          background: var(--bg-elev-2);
        }
        .stage:hover .stage-bubble:nth-of-type(1) { transition-delay: 90ms; }
        .stage:hover .stage-bubble:nth-of-type(2) { transition-delay: 170ms; }
        .stage:hover .stage-bubble:nth-of-type(3) { transition-delay: 250ms; }
        .stage-bubble-flag {
          flex-shrink: 0;
          font-family: var(--f-mono); font-size: 9px;
          padding: 2px 5px; border-radius: 4px;
          background: var(--bg-elev-3); color: var(--ink-3);
          letter-spacing: 0.06em; height: fit-content; margin-top: 1px;
        }

        /* margin-top:auto pins the note to the bottom, so the four notes
           share a baseline no matter how uneven the content above is. */
        .stage-note {
          margin: auto 0 0;
          padding-top: 18px;
          border-top: 1px solid var(--hairline);
          font-size: 12.5px; color: var(--ink-3); line-height: 1.55;
        }

        @media (max-width: 1100px) {
          .journey-grid { grid-template-columns: repeat(2, 1fr); }
          .stage-cell:nth-child(2) .stage { border-right: 0; }
          .stage-cell:nth-child(1) .stage,
          .stage-cell:nth-child(2) .stage { border-bottom: 1px solid var(--hairline); }
        }
        @media (max-width: 700px) {
          .journey-grid { grid-template-columns: 1fr; }
          .stage { border-right: 0; border-bottom: 1px solid var(--hairline); }
        }

        /* Reduced motion resolves to the END state rather than removing it —
           a user who cannot see the transition still gets the emphasis. */
        @media (prefers-reduced-motion: reduce) {
          .stage, .stage-rail-fill, .stage-rail-node,
          .stage-chip, .stage-bubble, .stage-num {
            transition-duration: 1ms !important;
            transition-delay: 0ms !important;
          }
        }
      `}</style>
    </section>
  );
};

window.SectionJourney = SectionJourney;