// Project Samples page — full portfolio + filter + lightbox + NDA note

// Real featured project we can name. Most live-site work is shared under NDA.
const FEATURED_CASES = [
  { id: 'vc', title: 'Vipul Commercial',  cat: 'Visualization', loc: 'Confidential',
    summary: 'Photo-real renders and view studies for a commercial property — pre-leasing and marketing collateral.',
    meta: [['Multiple', 'View angles'], ['3D Max + V-Ray', 'Pipeline'], ['Marketing-ready', 'Output']],
    kind: 'render' },
  { id: 'nda', title: 'Project under NDA',  cat: 'BIM Coordination', loc: 'Sample on request',
    summary: 'Recent BIM coordination delivery — federation across architecture, structure and MEP. Native files shared after NDA.',
    meta: [['LOD 400', 'Capability'], ['Federated', 'Delivery'], ['NDA', 'Required']],
    kind: 'wireframe' },
];

function WorkHero() {
  const { w } = useViewport();
  return (
    <section style={{ position: 'relative', padding: pick(w, '90px 0 60px', '44px 0 40px'), overflow: 'hidden' }}>
      <CursorSpotlight color="rgba(243, 119, 53, 0.10)" size={500} />
      <div style={{ ...bsStyles.container, position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: pick(w, '1.2fr 1fr', '1fr'), gap: pick(w, 60, 32), alignItems: 'flex-end' }}>
          <div>
            <div style={{ ...bsStyles.eyebrow, marginBottom: 22 }}>
              <span style={{ width: 24, height: 1, background: BS.accent }} />
              Project samples
            </div>
            <h1 style={{ ...bsStyles.display, fontSize: fs(40, 124), margin: 0, marginBottom: 28 }}>
              500 projects.<br />
              <span style={{ color: BS.accent }}>A few</span> we can show.
            </h1>
            <p style={{ fontSize: 18, color: BS.text2, lineHeight: 1.55, margin: 0, maxWidth: 580 }}>
              Most of our work sits behind NDAs. The samples below give a flavour of what we deliver — for full case-study decks
              with native files, request a tailored portfolio matched to your project type.
            </p>
          </div>
          <div style={{
            background: BS.bg2, border: `1px solid ${BS.border}`,
            borderRadius: 18, padding: 24,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
              <span style={{ width: 8, height: 8, background: BS.accent, borderRadius: '50%' }} />
              <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: BS.muted }}>NDA note</span>
            </div>
            <div style={{ fontSize: 14, color: BS.text2, lineHeight: 1.55, marginBottom: 16 }}>
              Full case studies and native files are shared under NDA after a 20-minute intro call.
            </div>
            <a href="/contact" style={{ ...bsStyles.btnPrimary, padding: '12px 18px', fontSize: 13 }}>
              Request full samples <ArrowIcon size={12} />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function WorkFeatured() {
  const { w } = useViewport();
  return (
    <section style={{ padding: pick(w, '40px 0 100px', '24px 0 64px') }}>
      <div style={bsStyles.container}>
        <div style={{ ...bsStyles.eyebrow, marginBottom: 22 }}>
          <span style={{ width: 24, height: 1, background: BS.accent }} />
          Featured case studies
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: pick(w, 'repeat(2, 1fr)', '1fr'), gap: 24 }}>
          {FEATURED_CASES.map((p, i) => (
            <div key={p.id} style={{
              background: BS.bg2, border: `1px solid ${BS.border}`,
              borderRadius: 24, overflow: 'hidden',
            }}>
              <div style={{ aspectRatio: '16 / 10', position: 'relative' }}>
                <Placeholder kind={p.kind} tone={i % 2 === 0 ? 'dark' : 'cream'} />
                <div style={{
                  position: 'absolute', top: 18, left: 18,
                  background: '#fff', padding: '6px 12px', borderRadius: 999,
                  fontSize: 11, fontWeight: 700, letterSpacing: '0.04em',
                }}>{p.cat}</div>
              </div>
              <div style={{ padding: 32 }}>
                <h3 style={{ ...bsStyles.display, fontSize: 30, margin: 0, marginBottom: 6 }}>{p.title}</h3>
                <div style={{ fontSize: 13, color: BS.muted, marginBottom: 18 }}>{p.loc}</div>
                <p style={{ fontSize: 15, color: BS.text2, lineHeight: 1.6, margin: 0, marginBottom: 24 }}>{p.summary}</p>
                <div style={{ display: 'flex', gap: 0, paddingTop: 20, borderTop: `1px solid ${BS.border}` }}>
                  {p.meta.map(([v, l], j) => (
                    <div key={l} style={{
                      flex: 1, padding: '0 16px',
                      borderLeft: j === 0 ? 'none' : `1px solid ${BS.border}`,
                      paddingLeft: j === 0 ? 0 : 16,
                    }}>
                      <div style={{ ...bsStyles.display, fontSize: 22, color: BS.accent }}>{v}</div>
                      <div style={{ fontSize: 11, color: BS.muted, marginTop: 4 }}>{l}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function WorkGallery() {
  const [filter, setFilter] = React.useState('All');
  const [lightbox, setLightbox] = React.useState(null);
  const { w } = useViewport();
  const cats = ['All', ...new Set(PROJECTS.map(p => p.cat))];
  const filtered = filter === 'All' ? PROJECTS : PROJECTS.filter(p => p.cat === filter);
  return (
    <section style={{ padding: pick(w, '0 0 120px', '0 0 72px') }}>
      <div style={bsStyles.container}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 32, flexWrap: 'wrap', gap: 24 }}>
          <div>
            <div style={{ ...bsStyles.eyebrow, marginBottom: 18 }}>
              <span style={{ width: 24, height: 1, background: BS.accent }} />
              Selected samples
            </div>
            <h2 style={{ ...bsStyles.display, fontSize: fs(34, 56), margin: 0 }}>The grid.</h2>
          </div>
          <div style={{ fontSize: 13, color: BS.muted }}>
            Showing <span style={{ color: BS.text, fontWeight: 700 }}>{filtered.length}</span> of {PROJECTS.length} samples
          </div>
        </div>

        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 28 }}>
          {cats.map(c => (
            <button key={c} onClick={() => setFilter(c)} style={{
              padding: '10px 18px', borderRadius: 999, fontSize: 13, fontWeight: 600,
              border: `1px solid ${filter === c ? BS.text : BS.border2}`,
              background: filter === c ? BS.text : 'transparent',
              color: filter === c ? BS.bg : BS.text, cursor: 'pointer',
              fontFamily: 'inherit', transition: 'all 0.2s',
            }}>{c}</button>
          ))}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: pick(w, 'repeat(3, 1fr)', 'repeat(2, 1fr)', '1fr'), gap: 18 }}>
          {filtered.map((p, i) => (
            <div key={p.id} onClick={() => setLightbox(p)} style={{
              borderRadius: 18, overflow: 'hidden', cursor: 'pointer',
              background: BS.bg2, border: `1px solid ${BS.border}`,
              transition: 'transform 0.25s, box-shadow 0.25s',
            }}
            onMouseEnter={e => {
              e.currentTarget.style.transform = 'translateY(-4px)';
              e.currentTarget.style.boxShadow = '0 18px 40px rgba(24, 21, 19, 0.12)';
            }}
            onMouseLeave={e => {
              e.currentTarget.style.transform = 'translateY(0)';
              e.currentTarget.style.boxShadow = 'none';
            }}>
              <div style={{ aspectRatio: '4 / 3', position: 'relative' }}>
                <Placeholder kind={p.kind} tone={i % 3 === 0 ? 'dark' : 'cream'} />
              </div>
              <div style={{ padding: '22px 22px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
                  <span style={{
                    fontSize: 10, fontWeight: 700, letterSpacing: '0.08em',
                    color: BS.accent, textTransform: 'uppercase',
                  }}>{p.cat}</span>
                  <span style={{ fontSize: 11, color: BS.muted }}>{String(i+1).padStart(3, '0')}</span>
                </div>
                <div style={{ ...bsStyles.display, fontSize: 22, marginBottom: 4 }}>{p.title}</div>
                <div style={{ fontSize: 13, color: BS.muted }}>{p.loc}</div>
              </div>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 32, padding: '24px 28px',
          background: BS.bg2, border: `1px dashed ${BS.border2}`, borderRadius: 18,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24, flexWrap: 'wrap',
        }}>
          <div>
            <div style={{ fontSize: 15, fontWeight: 700, marginBottom: 4 }}>Looking for something specific?</div>
            <div style={{ fontSize: 13, color: BS.muted }}>
              Healthcare, hospitality, heritage, infrastructure — we have samples we can share under NDA.
            </div>
          </div>
          <a href="/contact" style={{ ...bsStyles.btnAccent, padding: '12px 20px', fontSize: 13 }}>
            Request a tailored deck <ArrowIcon size={12} />
          </a>
        </div>
      </div>
      {lightbox && (
        <div onClick={() => setLightbox(null)} style={{
          position: 'fixed', inset: 0, background: 'rgba(24, 21, 19, 0.94)', zIndex: 100,
          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: pick(w, 60, 20), cursor: 'zoom-out',
        }}>
          <div style={{ width: '100%', maxWidth: 1080, aspectRatio: '16 / 9', borderRadius: 18, overflow: 'hidden' }}>
            <Placeholder kind={lightbox.kind} tone="dark" label={`${lightbox.title.toUpperCase()} · ${lightbox.loc.toUpperCase()}`} />
          </div>
          <div style={{ color: '#fff', marginTop: 18, fontSize: 13, opacity: 0.65 }}>Click anywhere to close · ESC</div>
        </div>
      )}
    </section>
  );
}

function WorkStats() {
  const { w } = useViewport();
  return (
    <section style={{ padding: pick(w, '80px 0', '56px 0'), background: BS.bg3 }}>
      <div style={bsStyles.container}>
        <div style={{ display: 'grid', gridTemplateColumns: pick(w, 'repeat(4, 1fr)', 'repeat(2, 1fr)'), gap: pick(w, 24, 28) }}>
          {[
            { v: 500, suf: '+', label: 'Projects' },
            { v: 5, suf: '', label: 'Countries' },
            { v: 600, suf: 'K sf', label: 'Built area' },
            { v: 99, suf: '%', label: 'On-time' },
          ].map((s, i) => (
            <div key={s.label}>
              <div style={{ ...bsStyles.display, fontSize: fs(44, 72), color: BS.accent, lineHeight: 1, marginBottom: 12 }}>
                <StatCounter value={s.v} suffix={s.suf} />
              </div>
              <div style={{ fontSize: 14, fontWeight: 700, color: BS.text }}>{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function WorkPage() {
  return (
    <Page currentPage="work">
      <WorkHero />
      <WorkFeatured />
      <WorkGallery />
      <WorkStats />
      <B3CTA kicker="Want to" highlight="see more?" after="Request a tailored deck." lede="Tell us your project type and we'll share native files and case studies matched to your brief — under NDA." />
    </Page>
  );
}

window.WorkPage = WorkPage;