// Main app — composes all sections and wires up modals + tweaks
const { useState, useEffect } = React;

function App() {
  const [planModal, setPlanModal] = useState(null);
  const [galleryIdx, setGalleryIdx] = useState(null);
  const [active, setActive] = useState('home');
  const [t, setTweak] = window.useTweaks({
    accent: 'gold',
    tagline: 'Spacious 2 & 3 BHK Homes. Designed for a Fortune of Good Living.',
  });

  // smooth scroll
  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) {
      const y = el.getBoundingClientRect().top + window.scrollY - 70;
      window.scrollTo({ top: y, behavior: 'smooth' });
    }
  };

  // scrollspy
  useEffect(() => {
    const onScroll = () => {
      const sections = ['home','about','highlights','plans','amenities','gallery','location','contact'];
      const y = window.scrollY + 120;
      for (let i = sections.length-1; i >= 0; i--) {
        const el = document.getElementById(sections[i]);
        if (el && el.offsetTop <= y) { setActive(sections[i]); break; }
      }
    };
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // accent live update
  useEffect(() => {
    const map = {
      gold:  ['#c9a25b','#b58a44'],
      copper:['#b87333','#965a26'],
      sage:  ['#7a8e6e','#5f7257'],
    };
    const a = map[t.accent] || map.gold;
    document.documentElement.style.setProperty('--gold', a[0]);
    document.documentElement.style.setProperty('--gold-2', a[1]);
  }, [t.accent]);

  // Esc closes modals
  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') { setPlanModal(null); setGalleryIdx(null); } };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  return (
    <>
      <HeaderC active={active} onNav={scrollTo} onEnquire={() => scrollTo('contact')} />
      <HeroC
        tagline={t.tagline.replace(/\. /g, '.\n')}
        onBook={() => scrollTo('contact')}
        onBrochure={() => alert('Brochure download — coming soon.')}
      />
      <StatsBarC />
      <AboutC onPlay={() => alert('Project film — coming soon.')} />
      <HighlightsC />
      <FloorPlans onOpen={setPlanModal} />
      <Amenities />
      <Gallery onOpen={setGalleryIdx} />
      <LocationSection />
      <Enquiry />
      <Footer />

      <PlanModal plan={planModal} onClose={() => setPlanModal(null)} />
      <GalleryLightbox idx={galleryIdx} onNav={setGalleryIdx} onClose={() => setGalleryIdx(null)} />

      <window.TweaksPanel>
        <window.TweakSection label="Theme">
          <window.TweakRadio label="Accent" value={t.accent}
            options={[
              { value:'gold',   label:'Gold' },
              { value:'copper', label:'Copper' },
              { value:'sage',   label:'Sage' },
            ]}
            onChange={v => setTweak('accent', v)}/>
        </window.TweakSection>
        <window.TweakSection label="Copy">
          <window.TweakText label="Hero tagline" value={t.tagline}
            onChange={v => setTweak('tagline', v)}/>
        </window.TweakSection>
      </window.TweaksPanel>
    </>
  );
}

// Lightbox
function GalleryLightbox({ idx, onClose, onNav }) {
  if (idx === null || idx === undefined) return null;
  const items = [
    { tag:'Building Exterior',  img:'assets/render-1.png',    desc:'Front elevation across all five towers — featured blue-grey façade with white trim and recessed balconies.' },
    { tag:'Corner Tower View',  img:'assets/render-2.png',    desc:'Angled view from the gated entry — showing the stilt-level parking and articulated balcony grid.' },
    { tag:'Terrace Pool',       img:'assets/amenity-4.png',   desc:'Sky-level pool with deck lounges and shaded cabanas, overlooking the cluster.' },
    { tag:'Clubhouse Lounge',   img:'assets/amenity-8.png',   desc:'Double-height community lounge with backlit display walls and curated seating.' },
    { tag:'Landscaped Walks',   img:'assets/amenity-0.png',   desc:'Native-species planting along the 1.2 km landscaped pathway between blocks.' },
    { tag:'Cycling & Jogging',  img:'assets/amenities-bg.png',desc:'Dedicated cycling zone and jogging track wrapping the open landscape.' },
  ];
  const cur = items[idx];
  const nav = (delta) => {
    onNav((idx + delta + items.length) % items.length);
  };
  return (
    <div onClick={onClose} style={{
      position:'fixed', inset:0, background:'rgba(10,31,55,0.92)', zIndex:100,
      display:'flex', alignItems:'center', justifyContent:'center', padding:40,
    }}>
      <div onClick={e=>e.stopPropagation()} style={{ maxWidth:1100, width:'100%', position:'relative' }}>
        <button onClick={onClose} style={{
          position:'absolute', top:-50, right:0, background:'none', border:'1px solid rgba(247,241,230,0.3)',
          color:'var(--cream)', width:38, height:38, cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center',
        }}><I.Close size={16}/></button>
        <div style={{
          aspectRatio:'16/9', background:`#0a1f37`,
          display:'flex', alignItems:'flex-end', padding:0, color:'var(--cream)', position:'relative', overflow:'hidden',
        }}>
          <img src={cur.img} alt={cur.tag}
               style={{ position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover' }}/>
          <div style={{ position:'absolute', inset:0, background:'linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(10,31,55,0.92) 100%)' }}/>
          <div style={{ position:'relative', padding:40 }}>
            <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize:11, letterSpacing:'0.2em', opacity:0.85, marginBottom:10 }}>
              {`IMG · 0${idx+1} OF ${items.length}`}
            </div>
            <h3 className="serif" style={{ fontSize:42, margin:'0 0 12px', fontWeight:500, color:'var(--cream)' }}>{cur.tag}</h3>
            <p style={{ fontSize:15, maxWidth:560, opacity:0.9, margin:0 }}>{cur.desc}</p>
          </div>
        </div>
        <div style={{ display:'flex', justifyContent:'space-between', marginTop:18, color:'var(--cream)', fontSize:12, letterSpacing:'0.16em', textTransform:'uppercase' }}>
          <div style={{ opacity:0.6 }}>Press Esc to close</div>
          <div style={{ display:'flex', gap:16 }}>
            <button onClick={(e) => { e.stopPropagation(); nav(-1); }}
              style={{ background:'none', border:'none', color:'var(--cream)', cursor:'pointer', fontSize:12, letterSpacing:'0.16em', textTransform:'uppercase' }}>← Prev</button>
            <button onClick={(e) => { e.stopPropagation(); nav(1); }}
              style={{ background:'none', border:'none', color:'var(--cream)', cursor:'pointer', fontSize:12, letterSpacing:'0.16em', textTransform:'uppercase' }}>Next →</button>
          </div>
        </div>
      </div>
    </div>
  );
}

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