/* ============================================================
   PRIMITIVES — prompt row, section header, card chrome
   ============================================================ */

function PromptRow({ user = "yzenned", host = "portfolio", path = "~", cmd, flags = [], comment }) {
  return (
    <div className="prompt-row">
      <span className="user">{user}@{host}</span>
      <span style={{ color: "var(--fg-dim)" }}>:</span>
      <span style={{ color: "var(--amber)" }}>{path}</span>
      <span style={{ color: "var(--fg-dim)" }}>$</span>
      <span className="cmd">{cmd}</span>
      {flags.map((f, i) => <span key={i} className="flag">{f}</span>)}
      {comment && <span className="comment"># {comment}</span>}
    </div>
  );
}

function SectionHeader({ hash, title, subtitle }) {
  const [ref, inView] = useInView();
  const scrambled = useScramble(title, inView, 1.4);
  return (
    <div ref={ref}>
      <h2 className="section-title scramble">
        <span className="hash">{hash}</span>
        {inView ? scrambled || title : title}
      </h2>
      {subtitle && <div className="section-subtitle">{subtitle}</div>}
    </div>
  );
}

function TopBar() {
  const [time, setTime] = useState(() => new Date());
  useEffect(() => {
    const t = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(t);
  }, []);
  const germanTime = new Intl.DateTimeFormat("en-GB", {
    timeZone: "Europe/Berlin",
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
    hour12: false,
  }).format(time);
  return (
    <div className="topbar">
      <div className="dots">
        <span className="dot r"></span>
        <span className="dot y"></span>
        <span className="dot g"></span>
      </div>
      <span style={{ marginLeft: 8 }}>yzenned — zsh —</span>
      <span className="path">
        <span className="sep">~/</span>
        <span className="cur">portfolio</span>
      </span>
      <div className="spacer" />
      <div className="status">
        <div className="item"><span className="pulse" /> online</div>
        <div className="item" style={{ color: "var(--fg-faint)" }}>{germanTime} Germany</div>
      </div>
    </div>
  );
}

Object.assign(window, { PromptRow, SectionHeader, TopBar });