// Direction A — Classic minimal (abdussalam.pk / current site feel)
// Off-white in light mode, warm charcoal in dark mode.

function useWindowWidth() {
  const [w, setW] = React.useState(() => typeof window !== 'undefined' ? window.innerWidth : 1280);
  React.useEffect(() => {
    const h = () => setW(window.innerWidth);
    window.addEventListener('resize', h, { passive: true });
    return () => window.removeEventListener('resize', h);
  }, []);
  return w;
}


const A_DARK = {
  bg: '#15130f',
  fg: '#ebe5d6',
  muted: 'rgba(235,229,214,0.52)',
  line: 'rgba(235,229,214,0.12)',
  accent: '#ebe5d6',
};

const A_FONT = '"Inter", -apple-system, BlinkMacSystemFont, sans-serif';

// Small arrow icon for external links (↗ style)
function ExtArrow({ size = 11, color = 'currentColor', hover = false }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color}
         strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
         style={{
           display: 'inline-block', verticalAlign: 'baseline', marginLeft: 4,
           opacity: hover ? 0.9 : 0.55,
           transform: hover ? 'rotate(45deg)' : 'rotate(0deg)',
           transition: 'transform .2s cubic-bezier(.2,.7,.3,1), opacity .18s',
         }}>
      <line x1="7" y1="17" x2="17" y2="7" />
      <polyline points="7 7 17 7 17 17" />
    </svg>
  );
}

// Nav link with underline-on-hover + rotating arrow
function NavLink({ href, target, rel, onClick, children, style }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a
      href={href}
      target={target}
      rel={rel}
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        color: 'inherit', display: 'inline-flex', alignItems: 'center', cursor: 'pointer',
        textDecoration: 'none',
        ...(style || {}),
      }}
    >
      <span style={{
        textDecoration: hover ? 'underline' : 'none',
        textUnderlineOffset: 4,
        textDecorationThickness: '1px',
      }}>{children}</span>
      <ExtArrow hover={hover} />
    </a>
  );
}

