/* Carelon Passport — hero card */

const RouteNode = ({ icon, city, label, tone }) => {
  const t = TONES[tone];
  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 7, flexShrink: 0 }}>
      <span style={{ width: 38, height: 38, borderRadius: 11, background: t.bg, color: t.fg, display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "0 0 0 4px " + t.bg + "66" }}>
        <Icon name={icon} size={18} stroke={1.9} />
      </span>
      <div style={{ textAlign: "center", lineHeight: 1.15 }}>
        <div style={{ fontSize: 9.5, fontWeight: 700, letterSpacing: ".05em", textTransform: "uppercase", color: t.fg }}>{label}</div>
        <div style={{ fontSize: 12.5, fontWeight: 650, color: "var(--ink)", whiteSpace: "nowrap" }}>{city}</div>
      </div>
    </div>
  );
};

const RouteDash = () => (
  <div style={{ flex: 1, minWidth: 22, height: 38, display: "flex", alignItems: "center", marginTop: -22 }}>
    <div style={{ flex: 1, height: 0, borderTop: "2px dashed var(--line-strong)" }} />
  </div>
);

const Hero = ({ onGetCare, onChat }) => {
  return (
    <Card pad={0} style={{ overflow: "hidden", position: "relative", minHeight: 384, display: "flex" }}>
      {/* brand wash behind globe */}
      <div style={{ position: "absolute", top: -120, right: -80, width: 540, height: 540, borderRadius: "50%", background: "radial-gradient(circle at 50% 50%, rgba(121,76,255,.10), rgba(0,187,186,.06) 45%, rgba(255,255,255,0) 70%)", pointerEvents: "none" }} />

      {/* left content */}
      <div style={{ position: "relative", zIndex: 2, padding: "34px 34px 30px", display: "flex", flexDirection: "column", width: "58%", minWidth: 0 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14, whiteSpace: "nowrap" }}>
          <StatusPill tone="purple" icon="sparkle">Passport Platinum</StatusPill>
          <span style={{ fontSize: 13, color: "var(--ink-3)", fontWeight: 500 }}>Thursday, Jun 18</span>
        </div>

        <h1 style={{ margin: 0, fontSize: 33, lineHeight: 1.08, fontWeight: 750, color: "var(--ink)", letterSpacing: "-.022em" }}>
          Welcome back, Jordan
        </h1>
        <p style={{ margin: "10px 0 0", fontSize: 16, lineHeight: 1.5, color: "var(--ink-2)", maxWidth: 440, fontWeight: 450 }}>
          Your care, coverage, and concierge support across every destination.
        </p>
        <p style={{ margin: "12px 0 0", fontSize: 14, lineHeight: 1.55, color: "var(--ink-3)", maxWidth: 430 }}>
          You're covered across <b style={{ color: "var(--purple)", fontWeight: 700 }}>3 active regions</b> with <b style={{ color: "var(--purple)", fontWeight: 700 }}>2 recommended actions</b> this week.
        </p>

        {/* travel profile */}
        <div style={{ marginTop: "auto", paddingTop: 24 }}>
          <div className="cp-glass" style={{ padding: "16px 18px", borderRadius: 18, background: "var(--bg-sunk)", border: "1px solid var(--line)" }}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
              <span style={{ fontSize: 11.5, fontWeight: 700, letterSpacing: ".05em", textTransform: "uppercase", color: "var(--ink-3)" }}>Current travel profile</span>
              <div style={{ display: "flex", gap: 7 }}>
                <StatusPill tone="green" icon="shield">Coverage active</StatusPill>
                <StatusPill tone="teal" icon="phone">24/7 support</StatusPill>
              </div>
            </div>
            <div style={{ display: "flex", alignItems: "flex-start", gap: 4 }}>
              <RouteNode icon="cross" city="Atlanta, GA" label="Home" tone="purple" />
              <RouteDash />
              <RouteNode icon="route" city="London, UK" label="Next" tone="violet" />
              <RouteDash />
              <RouteNode icon="pin" city="Dubai, UAE" label="Upcoming" tone="teal" />
            </div>
          </div>
        </div>

        {/* CTAs */}
        <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 18, flexWrap: "wrap" }}>
          <Button variant="brand" size="lg" icon="cross" onClick={onGetCare}>Get care now</Button>
          <Button variant="secondary" size="lg" icon="chat" onClick={onChat}>Message concierge</Button>
          <TextLink onClick={onGetCare}>View care plan</TextLink>
        </div>
      </div>

      {/* right visual */}
      <div style={{ position: "relative", flex: 1, minWidth: 0 }}>
        <GlobeViz />
      </div>
    </Card>
  );
};

window.Hero = Hero;