/* ============================================================
 * 3. THE BIG IDEA, Reframed around CHANNELS (not the Brain)
 * Show: guests are everywhere; channels behave differently;
 * GuestMaker meets them on each one, natively, in one thread.
 * ============================================================ */

/* Order is deliberate and set by the business: WhatsApp first because it
   carries most of the volume, then the channels a guest arrives on, then
   the two directions email runs in.
 *
 * Email is TWO cards, not one. Inbound (an AI-managed inbox answering what
 * arrives) and outbound (campaigns you send) are different products with
 * different buyers inside the same hotel group, and collapsing them into
 * "Email" hid half of what the platform does.
 *
 * NOTE: OTA messaging is not in this six. It is still a supported channel
 * and is still named in the Channels card and the Channels pillar above, so
 * the page does not contradict itself — but it no longer has a card here.
 * It was named Booking.com until 2026-08-16; the channel is provider-
 * agnostic and Booking.com is the OTA connected today, so presenting one
 * OTA as the channel undersold it. IconBooking and the Booking.com name
 * survive where they are genuinely specific: the integrations catalogue
 * and reservation-source data in the CRM sections. */
const channelMatrix = [
  {
    kind: "whatsapp",
    label: "WhatsApp",
    role: "The fastest channel. Where most guests now prefer to talk.",
    capabilities: ["Rich media", "Quick replies", "1-tap booking", "Voice notes"],
    sample: "Hola, sí, el spa abre los domingos de 10:00 a 22:00. ¿Reservo? 🌿",
    sampleKind: "bubble",
    metric: "62% of guest messages",
    coverage: ["pre", "stay", "post"],
  },
  {
    kind: "meta",
    label: "Meta Socials",
    role: "Instagram and Facebook, DMs and comments, as one channel.",
    capabilities: ["DM auto-reply", "Comment moderation", "Story mentions", "Both accounts"],
    sample: "Hi! Pets up to 8kg are welcome at Mare for €15/night ✨",
    sampleKind: "bubble",
    metric: "Comments + DMs",
    coverage: ["pre", "post"],
  },
  {
    kind: "webchat",
    label: "Web Chatbot",
    role: "Concierge on every page of your booking flow.",
    capabilities: ["Live availability", "Site-aware answers", "Direct booking link"],
    sample: "All-inclusive includes breakfast, dinner, drinks, and the kids club.",
    sampleKind: "bubble",
    metric: "Direct bookings ↑",
    coverage: ["pre"],
  },
  {
    kind: "voice",
    label: "Voice",
    role: "Always-on phone agent. No menus, no hold music.",
    capabilities: ["Natural turn-taking", "Multi-lingual", "Live transfer", "Transcripts"],
    sample: "...el spa está abierto los domingos de diez a veintidós...",
    sampleKind: "wave",
    metric: "Avg 0.8s response",
    coverage: ["pre", "stay"],
  },
  {
    kind: "emailIn",
    label: "Email Inbound",
    role: "An AI-managed inbox that answers what arrives, and knows when not to.",
    capabilities: ["Threaded replies", "Smart triage", "Draft review", "CC escalation"],
    sample: "Subject: Re: Spa & pet policy. The spa at Mare opens at 10:00…",
    sampleKind: "email",
    metric: "Threads answered",
    coverage: ["pre", "stay", "post"],
  },
  {
    kind: "emailOut",
    label: "Email Outbound",
    role: "Campaigns and journeys, sent on real booking data.",
    capabilities: ["Drag-and-drop editor", "Segments", "Send-time optimisation", "A/B"],
    sample: "Subject: Your suite is ready, Anna. A few things we remembered…",
    sampleKind: "email",
    metric: "Revenue attributed",
    coverage: ["pre", "post"],
  },
];

const journeyStages = [
  { key: "pre", label: "Pre-stay" },
  { key: "stay", label: "In-stay" },
  { key: "post", label: "Post-stay" },
];

