/* App shell — wires nav, sections, modals; hides splash on mount. */

const { useState: _useState, useEffect: _useEffect, useCallback } = React;

const TWEAK_DEFAULTS = window.__TWEAKS_DEFAULTS || {
  accent: '#F5B82E',
  scheme: 'ink',
  display: 'Archivo Black',
  showInstagram: true,
  showCommunities: true,
  showProcess: true,
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [inquiryOpen, setInquiryOpen] = _useState(false);
  const [inquiryPreset, setInquiryPreset] = _useState('');
  const [downloadOpen, setDownloadOpen] = _useState(false);

  const openInquiry = useCallback((preset) => {
    setInquiryPreset(typeof preset === 'string' ? preset : '');
    setInquiryOpen(true);
  }, []);
  const openDownload = useCallback(() => setDownloadOpen(true), []);

  // Apply tweaks: CSS variables + body scheme attr
  _useEffect(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
    document.documentElement.style.setProperty('--display', `'${t.display}', 'Arial Black', sans-serif`);
    document.body.setAttribute('data-scheme', t.scheme);
  }, [t.accent, t.display, t.scheme]);

  return (
    <>
      {/* Dynamic theme overrides — these target spots that use literal #F5B82E or scheme colors */}
      <style>{`
        body[data-scheme="paper"] { background: #F5EFE6 !important; color: #0A0A0A; }
        body[data-scheme="paper"] section[data-section] { background: #F5EFE6 !important; }
        body[data-scheme="paper"] section[data-section]:nth-of-type(even) { background: #EDE6DA !important; }
        body[data-scheme="ivory"] { background: #1A1714 !important; }
        body[data-scheme="ivory"] section[data-section] { background: #1A1714 !important; }
        body[data-scheme="ivory"] section[data-section]:nth-of-type(even) { background: #221E1A !important; }
        /* Accent-driven runtime overrides */
        .hl { background: ${t.accent} !important; color: #0A0A0A !important; }
        ::selection { background: ${t.accent} !important; color: #0A0A0A !important; }
        a[href*="instagram.com"]:hover { color: ${t.accent} !important; }
      `}</style>

      <Nav onOpenInquiry={openInquiry} onOpenDownload={openDownload} accent={t.accent} />
      <main>
        <Hero onOpenInquiry={openInquiry} accent={t.accent} />
        <About />
        <Rooms onOpenInquiry={openInquiry} />
        {t.showProcess && <Process />}
        {t.showCommunities && <Communities />}
        <Portfolio />
        {t.showInstagram && <Instagram />}
        <FAQ />
        <CtaBand onOpenInquiry={openInquiry} onOpenDownload={openDownload} accent={t.accent} />
      </main>
      <Footer onOpenInquiry={openInquiry} onOpenDownload={openDownload} />
      <FloatingWhatsApp accent={t.accent} />

      <InquiryModal open={inquiryOpen} onClose={() => setInquiryOpen(false)} presetType={inquiryPreset} />
      <DownloadModal open={downloadOpen} onClose={() => setDownloadOpen(false)} />

      {/* Tweaks panel */}
      <TweaksPanel>
        <TweakSection label="Brand color (Instagram-matched)" />
        <TweakColor
          label="Accent"
          value={t.accent}
          options={['#F5B82E', '#FFCB45', '#E1306C', '#F77737', '#FCAF45', '#FFFFFF']}
          onChange={(v) => setTweak('accent', v)}
        />
        <TweakSection label="Theme scheme" />
        <TweakRadio
          label="Mode"
          value={t.scheme}
          options={['ink', 'ivory', 'paper']}
          onChange={(v) => setTweak('scheme', v)}
        />
        <TweakSection label="Display font" />
        <TweakSelect
          label="Headline"
          value={t.display}
          options={['Archivo Black', 'Anton', 'Bebas Neue', 'Oswald']}
          onChange={(v) => {
            // Lazy-load the font on demand
            const fam = v.replace(/ /g, '+');
            if (!document.querySelector(`link[data-fam="${v}"]`)) {
              const l = document.createElement('link');
              l.rel = 'stylesheet';
              l.href = `https://fonts.googleapis.com/css2?family=${fam}:wght@400;700;900&display=swap`;
              l.dataset.fam = v;
              document.head.appendChild(l);
            }
            setTweak('display', v);
          }}
        />
        <TweakSection label="Sections" />
        <TweakToggle label="Show Process" value={t.showProcess} onChange={(v) => setTweak('showProcess', v)} />
        <TweakToggle label="Show Communities" value={t.showCommunities} onChange={(v) => setTweak('showCommunities', v)} />
        <TweakToggle label="Show Instagram feed" value={t.showInstagram} onChange={(v) => setTweak('showInstagram', v)} />
      </TweaksPanel>
    </>
  );
}

