/* ============================================================
   Rainbow Group — projects-index.jsx
   Projects.html — filter bar + 30-card grid.
   Per DESIGN-SYSTEM.md §7.
   ============================================================ */

const { useState: useStatePI, useEffect: useEffectPI, useMemo: useMemoPI } = React;

const ALL_PROJECTS = [
  // ------- Flagship / case studies -------
  { id:'001', name:'Haute Dolci',                       nameAr:'هوت دولچي',                 year:'2025', loc:'Kuwait',          scope:'Facade · GRG dome · Joinery',     type:'Hospitality', href:'Haute Dolci - Case Study.html',    featured:true },
  { id:'002', name:'Tamdeen Square',                   nameAr:'تمدين سكوير',              year:'2022', loc:'Salmiya',         scope:'Fit-out · Joinery',                type:'Residential', href:'Tamdeen Square - Case Study.html', featured:true },
  { id:'003', name:'Lexus Kuwait Showroom',            nameAr:'صالة لكزس',                 year:'2021', loc:'Shuwaikh',        scope:'Showroom fit-out',                type:'Retail',      href:'Lexus - Case Study.html',           featured:true },
  { id:'004', name:'360 Mall — Skylight Wing',          nameAr:'٣٦٠ مول',                   year:'2023', loc:'Zahra',           scope:'Ceilings · Finishes',             type:'Retail',      href:'360 Mall - Case Study.html',        featured:true },
  { id:'005', name:'Siddiqa Fatima Zahra Mosque',      nameAr:'مسجد السيدة فاطمة الزهراء', year:'2020', loc:'Mahboula',        scope:'GRG dome · Specialty paint',      type:'Religious',   href:'Mosque - Case Study.html',          featured:true },
  { id:'006', name:'Bayan Palace',                      nameAr:'قصر بيان',                  year:'2023', loc:'Bayan',           scope:'Interior finishing',              type:'Government',  href:'#', featured:true },

  // ------- Hospitality (hotels, restaurants, cafés) -------
  { id:'007', name:'Four Points by Sheraton',           nameAr:'فور بوينتس شيراتون',       year:'2020', loc:'Kuwait',          scope:'Hospitality fit-out',             type:'Hospitality', href:'#' },
  { id:'018', name:'Symphony Hotel',                    nameAr:'فندق سيمفوني',             year:'2019', loc:'Salmiya',         scope:'Public areas · F&B',              type:'Hospitality', href:'#' },
  { id:'023', name:'Grand Hyatt — Ballroom',             nameAr:'غراند حياة',               year:'2022', loc:'Kuwait',          scope:'Gypsum · Joinery',                type:'Hospitality', href:'#' },
  { id:'028', name:'Holiday Inn — Refurbishment',        nameAr:'هوليداي إن',                year:'2021', loc:'Kuwait',          scope:'Guest rooms',                     type:'Hospitality', href:'#' },
  { id:'031', name:'Holiday Inn — Salmiya',              nameAr:'هوليداي إن السالمية',      year:'2018', loc:'Salmiya',         scope:'Full hotel fit-out',              type:'Hospitality', href:'#' },
  { id:'032', name:'Holiday Inn — Downtown',             nameAr:'هوليداي إن وسط المدينة',   year:'2019', loc:'Kuwait City',     scope:'Guest rooms · Lobby',             type:'Hospitality', href:'#' },
  { id:'033', name:'JW Marriott — La Bassare',           nameAr:'جي دبليو ماريوت',          year:'2020', loc:'Kuwait City',     scope:'Restaurant fit-out',              type:'Hospitality', href:'#' },
  { id:'034', name:'JW Marriott — Crossroads',           nameAr:'جي دبليو ماريوت',          year:'2020', loc:'Kuwait City',     scope:'Restaurant fit-out',              type:'Hospitality', href:'#' },
  { id:'035', name:'Mais Alghanim Restaurant',           nameAr:'ميس الغانم',                year:'2018', loc:'Kuwait',          scope:'Restaurant fit-out',              type:'Hospitality', href:'#' },
  { id:'036', name:'Prime & Toast Restaurant',           nameAr:'برايم آند توست',           year:'2019', loc:'Kuwait',          scope:'Restaurant fit-out',              type:'Hospitality', href:'#' },
  { id:'037', name:'Prime & Toast — Extension',          nameAr:'برايم آند توست',           year:'2020', loc:'Kuwait',          scope:'Restaurant extension',            type:'Hospitality', href:'#' },
  { id:'038', name:'Vortex Coffee Shop',                 nameAr:'فورتكس كوفي شوب',          year:'2019', loc:'Kuwait City',     scope:'Café build-out · Joinery',        type:'Hospitality', href:'#' },
  { id:'039', name:'Brown Sugar — Al Yarmouk',            nameAr:'براون شوقر — اليرموك',      year:'2024', loc:'Al Yarmouk',     scope:'Design & build · Café',           type:'Hospitality', href:'#' },

  // ------- Retail (malls, showrooms, stores) -------
  { id:'008', name:'Liwan Mall',                         nameAr:'ليوان مول',                 year:'2021', loc:'Kuwait',          scope:'Retail fit-out',                  type:'Retail',      href:'#' },
  { id:'009', name:'Gate Mall',                           nameAr:'قيت مول',                   year:'2022', loc:'Egaila',          scope:'Ceilings · Joinery',              type:'Retail',      href:'#' },
  { id:'014', name:'Al Shaya Flagship — H&M',             nameAr:'الشايع',                    year:'2024', loc:'The Avenues',     scope:'Store roll-out',                  type:'Retail',      href:'#' },
  { id:'017', name:'Debenhams — Salmiya',                 nameAr:'دبنهامز',                   year:'2020', loc:'Salmiya',         scope:'Flooring · Ceilings',             type:'Retail',      href:'#' },
  { id:'024', name:'Lulu Hypermarket — Jahra',            nameAr:'لولو',                      year:'2023', loc:'Jahra',           scope:'Specialty finishes',              type:'Retail',      href:'#' },
  { id:'027', name:'Al Yousifi Showroom',                 nameAr:'اليوسفي',                   year:'2020', loc:'Hawalli',         scope:'Retail fit-out',                  type:'Retail',      href:'#' },
  { id:'040', name:'360 Mall — Cinema',                    nameAr:'سينما ٣٦٠',                 year:'2020', loc:'Zahra',           scope:'Acoustic · Finishes',             type:'Retail',      href:'#' },
  { id:'041', name:'Al Yousifi Lighting — Fahaheel',       nameAr:'اليوسفي للإضاءة — الفحيحيل', year:'2021', loc:'Fahaheel',      scope:'Showroom fit-out',                type:'Retail',      href:'#' },
  { id:'042', name:'Al Yousifi Lighting — Shuwaikh',       nameAr:'اليوسفي للإضاءة — الشويخ',  year:'2022', loc:'Shuwaikh',        scope:'Showroom fit-out',                type:'Retail',      href:'#' },
  { id:'043', name:'Kuwait Oxygen & Acetylene Retail',     nameAr:'الأوكسجين الكويتية',         year:'2019', loc:'Kuwait',          scope:'Retail complex fit-out',          type:'Retail',      href:'#' },
  { id:'044', name:'Lulu Qurain — Renovation',             nameAr:'لولو القرين',                year:'2019', loc:'Qurain',          scope:'Renovation works',                type:'Retail',      href:'#' },

  // ------- Religious -------
  { id:'019', name:'Sheikh Mubarak Al Sabah Memorial',    nameAr:'مسجد الشيخ مبارك',           year:'2019', loc:'Kuwait',          scope:'Interior finishing',              type:'Religious',   href:'#' },
  { id:'026', name:'Al Rasheed Mosque',                    nameAr:'مسجد الرشيد',                year:'2018', loc:'Hawalli',         scope:'GRC dome · Mihrab',               type:'Religious',   href:'#' },
  { id:'045', name:'Sheikha Badria Al Jaber Mosque',        nameAr:'مسجد الشيخة بدرية الجابر',   year:'2018', loc:'Mahboula',        scope:'GRG · GRC · Interior fit-out',    type:'Religious',   href:'#' },

  // ------- Residential — villas & compounds -------
  { id:'011', name:'Gassan Al Khalid Residence',           nameAr:'مقر الخالد',                  year:'2024', loc:'Yarmouk',         scope:'Interior finishing',              type:'Residential', href:'#' },
  { id:'015', name:'Bneid Al Gar Villa',                    nameAr:'فيلا بنيد القار',             year:'2023', loc:'Bneid Al Gar',   scope:'Joinery · Stone',                  type:'Residential', href:'#' },
  { id:'020', name:'Salwa Family Compound',                  nameAr:'مجمع سلوى',                    year:'2021', loc:'Salwa',          scope:'Multi-villa fit-out',              type:'Residential', href:'#' },
  { id:'029', name:'Mishref Residence',                      nameAr:'مقر مشرف',                     year:'2019', loc:'Mishref',        scope:'Joinery · Painting',               type:'Residential', href:'#' },
  { id:'046', name:'Ghassan Al Khalid Complex',              nameAr:'مجمّع غسان الخالد',            year:'2019', loc:'Kuwait',          scope:'Full residential complex',         type:'Residential', href:'#' },
  { id:'047', name:'Faisal Al Fulaij Villa',                  nameAr:'فيلا فيصل الفليج',            year:'2020', loc:'Shamiya',        scope:'Joinery · Stone · Paint',           type:'Residential', href:'#' },
  { id:'048', name:'Munira Al Marzouk Villa',                 nameAr:'فيلا منيرة المرزوق',          year:'2020', loc:'Yarmouk',        scope:'Interior finishing',               type:'Residential', href:'#' },
  { id:'049', name:'Essam Al Mailam Villa',                    nameAr:'فيلا عصام الملم',            year:'2020', loc:'Adailiya',       scope:'Full interior · GRG · Paint',      type:'Residential', href:'#' },
  { id:'050', name:'Abdulla Muttawa Villa',                     nameAr:'فيلا عبدالله المطوع',        year:'2019', loc:'Mishref',        scope:'Joinery · Paint',                  type:'Residential', href:'#' },
  { id:'051', name:'Abdul Aziz Al Saheli Villa',                nameAr:'فيلا عبدالعزيز الساحلي',     year:'2021', loc:'Adailiya',       scope:'Interior fit-out',                 type:'Residential', href:'#' },
  { id:'052', name:'Ali Abdul Wahab Al Muttawa Villa',          nameAr:'فيلا علي عبدالوهاب المطوع',   year:'2020', loc:'South Surra',     scope:'Franklin Mariano design',          type:'Residential', href:'#' },
  { id:'053', name:'Feras Alghanim Villa',                      nameAr:'فيلا فراس الغانم',          year:'2021', loc:'Abdulla Al Salem', scope:'Franklin Mariano design',          type:'Residential', href:'#' },
  { id:'054', name:'Tamadar Al Shaya Villa',                    nameAr:'فيلا تمادر الشايع',         year:'2018', loc:'Khaldiya',       scope:'First United · AGI design',         type:'Residential', href:'#' },
  { id:'055', name:'Abdul Wahab Al Nakib Villa',                nameAr:'فيلا عبدالوهاب النقيب',     year:'2018', loc:'Abdulla Al Salem', scope:'First United · AGI design',         type:'Residential', href:'#' },
  { id:'056', name:'Al Rasheed Villa',                          nameAr:'فيلا الرشيد',               year:'2022', loc:'Adailiya',       scope:'DMDA · Joinery · Stone',           type:'Residential', href:'#' },
  { id:'057', name:'Tameer Al Oaisimi Villa',                   nameAr:'فيلا تعمير القيصمي',        year:'2020', loc:'Al Sadeeq',       scope:'Interior finishing',               type:'Residential', href:'#' },

  // ------- Residential — kitchens & wardrobes -------
  { id:'058', name:'7th Avenue Residences — Kitchens',         nameAr:'السابع — صباح السالم',       year:'2019', loc:'Sabah Al Salem', scope:'Kitchens · Wardrobes',             type:'Residential', href:'#' },
  { id:'059', name:'Injaaz Tower Kitchens',                    nameAr:'برج إنجاز',                 year:'2020', loc:'Sharq',           scope:'Kitchens · Joinery',               type:'Residential', href:'#' },
  { id:'060', name:'Abeer Al Sabah Residence',                  nameAr:'عبير الصباح',               year:'2020', loc:'Salwa',           scope:'Kitchen · Wardrobe package',        type:'Residential', href:'#' },
  { id:'061', name:'Ahmed Ashkhnani Residence',                 nameAr:'أحمد أشكناني',              year:'2020', loc:'Abu Fatira',      scope:'Kitchen · Joinery',                 type:'Residential', href:'#' },
  { id:'062', name:'Sheikh Mubarak Al Sabah Residence',         nameAr:'الشيخ مبارك الصباح',         year:'2021', loc:'Abu Hasaniya',   scope:'Kitchen · Wardrobe package',        type:'Residential', href:'#' },
  { id:'063', name:'Ibrahim Saqabi Residence',                  nameAr:'إبراهيم الصقابي',           year:'2021', loc:'Mishref',         scope:'Kitchen · Joinery',                 type:'Residential', href:'#' },
  { id:'064', name:'Sheikha Sara Al Sabah — Dasman',            nameAr:'الشيخة سارة الصباح',         year:'2022', loc:'Dasman Palace',  scope:'Kitchen · Palace residence',        type:'Residential', href:'#' },
  { id:'065', name:'Surra Residences',                          nameAr:'مقر السرة',                  year:'2021', loc:'Surra',          scope:'Residences · Joinery',              type:'Residential', href:'#' },
  { id:'066', name:'Sheikha Athoub Al Sabah Residence',         nameAr:'الشيخة عذوب الصباح',        year:'2022', loc:'Salam',           scope:'Kitchen · Wardrobe package',        type:'Residential', href:'#' },

  // ------- Government / Institutional -------
  { id:'012', name:'Ministry of Finance — Wing B',             nameAr:'وزارة المالية',              year:'2020', loc:'Kuwait',          scope:'Partitions · Flooring',            type:'Government',  href:'#' },
  { id:'021', name:'Sheikh Mubarak Estate',                     nameAr:'عزبة الشيخ مبارك',           year:'2022', loc:'Kuwait',          scope:'Custom joinery',                   type:'Government',  href:'#' },
  { id:'067', name:'AGI Architects — Free Trade Zone',           nameAr:'مكاتب AGI',                  year:'2019', loc:'Shuwaikh',       scope:'Full office fit-out',              type:'Government',  href:'#' },
  { id:'068', name:'Eastern Car Park — MOF',                      nameAr:'موقف السيارات الشرقي',     year:'2019', loc:'Kuwait City',    scope:'Finishing works',                  type:'Government',  href:'#' },

  // ------- Commercial -------
  { id:'013', name:'UPS Kuwait — Service Centre',               nameAr:'مركز UPS',                   year:'2020', loc:'Dajeej',          scope:'Industrial fit-out',               type:'Commercial',  href:'#' },
  { id:'016', name:'CGC Kuwait — HQ',                            nameAr:'مقر CGC',                    year:'2023', loc:'Kuwait',          scope:'Partitions · Joinery',             type:'Commercial',  href:'#' },
  { id:'022', name:'First United — Trading Floor',               nameAr:'فيرست يونايتد',              year:'2020', loc:'Kuwait',          scope:'Office fit-out',                   type:'Commercial',  href:'#' },
  { id:'025', name:'AGI Architects Office',                      nameAr:'مقر AGI',                    year:'2022', loc:'Shuwaikh',        scope:'Studio fit-out',                   type:'Commercial',  href:'#' },
  { id:'030', name:'Al Rasheed Group HQ',                         nameAr:'مجموعة الرشيد',              year:'2024', loc:'Sharq',           scope:'Full fit-out',                     type:'Commercial',  href:'#' },
];

