/* ============================================================
   Rainbow Group — about.jsx
   About.html — Hero, Ethos, Story, LeadershipFull, Credentials, CTA.
   Per DESIGN-SYSTEM.md §8.
   ============================================================ */

const { useState: useStateAb, useEffect: useEffectAb } = React;

const RULES = [
  { n: '01', title: 'Quality is a vocabulary',
    body: 'Plaster returns. Stone reveals. The millimetre between two gypsum tiles. We teach it, we draw it, we sign it off on the wall before the client ever sees the room.' },
  { n: '02', title: 'The detail, not the hero shot',
    body: "Our work is judged by the joints you never notice. We save the photography for the edges, the reveals, the returns — and the architect's original drawing." },
  { n: '03', title: 'Time is the real budget',
    body: 'Most contractors trade time for cost. We trade time for quality. A room delivered on schedule but half-finished is not finished.' },
  { n: '04', title: 'The site belongs to the client',
    body: 'No loud music, no abandoned coffee cups, no trades working past Isha in a mosque site. Respect is a deliverable.' },
];

const STORY = [
  { year: '2001', title: 'Hasan Habib General Trading' },
  { year: '2008', title: 'First turnkey fit-out' },
  { year: '2015', title: '300 projects delivered' },
  { year: '2017', title: 'RGCC incorporated' },
  { year: '2020', title: 'Four Points by Sheraton' },
  { year: '2022', title: '500 projects' },
  { year: '2025', title: 'Haute Dolci' },
  { year: '2026', title: 'Present — 6 live sites' },
];

const TEAM_FULL = [
  { name: 'Asif Bhati',     ar: 'آصف بھاٹی',    role: 'Chief Executive Officer', years: '25', init: 'AB',
    bio: "Asif leads the firm's long-term strategy, sets the quality vocabulary, and personally reviews the scope for every project over 2,500 m². He came into the family trading business in 2001 and founded RGCC in 2017." },
  { name: 'Rizwan Bhati',   ar: 'رضوان بھاٹی',  role: 'General Manager',          years: '18', init: 'RB',
    bio: "Rizwan runs operations: workshop throughput, site scheduling, and the firm's relationships with its principal suppliers (Knauf, Mannington, Recer Cerâmica, Sitab, Strähle). He was on the site of every one of our 500 completed projects." },
  { name: 'George Paul',    ar: 'جورج بول',     role: 'Director',                 years: '20', init: 'GP',
    bio: 'George directs the joinery and stone divisions, and chairs the quality-review panel. Twenty years on Kuwait sites means the name of the best timber supplier in the country belongs on his personal phone.' },
];

const FAQS = [
  {
    q: 'What does Rainbow Group Contracting Company do?',
    a: 'RGCC is a Kuwaiti general contracting company specialising in interior finishing and fit-out work — GRG, GRC, gypsum, joinery, stone, and specialty paints — for hospitality, retail, religious, residential, government and commercial clients across Kuwait and the wider GCC.',
  },
  {
    q: 'Where is Rainbow Group located?',
    a: 'Our head office is at Fahed Al Salem Street, Suad Complex, Office B1, Kuwait City (N 29.3759° · E 47.9774°). Our GRG/GRC casting workshop is at Amghara industrial area. Site visits to either are by appointment.',
  },
  {
    q: 'When was Rainbow Group established?',
    a: 'RGCC was incorporated as a limited-liability company in 2017. It carries forward the 25-year craft lineage of parent firm Hasan Habib General Trading, which has operated in Kuwait since 2001.',
  },
  {
    q: 'Who are Rainbow Group\u2019s notable clients?',
    a: 'Al Shaya, Tamdeen Group, JW Marriott, Holiday Inn, Lexus, AGI Architects, M.A. Kharafi & Sons, Ahmadiah Contracting, Lulu Group, CGC Kuwait, Ministry of Finance, The Sultan Center, Salhia Real Estate and Grand Hyatt — among others.',
  },
  {
    q: 'How can I commission a project?',
    a: 'Email info@rainbowgroup-kwt.com or call +965 · 2241 0045. All enquiries reach the General Manager directly and receive a reply within 48 working hours. The Contact page has a full enquiry form that routes to the same inbox.',
  },
];

const CREDENTIALS = [
  ['Commercial Registration',     'Kuwait Ministry of Commerce · 2017'],
  ['Paid-up capital',             'KWD 250,000'],
  ['ISO 9001',                    'Quality management (pending renewal Q3 2026)'],
  ['ISO 45001',                   'Occupational Health & Safety'],
  ['Kuwait Chamber of Commerce',  'Active member since 2017'],
  ['MOI classified contractor',   'Interior finishing — Class A'],
];

