/* ============================================================
   Rainbow Group — nav-hero.jsx
   Home Nav + Hero (cinematic | editorial variants)
   Per DESIGN-SYSTEM.md §5.3–5.4.
   ============================================================ */

const { useState: useStateNH, useEffect: useEffectNH } = React;

const HOME_LINKS = [
  { en: 'Work', ar: 'أعمال', href: 'Projects.html' },
  { en: 'Heritage', ar: 'الإرث', href: '#heritage' },
  { en: 'Services', ar: 'الخدمات', href: '#services' },
  { en: 'About', ar: 'عن الشركة', href: 'About.html' },
  { en: 'Contact', ar: 'تواصل', href: 'Contact.html' },
];

function Nav() {
  const [scrolled, setScrolled] = useStateNH(false);
  const [mobileOpen, setMobileOpen] = useStateNH(false);

  useEffectNH(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  useEffectNH(() => {
    document.body.classList.toggle('mobile-menu-open', mobileOpen);
    return () => document.body.classList.remove('mobile-menu-open');
  }, [mobileOpen]);

  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 className="nav-links">
          {HOME_LINKS.map((l) => (
            <a key={l.en} href={l.href} data-cursor-label={l.en}>
              <span>{l.en}</span>
              <span className="ar">{l.ar}</span>
            </a>
          ))}
        </div>
        <div className="nav-right">
          <span className="mono" style={{ opacity: 0.7 }}>KW · Kuwait City</span>
          <a href="Contact.html" className="btn" data-cursor-label="Write">Commence <span className="arrow">→</span></a>
        </div>
        <button
          className="nav-hamburger"
          aria-label={mobileOpen ? 'Close menu' : 'Open menu'}
          aria-expanded={mobileOpen}
          aria-controls="mobile-menu-home"
          onClick={() => setMobileOpen((o) => !o)}
        >
          <span className="nav-hamburger__bars" aria-hidden="true">
            <span /><span /><span />
          </span>
        </button>
      </div>
      <div id="mobile-menu-home" className={`nav-mobile-menu ${mobileOpen ? 'open' : ''}`}>
        {HOME_LINKS.map((l) => (
          <a key={l.en} href={l.href} onClick={() => setMobileOpen(false)}>
            <span>{l.en}</span>
            <span className="ar">{l.ar}</span>
          </a>
        ))}
        <a href="Contact.html" className="nav-mobile-menu__cta" onClick={() => setMobileOpen(false)}>
          <span>Commence</span><span>→</span>
        </a>
      </div>
    </nav>
  );
}

/* ---------- kuwait time hook ---------- */
function useKuwaitTime() {
  const [t, setT] = useStateNH('');
  useEffectNH(() => {
    const tick = () => {
      try {
        setT(new Date().toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', timeZone: 'Asia/Kuwait' }));
      } catch (e) {
        setT(new Date().toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' }));
      }
    };
    tick();
    const id = setInterval(tick, 60000);
    return () => clearInterval(id);
  }, []);
  return t;
}

/* ---------- Hero (switches variant) ---------- */
function Hero({ variant = 'cinematic', signature = 'prism', motion = 'combination' }) {
  if (variant === 'editorial') return <HeroEditorial />;
  return <HeroCinematic signature={signature} />;
}

// Toggle to true when you want the live-sites ticker to reappear in the hero.
const SHOW_CURRENTLY_BLOCK = false;

function HeroCinematic({ signature }) {
  const time = useKuwaitTime();
  return (
    <section style={{
      position: 'relative',
      minHeight: '100vh',
      overflow: 'hidden',
      color: '#f3ede2',
      paddingTop: 140, paddingBottom: 56,
    }}>
      {/* Background image */}
      <div style={{
        position: 'absolute', inset: 0, zIndex: 0,
        backgroundImage: 'url(assets/projects/al-hamra.jpg)',
        backgroundSize: 'cover',
        backgroundPosition: 'center 30%',
        filter: 'saturate(0.75) contrast(1.05)',
      }} aria-hidden="true" />
      {/* Warm wash */}
      <div style={{
        position: 'absolute', inset: 0, zIndex: 1,
        background: 'linear-gradient(180deg, color-mix(in oklab, var(--ink) 55%, transparent) 0%, color-mix(in oklab, var(--ink) 22%, transparent) 40%, color-mix(in oklab, var(--ink) 75%, transparent) 100%)',
      }} aria-hidden="true" />
      {/* Prism layer */}
      {(signature === 'prism' || signature === 'all') ? <PrismLayer /> : null}
      {/* Mashrabiya corner */}
      <MashrabiyaCorner />

      <div className="wrap" style={{ position: 'relative', zIndex: 3 }}>
        {/* Top grid */}
        <div className="hero-top-grid" style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'start' }} data-mobile-stack>
          <div>
            <div className="mono" style={{ color: 'rgba(243,237,226,0.75)', marginBottom: 32 }}>
              — EST. 2017 &nbsp;/&nbsp; Kuwait City, {time || '—'} &nbsp;/&nbsp; N 29.3759° · E 47.9774°
            </div>
            <h1 className="display" style={{
              fontSize: 'clamp(48px, 8vw, 128px)',
              maxWidth: '14ch',
              color: '#f3ede2',
              lineHeight: 0.92,
            }}>
              True luxury lies<br/>
              in the <em style={{ fontStyle: 'italic', color: 'var(--gold-hi)' }}>details</em>.<br/>
              Spaces,<br/>
              <em style={{ fontStyle: 'italic', color: 'var(--gold-hi)' }}>transformed</em>.
            </h1>
          </div>
          <div style={{ alignSelf: 'end' }}>
            <div className="ar" style={{
              fontSize: 'clamp(28px, 3.2vw, 48px)',
              color: 'rgba(243,237,226,0.7)',
              textAlign: 'right',
              lineHeight: 1.25,
              maxWidth: '16ch',
            }}>الترفُ في التفاصيل<br/>والفضاءاتُ تتحوّل</div>
          </div>
        </div>

        {/* Bottom grid */}
        <div className="hero-bottom-grid" style={{
          display: 'grid',
          gridTemplateColumns: SHOW_CURRENTLY_BLOCK ? '1.4fr 1fr auto' : '1.4fr auto',
          gap: 48,
          alignItems: 'end',
          marginTop: 120,
          paddingTop: 40,
          borderTop: '1px solid rgba(243,237,226,0.22)',
        }} data-mobile-stack>
          <p style={{ fontSize: 15, lineHeight: 1.7, color: 'rgba(243,237,226,0.85)', maxWidth: '52ch', margin: 0 }}>
            Rainbow Group Contracting Company (RGCC) is a Kuwaiti interior contractor — transforming the finishing layer of buildings through GRC, GRG, gypsum, joinery and stone. Palaces, malls, mosques, showrooms. Quiet, slow, exact work.
          </p>
          {SHOW_CURRENTLY_BLOCK ? (
            <div>
              <div className="mono" style={{ color: 'rgba(243,237,226,0.6)', marginBottom: 10 }}>Currently</div>
              <p style={{ fontFamily: "'Fraunces', serif", fontSize: 22, lineHeight: 1.3, color: '#f3ede2', margin: 0 }}>
                6 live sites · 3 handovers in Q2 · 1 mosque nearing inauguration
              </p>
            </div>
          ) : null}
          <a href="#work" className="btn light" data-cursor-label="Scroll">Selected work <span className="arrow">↓</span></a>
        </div>
      </div>

      <div className="rainbow-hair" style={{ position: 'absolute', inset: 'auto 0 0 0', zIndex: 4 }} />
    </section>
  );
}