const FILTER_TYPES = ['All', 'Hospitality', 'Retail', 'Religious', 'Residential', 'Government', 'Commercial'];

function ProjectCard({ p }) {
  const clickable = p.href !== '#';
  return (
    <a href={p.href} data-cursor-label={clickable ? 'VIEW' : 'SOON'}
       style={{
         minHeight: 260,
         border: '1px solid var(--rule)',
         padding: '28px 28px 24px',
         display: 'flex', flexDirection: 'column',
         textDecoration: 'none', color: 'inherit',
         transition: 'background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease',
         background: 'transparent',
       }}
       onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--paper)'; e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 24px 50px rgba(0,0,0,0.08)'; }}
       onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'none'; }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 20, gap: 12 }}>
        <span className="mono" style={{ color: 'var(--muted)' }}>{p.id}</span>
        <div style={{ display: 'flex', gap: 10, alignItems: 'baseline' }}>
          {p.featured ? <span className="mono" style={{ color: 'var(--gold)', fontSize: 9 }}>★ Featured</span> : null}
          <span className="mono" style={{ color: 'var(--muted)' }}>{p.year}</span>
        </div>
      </div>
      <div className="display" style={{ fontSize: 26, lineHeight: 1.15, marginBottom: 6, textWrap: 'balance' }}>{p.name}</div>
      <div className="ar" style={{ fontSize: 15, color: 'var(--muted)', marginBottom: 20 }}>{p.nameAr}</div>
      <div style={{ fontSize: 13, fontStyle: 'italic', fontFamily: "'Fraunces', serif", color: 'var(--ink-2)', marginBottom: 20 }}>{p.scope}</div>
      <div style={{ marginTop: 'auto', paddingTop: 16, borderTop: '1px solid var(--rule)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 11, gap: 12 }}>
        <span className="mono" style={{ color: 'var(--muted)' }}>{p.type} · {p.loc}</span>
        <span className="mono" style={{ color: clickable ? 'var(--gold)' : 'var(--muted)', fontSize: 10 }}>
          {clickable ? 'Case study →' : 'Listing only'}
        </span>
      </div>
    </a>
  );
}

