// Projects section — rich case-study cards with tilted glass

function ProjectsSection({ dark, accent, font, variant = 'grid' }) {
  const fg = dark ? '#f0eef9' : '#0c0a14';
  const muted = dark ? 'rgba(240,238,249,0.6)' : 'rgba(20,18,30,0.6)';

  return (
    <section id="work" style={{
      position: 'relative', padding: '120px 60px 80px', zIndex: 2,
    }}>
      <SectionHeader dark={dark} accent={accent} font={font}
        eyebrow="Selected work · 2024–2025"
        title="Things I've shipped."
        subtitle="Four projects that capture the range — from neural nets to logistics solvers." />

      <div style={{
        display: 'grid',
        gridTemplateColumns: variant === 'list' ? '1fr' : 'repeat(2, 1fr)',
        gap: variant === 'list' ? 20 : 24,
        marginTop: 56, perspective: 1400,
      }}>
        {window.PORTFOLIO_PROJECTS.map((p, i) => (
          variant === 'list'
            ? <ProjectCardList key={p.id} p={p} idx={i} dark={dark} accent={accent} font={font} />
            : <ProjectCardFloat key={p.id} p={p} idx={i} dark={dark} accent={accent} font={font} />
        ))}
      </div>
    </section>
  );
}

function ProjectCardFloat({ p, idx, dark, accent, font }) {
  const [hover, setHover] = useState(false);
  const tilt = idx % 2 === 0 ? -0.6 : 0.6;
  const fg = dark ? '#f0eef9' : '#0c0a14';
  const muted = dark ? 'rgba(240,238,249,0.65)' : 'rgba(20,18,30,0.65)';

  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        padding: 22,
        background: dark ? 'rgba(255,255,255,0.05)' : 'rgba(255,255,255,0.6)',
        border: `1px solid ${dark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.06)'}`,
        borderRadius: 24,
        backdropFilter: 'blur(28px) saturate(160%)',
        WebkitBackdropFilter: 'blur(28px) saturate(160%)',
        boxShadow: hover
          ? `0 30px 80px -20px rgba(0,0,0,${dark ? 0.5 : 0.2}), 0 0 0 1px ${p.accentHex}40`
          : `0 20px 50px -20px rgba(0,0,0,${dark ? 0.4 : 0.12})`,
        transform: hover
          ? 'translateY(-4px) rotateX(0deg) rotateY(0deg)'
          : `rotateX(1.5deg) rotateY(${tilt}deg)`,
        transformStyle: 'preserve-3d',
        transition: 'transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s',
        position: 'relative', overflow: 'hidden', cursor: 'pointer',
      }}>
      {/* color-glow corner */}
      <div style={{
        position: 'absolute', top: -40, left: -40, width: 200, height: 200,
        borderRadius: '50%',
        background: `radial-gradient(circle, ${p.accentHex}55, transparent 70%)`,
        filter: 'blur(30px)', pointerEvents: 'none',
        opacity: hover ? 1 : 0.7, transition: 'opacity .3s',
      }} />

      <div style={{ position: 'relative', zIndex: 1 }}>
        {/* top row: glyph + meta */}
        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 22 }}>
          <div style={{
            width: 52, height: 52, borderRadius: 14,
            background: `linear-gradient(135deg, ${p.accentHex}, ${p.accentHex}80)`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: `0 12px 28px -8px ${p.accentHex}aa`,
          }}>
            <window.SiteGlyph id={p.glyph} color="#fff" size={26} />
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{
              fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase',
              color: dark ? 'rgba(240,238,249,0.45)' : 'rgba(20,18,30,0.45)',
              fontWeight: 500,
            }}>0{idx + 1} · {p.year}</div>
            <div style={{ fontSize: 11, color: p.accentHex, marginTop: 4, fontWeight: 500 }}>{p.tag}</div>
          </div>
        </div>

        {/* hero image */}
        <window.SiteImagePlaceholder
          label={`${p.id} preview`}
          ratio="16/9" radius={14} dark={dark} accent={p.accentHex}
        />

        {/* name + headline */}
        <div style={{
          fontFamily: font.display, fontSize: 32, fontWeight: 700, letterSpacing: '-0.025em',
          marginTop: 22, color: fg, lineHeight: 1.05,
        }}>{p.name}</div>
        <div style={{
          fontSize: 14, color: muted, marginTop: 8, lineHeight: 1.5,
          fontWeight: 500,
        }}>{p.headline}</div>
        <div style={{
          fontSize: 13.5, color: muted, marginTop: 12, lineHeight: 1.6,
        }}>{p.blurb}</div>

        {/* metrics */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12,
          marginTop: 20, paddingTop: 20,
          borderTop: `1px solid ${dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)'}`,
        }}>
          {p.metrics.map(m => (
            <div key={m.v}>
              <div style={{
                fontFamily: font.display, fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em',
                color: fg,
              }}>{m.k}</div>
              <div style={{
                fontSize: 10.5, color: muted, marginTop: 3, lineHeight: 1.3,
              }}>{m.v}</div>
            </div>
          ))}
        </div>

        {/* stack */}
        <div style={{
          display: 'flex', flexWrap: 'wrap', gap: 6,
          marginTop: 18,
        }}>
          {p.stack.map(t => (
            <span key={t} style={{
              fontSize: 11, padding: '4px 10px',
              background: dark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.04)',
              border: `1px solid ${dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)'}`,
              borderRadius: 999, color: muted, fontWeight: 500,
              fontFamily: 'ui-monospace, monospace',
            }}>{t}</span>
          ))}
        </div>
      </div>
    </div>
  );
}

