// ---------- Client-facing portal — works as public (token) or studio preview ----------

const PortalPage = ({ onBackToStudio, clientId = "sarkis", isPublic = false, requirePasscode = false, expiredAt = null }) => {
  const client = HD.clients.find(c => c.id === clientId);
  const access = client ? HD.portalAccess[client.id] : null;

  if (!client || !access) {
    return <PortalNotFoundScreen />;
  }

  const accent = access.accent || client.accent;
  const tone = STATUS_TONES[accent];
  const clientProjects = HD.projects.filter(p => p.clientId === client.id);

  // Passcode gate (only when public + passcode set)
  const [unlocked, setUnlocked] = React.useState(!requirePasscode || !access.passcode);
  const [tabKey, setTabKey] = React.useState("overview");

  // Show disabled state if link is killed
  if (isPublic && access.enabled === false) {
    return <PortalDisabledScreen client={client} access={access} />;
  }

  if (isPublic && !unlocked) {
    return (
      <PasscodeGate
        client={client}
        access={access}
        onUnlock={() => setUnlocked(true)}
      />
    );
  }

  // Pull just-the-portal "Awaiting your review" count
  const awaitingCount = clientProjects.filter(p => p.status === "review" || p.status === "drafting").length;

  return (
    <div style={{ background: "var(--paper)", color: "var(--ink)", minHeight: "100vh" }} className="light-scroll">
      {/* Top portal banner — different for public vs preview */}
      {isPublic ? (
        <PublicPortalBanner client={client} access={access} accent={accent} />
      ) : (
        <div style={{
          background: "var(--ink)", color: "var(--white)",
          padding: "8px 32px", display: "flex", alignItems: "center", justifyContent: "space-between",
          fontSize: 11.5, flexWrap: "wrap", gap: 8,
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <span style={{ width: 5, height: 5, borderRadius: 99, background: tone.dot }} className="hd-pulse" />
            <span className="micro" style={{ fontSize: 9.5, color: "rgba(255,255,255,0.62)" }}>STUDIO PREVIEW — VIEWING {client.org.toUpperCase()}'S PORTAL</span>
          </div>
          <button onClick={onBackToStudio} style={{
            background: "transparent", border: "none", color: "var(--white)",
            fontSize: 11.5, cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 6,
            fontFamily: "var(--sans)",
          }}>
            <window.Icon.ChevronL size={11} /> Back to dashboard
          </button>
        </div>
      )}

      {/* Top branded header */}
      <header style={{
        background: "var(--white)",
        borderBottom: "1px solid rgba(8,12,16,0.06)",
        padding: "24px 48px",
      }} className="hd-topbar-content">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
            <HDMark size={36} light />
            <div>
              <div className="micro" style={{ color: "rgba(8,12,16,0.45)", fontSize: 9 }}>{access.studioName.toUpperCase()} × {client.org.toUpperCase()}</div>
              <div className="serif" style={{ fontSize: 22, fontWeight: 500, letterSpacing: "-0.01em", marginTop: 2 }}>Your projects</div>
            </div>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <Button variant="ghost" light size="md" icon={<window.Icon.Bell size={13} />}>Updates</Button>
            <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "4px 12px 4px 4px", background: "rgba(8,12,16,0.04)", borderRadius: 99 }}>
              <Avatar initials={client.name.split(" ").map(s => s[0]).slice(0, 2).join("")} accent={accent} size={28} />
              <span style={{ fontSize: 12.5, fontWeight: 500 }}>{client.name.split(" / ")[0].split(",")[0]}</span>
            </div>
          </div>
        </div>
      </header>

      <main style={{ padding: "48px 48px 80px", maxWidth: 1200, margin: "0 auto" }} className="hd-topbar-content">
        {/* Hero greeting */}
        <div style={{ marginBottom: 40 }}>
          <div className="micro" style={{ color: "rgba(8,12,16,0.45)", marginBottom: 12 }}>WELCOME BACK, {client.name.split(" ")[0].toUpperCase()}</div>
          <h1 className="serif sm-h-hero" style={{
            fontFamily: "var(--serif)", fontSize: 56, lineHeight: 1.05,
            margin: 0, letterSpacing: "-0.025em", fontWeight: 500,
          }}>
            {awaitingCount > 0 ? <>
              {awaitingCount === 1 ? "One cut is" : `${awaitingCount} cuts are`}<br />
              <span style={{ fontStyle: "italic", color: "rgba(8,12,16,0.55)" }}>waiting on your eyes.</span>
            </> : <>
              Everything is<br />
              <span style={{ fontStyle: "italic", color: "rgba(8,12,16,0.55)" }}>moving as planned.</span>
            </>}
          </h1>
        </div>

        {/* Quick stats */}
        <div className="md-2col sm-1col" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: "0 8px", rowGap: 28, marginBottom: 40, paddingTop: 24, borderTop: "1px solid rgba(8,12,16,0.08)" }}>
          <PortalStat label="Active projects" value={clientProjects.length} />
          <PortalStat label="Awaiting your review" value={awaitingCount} emphasis accent={accent} />
          <PortalStat label="Comments resolved" value="14" />
          <PortalStat label="Final deliveries" value="4" />
        </div>

        {/* Tabs */}
        <div style={{ display: "flex", gap: 4, marginBottom: 24, borderBottom: "1px solid rgba(8,12,16,0.08)" }}>
          {[
            { id: "overview", label: "Overview" },
            { id: "projects", label: "Projects" },
            { id: "library", label: "Asset library" },
            { id: "team", label: "Your team" },
          ].map(t => (
            <button
              key={t.id}
              onClick={() => setTabKey(t.id)}
              style={{
                background: "transparent", border: "none",
                padding: "12px 14px", fontSize: 13,
                color: tabKey === t.id ? "var(--ink)" : "rgba(8,12,16,0.55)",
                fontWeight: tabKey === t.id ? 600 : 400,
                fontFamily: "var(--sans)",
                borderBottom: tabKey === t.id ? `2px solid ${tone.dot}` : "2px solid transparent",
                marginBottom: -1,
                cursor: "pointer", transition: "color 120ms ease",
              }}
            >{t.label}</button>
          ))}
        </div>

        {tabKey === "overview" && (
          <PortalOverview client={client} clientProjects={clientProjects} access={access} accent={accent} />
        )}
        {tabKey === "projects" && (
          <PortalProjects clientProjects={clientProjects} />
        )}
        {tabKey === "library" && (
          <PortalLibrary access={access} />
        )}
        {tabKey === "team" && (
          <PortalTeam client={client} access={access} accent={accent} />
        )}

        {/* Studio footer */}
        <div style={{
          marginTop: 56,
          padding: 28, background: "var(--ink)", color: "var(--white)",
          borderRadius: 14, display: "flex", justifyContent: "space-between", alignItems: "center",
          flexWrap: "wrap", gap: 16,
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
            <div style={{
              width: 44, height: 44, borderRadius: 99,
              background: "rgba(255,255,255,0.06)",
              display: "flex", alignItems: "center", justifyContent: "center",
              fontFamily: "var(--serif)", fontSize: 18, fontStyle: "italic",
            }}>{access.studioInitials || "WM"}</div>
            <div>
              <div className="serif" style={{ fontSize: 18, fontWeight: 500, letterSpacing: "-0.005em" }}>Need to reach {access.studioName}?</div>
              <div style={{ fontSize: 12.5, color: "rgba(255,255,255,0.62)", marginTop: 2 }}>{access.primaryContact.name} is your {access.primaryContact.role} on this account.</div>
            </div>
          </div>
          {access.allowComments
            ? <Button variant="primary" size="md" icon={<window.Icon.Send size={13} />}>Message the studio</Button>
            : <span style={{ fontSize: 11.5, color: "rgba(255,255,255,0.55)" }}>This portal is read-only.</span>}
        </div>

        {/* Powered by */}
        {isPublic && (
          <div style={{
            marginTop: 32, padding: "20px 0",
            textAlign: "center", fontSize: 11.5, color: "rgba(8,12,16,0.45)",
            display: "flex", alignItems: "center", justifyContent: "center", gap: 8,
          }}>
            <window.Icon.Anchor size={11} />
            <span>Secure portal · powered by HarborDock</span>
            <span style={{ opacity: 0.5 }}>·</span>
            <span>Encrypted end-to-end</span>
          </div>
        )}
      </main>
    </div>
  );
};