function ProjectsHero() {
  const ref = useReveal();
  return (
    <header ref={ref} className="reveal" style={{ background: 'var(--paper)', paddingTop: 180, paddingBottom: 80 }}>
      <div className="wrap">
        <div className="eyebrow" style={{ marginBottom: 32 }}>Index · الفهرس</div>
        <h1 className="display" style={{ fontSize: 'clamp(56px, 9vw, 160px)', maxWidth: '14ch', lineHeight: 0.95 }}>
          Sixty of <em style={{ color: 'var(--gold)', fontStyle: 'italic' }}>five hundred</em>.
        </h1>
        <div className="ar" style={{ fontSize: 'clamp(26px, 3vw, 44px)', color: 'var(--muted)', marginTop: 20 }}>ستّون من خمسمائة</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, marginTop: 72, alignItems: 'end' }} data-mobile-stack>
          <p style={{ fontSize: 18, color: 'var(--ink-2)', maxWidth: 560, lineHeight: 1.65, margin: 0 }}>
            The working index of projects catalogued in our company profile — hospitality, retail, residential, religious, government and commercial interiors, completed across Kuwait since 2017 with a 25-year craft lineage behind it.
          </p>
          <div className="mono" style={{ color: 'var(--muted)', textAlign: 'right' }}>Last revised · Q2 2026 · {`${ALL_PROJECTS.length} of 500+ shown`}</div>
        </div>
      </div>
    </header>
  );
}

