/* ============================================================
   Rainbow Group — case-study.jsx
   Shared chrome + all sections for the 5 case-study pages.
   Per DESIGN-SYSTEM.md §10. Each project.jsx feeds data in.
   ============================================================ */

const { useState: useStateCS, useEffect: useEffectCS } = React;

function CaseNav() {
  const [scrolled, setScrolled] = useStateCS(false);
  useEffectCS(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={`nav-root nav-root--home-initial ${scrolled ? 'nav-root--scrolled' : ''}`} aria-label="Primary">
      <div className="wrap nav-wrap">
        <a className="nav-brand" href="Rainbow Group.html" data-cursor-label="Home">
          <img src="assets/logo-icon.png" alt="" />
          <span className="nav-brand__text">
            <span className="nav-brand__name">Rainbow Group Contracting Company</span>
            <span className="nav-brand__meta">RGCC W.L.L · Est. 2017</span>
          </span>
        </a>
        <div />
        <a href="Rainbow Group.html#work" className="mono" data-cursor-label="Back"
           style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontSize: 10 }}>
          <span style={{ display: 'inline-block', transform: 'rotate(180deg)' }}>→</span>
          Back to index
        </a>
      </div>
    </nav>
  );
}

function CaseFooter() {
  return (
    <footer style={{ background: 'var(--ink-2)', color: 'rgba(243,237,226,0.6)', padding: '40px 0' }}>
      <div className="wrap" style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24 }}>
        <span className="mono" style={{ fontSize: 10 }}>© Rainbow Group Contracting Company W.L.L · RGCC · Est. 2017</span>
        <a href="Rainbow Group.html#work" className="mono" style={{ color: 'rgba(243,237,226,0.85)', fontSize: 10 }} data-cursor-label="Back">← Back to index</a>
      </div>
    </footer>
  );
}

function CaseHero({ data }) {
  return (
    <header style={{ height: '100vh', minHeight: 720, background: 'var(--ink)', position: 'relative', overflow: 'hidden', color: '#f3ede2' }}>
      <img src={data.hero} alt="" aria-hidden="true"
           style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: data.heroPosition || 'center', filter: 'saturate(0.8) contrast(1.05)' }} />
      <div aria-hidden="true" style={{ position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(21,20,18,0.55) 0%, rgba(21,20,18,0.2) 35%, rgba(21,20,18,0.1) 65%, rgba(21,20,18,0.9) 100%)' }} />
      <div className="wrap" style={{ position: 'relative', zIndex: 2, paddingTop: 120 }}>
        <div className="mono" style={{ color: 'rgba(243,237,226,0.75)', fontSize: 10 }}>
          Selected Work · {data.id} / 009 · {data.meta.Type}
        </div>
      </div>
      <div style={{ position: 'absolute', bottom: 64, left: 0, right: 0, zIndex: 2 }}>
        <div className="wrap case-hero-inner" style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 48, alignItems: 'end' }} data-mobile-stack>
          <div>
            <h1 className="display" style={{ fontSize: 'clamp(56px, 8.5vw, 148px)', color: '#f3ede2', lineHeight: 0.92, maxWidth: '16ch' }}>
              {data.title.line1}<br/>
              <em style={{ color: 'var(--gold-hi)', fontStyle: 'italic' }}>{data.title.line2}</em>
            </h1>
            <div className="ar" style={{ fontSize: 'clamp(28px, 3.5vw, 52px)', color: 'rgba(243,237,226,0.7)', marginTop: 18 }}>{data.titleAr}</div>
          </div>
          <div className="case-hero-meta" style={{
            display: 'grid', gridTemplateColumns: 'repeat(2, auto)', gap: '18px 48px',
            padding: '24px 32px', border: '1px solid rgba(243,237,226,0.3)',
            background: 'rgba(21,20,18,0.25)', backdropFilter: 'blur(8px)',
          }}>
            {Object.entries(data.meta).map(([k, v]) => (
              <div key={k}>
                <div className="mono" style={{ fontSize: 9, color: 'rgba(243,237,226,0.55)', marginBottom: 6 }}>{k}</div>
                <div style={{ fontSize: 13 }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <span className="mono" style={{ position: 'absolute', bottom: 20, right: 56, color: 'rgba(243,237,226,0.5)', fontSize: 10, zIndex: 2 }}>scroll for the story ↓</span>
    </header>
  );
}

function CaseSectionHead({ idx, kicker, en, ar, dark = false }) {
  const muted = dark ? 'rgba(243,237,226,0.55)' : 'var(--muted)';
  const ink = dark ? '#f3ede2' : 'var(--ink)';
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 40, alignItems: 'baseline', marginBottom: 56 }}>
      <div>
        <div className="eyebrow" style={{ color: muted, marginBottom: 8 }}>{kicker}</div>
        <h2 className="display" style={{ fontSize: 'clamp(40px, 5.5vw, 84px)', color: ink, display: 'flex', gap: 24, alignItems: 'baseline', flexWrap: 'wrap' }}>
          <span>{en}</span>
          <span className="ar" style={{ fontSize: '0.55em', color: muted, fontWeight: 400 }}>{ar}</span>
        </h2>
      </div>
      <div style={{ width: 60, height: 1, background: ink, opacity: 0.6 }} />
    </div>
  );
}

