/* Hero preview window — chrome with traffic lights, sidebar, profile */

function SidebarIcon({ d, active }) {
  return (
    <div style={{
      width: 32, height: 32, borderRadius: 7,
      display: "grid", placeItems: "center",
      background: active ? "var(--accent-tint-2)" : "transparent",
      color: active ? "var(--accent-ink)" : "var(--mute)",
      cursor: "pointer",
    }}>
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
        {d}
      </svg>
    </div>
  );
}

const ICONS = {
  home: <><path d="M3 11l9-7 9 7v9a2 2 0 0 1-2 2h-4v-6h-6v6H5a2 2 0 0 1-2-2z"/></>,
  plus: <><path d="M12 5v14M5 12h14"/></>,
  clock: <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
  bookmark: <><path d="M6 3h12v18l-6-4-6 4z"/></>,
  upload: <><path d="M12 19V5M5 12l7-7 7 7"/></>,
  help: <><circle cx="12" cy="12" r="9"/><path d="M9.5 9a2.5 2.5 0 0 1 5 0c0 1.8-2.5 2-2.5 4"/><path d="M12 17h0"/></>,
  gear: <><circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 0 0-.1-1.2l2-1.5-2-3.4-2.3 1a7 7 0 0 0-2-1.2L14 3h-4l-.6 2.6a7 7 0 0 0-2 1.2l-2.3-1-2 3.4 2 1.5a7 7 0 0 0 0 2.4l-2 1.5 2 3.4 2.3-1a7 7 0 0 0 2 1.2L10 21h4l.6-2.6a7 7 0 0 0 2-1.2l2.3 1 2-3.4-2-1.5c.1-.4.1-.8.1-1.3z"/></>,
  out: <><path d="M10 17l-5-5 5-5M5 12h12M16 21h3a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-3"/></>,
};

function Sidebar() {
  return (
    <div style={{
      width: 48, borderRight: "1px solid var(--line)",
      display: "flex", flexDirection: "column", alignItems: "center",
      padding: "12px 0", gap: 4, background: "var(--paper)",
    }}>
      <div style={{ padding: 4 }}><Mark size={20} /></div>
      <div style={{ height: 12 }} />
      <SidebarIcon d={ICONS.plus} active />
      <SidebarIcon d={ICONS.clock} />
      <SidebarIcon d={ICONS.bookmark} />
      <SidebarIcon d={ICONS.upload} />
      <SidebarIcon d={ICONS.help} />
      <SidebarIcon d={ICONS.gear} />
      <div style={{ flex: 1 }} />
      <SidebarIcon d={ICONS.out} />
    </div>
  );
}

function ChromeBar({ path = "activus / profile" }) {
  return (
    <div style={{
      height: 34, background: "var(--paper)", borderBottom: "1px solid var(--line)",
      display: "flex", alignItems: "center", padding: "0 14px", gap: 10,
    }}>
      <div style={{ display: "flex", gap: 6 }}>
        <span style={{ width: 11, height: 11, borderRadius: "50%", background: "#E8C4C4", border: "1px solid #D9A9A9" }} />
        <span style={{ width: 11, height: 11, borderRadius: "50%", background: "#E8DCB8", border: "1px solid #D9C892" }} />
        <span style={{ width: 11, height: 11, borderRadius: "50%", background: "#C4DCB8", border: "1px solid #A5C892" }} />
      </div>
      <div className="mono" style={{ fontSize: 12, color: "var(--mute)", marginLeft: 8 }}>{path}</div>
      <div style={{ flex: 1 }} />
      <div className="mono" style={{ fontSize: 11, color: "var(--mute)", display: "flex", alignItems: "center", gap: 6 }}>
        <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--accent)" }} />
        client view · activusai.com/sarahchen
      </div>
    </div>
  );
}

/* ---------- The profile itself ---------- */
function AgentAvatar({ size = 56 }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: 10, flexShrink: 0,
      background: "linear-gradient(135deg, var(--accent-tint-2), var(--accent-tint))",
      display: "grid", placeItems: "center",
      color: "var(--accent-ink)",
      fontFamily: "Prompt, sans-serif", fontSize: size * 0.5,
      border: "1px solid var(--line)",
    }}>S</div>
  );
}

