// Contact — Scope 1 redesign (Nova, Draft 3).
// Card anatomy applied identically: #0D0D0D surface, 1px gold@40% border,
// 3px gold left accent bar. Phone = RDB Gold (tel:), Email = lifted gold (copy + mailto).
// Afterhours reads first with emphasized real estate; the rest share the grammar.
//
// NOTE: contact details below are PLACEHOLDERS pending the confirmed Contact-tab data.

const CONTACT_DIR = {
  afterhours: {
    label: "Afterhours & Weekends",
    name: "After-Hours Line",
    blurb: "Overnight and weekend coverage for anything that can't wait until business hours — access issues, urgent bookings, or on-site escalations.",
    email: "afterhours@rdbvip.com",
    hours: "Sun–Sat · 7pm–7am ET",
  },
  cards: [
    { icon: "calendar-clock", label: "Weekends · Daytime", name: "Weekend Desk", blurb: "Daytime weekend support for routine requests and coordination.", email: "weekends@rdbvip.com", hours: "Sat–Sun · 9am–5pm ET" },
    { icon: "receipt-text",   label: "Finance",            name: "RDB Finance",   blurb: "Invoicing, remittance, fee questions, and payment status.", phone: "1-352-484-6089", email: "finance@rdbvip.com" },
    { icon: "key-round",      label: "Operations",         name: "IC Operations", blurb: "Keyholders, access, and day-to-day assignment coordination.", phone: "1-352-484-6089", email: "keyholders@rdbvip.com" },
  ],
};

// Gold phone — clickable tel:
function PhoneLink({ phone, big }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a href={"tel:" + phone.replace(/[^+\d]/g, "")} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: "inline-flex", alignItems: "center", gap: 9, textDecoration: "none",
        fontFamily: "var(--font-mono)", fontSize: big ? 22 : 14, fontWeight: big ? 600 : 500,
        letterSpacing: big ? "0.01em" : "0.02em",
        color: hover ? "var(--rdb-gold-bright)" : "var(--rdb-gold)", transition: "color 120ms" }}>
      <Icon name="phone" size={big ? 18 : 14} color={hover ? "var(--rdb-gold-bright)" : "var(--rdb-gold)"} />
      {phone}
    </a>
  );
}

// Lifted-gold email — copy to clipboard + mailto, distinct action color.
function EmailAction({ email, big }) {
  const [copied, setCopied] = React.useState(false);
  const [hover, setHover] = React.useState(false);
  function copy(e) {
    e.preventDefault();
    try { navigator.clipboard.writeText(email); } catch (err) {}
    setCopied(true); setTimeout(() => setCopied(false), 1400);
  }
  return (
    <a href={"mailto:" + email} onClick={copy} title="Copy email"
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: "inline-flex", alignItems: "center", gap: 8, textDecoration: "none", cursor: "pointer", userSelect: "none",
        fontFamily: "var(--font-mono)", fontSize: big ? 15 : 13,
        color: copied ? "var(--success)" : "var(--rdb-gold-bright)",
        opacity: hover && !copied ? 0.82 : 1, transition: "opacity 120ms, color 120ms" }}>
      <Icon name={copied ? "check" : "mail"} size={big ? 16 : 13} color={copied ? "var(--success)" : "var(--rdb-gold-bright)"} />
      {email}
      {copied
        ? <span style={{ fontSize: 9, textTransform: "uppercase", letterSpacing: "0.12em", color: "var(--success)" }}>Copied</span>
        : <Icon name="copy" size={11} color="var(--rdb-gold-bright)" style={{ opacity: hover ? 0.9 : 0.45 }} />}
    </a>
  );
}

