// Air — redesigned. A short intro, a prominent button to the FROSCH air booking
// portal, and a Sheet-driven "Important Updates" area the client self-updates
// (urgent rules, airline incentives). No hosted contract content.
//
// Updates Sheet (placeholder id until RDB provides one): headers row 1 →
//   Date | Priority | Title | Details   (Priority: Urgent | Update | Incentive)

const AIR_FROSCH_URL = "https://aircom.frosch.com/";
const AIR_KEYHOLDER_EMAIL = "keyholders@rdbvip.com";
const AIR_UPDATES_CSV = "/api/sheet?src=airUpdates";

// What's inside the AirCom portal (from RDB AirCom verbiage).
const AIRCOM_INSIDE = [
  { icon: "file-text",  text: "Airline contracts & commission information" },
  { icon: "phone",      text: "Airline contact information" },
  { icon: "megaphone",  text: "Airline news & waiver information" },
  { icon: "sparkles",   text: "Current agent incentives & promotions" },
];

// Offline seed — sample updates so the area never looks empty; replaced live.
const AIR_UPDATES_SEED = [
  { Date: "2026-06-20", Priority: "Urgent",    Title: "Schedule-change waivers — summer storms", Details: "Carriers have issued flexible rebooking waivers for FL/TX through Aug 31. Reissue within the original fare rules; no change fee when the schedule change exceeds 90 minutes." },
  { Date: "2026-06-12", Priority: "Incentive",  Title: "Delta corporate bonus — Q3", Details: "Bonus segment credit on eligible RDB corporate fares booked through FROSCH. Use the RDB account profile at checkout to capture it." },
  { Date: "2026-06-02", Priority: "Update",     Title: "Name-change policy reminder", Details: "Names must match government ID exactly at ticketing. Corrections after ticketing are carrier-restricted — verify before you confirm." },
];

function buildAirUpdates(text) {
  const { rows } = rdbParseSheetObjects(text);
  return rows.filter(r => (r.Title || "").trim());
}

const AIR_PRIORITY = {
  urgent:    { tone: "danger",  label: "Urgent",    icon: "alert-triangle" },
  update:    { tone: "info",    label: "Update",    icon: "info" },
  incentive: { tone: "gold",    label: "Incentive", icon: "sparkles" },
};
function priorityMeta(p) { return AIR_PRIORITY[(p || "").toLowerCase()] || AIR_PRIORITY.update; }

function FroschButton({ big }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a href={AIR_FROSCH_URL} target="_blank" rel="noopener noreferrer"
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        display: "inline-flex", alignItems: "center", gap: 14,
        padding: big ? "18px 30px" : "15px 24px",
        background: hover ? "var(--rdb-gold-bright)" : "var(--rdb-gold)",
        color: "#0D0D0D", textDecoration: "none",
        fontFamily: "var(--font-body)", fontWeight: 700, fontSize: big ? 16 : 14,
        letterSpacing: "0.02em", transition: "background 160ms, transform 160ms",
        transform: hover ? "translateY(-1px)" : "none",
      }}>
      <Icon name="plane-takeoff" size={big ? 22 : 18} color="#0D0D0D" />
      <span>Open the FROSCH Air Portal</span>
      <Icon name="arrow-up-right" size={big ? 20 : 16} color="#0D0D0D" />
    </a>
  );
}

function AirUpdateRow({ u, last }) {
  const m = priorityMeta(u.Priority);
  return (
    <div style={{ display: "flex", gap: 18, padding: "20px 22px", borderBottom: last ? "none" : "1px solid var(--ink-2)", background: m.tone === "danger" ? "rgba(192,57,43,0.045)" : "transparent" }}>
      <div style={{ flexShrink: 0, paddingTop: 2 }}>
        <Icon name={m.icon} size={18} color={m.tone === "danger" ? "#C0392B" : m.tone === "gold" ? "var(--rdb-gold)" : "var(--fg-2)"} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 6, flexWrap: "wrap" }}>
          <Chip tone={m.tone} dot={false}>{m.label}</Chip>
          <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 16, color: "var(--fg-1)", letterSpacing: "-0.01em" }}>{u.Title}</span>
          {u.Date && <span style={{ marginLeft: "auto", fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-6)" }}>{u.Date}</span>}
        </div>
        <p style={{ fontFamily: "var(--font-body)", fontSize: 13.5, lineHeight: 1.6, color: "var(--fg-3)", margin: 0 }}>{u.Details}</p>
      </div>
    </div>
  );
}