// -------- Public-mode banner --------
const PublicPortalBanner = ({ client, access, accent }) => {
  const tone = STATUS_TONES[accent];
  return (
    <div style={{
      background: "var(--ink)", color: "var(--white)",
      padding: "10px 32px",
      display: "flex", alignItems: "center", justifyContent: "space-between",
      fontSize: 11.5, flexWrap: "wrap", gap: 12,
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <span style={{ width: 6, height: 6, borderRadius: 99, background: tone.dot }} className="hd-pulse" />
        <span className="micro" style={{ fontSize: 9.5, color: "rgba(255,255,255,0.72)" }}>
          SECURE PORTAL · {client.org.toUpperCase()}
        </span>
        <span style={{ color: "rgba(255,255,255,0.32)" }}>—</span>
        <span style={{ color: "rgba(255,255,255,0.72)" }}>Last viewed {access.lastViewed}</span>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 14, fontSize: 11 }}>
        {access.expiresAt && (
          <span style={{ color: "rgba(255,255,255,0.62)", display: "inline-flex", alignItems: "center", gap: 5 }}>
            <window.Icon.Clock size={11} /> Expires {access.expiresAt}
          </span>
        )}
        <span style={{ color: "rgba(255,255,255,0.62)", display: "inline-flex", alignItems: "center", gap: 5 }}>
          <window.Icon.Shield size={11} /> Encrypted
        </span>
      </div>
    </div>
  );
};

