/* global React, Icon */

const ORG_REQUEST_MEMBERS = [
  { id: "company",  name: "Nordwind FZ-LLC", role: "Company",           initials: "NW" },
  { id: "M-001",    name: "Hans Weber",      role: "Director",           initials: "HW" },
  { id: "M-002",    name: "Anna Braun",      role: "Operations Manager", initials: "AB" },
  { id: "M-003",    name: "Klaus Richter",   role: "Finance Director",   initials: "KR" },
];

function RequestPage({ onSubmit, user = {} }) {
  const isOrg = user.type === "organisation";
  const [selectedMember, setSelectedMember] = React.useState(isOrg ? ORG_REQUEST_MEMBERS[0].id : null);

  const catalogue = [
    { id: "visa",  icon: "plane",          title: "Visa Services",               desc: "Company visa, family visa, dependents, renewals." },
    { id: "immig", icon: "users-round",    title: "Immigration & Labour",         desc: "Work permit, labour card, contract amendments." },
    { id: "pro",   icon: "file-signature", title: "PRO Services",                 desc: "Government document handling, retainer or one-off." },
    { id: "trade", icon: "badge-check",    title: "Trade License",                desc: "New license, renewal, activity addition, amendments." },
    { id: "appr",  icon: "landmark",       title: "Dubai Department Approvals",   desc: "Approvals from DM, MOH, KHDA, RTA, DCD, more." },
    { id: "setup", icon: "briefcase",      title: "Business Setup",               desc: "Mainland, Free Zone, Offshore — full company formation." },
    { id: "econ",  icon: "building-2",     title: "Dubai Economic Services",      desc: "DED-related filings, license activities, instant licenses." },
    { id: "att",   icon: "stamp",          title: "Certificate Attestation",      desc: "MOFA, embassy, MOE attestation for personal documents." },
  ];

  const activeMember = isOrg ? ORG_REQUEST_MEMBERS.find(m => m.id === selectedMember) : null;

  return (
    <div className="container" style={{ padding: "32px" }}>
      <div style={{ marginBottom: 20 }}>
        <div className="eyebrow" style={{ color: "var(--brand-burgundy)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 600 }}>Catalogue</div>
        <h1 style={{ fontFamily: "var(--font-display)", fontSize: 36, fontWeight: 600, letterSpacing: "-0.02em", margin: "6px 0 4px" }}>What can we help you with?</h1>
        <div style={{ color: "var(--fg-3)", fontSize: 15 }}>Pick a service to begin. We'll guide you through the documents and pricing on the next step.</div>
      </div>

      {/* Org member selector */}
      {isOrg && (
        <div style={{ marginBottom: 24, padding: "18px 20px", background: "var(--plum-50)", border: "1px solid var(--plum-200)", borderRadius: 12 }}>
          <div style={{ fontSize: 12, fontWeight: 700, color: "var(--brand-burgundy)", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 12 }}>
            Requesting for
          </div>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            {ORG_REQUEST_MEMBERS.map(m => {
              const active = selectedMember === m.id;
              return (
                <button key={m.id} onClick={() => setSelectedMember(m.id)}
                  style={{
                    display: "flex", alignItems: "center", gap: 10,
                    padding: "9px 14px", borderRadius: 8, border: "1px solid", cursor: "pointer",
                    background: active ? "var(--plum-900)" : "#fff",
                    borderColor: active ? "var(--plum-900)" : "var(--border-strong)",
                    fontFamily: "inherit",
                  }}>
                  <div style={{
                    width: 28, height: 28, borderRadius: 6, flexShrink: 0,
                    background: active ? "rgba(255,255,255,0.2)" : "var(--plum-100)",
                    color: active ? "#fff" : "var(--plum-700)",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    fontWeight: 700, fontSize: 11,
                  }}>{m.initials}</div>
                  <div style={{ textAlign: "left" }}>
                    <div style={{ fontSize: 13, fontWeight: 600, color: active ? "#fff" : "var(--fg-1)" }}>{m.name}</div>
                    <div style={{ fontSize: 11, color: active ? "rgba(255,255,255,0.65)" : "var(--fg-3)" }}>{m.role}</div>
                  </div>
                </button>
              );
            })}
          </div>
        </div>
      )}

      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14 }}>
        {catalogue.map(c => (
          <div key={c.id} className="tile" onClick={() => onSubmit && onSubmit({ ...c, member: activeMember })}>
            <div className="ic"><Icon name={c.icon} size={22} /></div>
            <div className="ttl">{c.title}</div>
            <div className="desc">{c.desc}</div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 32, padding: "22px 24px", background: "var(--plum-50)", border: "1px solid var(--plum-200)", borderRadius: 12, display: "flex", alignItems: "center", gap: 18 }}>
        <div style={{ width: 48, height: 48, borderRadius: 12, background: "var(--brand-burgundy)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center" }}>
          <Icon name="phone" size={22} />
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 15, fontWeight: 600 }}>Not sure where to start?</div>
          <div style={{ fontSize: 13, color: "var(--fg-2)", marginTop: 2 }}>Speak with one of our PROs — we'll figure out what you need in 10 minutes.</div>
        </div>
        <button className="btn btn-primary"><Icon name="message-circle" size={14} stroke={2} />WhatsApp us</button>
      </div>
    </div>
  );
}

Object.assign(window, { RequestPage });