// Standard contact card — the shared grammar.
function ContactCardV2({ c }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ position: "relative", background: "var(--ink-0)",
        border: "1px solid " + (hover ? "rgba(201,168,76,0.65)" : "rgba(201,168,76,0.40)"),
        padding: "26px 26px 26px 30px", display: "flex", flexDirection: "column", gap: 16,
        transition: "border-color 160ms", overflow: "hidden" }}>
      <span style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: 3, background: "var(--rdb-gold)" }} />
      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <div style={{ width: 38, height: 38, border: "1px solid var(--ink-4)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
          <Icon name={c.icon} size={18} color="var(--rdb-gold)" />
        </div>
        <div style={{ fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 10, letterSpacing: "0.28em", color: "var(--rdb-gold)", textTransform: "uppercase" }}>{c.label}</div>
      </div>
      <div>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 19, color: "var(--fg-1)", letterSpacing: "-0.01em", marginBottom: 8 }}>{c.name}</div>
        <p style={{ fontFamily: "var(--font-body)", fontSize: 13, lineHeight: 1.55, color: "var(--fg-3)", margin: 0 }}>{c.blurb}</p>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 11, borderTop: "1px solid var(--ink-3)", paddingTop: 16, marginTop: "auto" }}>
        {c.phone && <PhoneLink phone={c.phone} />}
        <EmailAction email={c.email} />
        {c.hours && (
          <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
            <Icon name="clock" size={13} color="var(--ink-6)" />
            <span style={{ fontFamily: "var(--font-body)", fontSize: 12, color: "var(--fg-2)" }}>{c.hours}</span>
          </div>
        )}
      </div>
    </div>
  );
}

// Emphasized Afterhours hero — same anatomy, more real estate + live indicator.
function AfterhoursCard({ c }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ position: "relative", background: "linear-gradient(180deg, rgba(201,168,76,0.07), rgba(201,168,76,0.02))",
        border: "1px solid " + (hover ? "rgba(201,168,76,0.75)" : "rgba(201,168,76,0.55)"),
        padding: "30px 34px 30px 38px", overflow: "hidden", transition: "border-color 160ms" }}>
      <span style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: 3, background: "var(--rdb-gold)" }} />
      <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 40, alignItems: "center" }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 10, letterSpacing: "0.28em", color: "var(--rdb-gold)", textTransform: "uppercase" }}>
              <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--success)", animation: "rdbpulse 1.4s ease-in-out infinite" }} />
              {c.label}
            </span>
          </div>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 26, color: "var(--fg-1)", letterSpacing: "-0.02em", marginBottom: 10 }}>{c.name}</div>
          <p style={{ fontFamily: "var(--font-body)", fontSize: 14, lineHeight: 1.6, color: "var(--fg-2)", margin: 0, maxWidth: 460 }}>{c.blurb}</p>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 14, paddingLeft: 36, borderLeft: "1px solid var(--rdb-gold-soft)" }}>
          {c.phone ? (
            <div>
              <PhoneLink phone={c.phone} big />
              {c.phoneNote && <div style={{ fontFamily: "var(--font-body)", fontSize: 12, color: "var(--fg-3)", marginTop: 6, paddingLeft: 27 }}>{c.phoneNote}</div>}
            </div>
          ) : (
            <EmailAction email={c.email} big />
          )}
          {c.phone && <EmailAction email={c.email} big />}
          <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
            <Icon name="clock" size={14} color="var(--rdb-gold)" />
            <span style={{ fontFamily: "var(--font-body)", fontSize: 13, fontWeight: 500, color: "var(--fg-1)" }}>{c.hours}</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function ContactPage() {
  return (
    <div style={{ padding: "48px 64px 96px", maxWidth: 1180, margin: "0 auto" }}>
      <div style={{ marginBottom: 12 }}>
        <div className="rdb-eyebrow" style={{ marginBottom: 14 }}>Backstage · Support</div>
        <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 48, letterSpacing: "-0.02em", color: "var(--fg-1)", margin: 0, lineHeight: 1.02 }}>Contact</h1>
        <p style={{ fontFamily: "var(--font-body)", fontSize: 16, lineHeight: 1.6, color: "var(--fg-2)", margin: "16px 0 0", maxWidth: 620 }}>
          Reach the people who keep RDB running. Time-sensitive lines read first — everything else is one tap or copy away.
        </p>
      </div>

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

      <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
        <AfterhoursCard c={CONTACT_DIR.afterhours} />
        <div className="rdb-contact-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
          {CONTACT_DIR.cards.map((c, i) => <ContactCardV2 key={i} c={c} />)}
        </div>
      </div>
    </div>
  );
}

