// ProjectDetail.jsx — Esther Chan

function ProjectDetail({ slug, navigate }) {
  const [mounted, setMounted] = React.useState(false);
  const [lightbox, setLightbox] = React.useState(null);

  React.useEffect(function() {
    setMounted(false);
    window.scrollTo(0, 0);
    var t = setTimeout(function() { setMounted(true); }, 80);
    return function() { clearTimeout(t); };
  }, [slug]);

  React.useEffect(function() {
    function handleKey(e) { if (e.key === 'Escape') setLightbox(null); }
    window.addEventListener('keydown', handleKey);
    return function() { window.removeEventListener('keydown', handleKey); };
  }, []);

  var project = (window.PROJECTS_DATA || []).find(function(p) { return p.slug === slug; });

  if (!project) {
    return React.createElement('div', {
      style: { paddingTop: '56px', minHeight: '100vh', background: '#080808',
        display: 'flex', alignItems: 'center', justifyContent: 'center' }
    }, React.createElement('p', {
      style: { color: 'rgba(255,255,255,0.35)', fontSize: '15px' }
    }, 'Project not found.'));
  }

  function fi(delay) {
    return {
      opacity: mounted ? 1 : 0,
      transform: mounted ? 'translateY(0px)' : 'translateY(24px)',
      transition: 'opacity 0.85s ease ' + delay + 's, transform 0.85s ease ' + delay + 's',
    };
  }

  var isLismore  = project.slug === 'lismore-lantern-parade';
  var isVivid    = project.slug === 'sydney-vivid-event-design';
  var isBrand    = project.slug === 'brand-design-collection';
  var isBronte   = project.slug === 'bronte-ai';

  var coverImage      = (project.images || []).find(function(img)   { return img.type === 'cover'     && img.url && img.url.trim() !== ''; });
  var galleryImages   = (project.images || []).filter(function(img) { return img.type === 'gallery'   && img.url && img.url.trim() !== ''; });
  var beforeImages    = (project.images || []).filter(function(img) { return img.type === 'before'    && img.url && img.url.trim() !== ''; });
  var afterImages     = (project.images || []).filter(function(img) { return img.type === 'after'     && img.url && img.url.trim() !== ''; });
  var kioskImages     = (project.images || []).filter(function(img) { return img.type === 'kiosk'     && img.url && img.url.trim() !== ''; });
  var prototypeImages = (project.images || []).filter(function(img) { return img.type === 'prototype' && img.url && img.url.trim() !== ''; });
  var sketchImages    = (project.images || []).filter(function(img) { return img.type === 'sketch'    && img.url && img.url.trim() !== ''; });
  var selahImages     = (project.images || []).filter(function(img) { return img.type === 'selah'     && img.url && img.url.trim() !== ''; });
  var casaImages      = (project.images || []).filter(function(img) { return img.type === 'casa'      && img.url && img.url.trim() !== ''; });
  var gotgotImages    = (project.images || []).filter(function(img) { return img.type === 'gotgot'    && img.url && img.url.trim() !== ''; });
  var magazineImages  = (project.images || []).filter(function(img) { return img.type === 'magazine'  && img.url && img.url.trim() !== ''; });
  var amfImages       = (project.images || []).filter(function(img) { return img.type === 'amf'       && img.url && img.url.trim() !== ''; });

  var displayGalleryImages = isLismore && coverImage
    ? [coverImage].concat(galleryImages)
    : galleryImages;

  var hasPrototypeLink = project.links  && project.links.some(function(l)  { return l.url && l.url.trim() !== ''; });
  var hasPdf           = project.pdfs   && project.pdfs.some(function(p)   { return p.url && p.url.trim() !== ''; });
  var hasVideo         = project.videos && project.videos.some(function(v) { return v.embedUrl && v.embedUrl.trim() !== ''; });
  var hasBeforeAfter   = beforeImages.length > 0 && afterImages.length > 0;

  function LightboxOverlay() {
    if (!lightbox) return null;
    return React.createElement('div', {
      onClick: function() { setLightbox(null); },
      style: { position: 'fixed', inset: 0, zIndex: 9999, background: 'rgba(0,0,0,0.92)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'zoom-out', padding: '32px' }
    },
      React.createElement('img', {
        src: lightbox,
        onClick: function(e) { e.stopPropagation(); },
        style: { maxWidth: '90vw', maxHeight: '90vh', objectFit: 'contain', borderRadius: '4px', boxShadow: '0 24px 80px rgba(0,0,0,0.8)', cursor: 'default' }
      }),
      React.createElement('div', {
        onClick: function() { setLightbox(null); },
        style: { position: 'absolute', top: '24px', right: '32px', fontSize: '24px', color: 'rgba(255,255,255,0.5)', cursor: 'pointer', lineHeight: 1, transition: 'color 0.2s' },
        onMouseEnter: function(e) { e.currentTarget.style.color = '#fff'; },
        onMouseLeave: function(e) { e.currentTarget.style.color = 'rgba(255,255,255,0.5)'; },
      }, '×')
    );
  }

  function BrandImg(src, alt) {
    return React.createElement('img', {
      src: src, alt: alt,
      onClick: function() { setLightbox(src); },
      style: { width: '100%', display: 'block', borderRadius: '4px', cursor: 'zoom-in', transition: 'opacity 0.2s' },
      onMouseEnter: function(e) { e.currentTarget.style.opacity = '0.85'; },
      onMouseLeave: function(e) { e.currentTarget.style.opacity = '1'; },
    });
  }

  function PlainImg(src, alt) {
    return React.createElement('img', {
      src: src, alt: alt,
      style: { width: '100%', display: 'block', borderRadius: '4px' }
    });
  }

  function SectionLabel(text) {
    return React.createElement('div', {
      style: { fontSize: '12px', fontWeight: 500, letterSpacing: '0.3em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.22)', marginBottom: '20px' }
    }, text);
  }

  function SectionDesc(text) {
    return React.createElement('p', {
      style: { fontSize: '14px', fontWeight: 300, lineHeight: 1.70, color: 'rgba(255,255,255,0.40)', maxWidth: '600px', margin: '0 0 28px' }
    }, text);
  }

  function BrandGroup(label, images) {
    if (!images || images.length === 0) return null;
    return React.createElement('div', { style: { marginBottom: '56px' } },
      React.createElement('div', { style: { fontSize: '11px', fontWeight: 500, letterSpacing: '0.3em', textTransform: 'uppercase', color: 'rgba(255,138,76,0.70)', marginBottom: '16px' } }, label),
      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px' } },
        images.map(function(img) { return React.createElement('div', { key: img.url }, BrandImg(img.url, img.label)); })
      )
    );
  }

  function galleryGridStyle() {
    if (isLismore) return { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px' };
    if (isVivid)   return { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px' };
    return { display: 'flex', flexDirection: 'column', gap: '24px' };
  }

  function MultiPara(text, baseStyle) {
    if (!text) return null;
    var paras = text.split('\n\n');
    return React.createElement(React.Fragment, null,
      paras.map(function(para, i) {
        return React.createElement('p', {
          key: i,
          style: Object.assign({}, baseStyle, { marginBottom: i < paras.length - 1 ? '16px' : '0' })
        }, para);
      })
    );
  }

  function CaseStudyItem(key, text) {
    var bodyStyle = { fontSize: '15px', fontWeight: 300, lineHeight: 1.80, color: 'rgba(255,255,255,0.55)', margin: 0 };
    return React.createElement('div', { key: key },
      React.createElement('div', {
        style: { fontSize: '12px', fontWeight: 500, letterSpacing: '0.3em', textTransform: 'uppercase', color: 'rgba(255,138,76,0.80)', marginBottom: '12px' }
      }, key),
      MultiPara(text, bodyStyle)
    );
  }

  function renderCaseStudy() {
    if (!project.caseStudy) return null;
    var cs = project.caseStudy;

    if (isBronte) {
      return React.createElement('div', { style: { padding: '0 48px 72px' } },
        ['overview','problem','concept','process','solution','reflection'].filter(function(k) { return cs[k]; }).map(function(key) {
          return React.createElement('div', {
            key: key,
            style: { marginBottom: '48px', paddingBottom: '48px', borderBottom: '1px solid rgba(255,255,255,0.06)' }
          },
            React.createElement('div', {
              style: { fontSize: '12px', fontWeight: 500, letterSpacing: '0.3em', textTransform: 'uppercase', color: 'rgba(255,138,76,0.80)', marginBottom: '16px' }
            }, key),
            MultiPara(cs[key], { fontSize: '15px', fontWeight: 300, lineHeight: 1.90, color: 'rgba(255,255,255,0.60)', margin: 0 })
          );
        })
      );
    }

    if (isVivid) {
      return React.createElement('div', {
        style: { padding: '0 48px 72px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '48px 60px', alignItems: 'start' }
      },
        React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: '48px' } },
          ['concept','solution'].filter(function(k) { return cs[k]; }).map(function(k) { return CaseStudyItem(k, cs[k]); })
        ),
        React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: '48px' } },
          ['problem','process','reflection'].filter(function(k) { return cs[k]; }).map(function(k) { return CaseStudyItem(k, cs[k]); })
        )
      );
    }

    return React.createElement('div', {
      style: { padding: '0 48px 72px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '48px 60px' }
    },
      ['overview','problem','concept','process','solution','reflection'].filter(function(k) { return cs[k]; }).map(function(key) {
        return CaseStudyItem(key, cs[key]);
      })
    );
  }

  return React.createElement('div', { style: { background: '#080808', minHeight: '100vh', paddingTop: '56px' } },

    isBrand ? LightboxOverlay() : null,

    // ── HERO ──
    coverImage
      ? React.createElement('div', {
          style: Object.assign({}, fi(0), { width: '100%', height: 'clamp(280px,50vh,600px)', overflow: 'hidden', position: 'relative' })
        },
          React.createElement('img', {
            src: coverImage.url, alt: project.title,
            style: { width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 30%' }
          }),
          React.createElement('div', {
            style: { position: 'absolute', inset: 0, background: 'linear-gradient(to bottom, rgba(8,8,8,0.10) 0%, rgba(8,8,8,0.80) 100%)' }
          })
        )
      : null,

    // ── HEADER ──
    React.createElement('div', { style: { padding: '48px 48px 0' } },

      React.createElement('div', {
        onClick: function() { navigate('projects'); },
        style: Object.assign({}, fi(0.05), { display: 'inline-flex', alignItems: 'center', gap: '8px', fontSize: '12px', fontWeight: 500, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.35)', cursor: 'pointer', marginBottom: '36px', transition: 'color 0.2s' }),
        onMouseEnter: function(e) { e.currentTarget.style.color = '#ff8a4c'; },
        onMouseLeave: function(e) { e.currentTarget.style.color = 'rgba(255,255,255,0.35)'; },
      }, '← Back to Work'),

      React.createElement('div', {
        style: Object.assign({}, fi(0.10), { fontSize: '12px', fontWeight: 500, letterSpacing: '0.3em', textTransform: 'uppercase', color: 'rgba(255,138,76,0.80)', marginBottom: '14px' })
      }, project.category),

      React.createElement('h1', {
        style: Object.assign({}, fi(0.15), { fontSize: 'clamp(36px,6vw,88px)', fontWeight: 300, lineHeight: 0.92, letterSpacing: '-0.02em', color: '#fff', margin: '0 0 24px' })
      }, project.title),

      React.createElement('div', {
        style: Object.assign({}, fi(0.20), { display: 'flex', flexWrap: 'wrap', gap: '8px', marginBottom: '28px' })
      }, (project.tags || []).map(function(tag) {
        return React.createElement('span', { key: tag,
          style: { fontSize: '12px', fontWeight: 500, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.35)', border: '1px solid rgba(255,255,255,0.15)', borderRadius: '2px', padding: '4px 10px' }
        }, tag);
      })),

      React.createElement('p', {
        style: Object.assign({}, fi(0.25), { fontSize: 'clamp(15px,1.6vw,20px)', fontWeight: 300, lineHeight: 1.70, color: 'rgba(255,255,255,0.55)', maxWidth: '680px', margin: '0 0 24px' })
      }, project.longDescription || project.description),

      project.summaryNote
        ? React.createElement('div', {
            style: Object.assign({}, fi(0.28), {
              display: 'flex', alignItems: 'flex-start', gap: '12px',
              background: 'rgba(255,138,76,0.05)', border: '1px solid rgba(255,138,76,0.15)',
              borderRadius: '4px', padding: '16px 20px', marginBottom: '32px', maxWidth: '680px',
            })
          },
            React.createElement('span', { style: { color: 'rgba(255,138,76,0.70)', fontSize: '14px', marginTop: '1px', flexShrink: 0 } }, '⚠'),
            React.createElement('p', { style: { fontSize: '13px', fontWeight: 300, lineHeight: 1.70, color: 'rgba(255,255,255,0.40)', margin: 0 } }, project.summaryNote)
          )
        : null,

      React.createElement('div', {
        style: Object.assign({}, fi(0.30), { display: 'flex', gap: '12px', flexWrap: 'wrap', marginBottom: '64px' })
      },
        hasPrototypeLink
          ? (project.links || []).filter(function(l) { return l.url && l.url.trim() !== ''; }).map(function(link) {
              return React.createElement('a', {
                key: link.label, href: link.url, target: '_blank', rel: 'noopener noreferrer',
                style: { fontSize: '12px', fontWeight: 500, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#ff8a4c', border: '1px solid rgba(255,138,76,0.40)', borderRadius: '2px', padding: '10px 20px', textDecoration: 'none', transition: 'background 0.2s' },
                onMouseEnter: function(e) { e.currentTarget.style.background = 'rgba(255,138,76,0.10)'; },
                onMouseLeave: function(e) { e.currentTarget.style.background = 'transparent'; },
              }, link.label + ' ↗');
            })
          : null,
        hasPdf
          ? (project.pdfs || []).filter(function(p) { return p.url && p.url.trim() !== ''; }).map(function(pdf) {
              return React.createElement('a', {
                key: pdf.label, href: pdf.url, target: '_blank', rel: 'noopener noreferrer',
                style: { fontSize: '12px', fontWeight: 500, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.50)', border: '1px solid rgba(255,255,255,0.15)', borderRadius: '2px', padding: '10px 20px', textDecoration: 'none', transition: 'border-color 0.2s, color 0.2s' },
                onMouseEnter: function(e) { e.currentTarget.style.borderColor='rgba(255,255,255,0.35)'; e.currentTarget.style.color='#fff'; },
                onMouseLeave: function(e) { e.currentTarget.style.borderColor='rgba(255,255,255,0.15)'; e.currentTarget.style.color='rgba(255,255,255,0.50)'; },
              }, pdf.label + ' ↓');
            })
          : null
      )
    ),

    // ── DIVIDER ──
    React.createElement('div', { style: { height: '1px', background: 'rgba(255,255,255,0.06)', margin: '0 48px 64px' } }),

    // ── CASE STUDY ──
    renderCaseStudy(),

    // ── VIDEO (YouTube embed) ──
    hasVideo
      ? React.createElement('div', { style: { padding: '0 48px 80px' } },
          SectionLabel('Prototype Walkthrough'),
          (project.videos || []).filter(function(v) { return v.embedUrl && v.embedUrl.trim() !== ''; }).map(function(video) {
            return React.createElement('div', {
              key: video.embedUrl,
              style: { position: 'relative', width: '100%', paddingBottom: '56.25%', marginBottom: '20px', borderRadius: '4px', overflow: 'hidden' }
            },
              React.createElement('iframe', {
                src: video.embedUrl,
                title: video.label || 'Video',
                frameBorder: '0',
                allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',
                allowFullScreen: true,
                style: { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', borderRadius: '4px' }
              })
            );
          }),
          project.prototypeNote
            ? React.createElement('div', {
                style: { display: 'flex', alignItems: 'flex-start', gap: '12px', background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: '4px', padding: '16px 20px' }
              },
                React.createElement('span', { style: { color: 'rgba(255,255,255,0.22)', fontSize: '13px', marginTop: '1px', flexShrink: 0 } }, 'Note'),
                React.createElement('p', { style: { fontSize: '13px', fontWeight: 300, lineHeight: 1.70, color: 'rgba(255,255,255,0.35)', margin: 0 } }, project.prototypeNote)
              )
            : null
        )
      : null,

    // ── BEFORE / AFTER ──
    hasBeforeAfter
      ? React.createElement('div', { style: { padding: '0 48px 72px' } },
          SectionLabel('Before → After'),
          SectionDesc('A comparison of the original website alongside the redesigned pages.'),
          React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: '48px' } },
            beforeImages.map(function(before, i) {
              var after = afterImages[i];
              return React.createElement('div', { key: before.url },
                React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px', alignItems: 'start' } },
                  React.createElement('div', null,
                    React.createElement('div', { style: { fontSize: '11px', fontWeight: 600, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.35)', marginBottom: '10px' } }, 'Original'),
                    PlainImg(before.url, 'Before')
                  ),
                  after ? React.createElement('div', null,
                    React.createElement('div', { style: { fontSize: '11px', fontWeight: 600, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#ff8a4c', marginBottom: '10px' } }, 'Redesign'),
                    PlainImg(after.url, 'After')
                  ) : null
                )
              );
            })
          )
        )
      : null,

    // ── BRAND GROUPS ──
    isBrand
      ? React.createElement('div', { style: { padding: '0 48px 64px' } },
          SectionLabel('Selected Works'),
          BrandGroup('Selah Studio', selahImages),
          BrandGroup('CASA Staging', casaImages),
          BrandGroup('GotGot Hunter', gotgotImages),
          BrandGroup('Magazine & Editorial', magazineImages),
          BrandGroup('AMF', amfImages)
        )
      : null,

    // ── PROTOTYPE IMAGES ──
    prototypeImages.length > 0
      ? React.createElement('div', { style: { padding: '0 48px 64px' } },
          SectionLabel('Prototype'),
          React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px' } },
            prototypeImages.map(function(img) { return PlainImg(img.url, img.label); })
          )
        )
      : null,

    // ── SKETCH ──
    sketchImages.length > 0
      ? React.createElement('div', { style: { padding: '0 48px 64px' } },
          SectionLabel('Design Process'),
          React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: '16px' } },
            sketchImages.map(function(img) { return PlainImg(img.url, img.label); })
          )
        )
      : null,

    // ── GALLERY ──
    displayGalleryImages.length > 0
      ? React.createElement('div', { style: { padding: '0 48px 64px' } },
          isLismore ? SectionLabel('All Pages') : null,
          isLismore ? SectionDesc('Full redesign across all six pages of the website.') : null,
          isVivid   ? SectionLabel('Poster Series') : null,
          isVivid   ? SectionDesc('Event visual identity across the poster series.') : null,
          React.createElement('div', { style: galleryGridStyle() },
            displayGalleryImages.map(function(img) { return PlainImg(img.url, img.label); })
          )
        )
      : null,

    // ── KIOSK ──
    kioskImages.length > 0
      ? React.createElement('div', { style: { padding: '0 48px 80px' } },
          SectionLabel('Digital Kiosk Extension'),
          SectionDesc('Extending the redesign into physical touchpoints — a digital kiosk concept for on-site wayfinding and event information.'),
          React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '16px' } },
            kioskImages.map(function(img) { return PlainImg(img.url, img.label); })
          )
        )
      : null,

    // ── CTA ──
    React.createElement('div', {
      style: { margin: '0 48px 0', borderTop: '1px solid rgba(255,255,255,0.06)', padding: '56px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: '24px' }
    },
      React.createElement('p', {
        style: { fontSize: 'clamp(16px,1.8vw,22px)', fontWeight: 300, color: 'rgba(255,255,255,0.55)', margin: 0, lineHeight: 1.5 }
      }, 'Interested in working together or exploring a design brief?'),
      React.createElement('span', {
        onClick: function() { navigate('contact'); },
        style: { fontSize: '12px', fontWeight: 500, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#ff8a4c', border: '1px solid rgba(255,138,76,0.40)', borderRadius: '2px', padding: '12px 24px', cursor: 'pointer', whiteSpace: 'nowrap', transition: 'background 0.2s' },
        onMouseEnter: function(e) { e.currentTarget.style.background = 'rgba(255,138,76,0.10)'; },
        onMouseLeave: function(e) { e.currentTarget.style.background = 'transparent'; },
      }, 'Get in touch →')
    ),

    // ── FOOTER ──
    React.createElement('div', {
      style: { borderTop: '1px solid rgba(255,255,255,0.06)', padding: '40px 48px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }
    },
      React.createElement('span', {
        onClick: function() { navigate('projects'); },
        style: { fontSize: '12px', fontWeight: 500, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.35)', cursor: 'pointer', transition: 'color 0.2s' },
        onMouseEnter: function(e) { e.currentTarget.style.color = '#ff8a4c'; },
        onMouseLeave: function(e) { e.currentTarget.style.color = 'rgba(255,255,255,0.35)'; },
      }, '← All Work'),
      React.createElement('span', {
        style: { fontSize: '12px', fontWeight: 300, color: 'rgba(255,255,255,0.22)' }
      }, project.title)
    )
  );
}

Object.assign(window, { ProjectDetail });