// 'Send email' link — href is assembled lazily, text never contains the address
function SendEmailLink({ style, label = 'Send email', withArrow = true, nav = false }) {
  const handleClick = (e) => {
    e.preventDefault();
    const u = ['derick','tsang','work'].join('');
    const d = ['gmail','com'].join('.');
    window.location.href = 'mailto:' + u + String.fromCharCode(64) + d;
  };
  if (nav) {
    return (
      <NavLink href="#" onClick={handleClick} style={style}>{label}</NavLink>
    );
  }
  const [hover, setHover] = React.useState(false);
  return (
    <a
      href="#" onClick={handleClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={style}
    >
      {label}{withArrow && <ExtArrow hover={hover} />}
    </a>
  );
}

// ---- Password gate ----
const GATE_KEY = 'derick-portfolio-unlocked';
const PASSWORDS = ['visier2026', 'portfolio'];

function isUnlocked() {
  try {
    return sessionStorage.getItem(GATE_KEY) === '1';
  } catch (e) { return false; }
}
function setUnlocked() {
  try {
    sessionStorage.setItem(GATE_KEY, '1');
  } catch (e) {}
}

function PasswordModal({ open, onClose, onUnlock, title, dest, colors }) {
  const [pw, setPw] = React.useState('');
  const [err, setErr] = React.useState('');
  const inputRef = React.useRef(null);

  React.useEffect(() => {
    if (open) {
      setPw(''); setErr('');
      const t = setTimeout(() => { if (inputRef.current) inputRef.current.focus(); }, 20);
      const onKey = (e) => { if (e.key === 'Escape') onClose(); };
      window.addEventListener('keydown', onKey);
      document.body.style.overflow = 'hidden';
      return () => {
        clearTimeout(t);
        window.removeEventListener('keydown', onKey);
        document.body.style.overflow = '';
      };
    }
  }, [open, onClose]);

  if (!open) return null;

  const submit = (e) => {
    e.preventDefault();
    const v = (pw || '').trim().toLowerCase();
    if (PASSWORDS.indexOf(v) !== -1) {
      setUnlocked();
      onUnlock();
    } else {
      setErr('Incorrect password. Try again.');
    }
  };

  const emailHref = () => {
    const u = ['derick','tsang','work'].join('');
    const d = ['gmail','com'].join('.');
    return 'mailto:' + u + String.fromCharCode(64) + d + '?subject=Case%20study%20access';
  };

  return (
    <div
      onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}
      style={{
        position: 'fixed', inset: 0, zIndex: 1000,
        background: 'rgba(0,0,0,0.45)',
        backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: 24,
        animation: 'gateFadeIn .18s ease-out',
      }}
    >
      <style>{`
        @keyframes gateFadeIn { from { opacity: 0 } to { opacity: 1 } }
        @keyframes gateSlideIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: translateY(0) } }
      `}</style>
      <div
        role="dialog" aria-modal="true"
        style={{
          background: colors.bg, color: colors.fg,
          width: '100%', maxWidth: 440, padding: '40px 36px 32px',
          border: `1px solid ${colors.line}`, borderRadius: 8,
          fontFamily: A_FONT,
          boxShadow: '0 24px 60px -12px rgba(0,0,0,0.35)',
          animation: 'gateSlideIn .22s ease-out',
        }}
      >
        <div style={{
          fontSize: 11, fontFamily: '"JetBrains Mono", ui-monospace, monospace',
          textTransform: 'uppercase', letterSpacing: 0.8,
          color: colors.muted, marginBottom: 18,
        }}>
          Protected case study
        </div>
        <div style={{
          fontSize: 26, fontWeight: 500, letterSpacing: -0.6, lineHeight: 1.15,
          marginBottom: 8, textWrap: 'balance',
        }}>
          {title}
        </div>
        <div style={{
          fontSize: 14, lineHeight: 1.55, color: colors.muted, marginBottom: 24, maxWidth: 360,
        }}>
          This case study is private. Enter the password to view, or email me to request access.
        </div>

        <form onSubmit={submit} style={{ display: 'flex', gap: 8, marginBottom: 10 }}>
          <input
            ref={inputRef}
            type="password"
            autoComplete="off"
            placeholder="Password"
            value={pw}
            onChange={(e) => { setPw(e.target.value); if (err) setErr(''); }}
            style={{
              flex: 1, padding: '11px 13px', fontSize: 14, fontFamily: 'inherit',
              color: colors.fg, background: 'transparent',
              border: `1px solid ${colors.line}`, borderRadius: 6, outline: 'none',
              letterSpacing: -0.1,
            }}
            onFocus={(e) => { e.target.style.borderColor = colors.fg; }}
            onBlur={(e) => { e.target.style.borderColor = colors.line; }}
          />
          <button type="submit" style={{
            padding: '11px 18px', fontSize: 13, fontFamily: 'inherit',
            fontWeight: 500, letterSpacing: -0.1,
            color: colors.bg, background: colors.fg,
            border: 'none', borderRadius: 6, cursor: 'pointer',
          }}>Enter</button>
        </form>
        <div style={{
          fontSize: 12, color: '#d7471b', minHeight: 18, marginBottom: 18,
          visibility: err ? 'visible' : 'hidden',
        }}>{err || 'placeholder'}</div>

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          fontSize: 12.5, color: colors.muted }}>
          <a href={emailHref()} style={{
            color: colors.muted, textDecoration: 'underline',
            textUnderlineOffset: 3, textDecorationThickness: 1,
          }}>Request access</a>
          <button onClick={onClose} style={{
            background: 'none', border: 'none', color: colors.muted, cursor: 'pointer',
            fontFamily: 'inherit', fontSize: 12.5, padding: 0,
            textDecoration: 'underline', textUnderlineOffset: 3, textDecorationThickness: 1,
          }}>Cancel</button>
        </div>
      </div>
    </div>
  );
}

