// Mini interactive org chart — used in hero and product showcase.
// Cards mirror the real app: avatar circle, name + email + title (green), a few field rows.

const PEOPLE = [
  { id: "ceo", name: "Maren Holloway", title: "Chief Executive Officer", email: "maren.holloway@orgplease.example", initials: "MH", dept: "Executive Office", level: "New York",     count: 50, x: 0, y: 0, parent: null },
  { id: "coo", name: "Daniel Okafor",  title: "Chief Operating Officer",  email: "daniel.okafor@orgplease.example",  initials: "DO", dept: "Operations",        level: "Toronto",      count: 10, x: -560, y: 1, parent: "ceo" },
  { id: "cto", name: "Priya Raman",    title: "Chief Technology Officer", email: "priya.raman@orgplease.example",    initials: "PR", dept: "Product & Eng",    level: "Los Angeles",  count: 25, x: -180, y: 1, parent: "ceo" },
  { id: "cfo", name: "Hannah Becker",  title: "Chief Financial Officer",  email: "hannah.becker@orgplease.example",  initials: "HB", dept: "Finance & Legal",  level: "Paris",        count: 5,  x:  200, y: 1, parent: "ceo" },
  { id: "cpo", name: "Jules Tanaka",   title: "Chief People Officer",     email: "jules.tanaka@orgplease.example",   initials: "JT", dept: "People & Culture", level: "Tokyo",        count: 6,  x:  580, y: 1, parent: "ceo" },
];

function MiniCard({ p, focused, onFocus, compact }) {
  const accent = focused ? "var(--accent)" : "var(--ink)";
  return (
    <div
      onMouseEnter={() => onFocus && onFocus(p.id)}
      style={{
        width: compact ? 280 : 320,
        background: "#fff",
        border: focused ? "1.5px solid var(--accent)" : "1px solid var(--line)",
        borderRadius: 14,
        boxShadow: focused
          ? "0 24px 60px -28px rgba(27,122,67,.45), 0 1px 0 rgba(14,15,12,.04)"
          : "0 12px 32px -22px rgba(14,15,12,.18), 0 1px 0 rgba(14,15,12,.04)",
        overflow: "hidden",
        transition: "all .25s ease",
        transform: focused ? "translateY(-2px)" : "translateY(0)",
      }}
    >
      {/* header */}
      <div style={{ padding: "14px 14px 10px", display: "flex", gap: 12, alignItems: "flex-start",
                    background: focused ? "linear-gradient(180deg, var(--accent-soft), #fff)" : "#fff" }}>
        <div style={{
          width: 38, height: 38, borderRadius: 999,
          background: focused ? "var(--accent)" : "#eef0e9",
          color: focused ? "#fff" : "#3c4a3c",
          display: "grid", placeItems: "center",
          fontWeight: 600, fontSize: 13, letterSpacing: ".02em",
          flexShrink: 0,
        }}>{p.initials}</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontWeight: 600, fontSize: 14.5, color: "var(--ink)", lineHeight: 1.2 }}>{p.name}</div>
          <div style={{ fontSize: 11.5, color: "var(--muted)", marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{p.email}</div>
          <div style={{ fontSize: 12.5, color: accent, marginTop: 4, fontWeight: 500 }}>{p.title}</div>
        </div>
      </div>

      {/* fields */}
      {!compact && (
        <div style={{ padding: "8px 14px 12px", borderTop: "1px solid var(--line-2)", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "10px 16px" }}>
          <Field label="Dept."  value={p.dept} />
          <Field label="City"   value={p.level} />
          <Field label="Empl#"  value={`P-${10000 + (p.id === "ceo" ? 1 : p.id === "coo" ? 2 : p.id === "cto" ? 3 : p.id === "cfo" ? 4 : 5)}`} />
        </div>
      )}

      {/* footer */}
      <div style={{ padding: "8px 14px", borderTop: "1px solid var(--line-2)",
                    display: "flex", justifyContent: "flex-end", alignItems: "center", background: "#fbfaf5" }}>
        <span className="mono" style={{ fontSize: 10.5, color: "var(--muted)", display: "inline-flex", alignItems: "center", gap: 6 }}>
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="9" cy="8" r="3"/><path d="M3 19c.6-3 3-5 6-5s5.4 2 6 5"/></svg>
          {p.count}
        </span>
      </div>
    </div>
  );
}