// -------- Passcode gate --------
const PasscodeGate = ({ client, access, onUnlock }) => {
  const [pc, setPc] = React.useState("");
  const [error, setError] = React.useState(false);
  const inputRef = React.useRef(null);
  React.useEffect(() => { setTimeout(() => inputRef.current?.focus(), 100); }, []);

  const tryUnlock = (e) => {
    if (e) e.preventDefault();
    if (pc === access.passcode) {
      setError(false);
      onUnlock();
    } else {
      setError(true);
      setTimeout(() => setError(false), 1600);
    }
  };

  return (
    <div style={{
      minHeight: "100vh", background: "var(--paper)", color: "var(--ink)",
      display: "flex", alignItems: "center", justifyContent: "center", padding: 24,
      position: "relative", overflow: "hidden",
    }}>
      <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.04 }} viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid slice">
        {Array.from({ length: 22 }).map((_, i) => {
          const y = 30 + i * 36;
          return <path key={i} d={`M -100 ${y} Q 320 ${y - 18 + (i % 3) * 6} 640 ${y} T 1300 ${y}`} stroke="var(--ink)" fill="none" strokeWidth="0.5" />;
        })}
      </svg>
      <div style={{
        position: "relative", maxWidth: 420, width: "100%",
        background: "white", border: "1px solid rgba(8,12,16,0.08)",
        borderRadius: 16, padding: 32,
        boxShadow: "0 30px 60px -20px rgba(8,12,16,0.15)",
      }}>
        <HDMark size={40} light />
        <div className="micro" style={{ color: "rgba(8,12,16,0.45)", marginTop: 24 }}>{access.studioName.toUpperCase()} × {client.org.toUpperCase()}</div>
        <h1 className="serif" style={{
          fontSize: 32, fontWeight: 500, letterSpacing: "-0.02em",
          margin: "8px 0 12px", lineHeight: 1.1,
        }}>Enter your <span style={{ fontStyle: "italic" }}>portal code.</span></h1>
        <p style={{ fontSize: 13, color: "rgba(8,12,16,0.62)", lineHeight: 1.6, margin: 0 }}>
          The 4-digit passcode was shared by your studio. It rotates per project for security.
        </p>

        <form onSubmit={tryUnlock} style={{ marginTop: 24 }}>
          <input
            ref={inputRef}
            value={pc}
            onChange={(e) => setPc(e.target.value.replace(/\D/g, "").slice(0, 4))}
            placeholder="– – – –"
            inputMode="numeric"
            maxLength={4}
            className="mono"
            style={{
              width: "100%", background: "rgba(8,12,16,0.03)",
              border: `1px solid ${error ? "#dc2626" : "rgba(8,12,16,0.12)"}`,
              borderRadius: 10, padding: "16px 12px",
              fontSize: 32, letterSpacing: "0.5em", textAlign: "center",
              color: "var(--ink)", outline: "none",
              fontFamily: "var(--mono)", fontWeight: 500,
              animation: error ? "hd-shake 360ms ease" : "none",
            }}
          />
          {error && <div style={{ fontSize: 12, color: "#dc2626", marginTop: 8 }}>That code didn't match. Try again.</div>}
          {!error && <div style={{ fontSize: 11.5, color: "rgba(8,12,16,0.45)", marginTop: 8 }}>Enter the code your studio shared with you.</div>}

          <Button variant="secondary" light size="lg" full style={{ marginTop: 20 }} type="submit" iconRight={<window.Icon.Arrow size={14} />}>
            Open portal
          </Button>
        </form>

        <div style={{ marginTop: 24, paddingTop: 18, borderTop: "1px solid rgba(8,12,16,0.08)", fontSize: 11.5, color: "rgba(8,12,16,0.55)", display: "flex", alignItems: "center", justifyContent: "center", gap: 6 }}>
          <window.Icon.Anchor size={11} />
          <span>Secure portal · powered by HarborDock</span>
        </div>
      </div>
    </div>
  );
};

