/* ========================================================================
   screen-intro.jsx, opening framing card (flat icons, even padding)
   ======================================================================== */

function ScreenIntro({ active }) {
  return (
    <div className="canvas canvas-paper" style={{
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      padding: 0,
    }}>
      {/* Background flourish */}
      <div style={{
        position: "absolute", inset: 0,
        background:
          "radial-gradient(800px 400px at 80% 20%, rgba(215,25,33,0.04), transparent 70%)," +
          "radial-gradient(900px 500px at 10% 90%, rgba(74,111,227,0.05), transparent 70%)",
        pointerEvents: "none",
      }}/>

      <div style={{
        position: "relative",
        width: "min(1180px, calc(100% - 240px))",
        maxHeight: "calc(100% - 160px)",
        display: "flex", flexDirection: "column",
        gap: 40,
      }}>
        {/* eyebrow */}
        <div className="fade-in" style={{display: "flex", alignItems: "center", gap: 14}}>
          <EKMark size={32}/>
          <span style={{
            fontSize: 12, fontWeight: 600, letterSpacing: "0.18em",
            textTransform: "uppercase", color: "var(--ink-3)",
          }}>Emirates × Wonderful</span>
          <div style={{flex: 1, height: 1, background: "var(--line)"}}/>
        </div>

        {/* Headline */}
        <div className="fade-in" style={{animationDelay: "0.1s"}}>
          <div style={{
            fontSize: 18, fontWeight: 600,
            color: "var(--ek-red)",
            letterSpacing: "0.14em", textTransform: "uppercase",
            marginBottom: 18,
          }}>The moment that defines customer experience</div>
          <h1 style={{
            margin: 0,
            fontSize: 56, fontWeight: 300,
            lineHeight: 1.08, letterSpacing: "-0.02em",
            color: "var(--ink)",
            maxWidth: 980,
            textWrap: "balance",
          }}>
            A thunderstorm has grounded dozens of flights out of DXB.{" "}
            <span style={{color: "var(--ink-3)"}}>Lukas Weber is one of those passengers.</span>
          </h1>
        </div>

        {/* Three-up cards */}
        <div className="fade-in" style={{
          animationDelay: "0.25s",
          display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 18,
        }}>
          {[
            {
              k: "The pressure",
              v: "Mass disruption events overwhelm contact centres. Hold times spike past 22 minutes. Customers churn. Reps burn out.",
              accent: "var(--ek-red)",
              icon: "warn",
            },
            {
              k: "What Wonderful adds",
              v: "One AI agent, Hala, that runs the conversation end-to-end across email, web chat and voice, and queues every booking write for a human to commit.",
              accent: "var(--w-blue)",
              icon: "sparkle",
            },
            {
              k: "Why it's safe",
              v: "Brand-voiced, grounded in Emirates' own systems and policy. Hala can hold a seat or quote a policy, but cannot commit a booking, every write needs human sign-off.",
              accent: "var(--w-purple)",
              icon: "shield",
            },
          ].map((c, i) => (
            <div key={i} style={{
              background: "white",
              border: "1px solid var(--line)",
              borderRadius: 14,
              padding: "20px 22px 22px",
              borderTop: `3px solid ${c.accent}`,
              display: "flex", flexDirection: "column", gap: 10,
            }}>
              <div style={{display: "flex", alignItems: "center", gap: 10}}>
                <div style={{
                  width: 28, height: 28, borderRadius: 8,
                  background: "var(--surface-2)",
                  display: "grid", placeItems: "center",
                  color: c.accent,
                }}>
                  <FlatIcon name={c.icon} size={16} strokeWidth={1.7}/>
                </div>
                <div style={{
                  fontSize: 11, fontWeight: 700, letterSpacing: "0.1em",
                  textTransform: "uppercase", color: c.accent,
                }}>{c.k}</div>
              </div>
              <div style={{fontSize: 14.5, lineHeight: 1.5, color: "var(--ink-2)"}}>{c.v}</div>
            </div>
          ))}
        </div>

        {/* Channel timeline */}
        <div className="fade-in" style={{animationDelay: "0.4s"}}>
          <div style={{
            fontSize: 11, fontWeight: 700, letterSpacing: "0.14em",
            textTransform: "uppercase", color: "var(--ink-3)", marginBottom: 14,
          }}>What you're about to see</div>
          <div style={{
            display: "grid",
            gridTemplateColumns: "1fr auto 1fr auto 1fr auto 1fr",
            alignItems: "center",
            gap: 12,
          }}>
            {[
              { icon: "mail",    label: "Email",    sub: "Cancellation lands" },
              { icon: "chat",    label: "Web chat", sub: "Hala on emirates.com" },
              { icon: "phone",   label: "Voice",    sub: "Same Hala, by phone" },
              { icon: "headset", label: "Rep + Assistant", sub: "Marcus commits the rebook" },
            ].flatMap((s, i, arr) => {
              const cell = (
                <div key={"c"+i} style={{
                  display: "flex", flexDirection: "column", alignItems: "center",
                  gap: 8, padding: "16px 12px",
                  background: "white", border: "1px solid var(--line)",
                  borderRadius: 12,
                }}>
                  <div style={{
                    width: 36, height: 36, borderRadius: 999,
                    background: "var(--surface-2)",
                    display: "grid", placeItems: "center",
                    color: "var(--ink-2)",
                  }}>
                    <FlatIcon name={s.icon} size={18} strokeWidth={1.7}/>
                  </div>
                  <div style={{fontSize: 13.5, fontWeight: 600, color: "var(--ink)"}}>{s.label}</div>
                  <div style={{fontSize: 11.5, color: "var(--ink-3)"}}>{s.sub}</div>
                </div>
              );
              if (i === arr.length - 1) return [cell];
              return [cell, (
                <div key={"a"+i} style={{color: "var(--ink-4)"}}>
                  <FlatIcon name="arrowRight" size={16} strokeWidth={1.5}/>
                </div>
              )];
            })}
          </div>
        </div>

        {/* Bottom strip */}
        <div className="fade-in" style={{
          animationDelay: "0.55s",
          display: "flex", alignItems: "center", gap: 18,
          padding: "14px 20px",
          background: "rgba(74,111,227,0.05)",
          border: "1px solid rgba(74,111,227,0.15)",
          borderRadius: 12,
        }}>
          <div style={{
            width: 26, height: 26, borderRadius: 999,
            background: "var(--w-blue)", color: "white",
            display: "grid", placeItems: "center",
            flexShrink: 0,
          }}>
            <FlatIcon name="sparkle" size={14} strokeWidth={1.8}/>
          </div>
          <div style={{fontSize: 13.5, color: "var(--ink-2)", flex: 1}}>
            <strong style={{color: "var(--ink)"}}>One agent, three channels.</strong>
            <span style={{marginLeft: 8, color: "var(--ink-3)"}}>
              The AI you're about to meet carries context from one channel to the next, no repeating, no context loss.
            </span>
          </div>
          <div style={{display: "flex", alignItems: "center", gap: 8, flexShrink: 0}}>
            <span style={{fontSize: 11, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 600}}>Press</span>
            <kbd style={{
              padding: "4px 8px", background: "white", border: "1px solid var(--line)",
              borderRadius: 4, fontSize: 11, fontFamily: "var(--font-mono)",
            }}>→</kbd>
            <span style={{fontSize: 12, color: "var(--ink-3)"}}>to begin</span>
          </div>
        </div>
      </div>
    </div>
  );
}

window.ScreenIntro = ScreenIntro;