function Field({ label, value }) {
  return (
    <div style={{ minWidth: 0 }}>
      <div className="mono" style={{ fontSize: 9, letterSpacing: ".18em", color: "var(--muted)", textTransform: "uppercase" }}>{label}</div>
      <div style={{ fontSize: 12.5, color: "var(--ink-2)", marginTop: 2, fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{value}</div>
    </div>
  );
}

// List-view row — flat, horizontal, single-line
function ListRow({ p, focused, onFocus }) {
  return (
    <div
      onMouseEnter={() => onFocus && onFocus(p.id)}
      style={{
        display: "flex", alignItems: "center", gap: 14,
        padding: "10px 16px",
        background: focused ? "var(--accent-softer)" : "#fff",
        border: "1px solid " + (focused ? "var(--accent)" : "var(--line)"),
        borderRadius: 10,
        transition: "all .2s ease",
        cursor: "default",
      }}
    >
      <div style={{
        width: 32, height: 32, borderRadius: 999, flexShrink: 0,
        background: focused ? "var(--accent)" : "#eef0e9",
        color: focused ? "#fff" : "#3c4a3c",
        display: "grid", placeItems: "center",
        fontWeight: 600, fontSize: 12, letterSpacing: ".02em",
      }}>{p.initials}</div>

      <div style={{ flex: 1, minWidth: 0, display: "flex", alignItems: "center", gap: 0 }}>
        <div style={{ fontWeight: 600, fontSize: 13.5, color: "var(--ink)", width: 150, flexShrink: 0 }}>{p.name}</div>
        <div style={{ fontSize: 12.5, color: focused ? "var(--accent)" : "var(--muted)", fontWeight: 500, width: 210, flexShrink: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{p.title}</div>
        <div style={{ fontSize: 12, color: "var(--muted)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1 }}>{p.dept}</div>
      </div>

      <span className="mono" style={{ fontSize: 10.5, color: "var(--muted)", flexShrink: 0, display: "inline-flex", alignItems: "center", gap: 5 }}>
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="9" cy="8" r="3"/><path d="M3 19c.6-3 3-5 6-5s5.4 2 6 5"/></svg>
        {p.count}
      </span>
    </div>
  );
}

// Hero chart: pannable canvas with a CEO + 4 reports, building in.
function HeroOrgChart({ density = "editorial" }) {
  const [hovered, setHovered] = React.useState("ceo");
  const [built, setBuilt] = React.useState(0);
  const [view, setView] = React.useState("standard"); // Standard | Compact | List

  React.useEffect(() => {
    const ids = ["ceo", "coo", "cto", "cfo", "cpo"];
    let i = 0;
    const tick = () => {
      i++;
      setBuilt(i);
      if (i < ids.length) setTimeout(tick, 220);
    };
    setTimeout(tick, 350);
  }, []);

  const compact = view === "compact";
  const cardW = compact ? 280 : 320;
  const reports = PEOPLE.filter(p => p.parent === "ceo");
  const gap = 16;
  const rowGap = 56;
  const rowWidth = reports.length * cardW + (reports.length - 1) * gap;
  const reportCentres = reports.map((_, i) => {
    const left = i * (cardW + gap) + cardW / 2;
    return left - rowWidth / 2;
  });

  const chartHeight = view === "list" ? 380 : (compact ? 460 : 540);

  return (
    <div style={{
      position: "relative",
      width: "100%",
      height: chartHeight,
      background:
        "radial-gradient(1200px 400px at 50% 0%, rgba(27,122,67,.06), transparent 60%)," +
        "linear-gradient(180deg, var(--bg-2), var(--bg))",
      border: "1px solid var(--line)",
      borderRadius: 24,
      overflow: "hidden",
      transition: "height .35s cubic-bezier(.16,1,.3,1)",
    }}>
      {/* dotted grid */}
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: "radial-gradient(rgba(14,15,12,.08) 1px, transparent 1px)",
        backgroundSize: "22px 22px",
        maskImage: "radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 90%)",
        WebkitMaskImage: "radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 90%)",
      }}/>

      {/* toolbar — Standard / Compact / List */}
      <div className="no-print" style={{ position: "absolute", top: 14, left: 14, display: "flex", gap: 6, zIndex: 4 }}>
        {["Standard", "Compact", "List"].map((v) => {
          const key = v.toLowerCase();
          const active = view === key;
          return (
            <button key={v}
              onClick={() => setView(key)}
              style={{
                padding: "7px 14px", fontSize: 12, fontWeight: 500,
                background: active ? "var(--ink)" : "#fff",
                color: active ? "#fff" : "var(--ink-2)",
                border: "1px solid " + (active ? "var(--ink)" : "var(--line)"),
                borderRadius: 999, cursor: "pointer",
                fontFamily: "inherit",
                transition: "background .15s ease, color .15s ease, border-color .15s ease",
              }}>{v}</button>
          );
        })}
      </div>

      {/* right controls */}
      <div className="no-print" style={{ position: "absolute", top: 14, right: 14, display: "flex", gap: 6, zIndex: 4 }}>
        <span style={{ padding: "7px 14px", fontSize: 12, fontWeight: 500,
                       background: "#fff", border: "1px solid var(--line)", borderRadius: 999, color: "var(--muted)" }}>
          Level 2 of 7
        </span>
        <button style={{ padding: "7px 14px", fontSize: 12, fontWeight: 500, background: "var(--accent)", color: "#fff", border: 0, borderRadius: 999, cursor: "pointer", fontFamily: "inherit" }}>
          ↓ Export
        </button>
      </div>

      {/* ── LIST VIEW ── */}
      {view === "list" && (
        <div style={{
          position: "absolute", inset: 0,
          display: "flex", alignItems: "center", justifyContent: "center",
          padding: "60px 32px 24px",
        }}>
          <div style={{ width: "100%", maxWidth: 680, display: "flex", flexDirection: "column", gap: 8 }}>
            {PEOPLE.map((p, idx) => (
              <div key={p.id} style={{
                opacity: built >= idx + 1 ? 1 : 0,
                transform: built >= idx + 1 ? "translateY(0)" : "translateY(8px)",
                transition: "opacity .3s ease, transform .3s ease",
              }}>
                <ListRow p={p} focused={hovered === p.id} onFocus={setHovered} />
              </div>
            ))}
          </div>
        </div>
      )}

      {/* ── TREE VIEW (Standard / Compact) ── */}
      {view !== "list" && (
        <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column",
                       alignItems: "center", justifyContent: "center", padding: "60px 24px 24px" }}>

          {/* CEO */}
          <div style={{ opacity: built >= 1 ? 1 : 0, transition: "opacity .35s ease" }}>
            <MiniCard p={PEOPLE[0]} focused={hovered === "ceo"} onFocus={setHovered} compact={compact} />
          </div>

          {/* Connector zone */}
          <div style={{ height: rowGap, width: rowWidth, position: "relative", flexShrink: 0 }}>
            <svg width={rowWidth} height={rowGap} viewBox={`0 0 ${rowWidth} ${rowGap}`}
                 style={{ position: "absolute", inset: 0, pointerEvents: "none", overflow: "visible" }}>
              {reports.map((r, idx) => {
                const cx = rowWidth / 2 + reportCentres[idx];
                const startX = rowWidth / 2;
                const startY = 0;
                const endY = rowGap;
                const midY = rowGap / 2;
                const d = `M ${startX} ${startY} V ${midY} H ${cx} V ${endY}`;
                return (
                  <path key={r.id} d={d}
                    stroke={hovered === r.id ? "var(--accent)" : "rgba(14,20,16,.22)"}
                    strokeWidth={hovered === r.id ? 1.8 : 1.1}
                    fill="none"
                    style={{
                      transition: "stroke .2s ease, stroke-width .2s ease",
                      strokeDasharray: 600,
                      strokeDashoffset: built >= idx + 2 ? 0 : 600,
                      transitionProperty: "stroke, stroke-width, stroke-dashoffset",
                      transitionDuration: ".2s, .2s, .55s",
                    }}/>
                );
              })}
              <circle cx={rowWidth / 2} cy={0} r="8" fill="#fff" stroke="rgba(14,20,16,.22)"/>
              <path d={`M ${rowWidth/2 - 4} ${-1} l 4 -4 l 4 4`}
                    stroke="var(--ink)" strokeWidth="1.4" fill="none"
                    strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>

          {/* Reports row */}
          <div style={{ display: "flex", gap: gap, flexShrink: 0 }}>
            {reports.map((r, idx) => (
              <div key={r.id} style={{
                opacity: built >= idx + 2 ? 1 : 0,
                transition: "opacity .35s ease",
              }}>
                <MiniCard p={r} focused={hovered === r.id} onFocus={setHovered} compact={compact} />
              </div>
            ))}
          </div>
        </div>
      )}

      {/* corner stamp */}
      <div className="no-print" style={{
        position: "absolute", bottom: 14, right: 16,
        fontSize: 12, fontWeight: 500, color: "var(--accent)",
        display: "inline-flex", alignItems: "center", gap: 8,
        background: "#fff", padding: "5px 12px", borderRadius: 999,
        border: "1px solid var(--line)", boxShadow: "0 4px 12px -8px rgba(14,20,16,.18)",
      }}>
        <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--accent)", boxShadow: "0 0 0 4px rgba(27,122,67,.18)" }}/>
        Live preview
      </div>
    </div>
  );
}

window.MiniCard = MiniCard;
window.HeroOrgChart = HeroOrgChart;
window.MINI_PEOPLE = PEOPLE;