const PortalDisabledScreen = ({ client, access }) => (
  <div style={{
    minHeight: "100vh", background: "var(--paper)", color: "var(--ink)",
    display: "flex", alignItems: "center", justifyContent: "center", padding: 24,
  }}>
    <div style={{
      maxWidth: 460, textAlign: "center",
      background: "white", border: "1px solid rgba(8,12,16,0.08)",
      borderRadius: 14, padding: 40,
    }}>
      <div style={{
        width: 56, height: 56, borderRadius: 14, margin: "0 auto 18px",
        background: "rgba(8,12,16,0.04)", color: "rgba(8,12,16,0.45)",
        display: "flex", alignItems: "center", justifyContent: "center",
      }}><window.Icon.Lock size={22} /></div>
      <div className="serif" style={{ fontSize: 24, fontWeight: 500, letterSpacing: "-0.015em" }}>This portal isn't available right now.</div>
      <p style={{ fontSize: 13.5, color: "rgba(8,12,16,0.62)", marginTop: 12, lineHeight: 1.6 }}>
        Your studio at <strong>{access.studioName}</strong> has paused access to this workspace.
        Reach out to {access.primaryContact.name} if you need a new link.
      </p>
    </div>
  </div>
);

const PortalNotFoundScreen = () => (
  <div style={{
    minHeight: "100vh", background: "var(--paper)", color: "var(--ink)",
    display: "flex", alignItems: "center", justifyContent: "center", padding: 24,
  }}>
    <div style={{
      maxWidth: 460, textAlign: "center",
      background: "white", border: "1px solid rgba(8,12,16,0.08)",
      borderRadius: 14, padding: 40,
    }}>
      <div style={{
        width: 56, height: 56, borderRadius: 14, margin: "0 auto 18px",
        background: "rgba(8,12,16,0.04)", color: "rgba(8,12,16,0.45)",
        display: "flex", alignItems: "center", justifyContent: "center",
      }}><window.Icon.Lock size={22} /></div>
      <div className="serif" style={{ fontSize: 24, fontWeight: 500, letterSpacing: "-0.015em" }}>This portal link is not available.</div>
      <p style={{ fontSize: 13.5, color: "rgba(8,12,16,0.62)", marginTop: 12, lineHeight: 1.6 }}>
        Ask your studio contact for a fresh HarborDock link.
      </p>
    </div>
  </div>
);