function ProjectCardList({ p, idx, dark, accent, font }) {
  const fg = dark ? '#f0eef9' : '#0c0a14';
  const muted = dark ? 'rgba(240,238,249,0.65)' : 'rgba(20,18,30,0.65)';
  const reverse = idx % 2 === 1;
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: reverse ? '1fr 1.2fr' : '1.2fr 1fr',
      gap: 32, alignItems: 'center',
      padding: 24,
      background: dark ? 'rgba(255,255,255,0.04)' : 'rgba(255,255,255,0.55)',
      border: `1px solid ${dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.05)'}`,
      borderRadius: 24,
      backdropFilter: 'blur(28px)',
    }}>
      <div style={{ order: reverse ? 2 : 1 }}>
        <window.SiteImagePlaceholder
          label={`${p.id}`} ratio="16/10" radius={14} dark={dark} accent={p.accentHex}
        />
      </div>
      <div style={{ order: reverse ? 1 : 2 }}>
        <div style={{
          fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase',
          color: p.accentHex, fontWeight: 600,
        }}>0{idx + 1} · {p.tag}</div>
        <div style={{
          fontFamily: font.display, fontSize: 38, fontWeight: 700,
          letterSpacing: '-0.025em', marginTop: 8, color: fg, lineHeight: 1,
        }}>{p.name}</div>
        <div style={{ fontSize: 15, color: fg, marginTop: 10, fontWeight: 500 }}>
          {p.headline}
        </div>
        <div style={{ fontSize: 13.5, color: muted, marginTop: 12, lineHeight: 1.6 }}>
          {p.blurb}
        </div>
        <div style={{ display: 'flex', gap: 24, marginTop: 18 }}>
          {p.metrics.map(m => (
            <div key={m.v}>
              <div style={{
                fontFamily: font.display, fontSize: 22, fontWeight: 700,
                letterSpacing: '-0.02em', color: fg,
              }}>{m.k}</div>
              <div style={{ fontSize: 10.5, color: muted, marginTop: 2 }}>{m.v}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function SectionHeader({ dark, accent, font, eyebrow, title, subtitle, align = 'left' }) {
  const fg = dark ? '#f0eef9' : '#0c0a14';
  const muted = dark ? 'rgba(240,238,249,0.6)' : 'rgba(20,18,30,0.6)';
  return (
    <div style={{ textAlign: align, maxWidth: align === 'center' ? 720 : 720, margin: align === 'center' ? '0 auto' : 0 }}>
      <div style={{
        fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase',
        color: accent, fontWeight: 600, display: 'flex',
        alignItems: 'center', gap: 10,
        justifyContent: align === 'center' ? 'center' : 'flex-start',
      }}>
        <span style={{ width: 24, height: 1, background: accent }} />
        {eyebrow}
      </div>
      <h2 style={{
        fontFamily: font.display, fontSize: 'clamp(40px, 5vw, 64px)',
        fontWeight: 700, letterSpacing: '-0.035em', lineHeight: 1,
        margin: '16px 0 0', color: fg,
      }}>{title}</h2>
      {subtitle && (
        <p style={{ fontSize: 17, color: muted, marginTop: 14, lineHeight: 1.55, maxWidth: 540 }}>
          {subtitle}
        </p>
      )}
    </div>
  );
}

window.ProjectsSection = ProjectsSection;
window.SectionHeader = SectionHeader;