function StickyNavA({ colors, linkStyle }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [overlayOpen, setOverlayOpen] = React.useState(false);
  const width = useWindowWidth();
  const isMobile = width <= 760;

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  React.useEffect(() => {
    if (!overlayOpen) document.body.style.overflow = '';
  }, [overlayOpen]);

  const rgbaBg = (hex, a) => {
    const h = hex.replace('#', '');
    const r = parseInt(h.substring(0, 2), 16);
    const g = parseInt(h.substring(2, 4), 16);
    const b = parseInt(h.substring(4, 6), 16);
    return `rgba(${r},${g},${b},${a})`;
  };

  const hPad = isMobile ? '24px' : '96px';

  return (
    <>
      <div style={{
        position: 'sticky', top: 0, zIndex: 50,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: scrolled ? `18px ${hPad}` : `28px ${hPad}`,
        background: scrolled ? rgbaBg(colors.bg, 0.78) : 'transparent',
        backdropFilter: scrolled ? 'saturate(1.4) blur(14px)' : 'none',
        WebkitBackdropFilter: scrolled ? 'saturate(1.4) blur(14px)' : 'none',
        borderBottom: `1px solid ${colors.line}`,
        transition: 'padding .22s ease, background .22s ease',
      }}>
        <div style={{ fontSize: 15, fontWeight: 500, letterSpacing: -0.1 }}>Derick Tsang</div>

        {isMobile ? (
          <button
            onClick={() => { setOverlayOpen(true); document.body.style.overflow = 'hidden'; }}
            style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 4, color: colors.fg }}
            aria-label="Menu"
          >
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
              <line x1="3" y1="6" x2="17" y2="6"/><line x1="3" y1="10" x2="17" y2="10"/><line x1="3" y1="14" x2="17" y2="14"/>
            </svg>
          </button>
        ) : (
          <div style={{ display: 'flex', gap: 28, fontSize: 14, alignItems: 'center' }}>
            <NavLink href="https://drive.google.com/file/d/1BuLcwWA5zEb9G2NmlxC7zvoHXLN2qDCN/view?usp=sharing" target="_blank" rel="noreferrer" style={linkStyle}>Resume</NavLink>
            <SendEmailLink style={linkStyle} label="Email" nav={true} />
            <NavLink href="https://www.linkedin.com/in/derick-tsang/" target="_blank" rel="noreferrer" style={linkStyle}>LinkedIn</NavLink>
          </div>
        )}
      </div>

      {overlayOpen && (
        <div style={{
          position: 'fixed', inset: 0, zIndex: 200,
          background: colors.bg, display: 'flex', flexDirection: 'column',
          justifyContent: 'center', padding: '40px 32px',
        }}>
          <button
            onClick={() => { setOverlayOpen(false); document.body.style.overflow = ''; }}
            style={{
              position: 'absolute', top: 20, right: 24,
              background: 'none', border: 'none', cursor: 'pointer',
              color: colors.fg, fontSize: 24, lineHeight: 1, padding: 8,
            }}
            aria-label="Close menu"
          >✕</button>
          {[
            { label: 'Resume', href: 'https://drive.google.com/file/d/1BuLcwWA5zEb9G2NmlxC7zvoHXLN2qDCN/view?usp=sharing', target: '_blank' },
            { label: 'Email', href: '#', isEmail: true },
            { label: 'LinkedIn', href: 'https://www.linkedin.com/in/derick-tsang/', target: '_blank' },
          ].map((item, i, arr) => (
            <a
              key={item.label}
              href={item.href}
              target={item.target}
              rel={item.target ? 'noreferrer' : undefined}
              onClick={item.isEmail ? (e) => {
                e.preventDefault();
                setOverlayOpen(false);
                document.body.style.overflow = '';
                const u = ['derick','tsang','work'].join('');
                const d = ['gmail','com'].join('.');
                window.location.href = 'mailto:' + u + String.fromCharCode(64) + d;
              } : () => { setOverlayOpen(false); document.body.style.overflow = ''; }}
              style={{
                fontSize: 32, fontWeight: 500, letterSpacing: -0.8,
                color: colors.fg, textDecoration: 'none', padding: '14px 0',
                borderBottom: `1px solid ${colors.line}`,
                borderTop: i === 0 ? `1px solid ${colors.line}` : 'none',
                display: 'block',
              }}
            >{item.label}</a>
          ))}
        </div>
      )}
    </>
  );
}

