const { useState, useEffect } = React;


const focusLabel = (key) => {
  const d = (window.FOCUS_DOMAINS || []).find((f) => f.key === key);
  return d ? d.label : null;
};

const ProjectCard = ({ project, sysIndex, dimmed }) => {
  const [hovered, setHovered] = useState(false);
  const tagLabel = (() => {
    const focuses = Array.isArray(project.focus) ? project.focus : [project.focus];
    return focuses.map((k) => focusLabel(k)).filter(Boolean).join(' · ');
  })();
  const sysLabel = `SYS.${String(sysIndex).padStart(3, '0')}`;
  const boxTitle = (project.short || project.title || project.id).toUpperCase().slice(0, 18);
  const ghostName = (project.short || project.id).toUpperCase();
  const ProjectArt = window.ProjectArt;

  return (
    <a
      href={`Project.html#${project.id}`}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      className="navbox"
      style={{
        display: 'block', flex: 1, minWidth: 0,
        backgroundColor: hovered ? 'var(--surface)' : 'var(--bg-2)',
        backgroundImage: 'radial-gradient(circle, var(--grid-dot, rgba(255,255,255,0.04)) 0.8px, transparent 0.8px)',
        backgroundSize: '32px 32px',
        textDecoration: 'none', cursor: 'pointer',
        transition: 'opacity 0.2s, background-color 0.2s, filter 0.2s',
        position: 'relative', overflow: 'hidden', minHeight: 0,
        opacity: dimmed ? 0.32 : 1,
        filter: dimmed ? 'saturate(0.5)' : 'none'
      }}>

      {ProjectArt &&
      <ProjectArt project={project} style={{
        opacity: hovered ? 0.78 : 0.6,
        transition: 'opacity 0.25s'
      }} />
      }

      <div style={{
        position: 'absolute',
        right: 6, bottom: -10,
        maxWidth: 'calc(100% - 12px)',
        fontFamily: 'var(--sans-head)', fontWeight: 700,
        fontSize: 'clamp(48px, 8.5vw, 120px)',
        lineHeight: 0.9, letterSpacing: '-0.02em',
        color: hovered ? 'var(--accent-dim)' : 'var(--border-bright)',
        opacity: hovered ? 0.55 : 0.32,
        textTransform: 'uppercase', whiteSpace: 'nowrap',
        textAlign: 'right',
        userSelect: 'none', pointerEvents: 'none',
        transition: 'opacity 0.25s, color 0.25s',
        overflow: 'hidden'
      }}>
        {ghostName}
      </div>

      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(to top, rgba(8,9,12,0.92) 0%, rgba(8,9,12,0.78) 25%, rgba(8,9,12,0.4) 48%, rgba(8,9,12,0) 60%)',
        pointerEvents: 'none'
      }} />

      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 2,
        backgroundColor: hovered ? 'var(--accent)' : 'transparent',
        transition: 'background-color 0.2s',
        zIndex: 2
      }} />

      <div style={{
        position: 'absolute', top: 12, left: 14, right: 14,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        zIndex: 3, fontSize: "11px"
      }}>
        <div style={{
          fontFamily: 'var(--mono)', letterSpacing: '0.18em',
          color: hovered ? 'var(--accent)' : 'var(--muted)',
          transition: 'color 0.2s',
          display: 'flex', alignItems: 'center', gap: 6,
          padding: '1px 7px',
          background: 'rgba(8,9,12,0.7)',
          border: '1px solid var(--border)', fontSize: "11px"
        }}>
          <span>{sysLabel}</span>
          <span style={{ color: 'var(--border-bright)' }}>/</span>
          <span style={{ color: hovered ? 'var(--accent)' : 'var(--text-sec)' }}>{project.id}</span>
        </div>
        <div style={{
          fontFamily: 'var(--mono)', letterSpacing: '0.14em',
          color: hovered ? 'var(--accent)' : 'transparent',
          transition: 'color 0.18s',
          padding: '1px 7px',
          background: hovered ? 'rgba(8,9,12,0.7)' : 'transparent',
          border: hovered ? '1px solid var(--accent-dim)' : '1px solid transparent', fontSize: "11px"
        }}>
          OPEN →
        </div>
      </div>

      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        padding: '14px 16px 14px',
        zIndex: 3
      }}>
        <div style={{
          fontFamily: 'var(--sans-head)', fontWeight: 700,
          letterSpacing: '0.04em', lineHeight: 1.05,
          color: hovered ? 'var(--accent)' : 'var(--text-pri)',
          marginBottom: 8, transition: 'color 0.2s',
          whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', fontSize: "35px"
        }}>
          {boxTitle}
        </div>

        {project.claim &&
        <div style={{
          fontFamily: 'var(--sans-body)', lineHeight: 1.45,
          color: hovered ? 'var(--text-pri)' : 'var(--text-sec)',
          transition: 'color 0.2s',
          display: '-webkit-box',
          WebkitLineClamp: 3,
          WebkitBoxOrient: 'vertical',
          overflow: 'hidden',
          textWrap: 'pretty',
          maxWidth: '36ch', fontSize: "15px"
        }}>
            {project.claim}
          </div>
        }
      </div>
    </a>);

};

const NavGrid = ({ focusFilter }) => {
  const projects = window.PORTFOLIO_DATA.projects;
  const topProjects = projects.slice(0, 2);
  const bottomProjects = projects.slice(2);
  const isDim = (p) => {
    if (!focusFilter) return false;
    const focuses = Array.isArray(p.focus) ? p.focus : [p.focus];
    return !focuses.includes(focusFilter);
  };

  return (
    <div className="nav-grid" style={{
      flex: 1, display: 'flex', flexDirection: 'column',
      gap: 1, backgroundColor: 'var(--border)', minHeight: 0
    }}>
      <div className="nav-row" style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'row', gap: 1 }}>
        {topProjects.map((p, i) =>
        <ProjectCard key={p.id} project={p} sysIndex={i + 4} dimmed={isDim(p)} />
        )}
      </div>
      <div className="nav-row" style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'row', gap: 1 }}>
        {bottomProjects.map((p, i) =>
        <ProjectCard key={p.id} project={p} sysIndex={i + 6} dimmed={isDim(p)} />
        )}
      </div>
    </div>);

};

const App = () => {
  return (
    <div className="page-root" style={{ display: 'flex', flexDirection: 'column', height: '100vh', overflow: 'hidden' }}>
      <div style={{ flexShrink: 0, borderBottom: '1px solid var(--border)' }}>
        <window.HeroSection />
      </div>
      <NavGrid focusFilter={null} />
    </div>);

};

ReactDOM.createRoot(document.getElementById('root')).render(<App />);