function AboutHero() {
  const ref = useReveal();
  return (
    <header ref={ref} className="reveal" style={{ background: 'var(--paper)', paddingTop: 180, paddingBottom: 100 }}>
      <div className="wrap">
        <div className="eyebrow" style={{ marginBottom: 32 }}>About · حول</div>
        <h1 className="display" style={{ fontSize: 'clamp(56px, 9vw, 160px)', maxWidth: '16ch' }}>
          We are a <em style={{ color: 'var(--gold)', fontStyle: 'italic' }}>finishing house</em> — and not much else.
        </h1>
        <div className="ar" style={{ fontSize: 'clamp(26px, 3vw, 44px)', color: 'var(--muted)', marginTop: 20 }}>بيتٌ للتشطيب</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 48, marginTop: 72, alignItems: 'end' }} data-mobile-stack>
          <p className="display" style={{ fontSize: 'clamp(22px, 2vw, 30px)', color: 'var(--ink-2)', lineHeight: 1.3 }}>
            Rainbow Group Contracting Company was incorporated in 2017 to do one thing well: the last ten percent of a building — the part you actually touch, see and live with.
          </p>
          <p style={{ fontSize: 15, lineHeight: 1.7, color: 'var(--ink-2)', maxWidth: 520, justifySelf: 'end', margin: 0 }}>
            The craft, the supply chain, and the client relationships pre-date us by twenty-five years, through the parent firm Hasan Habib General Trading. We brought all of that under a single roof, kept the workshops that mattered, and hired the engineers we needed to take on more complex sites.
          </p>
        </div>
      </div>
    </header>
  );
}

function Ethos() {
  const ref = useReveal();
  return (
    <section id="ethos" ref={ref} className="reveal" style={{ background: 'var(--paper-2)', padding: '140px 0 100px' }}>
      <div className="wrap">
        <div style={{ marginBottom: 56 }}>
          <div className="eyebrow" style={{ marginBottom: 8 }}>Ethos</div>
          <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 72px)' }}>
            Four working rules, <em style={{ color: 'var(--gold)', fontStyle: 'italic' }}>one workshop</em>.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', border: '1px solid var(--rule)' }} data-mobile-stack>
          {RULES.map((r, i) => (
            <div key={r.n} style={{
              background: 'var(--paper)', padding: '48px 40px', minHeight: 260,
              borderRight: i % 2 === 0 ? '1px solid var(--rule)' : 'none',
              borderBottom: i < 2 ? '1px solid var(--rule)' : 'none',
            }}>
              <div className="mono" style={{ color: 'var(--gold)', marginBottom: 14 }}>Rule {r.n}</div>
              <div className="display" style={{ fontSize: 28, marginBottom: 16 }}>{r.title}</div>
              <p style={{ color: 'var(--ink-2)', fontSize: 15, lineHeight: 1.65, maxWidth: 480, margin: 0 }}>{r.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Story() {
  const ref = useReveal();
  return (
    <section ref={ref} className="reveal" style={{ background: 'var(--paper)', padding: '140px 0 100px' }}>
      <div className="wrap">
        <div style={{ marginBottom: 56 }}>
          <div className="eyebrow" style={{ marginBottom: 8 }}>The record</div>
          <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 72px)' }}>A quarter century, in eight lines.</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', borderTop: '1px solid var(--ink)' }} data-mobile-stack>
          {STORY.map((s, i) => (
            <div key={s.year} style={{
              padding: '28px 24px 32px', minHeight: 180,
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              borderRight: (i + 1) % 4 !== 0 ? '1px solid var(--rule)' : 'none',
              borderBottom: '1px solid var(--rule)',
            }}>
              <div className="mono" style={{ color: 'var(--gold)' }}>· Milestone 0{i + 1}</div>
              <div>
                <div className="display italic" style={{ fontSize: 48, fontStyle: 'italic', marginBottom: 8 }}>{s.year}</div>
                <div style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.4 }}>{s.title}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function LeadershipFull() {
  const ref = useReveal();
  return (
    <section id="leadership" ref={ref} className="reveal" style={{ background: 'var(--paper-2)', padding: '140px 0 100px' }}>
      <div className="wrap">
        <div style={{ marginBottom: 56 }}>
          <div className="eyebrow" style={{ marginBottom: 8 }}>Leadership</div>
          <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 72px)' }}>
            Three who <em style={{ color: 'var(--gold)', fontStyle: 'italic' }}>carry</em> the firm.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 32 }} data-mobile-stack>
          {TEAM_FULL.map((t, i) => (
            <div key={t.name} style={{
              background: 'var(--paper)', border: '1px solid var(--rule)', padding: 36,
              display: 'grid', gridTemplateColumns: '160px 1fr', gap: 28,
            }} data-mobile-stack>
              <div className="leadership-portrait-full" style={{ width: 160, height: 200, background: 'linear-gradient(135deg, var(--ink-2), var(--ink))', position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <span className="mono" style={{ position: 'absolute', top: 10, left: 10, color: 'rgba(243,237,226,0.4)', fontSize: 8 }}>PORTRAIT</span>
                <span style={{ fontFamily: "'Fraunces', serif", fontStyle: 'italic', fontSize: 56, color: 'var(--gold-hi)' }}>{t.init}</span>
              </div>
              <div>
                <div className="mono" style={{ color: 'var(--muted)', marginBottom: 12 }}>0{i + 1} / 0{TEAM_FULL.length}</div>
                <div className="display" style={{ fontSize: 26, lineHeight: 1.1 }}>{t.name}</div>
                <div className="ar" style={{ fontSize: 16, color: 'var(--muted)', marginTop: 4 }}>{t.ar}</div>
                <div style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 8 }}>{t.role}</div>
                <div className="mono" style={{ color: 'var(--gold)', marginTop: 10 }}>{t.years} years in the trade</div>
                <p style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.6, marginTop: 18 }}>{t.bio}</p>
              </div>
            </div>
          ))}
        </div>
        <p className="mono" style={{ color: 'var(--muted)', marginTop: 40 }}>
          Supported by 18 site engineers, 6 safety supervisors and 100+ skilled tradesmen across active sites.
        </p>
      </div>
    </section>
  );
}