function AirPage({ compact }) {
  const { rows, status } = useSheet(AIR_UPDATES_CSV, AIR_UPDATES_SEED, buildAirUpdates);
  const pad = compact ? "22px 18px 60px" : "48px 64px 96px";

  return (
    <div style={{ padding: pad, maxWidth: compact ? "100%" : 1080, margin: "0 auto" }}>
      <div style={{ marginBottom: 12 }}>
        <div className="rdb-eyebrow" style={{ marginBottom: 14 }}>Backstage · Travel</div>
        <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: compact ? 30 : 48, letterSpacing: "-0.02em", color: "var(--fg-1)", margin: 0, lineHeight: 1.02 }}>Air</h1>
        <p style={{ fontFamily: "var(--font-body)", fontSize: compact ? 14 : 16, lineHeight: 1.65, color: "var(--fg-2)", margin: "16px 0 0", maxWidth: 660 }}>
          RDB Hospitality Group owns its own ARC number under RDB Enterprises Intl, and partners with
          Frosch / Chase Travel to offer industry-leading Airline Commission Agreements &amp; Contracts.
          As an RDB Keyholder, you have access to Frosch's air portal — AirCom.
        </p>
      </div>

      {/* Prominent FROSCH button */}
      <div style={{ margin: compact ? "26px 0 8px" : "32px 0 10px" }}>
        <FroschButton big={!compact} />
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-6)", marginTop: 12 }}>
          To request access, email <span style={{ color: "var(--rdb-gold)" }}>{AIR_KEYHOLDER_EMAIL}</span> and login information will be assigned to you.
        </div>
      </div>

      <div style={{ height: 1, background: "var(--rdb-gold-soft)", margin: compact ? "26px 0" : "36px 0 32px" }} />

      {/* Inside AirCom + how commissions work */}
      <div className="rdb-air-cols" style={{ display: "grid", gridTemplateColumns: compact ? "1fr" : "1.1fr 1fr", gap: compact ? 28 : 48, marginBottom: compact ? 32 : 44, alignItems: "start" }}>
        <section>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: compact ? 18 : 20, color: "var(--fg-1)", margin: "0 0 16px", letterSpacing: "-0.01em" }}>Inside the AirCom portal</h2>
          <div style={{ display: "flex", flexDirection: "column", gap: 1, background: "var(--ink-3)", border: "1px solid var(--ink-3)" }}>
            {AIRCOM_INSIDE.map((it, i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 14, background: "var(--ink-1)", padding: "14px 18px" }}>
                <Icon name={it.icon} size={17} color="var(--rdb-gold)" />
                <span style={{ fontFamily: "var(--font-body)", fontSize: 13.5, color: "var(--fg-1)" }}>{it.text}</span>
              </div>
            ))}
          </div>
        </section>

        <section>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: compact ? 18 : 20, color: "var(--fg-1)", margin: "0 0 16px", letterSpacing: "-0.01em" }}>Commissions &amp; tools</h2>
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 13.5, lineHeight: 1.65, color: "var(--fg-2)", margin: 0 }}>
              RDB uses <span style={{ color: "var(--fg-1)", fontWeight: 600 }}>Agency Managed Commissions (AMC)</span> in Sabre, which displays airline commissions when pricing flights. We also use <span style={{ color: "var(--fg-1)", fontWeight: 600 }}>Automated Exchanges &amp; Refunds</span>, which checks fare rules and shields against debit memos.
            </p>
            <div style={{ borderLeft: "2px solid var(--rdb-gold)", background: "rgba(201,168,76,0.05)", padding: "14px 18px" }}>
              <div style={{ fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--rdb-gold)", marginBottom: 6 }}>Adding Sabre tools</div>
              <p style={{ fontFamily: "var(--font-body)", fontSize: 13, lineHeight: 1.6, color: "var(--fg-2)", margin: 0 }}>
                Need a Sabre Tool added? Email <span style={{ color: "var(--rdb-gold)" }}>{AIR_KEYHOLDER_EMAIL}</span> with your request.
              </p>
            </div>
          </div>
        </section>
      </div>

      {/* Important Updates — Sheet-driven, client self-updates */}
      <section>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, marginBottom: 16, flexWrap: "wrap" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <Icon name="megaphone" size={18} color="var(--rdb-gold)" />
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: compact ? 20 : 24, color: "var(--fg-1)", margin: 0, letterSpacing: "-0.01em" }}>Important Updates</h2>
          </div>
          <SyncPill status={status} liveLabel="Live · self-updated by RDB" sampleLabel="Sample updates · live when hosted" />
        </div>
        <p style={{ fontFamily: "var(--font-body)", fontSize: 13, lineHeight: 1.55, color: "var(--fg-3)", margin: "0 0 16px", maxWidth: 600 }}>
          Urgent carrier rules and airline incentives, posted by the RDB air desk. Newest first.
        </p>
        <div style={{ border: "1px solid var(--ink-3)" }}>
          {rows.map((u, i) => <AirUpdateRow key={i} u={u} last={i === rows.length - 1} />)}
        </div>
      </section>
    </div>
  );
}

window.AIR_FROSCH_URL = AIR_FROSCH_URL;
Object.assign(window, { AirPage, FroschButton, AirUpdateRow, buildAirUpdates });