// -------- Overview tab --------
const PortalOverview = ({ client, clientProjects, access, accent }) => {
  return (
    <>
      {/* Pending feedback callout */}
      <section style={{ marginBottom: 48 }}>
        <SectionHeaderLight eyebrow="PENDING YOUR FEEDBACK" title="Ready for review" />
        <div className="md-2col sm-1col" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          <ClientReviewCard
            project={clientProjects[0]?.name || "Project"}
            version="Cut 03 · 02:18"
            note={`${access.primaryContact.name} tightened the logo reveal and pushed the warmer color pass.`}
            from={`${access.primaryContact.name}, ${access.primaryContact.role}`}
            when="2 hours ago"
            accent={accent}
            ago="Awaiting review"
          />
          <ClientReviewCard
            project={clientProjects[1]?.name || "Storyboard v2"}
            version="Storyboard v2"
            note="Music direction and pacing notes are ready for your sign-off."
            from="Alex W., producer"
            when="Yesterday"
            accent={accent === "harbor" ? "amber" : accent}
            ago="Awaiting review"
          />
        </div>
      </section>

      {/* Recent activity */}
      <section>
        <SectionHeaderLight eyebrow="RECENT ACTIVITY" title="From your studio" />
        <Card light style={{ padding: 0 }}>
          {[
            { who: access.primaryContact.name, action: `uploaded Cut 03 — Hero film for`, target: clientProjects[0]?.name || "your project", at: "2 hours ago", icon: "Upload" },
            { who: "Alex W.", action: "shared a storyboard for", target: clientProjects[1]?.name || "next project", at: "Yesterday", icon: "Share" },
            { who: "Theo R.", action: "delivered final color pass on", target: "the square cut", at: "2 days ago", icon: "CheckCircle" },
            { who: access.primaryContact.name, action: "responded to your comment at 01:14 on", target: "Cut 02", at: "3 days ago", icon: "Message" },
          ].map((a, i, arr) => {
            const IconComp = window.Icon[a.icon];
            return (
              <div key={i} style={{
                display: "flex", alignItems: "center", gap: 14,
                padding: "14px 20px",
                borderBottom: i === arr.length - 1 ? "none" : "1px solid rgba(8,12,16,0.05)",
              }}>
                <div style={{
                  width: 32, height: 32, borderRadius: 99,
                  background: "rgba(8,12,16,0.04)", color: "rgba(8,12,16,0.55)",
                  display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
                }}><IconComp size={14} /></div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13.5, color: "var(--ink)" }}>
                    <span style={{ fontWeight: 500 }}>{a.who}</span>
                    <span style={{ color: "rgba(8,12,16,0.62)" }}> {a.action} </span>
                    <span style={{ fontWeight: 500 }}>{a.target}</span>
                  </div>
                  <div style={{ fontSize: 11.5, color: "rgba(8,12,16,0.45)", marginTop: 2 }}>{a.at}</div>
                </div>
              </div>
            );
          })}
        </Card>
      </section>
    </>
  );
};

const PortalProjects = ({ clientProjects }) => (
  <section>
    <SectionHeaderLight eyebrow="ALL PROJECTS" title="Your portfolio" />
    <div className="hd-portal-project-list" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      {clientProjects.map(p => <PortalProjectRow key={p.id} project={p} />)}
      {clientProjects.length === 0 && HD.projects.slice(0, 3).map(p => <PortalProjectRow key={p.id} project={p} />)}
    </div>
  </section>
);