function VerifiedPill() {
  return (
    <span style={{
      fontFamily: "Prompt, sans-serif",
      fontSize: 11, fontWeight: 600, letterSpacing: "0.02em",
      color: "var(--paper)",
      background: "var(--accent-ink)",
      padding: "5px 10px", borderRadius: 4,
      display: "inline-flex", alignItems: "center", gap: 5,
      textTransform: "uppercase",
    }}>
      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M5 12l5 5L20 7"/></svg>
      Verified activity
    </span>
  );
}

function StatBlock({ n, label, sub }) {
  return (
    <div>
      <div style={{ fontFamily: "Prompt, sans-serif", fontSize: 22, lineHeight: 1, color: "var(--ink)" }}>{n}</div>
      <div className="mono" style={{ fontSize: 9, color: "var(--mute)", marginTop: 3, letterSpacing: "0.04em" }}>{label}</div>
      {sub && <div className="mono" style={{ fontSize: 9, color: "var(--accent-ink)", marginTop: 1 }}>{sub}</div>}
    </div>
  );
}

function Tag({ children, tone = "neutral" }) {
  const toneMap = {
    neutral: { bg: "var(--mute)", fg: "var(--paper)" },
    accent: { bg: "var(--accent-ink)", fg: "var(--paper)" },
    precon: { bg: "var(--precon)", fg: "var(--paper)" },
    resale: { bg: "var(--resale)", fg: "var(--paper)" },
    luxury: { bg: "var(--luxury)", fg: "var(--paper)" },
    investor:{ bg: "var(--investor)", fg: "var(--paper)" },
  };
  const styles = toneMap[tone] || toneMap.neutral;
  return (
    <span style={{
      fontFamily: "Prompt, sans-serif",
      fontSize: 12, fontWeight: 600, letterSpacing: "0.01em",
      padding: "6px 11px", borderRadius: 4,
      background: styles.bg, color: styles.fg,
    }}>{children}</span>
  );
}

function SectionLabel({ children, right }) {
  return (
    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 10 }}>
      <div className="mono" style={{ fontSize: 10, color: "var(--mute)", letterSpacing: "0.08em", textTransform: "uppercase" }}>{children}</div>
      {right}
    </div>
  );
}

function BuilderRow({ name, domain, tag, count }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 0", borderBottom: "1px dashed var(--line)" }}>
      <div style={{ width: 22, height: 22, borderRadius: 5, background: "var(--paper-2)", display: "grid", placeItems: "center", fontFamily: "JetBrains Mono", fontSize: 10, color: "var(--ink-2)" }}>
        {name[0]}
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 13, color: "var(--ink)" }}>{name}</div>
        <div className="mono" style={{ fontSize: 10, color: "var(--mute)" }}>{domain}</div>
      </div>
      <Tag tone="accent">{tag}</Tag>
      <div className="mono" style={{ fontSize: 11, color: "var(--ink-2)", width: 28, textAlign: "right" }}>{count}</div>
    </div>
  );
}