// ---------- Mobile Contact (single column, same grammar) ----------
function MobileContact() {
  const a = CONTACT_DIR.afterhours;
  return (
    <div style={{ padding: "22px 18px 60px" }}>
      <div className="rdb-eyebrow" style={{ marginBottom: 10 }}>Backstage · Support</div>
      <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 30, letterSpacing: "-0.02em", color: "var(--fg-1)", margin: "0 0 8px", lineHeight: 1.05 }}>Contact</h1>
      <p style={{ fontFamily: "var(--font-body)", fontSize: 14, lineHeight: 1.6, color: "var(--fg-2)", margin: "0 0 22px" }}>
        Time-sensitive lines read first — tap to call, tap to copy an email.
      </p>

      {/* Afterhours emphasized */}
      <div style={{ position: "relative", background: "linear-gradient(180deg, rgba(201,168,76,0.08), rgba(201,168,76,0.02))", border: "1px solid rgba(201,168,76,0.55)", padding: "20px 20px 20px 24px", overflow: "hidden", marginBottom: 14 }}>
        <span style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: 3, background: "var(--rdb-gold)" }} />
        <div style={{ display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 10, letterSpacing: "0.24em", color: "var(--rdb-gold)", textTransform: "uppercase", marginBottom: 12 }}>
          <span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--success)", animation: "rdbpulse 1.4s ease-in-out infinite" }} />
          {a.label}
        </div>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 18, color: "var(--fg-1)", marginBottom: 14 }}>{a.name}</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {a.phone && <PhoneLink phone={a.phone} big />}
          <EmailAction email={a.email} big />
          <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
            <Icon name="clock" size={13} color="var(--rdb-gold)" />
            <span style={{ fontFamily: "var(--font-body)", fontSize: 12, fontWeight: 500, color: "var(--fg-1)" }}>{a.hours}</span>
          </div>
        </div>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {CONTACT_DIR.cards.map((c, i) => (
          <div key={i} style={{ position: "relative", background: "var(--ink-0)", border: "1px solid rgba(201,168,76,0.40)", padding: "18px 18px 18px 22px", overflow: "hidden" }}>
            <span style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: 3, background: "var(--rdb-gold)" }} />
            <div style={{ display: "flex", alignItems: "center", gap: 11, marginBottom: 12 }}>
              <div style={{ width: 34, height: 34, border: "1px solid var(--ink-4)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                <Icon name={c.icon} size={16} color="var(--rdb-gold)" />
              </div>
              <div>
                <div style={{ fontFamily: "var(--font-body)", fontWeight: 600, fontSize: 9, letterSpacing: "0.22em", color: "var(--rdb-gold)", textTransform: "uppercase" }}>{c.label}</div>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 15, color: "var(--fg-1)", marginTop: 3 }}>{c.name}</div>
              </div>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10, borderTop: "1px solid var(--ink-3)", paddingTop: 12 }}>
              {c.phone && <PhoneLink phone={c.phone} />}
              <EmailAction email={c.email} />
              {c.hours && (
                <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
                  <Icon name="clock" size={12} color="var(--ink-6)" />
                  <span style={{ fontFamily: "var(--font-body)", fontSize: 11.5, color: "var(--fg-2)" }}>{c.hours}</span>
                </div>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.CONTACT_DIR = CONTACT_DIR;
Object.assign(window, { ContactPage, ContactCardV2, AfterhoursCard, PhoneLink, EmailAction, MobileContact });