function HeroEditorial() {
  const time = useKuwaitTime();
  return (
    <section style={{ background: 'var(--paper)', paddingTop: 120, paddingBottom: 80, position: 'relative', overflow: 'hidden' }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 72, alignItems: 'center' }} data-mobile-stack>
          <div>
            <div className="mono" style={{ color: 'var(--muted)', marginBottom: 40 }}>EST. 2017 · KUWAIT CITY · {time || '—'}</div>
            <h1 className="display" style={{ fontSize: 'clamp(56px, 8vw, 140px)', lineHeight: 0.94 }}>
              The quiet<br/>
              work of <em style={{ color: 'var(--gold)', fontStyle: 'italic' }}>finishing</em><br/>
              a building.
            </h1>
            <div className="ar" style={{ fontSize: 'clamp(22px, 2.4vw, 36px)', color: 'var(--muted)', marginTop: 18 }}>عملٌ هادئٌ في تشطيبِ المبنى</div>

            <div style={{ marginTop: 56, display: 'grid', gap: 28, maxWidth: '44ch' }}>
              <div>
                <div className="eyebrow mb-8">Practice</div>
                <p style={{ color: 'var(--ink-2)', margin: 0, lineHeight: 1.65 }}>A Kuwait-based contractor specialising in high-end interior finishing — GRC, GRG, gypsum, joinery, stone and specialty paints — delivered with the patience the work asks for.</p>
              </div>
              <div>
                <div className="eyebrow mb-8">Provenance</div>
                <p style={{ color: 'var(--ink-2)', margin: 0, lineHeight: 1.65 }}>Born from the 25-year heritage of Hasan Habib General Trading. 500+ projects. 30+ clients including Al Shaya, Tamdeen, AGI, Kharafi National.</p>
              </div>
            </div>

            <div style={{ display: 'flex', gap: 16, marginTop: 40, flexWrap: 'wrap' }}>
              <a href="#work" className="btn filled" data-cursor-label="View">Selected work <span className="arrow">→</span></a>
              <a href="#practice" className="btn" data-cursor-label="Read">The practice <span className="arrow">→</span></a>
            </div>
          </div>
          <div style={{ position: 'relative', minHeight: 560, overflow: 'hidden' }}>
            <img src="assets/projects/al-hamra.jpg" alt="Kuwait City skyline" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
            {/* Corner captions */}
            <div className="mono" style={{ position: 'absolute', top: 16, left: 16, color: '#f3ede2', mixBlendMode: 'difference', fontSize: 9 }}>Kuwait City · Skyline</div>
            <div className="mono" style={{ position: 'absolute', top: 16, right: 16, color: '#f3ede2', mixBlendMode: 'difference', fontSize: 9 }}>© Rainbow Group Contracting Company</div>
            <div style={{ position: 'absolute', bottom: 20, left: 20, color: '#f3ede2', mixBlendMode: 'difference', maxWidth: '24ch' }}>
              <div style={{ fontFamily: "'Fraunces', serif", fontSize: 24, lineHeight: 1.2, marginBottom: 6 }}>A view from the tower</div>
              <div className="mono" style={{ fontSize: 10 }}>Kuwait City · home to 500+ of our finished interiors</div>
            </div>
            <div className="mono" style={{ position: 'absolute', bottom: 16, right: 16, color: '#f3ede2', mixBlendMode: 'difference', fontSize: 9, textAlign: 'right' }}>Scope / GRC · Joinery · Stone</div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, HeroCinematic, HeroEditorial, useKuwaitTime });