function CaseBrief({ data }) {
  const ref = useReveal();
  return (
    <section ref={ref} className="reveal" style={{ background: 'var(--paper)', padding: '140px 0 100px' }}>
      <div className="wrap">
        <CaseSectionHead idx="01" kicker={data.brief.kicker} en={data.brief.en} ar={data.brief.ar} />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 64, alignItems: 'start' }} data-mobile-stack>
          <div>
            <div className="mono" style={{ color: 'var(--muted)', marginBottom: 14 }}>Why it mattered</div>
            <p style={{ fontSize: 14, color: 'var(--muted)', lineHeight: 1.65 }}>{data.brief.side}</p>
          </div>
          <p className="display" style={{ fontSize: 'clamp(26px, 3vw, 46px)', lineHeight: 1.25 }}
             dangerouslySetInnerHTML={{ __html: data.brief.body }} />
        </div>
      </div>
    </section>
  );
}

function CaseTheRoom({ data }) {
  const ref = useReveal();
  return (
    <section ref={ref} className="reveal" style={{ background: 'var(--paper-2)', padding: '120px 0' }}>
      <div className="wrap">
        <CaseSectionHead idx="02" kicker={data.room.kicker} en={data.room.en} ar={data.room.ar} />
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 56, alignItems: 'center' }} data-mobile-stack>
          <div style={{ aspectRatio: '3 / 4', overflow: 'hidden', border: '1px solid var(--rule)' }}>
            <img src={data.room.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
          <div>
            <p className="display" style={{ fontSize: 'clamp(24px, 2.6vw, 40px)', lineHeight: 1.3 }}
               dangerouslySetInnerHTML={{ __html: data.room.body }} />
            <div className="case-specs" style={{ marginTop: 40, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '28px 40px' }} data-mobile-stack>
              {data.room.specs.map(([k, v]) => (
                <div key={k} style={{ borderTop: '1px solid var(--rule)', paddingTop: 14 }}>
                  <div className="mono" style={{ color: 'var(--muted)', marginBottom: 6 }}>{k}</div>
                  <div style={{ fontFamily: "'Fraunces', serif", fontSize: 20 }}>{v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CaseProcess({ data }) {
  const ref = useReveal();
  return (
    <section ref={ref} className="reveal" style={{ background: 'var(--ink)', color: '#f3ede2', padding: '140px 0' }}>
      <div className="wrap">
        <CaseSectionHead idx="03" kicker={data.process.kicker} en={data.process.en} ar={data.process.ar} dark />
        <div style={{ borderTop: '1px solid rgba(243,237,226,0.18)' }}>
          {data.process.steps.map((s, i) => (
            <div key={s.label} style={{
              display: 'grid', gridTemplateColumns: '80px 200px 1fr 120px', gap: 24, padding: '36px 0',
              borderBottom: '1px solid rgba(243,237,226,0.12)', alignItems: 'baseline',
            }} data-mobile-stack>
              <span className="mono" style={{ color: 'var(--gold-hi)' }}>0{i + 1}</span>
              <div style={{ fontFamily: "'Fraunces', serif", fontSize: 28, color: '#f3ede2' }}>{s.label}</div>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: 'rgba(243,237,226,0.85)', margin: 0 }}>{s.body}</p>
              <span className="mono" style={{ color: 'rgba(243,237,226,0.45)', textAlign: 'right', fontSize: 10 }}>{s.enLabel}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CaseStats({ stats }) {
  const ref = useReveal();
  return (
    <section ref={ref} className="reveal" style={{ background: 'var(--paper-2)', padding: '100px 0' }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }} data-mobile-stack>
          {stats.map((s) => (
            <div key={s.label} style={{ borderTop: '1px solid var(--rule)', paddingTop: 24 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                <span className="display" style={{ fontSize: 'clamp(48px, 6vw, 92px)' }}>{s.num}</span>
                {s.suffix ? <span className="display" style={{ fontSize: 'clamp(22px, 2.4vw, 36px)', color: 'var(--gold)' }}>{s.suffix}</span> : null}
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 12, gap: 12 }}>
                <span className="mono" style={{ color: 'var(--muted)' }}>{s.label}</span>
                {s.ar ? <span className="ar" style={{ fontSize: 14, color: 'var(--muted)' }}>{s.ar}</span> : null}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CaseTestimonial({ t }) {
  const ref = useReveal();
  return (
    <section ref={ref} className="reveal" style={{ background: 'var(--paper)', padding: '140px 0' }}>
      <div className="wrap" style={{ maxWidth: 980 }}>
        <div style={{ fontFamily: "'Fraunces', serif", fontStyle: 'italic', fontSize: 96, color: 'var(--gold)', lineHeight: 1, marginBottom: 12 }}>&ldquo;</div>
        <blockquote className="display italic" style={{ fontSize: 'clamp(28px, 3.5vw, 52px)', fontStyle: 'italic', lineHeight: 1.3, margin: 0 }}>
          {t.quote}
        </blockquote>
        <div style={{ display: 'flex', alignItems: 'center', gap: 18, marginTop: 40 }}>
          <span style={{ width: 40, height: 1, background: 'var(--ink)' }} />
          <span style={{ fontFamily: "'Fraunces', serif", fontSize: 18 }}>{t.role}</span>
          <span className="mono" style={{ color: 'var(--muted)' }}>{t.context}</span>
        </div>
      </div>
    </section>
  );
}

function CaseGallery({ gallery }) {
  const ref = useReveal();
  return (
    <section ref={ref} className="reveal" style={{ background: 'var(--paper-2)', padding: '120px 0' }}>
      <div className="wrap">
        <CaseSectionHead idx="04" kicker="Gallery · الصور" en="In use" ar="قيد الاستخدام" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 32 }} data-mobile-stack>
          {gallery.map((g, i) => (
            <figure key={g.src} style={{
              margin: 0,
              gridColumn: i === 0 ? 'span 2' : 'auto',
              aspectRatio: i === 0 ? '21 / 9' : '4 / 5',
              position: 'relative',
              overflow: 'hidden',
            }}>
              <img src={g.src} alt={g.caption} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
              <figcaption style={{ display: 'flex', gap: 12, padding: '14px 4px 0', alignItems: 'baseline' }}>
                <span className="mono" style={{ color: 'var(--muted)' }}>Fig. 0{i + 1}</span>
                <span style={{ fontFamily: "'Fraunces', serif", fontStyle: 'italic', fontSize: 14, color: 'var(--ink-2)' }}>{g.caption}</span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function CaseNextProject({ next }) {
  const ref = useReveal();
  return (
    <a href={next.href} data-cursor-label="Next">
      <section ref={ref} className="reveal" style={{ background: 'var(--ink)', color: '#f3ede2', padding: '120px 0' }}>
        <div className="wrap" style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 40, alignItems: 'end' }} data-mobile-stack>
          <div>
            <div className="mono" style={{ color: 'rgba(243,237,226,0.55)', marginBottom: 18 }}>Next · {next.id} / 009</div>
            <h3 className="display" style={{ fontSize: 'clamp(48px, 7vw, 112px)', color: '#f3ede2' }}>
              {next.title} <span style={{ color: 'var(--gold-hi)' }}>→</span>
            </h3>
            <div className="ar" style={{ fontSize: 28, color: 'rgba(243,237,226,0.55)', marginTop: 14 }}>{next.titleAr}</div>
          </div>
          <span className="btn light" style={{ whiteSpace: 'nowrap' }}>↑ All projects</span>
        </div>
      </section>
    </a>
  );
}

function CaseStudy({ data }) {
  useEffectCS(() => {
    const h = document.documentElement;
    h.setAttribute('data-palette', 'archival');
    h.setAttribute('data-motion', 'combination');
    h.setAttribute('data-motif', 'subtle');
    h.setAttribute('data-cursor', 'custom');
    h.setAttribute('data-signature', 'off');
  }, []);
  return (
    <React.Fragment>
      <CaseNav />
      <CaseHero data={data} />
      <CaseBrief data={data} />
      <CaseTheRoom data={data} />
      <CaseProcess data={data} />
      <CaseStats stats={data.stats} />
      <CaseTestimonial t={data.testimonial} />
      <CaseGallery gallery={data.gallery} />
      <CaseNextProject next={data.next} />
      <CaseFooter />
      <RGCursor />
    </React.Fragment>
  );
}

Object.assign(window, { CaseStudy, CaseNav, CaseFooter, CaseHero, CaseBrief, CaseTheRoom, CaseProcess, CaseStats, CaseTestimonial, CaseGallery, CaseNextProject });