const PortalLibrary = ({ access }) => (
  <section>
    <SectionHeaderLight eyebrow="ASSET LIBRARY" title="Everything we've delivered" />
    {!access.allowDownloads && (
      <Card light style={{ padding: 14, marginBottom: 16, display: "flex", alignItems: "center", gap: 12, background: "rgba(245,158,11,0.05)", borderColor: "rgba(245,158,11,0.24)" }}>
        <window.Icon.Lock size={14} color="#b45309" />
        <span style={{ fontSize: 12.5, color: "var(--ink)" }}>Downloads are disabled on this portal. Reach out to your studio if you need an export.</span>
      </Card>
    )}
    <div className="md-2col sm-1col" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 }}>
      {[
        { name: "Hero film — 16:9", type: "video", size: "1.8 GB", at: "Today" },
        { name: "Vertical cut — 9:16", type: "video", size: "412 MB", at: "Today" },
        { name: "Square cut — 1:1", type: "video", size: "390 MB", at: "Yesterday" },
        { name: "Stills package", type: "image", size: "1.2 GB", at: "May 11" },
        { name: "Voiceover masters", type: "audio", size: "184 MB", at: "May 09" },
        { name: "Brand guidelines", type: "doc", size: "12 MB", at: "Apr 28" },
      ].map((f, i) => (
        <Card key={i} light hover style={{ padding: 14 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <div style={{
              width: 40, height: 40, borderRadius: 9,
              background: "rgba(8,12,16,0.04)", color: "rgba(8,12,16,0.55)",
              display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
            }}>
              {f.type === "video" ? <window.Icon.Film size={16} /> : f.type === "image" ? <window.Icon.Image size={16} /> : f.type === "audio" ? <window.Icon.Mic size={16} /> : <window.Icon.File size={16} />}
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 500, color: "var(--ink)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{f.name}</div>
              <div style={{ fontSize: 11.5, color: "rgba(8,12,16,0.55)", marginTop: 2 }}>{f.size} · {f.at}</div>
            </div>
            {access.allowDownloads && <window.IconButton iconName="Download" label="Download" light />}
          </div>
        </Card>
      ))}
    </div>
  </section>
);

const PortalTeam = ({ client, access, accent }) => (
  <section>
    <SectionHeaderLight eyebrow="YOUR TEAM" title="Who's working on this" />
    <Card light style={{ padding: 0 }}>
      {[
        { name: access.primaryContact.name, role: `${access.primaryContact.role.charAt(0).toUpperCase()}${access.primaryContact.role.slice(1)}`, initials: access.primaryContact.name.split(" ").map(s => s[0]).join(""), accent: accent, primary: true },
        { name: "Theo R.", role: "Colorist", initials: "TR", accent: "amber" },
        { name: "Alex W.", role: "Producer", initials: "AW", accent: "teal" },
      ].map((m, i, arr) => (
        <div key={m.name} style={{
          display: "flex", alignItems: "center", gap: 14,
          padding: "16px 20px",
          borderBottom: i === arr.length - 1 ? "none" : "1px solid rgba(8,12,16,0.05)",
        }}>
          <Avatar initials={m.initials} accent={m.accent} size={40} />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: 500, color: "var(--ink)" }}>
              {m.name}
              {m.primary && <span style={{ marginLeft: 8, fontSize: 10.5, padding: "2px 7px", borderRadius: 99, background: "rgba(29,78,216,0.08)", color: "var(--harbor)", border: "1px solid rgba(29,78,216,0.20)", fontWeight: 500 }}>YOUR LEAD</span>}
            </div>
            <div style={{ fontSize: 12, color: "rgba(8,12,16,0.55)", marginTop: 2 }}>{m.role} · {access.studioName}</div>
          </div>
          {access.allowComments && <Button variant="ghost" light size="sm" icon={<window.Icon.Send size={12} />}>Message</Button>}
        </div>
      ))}
    </Card>
  </section>
);

const PortalStat = ({ label, value, emphasis = false, accent = "harbor" }) => {
  const tone = STATUS_TONES[accent];
  return (
    <div style={{
      padding: "12px 24px 12px 0", borderRight: "1px solid rgba(8,12,16,0.08)",
    }}>
      <div className="micro" style={{ color: "rgba(8,12,16,0.45)", marginBottom: 8 }}>{label}</div>
      <div className="serif" style={{
        fontSize: 44, fontWeight: 500, letterSpacing: "-0.025em", lineHeight: 1,
        color: emphasis ? tone.dot : "var(--ink)",
      }}>{value}</div>
    </div>
  );
};

const SectionHeaderLight = ({ eyebrow, title }) => (
  <div style={{ marginBottom: 20 }}>
    <div className="micro" style={{ color: "rgba(8,12,16,0.45)", marginBottom: 6 }}>{eyebrow}</div>
    <h2 className="serif" style={{
      fontFamily: "var(--serif)", fontSize: 28, fontWeight: 500,
      letterSpacing: "-0.015em", margin: 0,
    }}>{title}</h2>
  </div>
);