function SpecializationBar() {
  const segs = [
    ["precon", 62, "Pre-con"],
    ["resale", 22, "Re-sale"],
    ["luxury", 11, "Luxury"],
    ["investor", 5, "Investor"],
  ];
  return (
    <div>
      <div style={{ display: "flex", height: 10, borderRadius: 5, overflow: "hidden", border: "1px solid var(--line)" }}>
        {segs.map(([k, pct]) => (
          <div key={k} style={{ width: `${pct}%`, background: `var(--${k})` }} title={`${k} ${pct}%`} />
        ))}
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", marginTop: 8 }}>
        {segs.map(([k, pct, label]) => (
          <div key={k} style={{ display: "flex", alignItems: "center", gap: 6 }}>
            <span style={{ width: 8, height: 8, borderRadius: 2, background: `var(--${k})` }} />
            <span className="mono" style={{ fontSize: 11, color: "var(--ink-2)" }}>{label}</span>
            <span className="mono" style={{ fontSize: 11, color: "var(--mute)" }}>{pct}%</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function ProfilePanel({ gridStyle, showDealColors }) {
  return (
    <div className="preview-profile" style={{
      flex: 1, padding: "14px 20px",
      display: "flex", flexDirection: "column", gap: 10,
    }}>
      {/* Identity row */}
      <div style={{ display: "flex", gap: 14, alignItems: "center" }}>
        <AgentAvatar size={48} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
            <div style={{ fontFamily: "Prompt, sans-serif", fontSize: 22, lineHeight: 1.05 }}>Sarah Chen</div>
            <VerifiedPill />
          </div>
          <div className="mono" style={{ fontSize: 11, color: "var(--mute)", marginTop: 2 }}>
            @sarahchen · Toronto · GTA + Mississauga · 7 yrs · Pre-construction specialist · <b style={{ color: "var(--accent-ink)" }}>14 GTA builders</b>
          </div>
        </div>
        <div style={{ display: "flex", gap: 6 }} className="hide-sm">
          <button className="mono" style={{ ...btnGhost, padding: "4px 9px", fontSize: 10 }}>download pdf</button>
          <button className="mono" style={{ ...btnGhost, padding: "4px 9px", fontSize: 10 }}>share</button>
        </div>
      </div>

      {/* Stats — compact */}
      <div className="r-grid-4 stats-compact" style={{ borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)", padding: "10px 0", gap: 12 }}>
        <StatBlock n="342" label="TOURS · 12MO" sub="↑ 18% vs prior" />
        <StatBlock n="47" label="CONSULTATIONS · 12MO" />
        <StatBlock n="&lt; 12m" label="AVG RESPONSE" sub="business hours" />
        <StatBlock n="68%" label="REPEAT + REFERRAL" sub="top quartile" />
      </div>

      {/* Specialization bar */}
      <div>
        <SectionLabel right={<span className="mono" style={{ fontSize: 10, color: "var(--mute)" }}>last 12 months</span>}>
          Specialization mix
        </SectionLabel>
        <SpecializationBar />
      </div>

      {/* Activity grid */}
      <div>
        <SectionLabel right={
          <span className="mono" style={{ fontSize: 11, color: "var(--ink-2)" }}>
            <b style={{ color: "var(--ink)" }}>487</b> verified activities in the last year
          </span>
        }>
          Verified activity
        </SectionLabel>
        <ActivityGrid style={gridStyle} showType={showDealColors} />
      </div>

      {/* Bottom row: builders + tags */}
      {/* Bottom row: areas served + client fit — client-facing only */}
      <div className="r-grid-2" style={{ gap: 20 }}>
        <div>
          <SectionLabel>Areas served</SectionLabel>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
            <Tag tone="accent">Downtown Toronto</Tag>
            <Tag tone="accent">Yorkville</Tag>
            <Tag tone="accent">Liberty Village</Tag>
            <Tag>Etobicoke</Tag>
            <Tag>North York</Tag>
            <Tag>Mississauga · Port Credit</Tag>
          </div>
          <div className="mono" style={{ fontSize: 9, color: "var(--mute)", marginTop: 6 }}>
            ranked by tour + consultation density · last 12 months
          </div>
        </div>
        <div>
          <SectionLabel>Client fit</SectionLabel>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
            <Tag tone="accent">first-time buyer</Tag>
            <Tag tone="accent">pre-construction access</Tag>
            <Tag tone="resale">downsizer · condo</Tag>
            <Tag tone="luxury">$1.2M–$2.5M</Tag>
            <Tag tone="investor">assignment</Tag>
            <Tag>mandarin · english</Tag>
          </div>
          <div className="mono" style={{ fontSize: 9, color: "var(--mute)", marginTop: 6 }}>
            inferred from 14,230 calendar + email events · confidence 0.94
          </div>
        </div>
      </div>
    </div>
  );
}

function PreviewWindow({ gridStyle, showDealColors }) {
  return (
    <div className="preview-wrap" style={{
      background: "var(--paper)",
      borderRadius: 14,
      border: "1px solid var(--line-2)",
      boxShadow: "0 30px 60px -20px rgba(26,23,20,0.18), 0 2px 6px rgba(26,23,20,0.04)",
      overflow: "hidden",
      display: "flex", flexDirection: "column",
      width: "100%", maxWidth: 1120, margin: "0 auto",
    }}>
      <ChromeBar />
      <div style={{ display: "flex" }}>
        <ProfilePanel gridStyle={gridStyle} showDealColors={showDealColors} />
      </div>
    </div>
  );
}

Object.assign(window, { PreviewWindow, ProfilePanel, Sidebar, ChromeBar, SectionLabel, Tag, StatBlock, AgentAvatar });