function ProjectsGrid() {
  const [filter, setFilter] = useStatePI('All');
  const ref = useReveal();

  const counts = useMemoPI(() => {
    const c = { All: ALL_PROJECTS.length };
    for (const p of ALL_PROJECTS) c[p.type] = (c[p.type] || 0) + 1;
    return c;
  }, []);

  const filtered = useMemoPI(() =>
    filter === 'All' ? ALL_PROJECTS : ALL_PROJECTS.filter(p => p.type === filter),
    [filter]);

  return (
    <section ref={ref} className="reveal" style={{ background: 'var(--paper-2)', padding: '80px 0 140px', borderTop: '1px solid var(--rule)' }}>
      <div className="wrap">
        <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', marginBottom: 48, paddingBottom: 24, borderBottom: '1px solid var(--rule)' }}>
          {FILTER_TYPES.map((t) => {
            const active = t === filter;
            const n = counts[t] || 0;
            return (
              <button
                key={t}
                onClick={() => setFilter(t)}
                data-cursor-label="FILTER"
                style={{
                  padding: '10px 16px',
                  border: '1px solid var(--ink)',
                  background: active ? 'var(--ink)' : 'transparent',
                  color: active ? 'var(--paper)' : 'var(--ink)',
                  fontFamily: "'Inter Tight', sans-serif",
                  fontSize: 12, letterSpacing: '0.08em', textTransform: 'uppercase',
                  cursor: 'pointer',
                  display: 'inline-flex', alignItems: 'baseline', gap: 10,
                }}>
                <span>{t}</span>
                <span className="mono" style={{ fontSize: 10, opacity: 0.7 }}>{String(n).padStart(2, '0')}</span>
              </button>
            );
          })}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }} data-mobile-stack>
          {filtered.map((p) => <ProjectCard key={p.id} p={p} />)}
        </div>

        <div style={{ marginTop: 64, paddingTop: 32, borderTop: '1px solid var(--rule)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
          <span className="mono" style={{ color: 'var(--muted)' }}>
            Showing {filtered.length} of {ALL_PROJECTS.length} listed · full portfolio (500+) on request
          </span>
          <a href="Contact.html" className="btn" data-cursor-label="Write">Request portfolio <span className="arrow">→</span></a>
        </div>
      </div>
    </section>
  );
}

function ProjectsApp() {
  useEffectPI(() => {
    const h = document.documentElement;
    h.setAttribute('data-palette', 'archival');
    h.setAttribute('data-motif', 'subtle');
    h.setAttribute('data-motion', 'combination');
    h.setAttribute('data-cursor', 'custom');
    h.setAttribute('data-signature', 'off');
  }, []);

  return (
    <React.Fragment>
      <SharedNav currentPath="Projects.html" />
      <ProjectsHero />
      <ProjectsGrid />
      <SharedFooter />
      <RGCursor />
    </React.Fragment>
  );
}

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