// Static content pages — Contact (Air now has its own dedicated page).
// Same left-sidebar framework; two-column editorial layout.

const STATIC_CONTENT = {
  contact: {
    eyebrow: "Backstage · Support",
    title: "Contact",
    intro: "Reach the people who keep RDB running. For anything not covered in the directories, start here.",
    sections: [
      { h: "Operations desk", body: "Your first point of contact for scheduling, access, and day-of-event coordination. Staffed 24/7 during active engagements." },
      { h: "Escalation", body: "For urgent on-site issues outside desk hours, call the operations line and select option 9 to reach the on-call duty manager." },
    ],
    resources: [],
    contacts: [
      { label: "Operations Desk · 24/7", name: "RDB Ops", phone: "+1 305 555 0100", email: "ops@rdbvip.com", hours: "Always on during engagements" },
      { label: "Accounts Payable", name: "RDB Finance", phone: "+1 305 555 0120", email: "ap@rdbvip.com", hours: "Mon–Fri · 9am–5pm ET" },
      { label: "Compliance", name: "RDB Operations", phone: "+1 305 555 0140", email: "compliance@rdbvip.com", hours: "Mon–Fri · 8am–6pm ET" },
    ],
  },
};

function StaticPage({ page }) {
  const c = STATIC_CONTENT[page] || STATIC_CONTENT.contact;
  const contacts = c.contacts || (c.contact ? [c.contact] : []);

  return (
    <div style={{ padding: "48px 64px 96px", maxWidth: 1100, margin: "0 auto" }}>
      <div style={{ marginBottom: 12 }}>
        <div className="rdb-eyebrow" style={{ marginBottom: 14 }}>{c.eyebrow}</div>
        <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 48, letterSpacing: "-0.02em", color: "var(--fg-1)", margin: 0, lineHeight: 1.02 }}>{c.title}</h1>
        <p style={{ fontFamily: "var(--font-body)", fontSize: 16, lineHeight: 1.6, color: "var(--fg-2)", margin: "16px 0 0", maxWidth: 620 }}>{c.intro}</p>
      </div>

      {/* gold section divider */}
      <div style={{ height: 1, background: "var(--rdb-gold-soft)", margin: "36px 0 40px" }} />

      <div style={{ display: "grid", gridTemplateColumns: "1.7fr 1fr", gap: 56, alignItems: "start" }}>
        {/* Main column */}
        <div style={{ display: "flex", flexDirection: "column", gap: 40 }}>
          {c.sections.map((s, i) => (
            <section key={i}>
              <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22, color: "var(--fg-1)", margin: "0 0 14px", letterSpacing: "-0.01em" }}>{s.h}</h2>
              {s.body && <p style={{ fontFamily: "var(--font-body)", fontSize: 15, lineHeight: 1.7, color: "var(--fg-2)", margin: 0 }}>{s.body}</p>}
              {s.list && (
                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
                  {s.list.map((li, j) => (
                    <li key={j} style={{ display: "flex", alignItems: "flex-start", gap: 12, fontFamily: "var(--font-body)", fontSize: 15, lineHeight: 1.5, color: "var(--fg-2)" }}>
                      <span style={{ width: 5, height: 5, borderRadius: "50%", background: "var(--rdb-gold)", marginTop: 9, flexShrink: 0 }} />
                      <span>{li}</span>
                    </li>
                  ))}
                </ul>
              )}
            </section>
          ))}
        </div>

        {/* Aside: resources + contact */}
        <aside style={{ display: "flex", flexDirection: "column", gap: 32 }}>
          {c.resources && c.resources.length > 0 && (
            <div style={{ border: "1px solid var(--ink-3)", background: "var(--ink-1)" }}>
              <div style={{ padding: "16px 20px", borderBottom: "1px solid var(--ink-3)", fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 10, letterSpacing: "0.32em", color: "var(--ink-6)", textTransform: "uppercase" }}>
                Downloads
              </div>
              {c.resources.map((r, i) => <ResourceItem key={i} r={r} last={i === c.resources.length - 1} />)}
            </div>
          )}
          {contacts.map((ct, i) => <ContactCard key={i} c={ct} />)}
        </aside>
      </div>
    </div>
  );
}

function ResourceItem({ r, last }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "flex", alignItems: "center", gap: 14,
        padding: "14px 20px",
        borderBottom: last ? "none" : "1px solid var(--ink-2)",
        background: hover ? "var(--ink-2)" : "transparent",
        cursor: "pointer", textDecoration: "none",
        transition: "background 160ms cubic-bezier(.22,1,.36,1)",
      }}
    >
      <Icon name="file-text" size={18} color={hover ? "var(--rdb-gold)" : "var(--ink-6)"} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontFamily: "var(--font-body)", fontSize: 13, fontWeight: 500, color: "var(--fg-1)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{r.name}</div>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-6)", marginTop: 3 }}>{r.type}</div>
      </div>
      <Icon name="download" size={16} color={hover ? "var(--rdb-gold)" : "var(--ink-5)"} />
    </a>
  );
}

function ContactCard({ c }) {
  return (
    <div style={{ border: "1px solid var(--ink-3)", padding: "22px 22px 24px" }}>
      <div style={{ fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 10, letterSpacing: "0.32em", color: "var(--rdb-gold)", textTransform: "uppercase", marginBottom: 14 }}>{c.label}</div>
      <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 18, color: "var(--fg-1)", marginBottom: 14 }}>{c.name}</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
        <ContactRow icon="phone" value={c.phone} mono />
        <ContactRow icon="mail" value={c.email} mono />
        <ContactRow icon="clock" value={c.hours} />
      </div>
    </div>
  );
}

function ContactRow({ icon, value, mono }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
      <Icon name={icon} size={14} color="var(--ink-6)" />
      <span style={{ fontFamily: mono ? "var(--font-mono)" : "var(--font-body)", fontSize: mono ? 12 : 13, color: "var(--fg-2)" }}>{value}</span>
    </div>
  );
}

window.STATIC_CONTENT = STATIC_CONTENT;
Object.assign(window, { StaticPage, ResourceItem, ContactCard });