function PortfolioA() {
  const A_COLORS = A_DARK;
  const [hoverProj, setHoverProj] = React.useState(null);
  const [gate, setGate] = React.useState(null); // { title, href } when modal open
  const width = useWindowWidth();
  const isMobile = width <= 760;
  const hPad = isMobile ? 24 : 96;
  const linkStyle = { color: A_COLORS.fg, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', cursor: 'pointer' };

  const requestAccess = React.useCallback((title, href) => {
    if (isUnlocked()) { window.location.href = href; return; }
    setGate({ title, href });
  }, []);
  const closeGate = React.useCallback(() => setGate(null), []);
  const onUnlock = React.useCallback(() => {
    const href = gate && gate.href;
    setGate(null);
    if (href) window.location.href = href;
  }, [gate]);

  return (
    <div style={{
      width: '100%', minHeight: '100vh', background: A_COLORS.bg, color: A_COLORS.fg,
      fontFamily: A_FONT, fontFeatureSettings: '"ss01", "cv11"',
      position: 'relative',
    }}>
      {/* NAV */}
      <StickyNavA colors={A_COLORS} linkStyle={linkStyle} />

      {/* HERO */}
      <div style={{ padding: `${isMobile ? 80 : 140}px ${hPad}px ${isMobile ? 60 : 120}px`, maxWidth: 1100 }}>
        <h1 style={{
          fontSize: isMobile ? 36 : 64, lineHeight: 1.08, letterSpacing: isMobile ? -0.8 : -1.6, fontWeight: 500,
          margin: 0, textWrap: 'pretty',
        }}>
          I'm a product designer based in Vancouver. Most recently at Visier,
          designing <span style={{ fontStyle: 'italic', fontWeight: 400 }}>AI products</span> for enterprise teams.
        </h1>
      </div>

      {/* WORK */}
      <div style={{ padding: `0 ${hPad}px ${isMobile ? 60 : 80}px` }}>
        <div style={{
          display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
          paddingBottom: 20, borderBottom: `1px solid ${A_COLORS.line}`, marginBottom: 0,
        }}>
          <div style={{ fontSize: 13, color: A_COLORS.muted, letterSpacing: 0.2, textTransform: 'uppercase' }}>Selected work</div>
          <div style={{ fontSize: 13, color: A_COLORS.muted, fontFamily: '"JetBrains Mono", ui-monospace, monospace' }}>03 projects</div>
        </div>

        <ProjectRowA
          index="01"
          title="Vee (AI assistant)"
          subtitle="Visier's AI for people analytics — built directly into the product, shipped to Deloitte, Ford, Wayfair, J&J, and LinkedIn."
          tags={['AI Design', 'Enterprise', '2024 — 2026']}
          hover={hoverProj === 'vee'}
          onEnter={() => setHoverProj('vee')}
          onLeave={() => setHoverProj(null)}
          href="Vee.html"
          locked
          onRequest={() => requestAccess('Vee — AI for people analytics', 'Vee.html')}
        />

        <ProjectRowA
          index="02"
          title="Report & Detailed Table"
          subtitle="Two tables, different purposes: designing tabular experiences for exploration vs. reporting across Visier's enterprise and embedded platform."
          tags={['Analytics', 'Enterprise', 'Upcoming']}
          upcoming
          hover={hoverProj === 'report'}
          onEnter={() => setHoverProj('report')}
          onLeave={() => setHoverProj(null)}
          href="Report-Table.html"
          locked
          onRequest={() => requestAccess('Report & Detailed Table', 'Report-Table.html')}
        />

        <ProjectRowA
          index="03"
          title="Clir Report Builder"
          subtitle="Reshaping how renewable energy analysts build, share, and consume reports by removing friction."
          tags={['Data tools', 'Energy', '2021']}
          hover={hoverProj === 'clir'}
          onEnter={() => setHoverProj('clir')}
          onLeave={() => setHoverProj(null)}
          href="Clir.html"
        />
      </div>

      {/* ABOUT STRIP */}
      <div style={{
        padding: `${isMobile ? 48 : 80}px ${hPad}px`, borderTop: `1px solid ${A_COLORS.line}`,
        display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '240px 1fr', gap: isMobile ? 16 : 80,
      }}>
        <div style={{ fontSize: 13, color: A_COLORS.muted, textTransform: 'uppercase', letterSpacing: 0.2 }}>About</div>
        <div style={{ maxWidth: 640, fontSize: isMobile ? 17 : 20, lineHeight: 1.55, letterSpacing: -0.2, color: A_COLORS.fg }}>
          I design AI powered systems for enterprise SaaS, focusing on data
          heavy interfaces people use daily. Most recently at Visier, I designed
          for Vee, their AI assistant for workforce analytics.
        </div>
      </div>

      {/* EXPERIENCE */}
      <div style={{
        padding: `${isMobile ? 48 : 80}px ${hPad}px`, borderTop: `1px solid ${A_COLORS.line}`,
        display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '240px 1fr', gap: isMobile ? 16 : 80,
      }}>
        <div style={{ fontSize: 13, color: A_COLORS.muted, textTransform: 'uppercase', letterSpacing: 0.2 }}>Experience</div>
        <div style={{ maxWidth: 720 }}>
          {[
            { role: 'Senior Product Designer', co: 'Visier',              years: '2024 — 2026' },
            { role: 'Product Designer',        co: 'EcoOnline Global',    years: '2022 — 2023' },
            { role: 'Product Designer',        co: 'Clir Renewables',     years: '2021 — 2022' },
            { role: 'UX/UI Designer',          co: 'Koolhaus Games',      years: '2019 — 2021' },
            { role: 'UX Designer',             co: 'Vancouver Airport YVR', years: '2018 — 2019' },
          ].map((row, i, arr) => (
            <div key={row.co + i} style={{
              display: 'grid',
              gridTemplateColumns: '1fr auto',
              alignItems: 'baseline',
              gap: 32,
              padding: '22px 0',
              borderBottom: i === arr.length - 1 ? 'none' : `1px solid ${A_COLORS.line}`,
            }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                <div style={{
                  fontSize: 20, fontWeight: 500, letterSpacing: -0.3, lineHeight: 1.2,
                  color: A_COLORS.fg,
                }}>{row.role}</div>
                <div style={{
                  fontSize: 15, color: A_COLORS.muted, letterSpacing: -0.1,
                }}>{row.co}</div>
              </div>
              <div style={{
                fontSize: 13, color: A_COLORS.muted, whiteSpace: 'nowrap',
                fontFamily: '"JetBrains Mono", ui-monospace, monospace',
              }}>{row.years}</div>
            </div>
          ))}
        </div>
      </div>

      {/* FOOTER */}
      <div style={{
        padding: `48px ${hPad}px 40px`, borderTop: `1px solid ${A_COLORS.line}`,
        display: 'flex', flexDirection: isMobile ? 'column' : 'row',
        justifyContent: 'space-between', alignItems: isMobile ? 'flex-start' : 'flex-end',
        gap: isMobile ? 32 : 0,
      }}>
        <div>
          <div style={{ fontSize: isMobile ? 36 : 48, fontWeight: 500, letterSpacing: -1.2, marginBottom: 6 }}>
            Let's talk.
          </div>
          <SendEmailLink
             withArrow={true}
             label="Send email"
             style={{
               fontSize: 18, color: A_COLORS.fg, textDecoration: 'underline', textUnderlineOffset: 4, textDecorationThickness: 1,
               cursor: 'pointer', display: 'inline-flex', alignItems: 'center',
             }} />
        </div>
        <div style={{ fontSize: 13, color: A_COLORS.muted, textAlign: 'right' }}>
          Derick Tsang © 2026<br />
          All rights reserved
        </div>
      </div>

      <PasswordModal
        open={!!gate}
        title={gate ? gate.title : ''}
        dest={gate ? gate.href : ''}
        onClose={closeGate}
        onUnlock={onUnlock}
        colors={A_COLORS}
      />
    </div>
  );
}

function ProjectRowA({ index, title, subtitle, tags, hover, onEnter, onLeave, href, upcoming, locked, onRequest }) {
  const A_COLORS = A_DARK;
  const width = useWindowWidth();
  const isMobile = width <= 760;
  const clickable = !!href;
  const El = clickable ? 'a' : 'div';
  const handleClick = (e) => {
    if (!clickable) return;
    if (locked && !isUnlocked()) {
      e.preventDefault();
      if (onRequest) onRequest();
    }
  };
  const extraProps = clickable
    ? { href, onClick: handleClick, onMouseEnter: onEnter, onMouseLeave: onLeave }
    : { onMouseEnter: onEnter, onMouseLeave: onLeave };
  return (
    <El
      {...extraProps}
      style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr 40px' : '60px 1fr auto 40px',
        alignItems: 'center', gap: isMobile ? 16 : 40,
        padding: `${isMobile ? 28 : 40}px 0`, borderBottom: `1px solid ${A_COLORS.line}`,
        cursor: clickable ? 'pointer' : 'default', transition: 'padding .25s ease',
        paddingLeft: hover && clickable && !isMobile ? 16 : 0,
        textDecoration: 'none', color: 'inherit',
        opacity: upcoming ? 0.62 : 1,
      }}
    >
      {!isMobile && (
        <div style={{
          fontSize: 13, color: A_COLORS.muted,
          fontFamily: '"JetBrains Mono", ui-monospace, monospace',
        }}>{index}</div>
      )}

      <div>
        <div style={{
          fontSize: isMobile ? 28 : 56, fontWeight: 500,
          letterSpacing: isMobile ? -0.6 : -1.4, lineHeight: 1,
          marginBottom: 8,
          fontStyle: hover ? 'italic' : 'normal',
          transition: 'font-style .2s',
          display: 'inline-flex', alignItems: 'center', gap: 12, flexWrap: 'wrap',
        }}>
          {title}
          {locked && (
            <span title="Password protected" style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              fontSize: 11, fontFamily: '"JetBrains Mono", ui-monospace, monospace',
              textTransform: 'uppercase', letterSpacing: 0.8,
              color: A_COLORS.muted, fontStyle: 'normal',
              border: `1px solid ${A_COLORS.line}`, borderRadius: 100,
              padding: '4px 10px 4px 8px',
            }}>
              <svg width="10" height="10" viewBox="0 0 24 24" fill="none"
                   stroke="currentColor" strokeWidth="2"
                   strokeLinecap="round" strokeLinejoin="round"
                   style={{ display: 'block' }}>
                <rect x="4" y="11" width="16" height="10" rx="2" />
                <path d="M8 11V7a4 4 0 0 1 8 0v4" />
              </svg>
              Private
            </span>
          )}
        </div>
        <div style={{ fontSize: isMobile ? 14 : 17, color: A_COLORS.muted, maxWidth: 560, lineHeight: 1.5 }}>{subtitle}</div>
        {isMobile && (
          <div style={{ display: 'flex', gap: 6, marginTop: 10, flexWrap: 'wrap' }}>
            {tags.map((t) => (
              <div key={t} style={{
                fontSize: 11, padding: '4px 8px',
                border: `1px solid ${A_COLORS.line}`, borderRadius: 100,
                color: A_COLORS.muted,
                fontFamily: t.includes('—') ? '"JetBrains Mono", ui-monospace, monospace' : A_FONT,
              }}>{t}</div>
            ))}
          </div>
        )}
      </div>

      {!isMobile && (
        <div style={{ display: 'flex', gap: 8 }}>
          {tags.map((t) => (
            <div key={t} style={{
              fontSize: 12, padding: '5px 10px',
              border: `1px solid ${A_COLORS.line}`, borderRadius: 100,
              color: A_COLORS.muted,
              fontFamily: t.includes('—') ? '"JetBrains Mono", ui-monospace, monospace' : A_FONT,
            }}>{t}</div>
          ))}
        </div>
      )}

      <div style={{
        width: 40, height: 40, borderRadius: 20, border: `1px solid ${A_COLORS.fg}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0,
        transform: hover && clickable ? 'rotate(-45deg)' : 'rotate(0deg)',
        transition: 'transform .3s cubic-bezier(.2,.7,.3,1)',
        opacity: clickable ? 1 : 0.5,
      }}>
        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5">
          <path d="M2 6h8M6 2l4 4-4 4" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </div>
    </El>
  );
}

window.PortfolioA = PortfolioA;