// Shared visual components

const Eyebrow = ({ children, color }) => (
  <span className="eyebrow" style={color ? { color } : null}>{children}</span>
);

const StatusPill = ({ children = "Available — June 2026" }) => (
  <span className="status-pill">
    <span className="status-dot"></span>
    {children}
  </span>
);

const Btn = ({ kind = "primary", children, href = "#", onClick, arrow, className = "", target, rel }) => {
  const isExternal = /^(https?:|mailto:|tel:)/i.test(href);
  const isHttp = /^https?:\/\//i.test(href);
  const t = target || (isExternal ? "_blank" : undefined);
  const r = rel || (isHttp ? "noreferrer noopener" : undefined);
  return (
    <a className={`btn btn-${kind}${className ? " " + className : ""}`} href={href} onClick={onClick} target={t} rel={r}>
      {children}
      {arrow && <span className="btn-arrow">↗</span>}
    </a>
  );
};

const Signature = () => (
  <span className="signature" aria-label="Mahamud Hasan Rashel signature">
    <svg viewBox="0 0 360 90" width="240" height="60" xmlns="http://www.w3.org/2000/svg">
      <path d="M 8 60 C 14 30, 24 18, 36 22 C 46 26, 38 50, 28 54 C 22 56, 24 48, 32 44 C 44 40, 56 56, 64 48 C 72 40, 70 28, 78 30 C 84 32, 80 56, 88 54 C 96 52, 100 28, 110 32 C 118 36, 110 56, 118 56 C 128 56, 134 36, 144 38 C 152 40, 148 58, 156 56 C 168 54, 174 28, 188 36 C 196 42, 184 58, 192 60 C 204 62, 220 38, 234 42 C 244 46, 230 60, 240 62 C 256 64, 274 40, 286 46 C 294 50, 282 64, 290 64 C 304 64, 322 48, 340 56" />
    </svg>
    <span className="signature-meta">Mahamud Hasan Rashel · Yeti Inc.</span>
  </span>
);

const Note = ({ style, children }) => (
  <div className="note" style={style}>{children}</div>
);

// ───── Visual placeholders ─────

const BrowserPlaceholder = () => (
  <div className="browser-frame">
    <div className="browser-bar">
      <div className="dots"><span></span><span></span><span></span></div>
      <div className="url">rashel.cv/work/checkout-flow</div>
    </div>
    <div className="browser-body">
      <div className="browser-side">
        <i></i><i></i><i></i><i></i><i></i>
      </div>
      <div className="browser-main">
        <div className="bm-row short"></div>
        <div className="bm-row long"></div>
        <div className="bm-row med"></div>
        <div className="bm-cards">
          <div className="bm-card"><span></span></div>
          <div className="bm-card"><span></span></div>
          <div className="bm-card"><span></span></div>
        </div>
      </div>
    </div>
  </div>
);

const PhonePlaceholder = () => (
  <div className="phone-stack">
    <div className="phone-back"></div>
    <div className="phone">
      <div className="phone-screen">
        <div className="ps-row ps-title"></div>
        <div className="ps-row" style={{width: '85%'}}></div>
        <div className="ps-row" style={{width: '70%'}}></div>
        <div className="ps-grid">
          <div className="ps-card"></div>
          <div className="ps-card"></div>
          <div className="ps-card"></div>
          <div className="ps-card"></div>
        </div>
      </div>
    </div>
  </div>
);

const AICanvas = () => (
  <div className="ai-canvas">
    <div className="ai-prompt">
      <span className="who">User</span>
      <span className="what">Generate a weekly recap from the team's activity logs.</span>
    </div>
    <div className="ai-prompt">
      <span className="who">Agent</span>
      <span className="what">
        Pulled 47 commits across 6 repos. Drafting a recap grouped by project — surfacing the checkout fix and the migration to Postgres 16 first
        <span className="ai-cursor"></span>
      </span>
    </div>
  </div>
);

const DeployCanvas = () => (
  <div className="deploy-canvas">
    <Eyebrow color="var(--color-rust)">CI · pipeline</Eyebrow>
    <div className="pipe">
      <div className="pipe-step done">✓ install</div>
      <div className="pipe-step done">✓ test</div>
      <div className="pipe-step done">✓ build</div>
      <div className="pipe-step running">→ deploy</div>
    </div>
    <div className="deploy-log">
      <div><span className="ok">✓</span> Built in 24.3s — 0 errors</div>
      <div><span className="ok">✓</span> 312 unit tests passed</div>
      <div><span className="warn">!</span> Bundle 318kb (gzip) · -8% vs main</div>
      <div>Pushing to <span className="url">rashel.cv</span> via Vercel</div>
    </div>
  </div>
);

Object.assign(window, {
  Eyebrow, StatusPill, Btn, Signature, Note,
  BrowserPlaceholder, PhonePlaceholder, AICanvas, DeployCanvas,
});