const SectionBigIdea = () => {
  return (
    <section className="section-pad bigidea" id="bigidea">
      <div className="container">
        <div style={{ textAlign: "center", marginBottom: 80, maxWidth: 880, marginLeft: "auto", marginRight: "auto" }}>
          <Reveal><div className="eyebrow" style={{ justifyContent: "center" }}>The channels</div></Reveal>
          <Reveal delay={100}>
            <h2 className="h-1" style={{ marginTop: 28 }}>
              Meet guests where they already are. <span className="italic-accent">All of them.</span>
            </h2>
          </Reveal>
          <Reveal delay={220}>
            <p className="lead" style={{ marginTop: 28, fontSize: 19 }}>
              Your guests don't want to download your app or learn your portal. They want to message you on WhatsApp, call from the airport, DM you on Instagram, or reply to your email, and they expect you to remember what was said last time. GuestMaker is one system speaking every channel natively, in one continuous thread.
            </p>
          </Reveal>
        </div>

        {/* === 6 CHANNEL CARDS (3x2) === */}
        <div className="bi-channel-grid">
          {channelMatrix.map((c, i) => {
            const Ic = channelIcon[c.kind];
            return (
              <Reveal key={c.kind} delay={i * 80}>
                <article className="bi-cc">
                  <div className="bi-cc-glow" aria-hidden="true" style={{ background: `radial-gradient(circle at top right, ${channelHue[c.kind]}, transparent 60%)` }} />
                  <div className="bi-cc-head">
                    <div className="bi-cc-mark" style={{ color: channelHue[c.kind], background: `color-mix(in srgb, ${channelHue[c.kind]} 14%, var(--bg))`, borderColor: `color-mix(in srgb, ${channelHue[c.kind]} 35%, transparent)` }}>
                      <Ic size={20} stroke={2} />
                    </div>
                    <div className="bi-cc-metric">{c.metric}</div>
                  </div>

                  <div className="bi-cc-name">{c.label}</div>
                  <div className="bi-cc-role">{c.role}</div>

                  <div className="bi-cc-caps">
                    {c.capabilities.map(cap => (
                      <span key={cap} className="bi-cc-cap">{cap}</span>
                    ))}
                  </div>

                  {/* Native sample */}
                  <div className="bi-cc-sample" data-kind={c.sampleKind}>
                    <div className="bi-cc-sample-head">
                      <span className="bi-cc-sample-from"><Ic size={11} stroke={2} /> Native reply</span>
                      <AIBadge small />
                    </div>
                    {c.sampleKind === "wave" ? (
                      <div className="bi-cc-wave">
                        <svg viewBox="0 0 200 24" width="100%" height="24" preserveAspectRatio="none">
                          {Array.from({ length: 36 }).map((_, k) => {
                            const h = 3 + Math.abs(Math.sin(k * 0.55 + i)) * 14;
                            return <rect key={k} x={k * 5.5} y={(24 - h) / 2} width="2.4" height={h} rx="1.2" fill={channelHue[c.kind]} opacity={0.4 + (k / 36) * 0.5} />;
                          })}
                        </svg>
                        <p>"{c.sample}"</p>
                      </div>
                    ) : (
                      <p className="bi-cc-sample-body">{c.sample}</p>
                    )}
                  </div>

                  <div className="bi-cc-coverage">
                    <span className="bi-cc-coverage-label">Active across</span>
                    <div className="bi-cc-coverage-bar">
                      {journeyStages.map(s => (
                        <span key={s.key} className={`bi-cc-cov ${c.coverage.includes(s.key) ? "on" : ""}`}>
                          {s.label}
                        </span>
                      ))}
                    </div>
                  </div>
                </article>
              </Reveal>
            );
          })}
        </div>

        <Reveal delay={500}>
          <p className="bigidea-stamp">
            One guest. One memory. <span className="italic-accent">Every channel.</span>
          </p>
        </Reveal>
      </div>

      <style>{`
        .bigidea-stamp {
          font-family: var(--f-display);
          font-size: clamp(36px, 4.4vw, 60px);
          line-height: 1.1; letter-spacing: -0.02em;
          margin: 80px auto 0; text-align: center;
          max-width: 800px; text-wrap: balance;
        }

        /* === 6 CHANNEL CARDS === */
        .bi-channel-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 16px;
          max-width: 1216px;
          margin: 0 auto;
          align-items: stretch;
          /* 1fr, not auto: grid rows size independently by default, so the
             two rows settled at different heights (438 and 453) even with
             every card in a row matched. This makes all six identical. */
          grid-auto-rows: 1fr;
        }
        /* EQUAL HEIGHTS. Each card is wrapped in a <Reveal>, so the grid
           item is that wrapper, not .bi-cc — stretching the card alone did
           nothing and every card sized to its own copy. Both have to run
           full height, and the sample block takes the slack so the coverage
           row lands on the same line across all six. */
        .bi-channel-grid > * { height: 100%; }
        .bi-cc {
          position: relative;
          height: 100%;
          padding: 28px;
          background: var(--bg-elev-1);
          border: 1px solid var(--hairline);
          border-radius: 16px;
          display: flex; flex-direction: column;
          gap: 16px;
          overflow: hidden;
          transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
        }
        .bi-cc-sample { flex: 1 1 auto; }
        .bi-cc-coverage { margin-top: auto; }
        .bi-cc:hover {
          transform: translateY(-3px);
          border-color: var(--hairline-strong);
          box-shadow: 0 24px 60px -20px rgba(0,0,0,.18);
        }
        .bi-cc-glow {
          position: absolute;
          top: 0; right: 0;
          width: 240px; height: 240px;
          opacity: 0.18;
          pointer-events: none;
          filter: blur(40px);
          transition: opacity .45s ease, transform .6s cubic-bezier(0.22, 1, 0.36, 1);
        }

        /* ---- Subtle hover motion, same rule as the rest of the page:
           nothing moves until you point at a card, and it all settles back
           when you leave. Three small things, staggered, rather than one
           big gesture — the channel mark lifts, the capability chips come
           forward in order, and the sample reply is picked out in the
           channel's own colour. ---- */
        .bi-cc:hover .bi-cc-glow,
        .bi-cc:focus-within .bi-cc-glow { opacity: 0.3; transform: scale(1.12); }

        .bi-cc-mark { transition: transform .45s cubic-bezier(0.22, 1, 0.36, 1); }
        .bi-cc:hover .bi-cc-mark,
        .bi-cc:focus-within .bi-cc-mark { transform: translateY(-2px) scale(1.06); }

        .bi-cc-cap {
          transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1),
                      border-color .35s ease, color .35s ease;
        }
        .bi-cc:hover .bi-cc-cap,
        .bi-cc:focus-within .bi-cc-cap { transform: translateY(-1.5px); }
        .bi-cc:hover .bi-cc-cap:nth-child(2) { transition-delay: 45ms; }
        .bi-cc:hover .bi-cc-cap:nth-child(3) { transition-delay: 90ms; }
        .bi-cc:hover .bi-cc-cap:nth-child(4) { transition-delay: 135ms; }

        .bi-cc-sample {
          transition: border-color .4s ease, background .4s ease;
        }
        .bi-cc:hover .bi-cc-sample,
        .bi-cc:focus-within .bi-cc-sample { border-color: var(--hairline-strong); }

        @media (prefers-reduced-motion: reduce) {
          .bi-cc, .bi-cc-glow, .bi-cc-mark, .bi-cc-cap, .bi-cc-sample {
            transition: none !important;
          }
          .bi-cc:hover { transform: none; }
        }
        .bi-cc-head {
          display: flex; justify-content: space-between; align-items: center;
          position: relative;
        }
        .bi-cc-mark {
          display: inline-grid; place-items: center;
          width: 44px; height: 44px;
          border-radius: 12px;
          border: 1px solid var(--hairline);
        }
        .bi-cc-metric {
          font-family: var(--f-mono);
          font-size: 10px;
          letter-spacing: 0.06em;
          color: var(--ink-3);
          text-transform: uppercase;
          text-align: right;
        }
        .bi-cc-name {
          font-family: var(--f-display);
          font-size: 26px;
          letter-spacing: -0.01em;
          line-height: 1.1;
          margin: 0;
          position: relative;
        }
        .bi-cc-role {
          font-size: 13px;
          line-height: 1.45;
          color: var(--ink-3);
          margin-top: -8px;
          position: relative;
        }
        .bi-cc-caps {
          display: flex; flex-wrap: wrap; gap: 5px;
          position: relative;
        }
        .bi-cc-cap {
          font-family: var(--f-mono);
          font-size: 10px;
          letter-spacing: 0.04em;
          padding: 4px 9px;
          background: var(--bg);
          border: 1px solid var(--hairline);
          border-radius: 4px;
          color: var(--ink-2);
        }

        /* Sample */
        .bi-cc-sample {
          padding: 14px;
          background: var(--bg);
          border: 1px solid var(--hairline);
          border-radius: 10px;
          position: relative;
        }
        .bi-cc-sample-head {
          display: flex; justify-content: space-between; align-items: center;
          margin-bottom: 8px;
        }
        .bi-cc-sample-from {
          display: inline-flex; align-items: center; gap: 5px;
          font-family: var(--f-mono);
          font-size: 9px;
          letter-spacing: 0.06em;
          color: var(--ink-4);
          text-transform: uppercase;
        }
        .bi-cc-sample-body {
          font-size: 13px;
          line-height: 1.5;
          color: var(--ink);
          margin: 0;
        }
        .bi-cc-sample[data-kind="email"] .bi-cc-sample-body {
          font-family: var(--f-display);
          font-size: 14px;
          font-style: italic;
          line-height: 1.4;
        }
        .bi-cc-wave p {
          font-size: 12px;
          color: var(--ink-2);
          font-style: italic;
          margin: 6px 0 0;
          line-height: 1.5;
        }

        .bi-cc-coverage {
          display: flex; flex-direction: column; gap: 6px;
          position: relative;
        }
        .bi-cc-coverage-label {
          font-family: var(--f-mono);
          font-size: 9px;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          color: var(--ink-4);
        }
        .bi-cc-coverage-bar { display: flex; gap: 4px; }
        .bi-cc-cov {
          flex: 1;
          padding: 6px 4px;
          font-family: var(--f-mono);
          font-size: 10px;
          letter-spacing: 0.04em;
          background: var(--bg);
          border: 1px solid var(--hairline);
          border-radius: 4px;
          color: var(--ink-4);
          text-align: center;
        }
        .bi-cc-cov.on {
          background: color-mix(in srgb, var(--accent) 12%, var(--bg));
          color: var(--accent);
          border-color: color-mix(in srgb, var(--accent) 35%, transparent);
        }

        @media (max-width: 1000px) {
          .bi-channel-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 640px) {
          .bi-channel-grid { grid-template-columns: 1fr; }
        }

      `}</style>
    </section>
  );
};

window.SectionBigIdea = SectionBigIdea;
window.BrainOrb = () => null;