function Credentials() {
  const ref = useReveal();
  return (
    <section ref={ref} className="reveal" style={{ background: 'var(--ink)', color: '#f3ede2', padding: '140px 0' }}>
      <div className="wrap">
        <div style={{ marginBottom: 56 }}>
          <div className="eyebrow" style={{ color: 'rgba(243,237,226,0.55)', marginBottom: 8 }}>Credentials</div>
          <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 72px)', color: '#f3ede2' }}>The paperwork, briefly.</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gridAutoRows: 'auto', border: '1px solid rgba(243,237,226,0.18)' }} data-mobile-stack>
          {CREDENTIALS.map(([k, v], i) => (
            <div key={k} style={{
              padding: '28px 32px', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 24,
              borderRight: i % 2 === 0 ? '1px solid rgba(243,237,226,0.18)' : 'none',
              borderBottom: i < 4 ? '1px solid rgba(243,237,226,0.18)' : 'none',
            }}>
              <span className="mono" style={{ color: 'rgba(243,237,226,0.55)' }}>{k}</span>
              <span style={{ fontFamily: "'Fraunces', serif", fontSize: 18, textAlign: 'right', color: '#f3ede2' }}>{v}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const [open, setOpen] = useStateAb(0);
  const ref = useReveal();
  return (
    <section id="faq" ref={ref} className="reveal" style={{ background: 'var(--paper)', padding: '140px 0 100px' }}>
      <div className="wrap">
        <div style={{ marginBottom: 24 }}>
          <div className="eyebrow" style={{ marginBottom: 8 }}>Questions</div>
          <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 72px)' }}>
            Asked <em style={{ color: 'var(--gold)', fontStyle: 'italic' }}>often</em>.
          </h2>
        </div>
        <div className="faq-list">
          {FAQS.map((f, i) => {
            const isOpen = open === i;
            return (
              <div
                key={f.q}
                className={`faq-item ${isOpen ? 'open' : ''}`}
                role="button"
                aria-expanded={isOpen}
                tabIndex={0}
                onClick={() => setOpen(isOpen ? -1 : i)}
                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setOpen(isOpen ? -1 : i); } }}
                data-cursor-label={isOpen ? 'CLOSE' : 'OPEN'}
              >
                <h3 className="faq-item__q">{f.q}</h3>
                <span className="faq-item__toggle">+</span>
                <div className="faq-item__a"><p>{f.a}</p></div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function AboutCTA() {
  const ref = useReveal();
  return (
    <section ref={ref} className="reveal" style={{ background: 'var(--paper)', padding: '140px 0' }}>
      <div className="wrap" style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 48, alignItems: 'end' }} data-mobile-stack>
        <h3 className="display" style={{ fontSize: 'clamp(40px, 6vw, 96px)', maxWidth: '14ch' }}>
          Commence a <em style={{ color: 'var(--gold)', fontStyle: 'italic' }}>project</em>. We read every enquiry.
        </h3>
        <a href="Contact.html" className="btn filled" data-cursor-label="Write">Write to us <span className="arrow">→</span></a>
      </div>
    </section>
  );
}

function AboutApp() {
  useEffectAb(() => {
    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="About.html" />
      <AboutHero />
      <Ethos />
      <Story />
      <LeadershipFull />
      {/* Credentials section hidden — toggle back on by re-adding <Credentials /> */}
      <FAQ />
      <AboutCTA />
      <SharedFooter />
      <RGCursor />
    </React.Fragment>
  );
}

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