const ClientReviewCard = ({ project, version, note, from, when, accent, ago }) => {
  const tone = STATUS_TONES[accent];
  return (
    <Card light style={{ padding: 0, overflow: "hidden" }}>
      <div style={{
        position: "relative", aspectRatio: "16/8",
        background: `linear-gradient(135deg, var(--ink), ${tone.bg})`,
      }}>
        <svg width="100%" height="100%" viewBox="0 0 320 160" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, opacity: 0.18 }}>
          {Array.from({ length: 12 }).map((_, i) => {
            const y = 8 + i * 14;
            return <path key={i} d={`M -10 ${y} Q 80 ${y - 4} 160 ${y} T 340 ${y}`} stroke="white" fill="none" strokeWidth="0.5" />;
          })}
        </svg>
        <div style={{
          position: "absolute", inset: 0,
          display: "flex", alignItems: "center", justifyContent: "center",
        }}>
          <div style={{
            width: 52, height: 52, borderRadius: 99,
            background: "rgba(0,0,0,0.4)", backdropFilter: "blur(8px)",
            border: "1px solid rgba(255,255,255,0.16)",
            display: "flex", alignItems: "center", justifyContent: "center", color: "white",
          }}><window.Icon.Play size={18} /></div>
        </div>
        <div style={{
          position: "absolute", top: 14, left: 14,
          padding: "3px 10px", borderRadius: 99,
          background: "rgba(0,0,0,0.4)", border: "1px solid rgba(255,255,255,0.16)",
          color: "white", fontSize: 11, fontWeight: 500,
        }}>{ago}</div>
      </div>
      <div style={{ padding: 20 }}>
        <div style={{ fontSize: 11, color: "rgba(8,12,16,0.55)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{project}</div>
        <div className="serif" style={{ fontSize: 22, fontWeight: 500, letterSpacing: "-0.01em", marginTop: 4 }}>{version}</div>
        <div style={{ fontSize: 13.5, color: "rgba(8,12,16,0.62)", lineHeight: 1.55, marginTop: 10 }}>{note}</div>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 16, gap: 10 }}>
          <div style={{ fontSize: 11.5, color: "rgba(8,12,16,0.55)", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis" }}>{from} · {when}</div>
          <Button variant="secondary" light size="sm" iconRight={<window.Icon.Arrow size={12} />}>Open</Button>
        </div>
      </div>
    </Card>
  );
};

const PortalProjectRow = ({ project }) => {
  const tone = STATUS_TONES[project.accent];
  return (
    <Card className="hd-portal-project-card" light hover style={{ padding: 0, overflow: "hidden" }}>
      <div className="hd-row-light hd-portal-project-row" style={{ display: "grid", gridTemplateColumns: "88px minmax(0,1fr) auto", gap: 16, alignItems: "center", padding: 16 }}>
        <div className="hd-portal-project-thumb" style={{
          width: 88, height: 58, borderRadius: 8,
          background: `linear-gradient(135deg, var(--ink), ${tone.bg})`,
          display: "flex", alignItems: "center", justifyContent: "center", color: "white",
        }}><window.Icon.Film size={14} /></div>
        <div className="hd-portal-project-main" style={{ minWidth: 0 }}>
          <div className="hd-portal-project-title" style={{ fontSize: 14.5, fontWeight: 500, color: "var(--ink)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{project.name}</div>
          <div style={{ fontSize: 11.5, color: "rgba(8,12,16,0.55)", marginTop: 2 }}>{project.phase}</div>
          <div className="hd-portal-project-progress" style={{ marginTop: 12 }}>
            <div style={{ fontSize: 10.5, color: "rgba(8,12,16,0.55)", marginBottom: 4 }}>{project.progress}% complete</div>
            <div style={{ height: 4, background: "rgba(8,12,16,0.08)", borderRadius: 99, overflow: "hidden" }}>
              <div style={{ width: `${project.progress}%`, height: "100%", background: tone.dot, borderRadius: 99 }} />
            </div>
          </div>
        </div>
        <div className="hd-portal-project-side" style={{ display: "flex", alignItems: "center", gap: 18 }}>
          <StatusBadge status={project.status} size="sm" />
          <div style={{ fontSize: 12, color: "rgba(8,12,16,0.62)", textAlign: "right", minWidth: 72 }}>
            <div style={{ fontWeight: 500, color: "var(--ink)" }}>{project.due}</div>
            <div style={{ fontSize: 11, marginTop: 2 }}>{project.dueIn === "Done" ? "Complete" : `in ${project.dueIn}`}</div>
          </div>
        </div>
      </div>
    </Card>
  );
};

// Add shake keyframe for passcode error
const portalStyleEl = document.createElement("style");
portalStyleEl.textContent = `
@keyframes hd-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
`;
document.head.appendChild(portalStyleEl);

window.PortalPage = PortalPage;