/* CTA band before footer */
function CtaBand({ onOpenInquiry, onOpenDownload }) {
  return (
    <section data-screen-label="07 CTA" style={{
      position: 'relative',
      padding: '120px 6vw',
      background: '#F5B82E',
      color: '#0A0A0A',
      overflow: 'hidden',
    }}>
      {/* Diagonal black band */}
      <div style={{
        position: 'absolute', top: '50%', left: '-10%', width: '120%',
        height: 1, background: '#0A0A0A', opacity: 0.15,
      }} />
      <div style={{ maxWidth: 1400, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 32, alignItems: 'center' }} className="cta-grid">
        <div style={{ gridColumn: 'span 7' }} className="cta-main">
          <div style={{ fontFamily: 'Manrope', fontSize: 12, fontWeight: 700, letterSpacing: '0.22em', textTransform: 'uppercase', marginBottom: 18 }}>
            Two ways to start
          </div>
          <h2 style={{
            fontFamily: 'Archivo Black', textTransform: 'uppercase',
            fontSize: 'clamp(44px, 7vw, 110px)', letterSpacing: '-0.02em', lineHeight: 0.92,
            color: '#0A0A0A',
          }}>
            Tell us what's<br/>ready for renewal.
          </h2>
          <p className="serif" style={{ marginTop: 18, fontSize: 26, color: 'rgba(10,10,10,0.7)', maxWidth: '32ch' }}>
            Or read about us first — both work.
          </p>
        </div>
        <div style={{ gridColumn: 'span 5', display: 'flex', flexDirection: 'column', gap: 14 }} className="cta-side">
          <button onClick={onOpenInquiry} className="cta-card" style={{
            background: '#0A0A0A', color: '#F5EFE6', padding: '28px 32px',
            border: 'none', cursor: 'pointer', textAlign: 'left',
            display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16,
            transition: 'transform .25s ease',
          }}>
            <div>
              <div style={{ fontFamily: 'Manrope', fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#F5B82E', marginBottom: 8 }}>Option A</div>
              <div style={{ fontFamily: 'Archivo Black', fontSize: 22, textTransform: 'uppercase' }}>AI Inquiry & Quote</div>
              <div style={{ fontFamily: 'Manrope', fontSize: 13, color: 'rgba(245,239,230,0.7)', marginTop: 6 }}>2 minutes · instant first reply</div>
            </div>
            <span style={{ fontFamily: 'Archivo Black', fontSize: 28, color: '#F5B82E' }}>→</span>
          </button>
          <button onClick={onOpenDownload} className="cta-card" style={{
            background: 'transparent', color: '#0A0A0A',
            border: '1.5px solid #0A0A0A',
            padding: '28px 32px', cursor: 'pointer', textAlign: 'left',
            display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16,
            transition: 'transform .25s ease',
          }}>
            <div>
              <div style={{ fontFamily: 'Manrope', fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(10,10,10,0.6)', marginBottom: 8 }}>Option B</div>
              <div style={{ fontFamily: 'Archivo Black', fontSize: 22, textTransform: 'uppercase' }}>Company Profile ↓</div>
              <div style={{ fontFamily: 'Manrope', fontSize: 13, color: 'rgba(10,10,10,0.65)', marginTop: 6 }}>12 pages · brief details first</div>
            </div>
            <span style={{ fontFamily: 'Archivo Black', fontSize: 28 }}>↓</span>
          </button>
        </div>
      </div>
      <style>{`
        .cta-card:hover { transform: translateY(-4px); }
        @media (max-width: 900px) {
          .cta-main, .cta-side { grid-column: span 12 !important; }
        }
      `}</style>
    </section>
  );
}

/* Floating WhatsApp button */
function FloatingWhatsApp({ accent = '#F5B82E' }) {
  const [show, setShow] = _useState(false);
  _useEffect(() => {
    const onScroll = () => setShow(window.scrollY > 600);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <a
      href="https://wa.me/971555455375"
      target="_blank" rel="noopener"
      aria-label="WhatsApp HNHUAE"
      style={{
        position: 'fixed', bottom: 24, right: 24, zIndex: 90,
        width: 56, height: 56, borderRadius: '50%',
        background: accent, color: '#0A0A0A',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 10px 30px rgba(0,0,0,0.5)',
        opacity: show ? 1 : 0, pointerEvents: show ? 'auto' : 'none',
        transform: show ? 'scale(1)' : 'scale(0.5)',
        transition: 'all .3s cubic-bezier(.2,.7,.2,1)',
        textDecoration: 'none',
      }}
    >
      <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413z"/>
      </svg>
    </a>
  );
}

/* Mount + hide splash */
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
setTimeout(() => {
  const s = document.getElementById('__splash');
  if (s) {
    s.classList.add('hide');
    setTimeout(() => s.remove(), 500);
  }
}, 200);