// ============ HEADER / NAV ============
const NAV_ITEMS = [
  { id: 'home', label: 'Home' },
  { id: 'about', label: 'About' },
  { id: 'highlights', label: 'Highlights' },
  { id: 'plans', label: 'Floor Plans' },
  { id: 'amenities', label: 'Amenities' },
  { id: 'gallery', label: 'Gallery' },
  { id: 'location', label: 'Location' },
  { id: 'contact', label: 'Contact' },
];

const Logo = ({ light = false }) => (
  <div style={{ display:'flex', alignItems:'center', gap:10 }}>
    <svg width="34" height="40" viewBox="0 0 34 40" fill="none" stroke={light ? '#f7f1e6' : '#0e2845'} strokeWidth="1.3">
      <rect x="2"  y="14" width="8"  height="24"/>
      <rect x="13" y="6"  width="8"  height="32"/>
      <rect x="24" y="14" width="8"  height="24"/>
      <path d="M4 18h4M4 22h4M4 26h4M4 30h4M4 34h4M15 10h4M15 14h4M15 18h4M15 22h4M15 26h4M15 30h4M15 34h4M26 18h4M26 22h4M26 26h4M26 30h4M26 34h4" stroke={light ? '#c9a25b' : '#c9a25b'} strokeWidth="0.9"/>
    </svg>
    <div style={{ lineHeight:1, color: light ? '#f7f1e6' : '#0e2845' }}>
      <div className="serif" style={{ fontSize:11, letterSpacing:'0.32em', fontWeight:600 }}>VEDATRI</div>
      <div className="serif" style={{ fontSize:14, letterSpacing:'0.22em', fontWeight:600, marginTop:3 }}>FORTUNE TOWERS</div>
    </div>
  </div>
);

function Header({ onEnquire, onNav, active }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const f = () => setScrolled(window.scrollY > 30);
    window.addEventListener('scroll', f); return () => window.removeEventListener('scroll', f);
  }, []);
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);
  const goto = (id) => { setOpen(false); onNav(id); };
  return (
    <header style={{
      position:'fixed', top:0, left:0, right:0, zIndex:50,
      background: scrolled || open ? 'rgba(251,247,238,0.94)' : 'rgba(251,247,238,0.0)',
      backdropFilter: scrolled || open ? 'saturate(160%) blur(12px)' : 'none',
      borderBottom: scrolled || open ? '1px solid var(--line)' : '1px solid transparent',
      transition:'all .35s ease',
    }}>
      <div className="ft-header-row" style={{ maxWidth:1320, margin:'0 auto', padding:'14px 36px', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
        <Logo />
        <nav className="ft-nav-desktop" style={{ gap:30, alignItems:'center' }}>
          {NAV_ITEMS.map(n => (
            <a key={n.id} href={'#'+n.id}
               onClick={e => { e.preventDefault(); onNav(n.id); }}
               style={{
                 textDecoration:'none', fontSize:12.5, letterSpacing:'0.16em',
                 textTransform:'uppercase', fontWeight:600,
                 color: active===n.id ? 'var(--navy)' : 'var(--ink-2)',
                 borderBottom: active===n.id ? '2px solid var(--gold)' : '2px solid transparent',
                 paddingBottom:4, transition:'all .2s',
               }}>{n.label}</a>
          ))}
        </nav>
        <button className="ft-header-cta" onClick={onEnquire} style={{
          background:'var(--navy)', color:'var(--cream)', border:'none',
          padding:'13px 24px', fontSize:11.5, letterSpacing:'0.22em',
          textTransform:'uppercase', fontWeight:600, cursor:'pointer',
        }}>Enquire Now</button>
        <button className="ft-nav-mobile-btn" onClick={() => setOpen(o => !o)}
          aria-label={open ? 'Close menu' : 'Open menu'} aria-expanded={open}
          style={{
            display:'none', background:'none', border:'1px solid var(--line-2)',
            width:42, height:42, alignItems:'center', justifyContent:'center',
            cursor:'pointer', padding:0, color:'var(--navy)',
          }}>
          <svg width="20" height="14" viewBox="0 0 20 14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
            <path d="M2 2h16M2 7h16M2 12h16"/>
          </svg>
        </button>
      </div>

      <div className={'ft-nav-scrim' + (open ? ' open' : '')} onClick={() => setOpen(false)} />
      <aside className={'ft-nav-mobile-panel' + (open ? ' open' : '')}>
        <button onClick={() => setOpen(false)} aria-label="Close menu"
          style={{
            position:'absolute', top:18, right:18,
            background:'transparent', color:'var(--cream)',
            border:'1px solid rgba(247,241,230,0.3)',
            width:38, height:38, cursor:'pointer',
            display:'flex', alignItems:'center', justifyContent:'center', padding:0,
          }}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
            <path d="M2 2l10 10M2 12L12 2"/>
          </svg>
        </button>
        {NAV_ITEMS.map(n => (
          <a key={n.id} href={'#'+n.id}
             onClick={e => { e.preventDefault(); goto(n.id); }}
             style={{
               textDecoration:'none', fontSize:14, letterSpacing:'0.18em',
               textTransform:'uppercase', fontWeight:600, padding:'14px 4px',
             }}>{n.label}</a>
        ))}
        <button onClick={() => { setOpen(false); onEnquire(); }} style={{
          marginTop:22, background:'var(--gold)', color:'var(--navy)', border:'none',
          padding:'15px 22px', fontSize:11.5, letterSpacing:'0.22em',
          textTransform:'uppercase', fontWeight:700, cursor:'pointer',
          display:'flex', alignItems:'center', justifyContent:'center', gap:10,
        }}>Enquire Now <I.Arrow size={14}/></button>
      </aside>
    </header>
  );
}

// ============ HERO ============
function Hero({ tagline, onBook, onBrochure }) {
  const lines = tagline.split('\n');
  return (
    <section id="home" className="ft-section-pad" style={{ position:'relative', overflow:'hidden', paddingTop:120 }}>
      <div className="ft-hero-grid" style={{
        maxWidth:1320, margin:'0 auto',
        display:'grid', gridTemplateColumns:'minmax(380px, 1fr) 1.2fr', gap:40, alignItems:'end',
        minHeight:'calc(100vh - 120px)',
      }}>
        <div className="ft-hero-text" style={{ paddingBottom:80 }}>
          <div className="eyebrow" style={{ marginBottom:24 }}>Premium Gated Community</div>
          <h1 className="serif ft-hero-headline" style={{
            fontSize:'clamp(48px, 5.6vw, 86px)', lineHeight:1.02, margin:'0 0 18px',
            color:'var(--navy)', fontWeight:500,
          }}>
            Vedatri<br/>Fortune <span style={{ fontStyle:'italic', color:'var(--gold-2)' }}>Towers</span>
          </h1>
          <div style={{ display:'flex', alignItems:'center', gap:8, color:'var(--ink-2)', marginBottom:20 }}>
            <I.Pin size={18} color="var(--gold-2)" />
            <span style={{ fontSize:15, letterSpacing:'0.04em' }}>Mallampet, Hyderabad</span>
          </div>
          <p style={{ fontSize:17, lineHeight:1.55, color:'var(--ink-2)', maxWidth:420, margin:'0 0 36px' }}>
            {lines.map((l,i)=>(<span key={i}>{l}<br/></span>))}
          </p>
          <div className="ft-hero-buttons" style={{ display:'flex', gap:14 }}>
            <button onClick={onBook} style={{
              background:'var(--navy)', color:'var(--cream)', border:'none',
              padding:'16px 28px', fontSize:11.5, letterSpacing:'0.22em',
              textTransform:'uppercase', fontWeight:600, cursor:'pointer',
              display:'flex', alignItems:'center', gap:10,
            }}>Book your home <I.Arrow size={16}/></button>
            <button onClick={onBrochure} style={{
              background:'transparent', color:'var(--navy)', border:'1.4px solid var(--navy)',
              padding:'16px 24px', fontSize:11.5, letterSpacing:'0.22em',
              textTransform:'uppercase', fontWeight:600, cursor:'pointer',
              display:'flex', alignItems:'center', gap:10,
            }}><I.Download size={15}/> Download Brochure</button>
          </div>

          {/* Approvals badges */}
          <div className="ft-hero-badges" style={{ display:'flex', gap:24, marginTop:48, alignItems:'center' }}>
            <div style={{ fontSize:11, letterSpacing:'0.2em', textTransform:'uppercase', color:'var(--muted)', fontWeight:600 }}>Approved by</div>
            <div style={{ display:'flex', gap:18, alignItems:'center' }}>
              <Badge label="HMDA" sub="Sanctioned"/>
              <div style={{ width:1, height:24, background:'var(--line-2)' }}/>
              <Badge label="RERA" sub="P01100010672"/>
            </div>
          </div>
        </div>

        <div className="ft-hero-art" style={{
          position:'relative', height:'78vh', maxHeight:680,
          background:'#0a1f37',
          overflow:'hidden', marginBottom:80,
        }}>
          <img src="assets/render-1.png" alt="Vedatri Fortune Towers — building render"
               style={{ width:'100%', height:'100%', objectFit:'cover', display:'block' }}/>
          {/* Soft gradient for legibility */}
          <div style={{
            position:'absolute', inset:0,
            background:'linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(10,31,55,0.25) 100%)',
            pointerEvents:'none',
          }}/>
          <div style={{
            position:'absolute', top:16, right:16, padding:'6px 12px',
            background:'rgba(14,40,69,0.85)', color:'var(--cream)',
            fontSize:10, letterSpacing:'0.2em', textTransform:'uppercase',
            fontFamily:'JetBrains Mono, monospace',
          }}>artist's impression</div>
        </div>
      </div>
      <ScrollHint />
    </section>
  );
}

function Badge({ label, sub }) {
  return (
    <div style={{ display:'flex', alignItems:'center', gap:8 }}>
      <div style={{
        width:32, height:32, borderRadius:'50%',
        background:'var(--cream)', border:'1.4px solid var(--gold)',
        display:'flex', alignItems:'center', justifyContent:'center',
        color:'var(--gold-2)',
      }}><I.Check size={16} stroke={2}/></div>
      <div>
        <div className="serif" style={{ fontSize:14, fontWeight:600, color:'var(--navy)' }}>{label}</div>
        <div style={{ fontSize:10, letterSpacing:'0.12em', color:'var(--muted)', fontFamily:'JetBrains Mono, monospace' }}>{sub}</div>
      </div>
    </div>
  );
}

function ScrollHint() {
  return (
    <div className="ft-scrollhint" style={{
      position:'absolute', bottom:120, left:'50%', transform:'translateX(-50%)',
      display:'flex', flexDirection:'column', alignItems:'center', gap:8,
      color:'var(--muted)', fontSize:10, letterSpacing:'0.3em', textTransform:'uppercase',
    }}>
      Scroll
      <div style={{ width:1, height:30, background:'var(--gold)', animation:'pulse 2s infinite' }}/>
      <style>{`@keyframes pulse{0%,100%{opacity:0.3;transform:scaleY(0.6)}50%{opacity:1;transform:scaleY(1)}}`}</style>
    </div>
  );
}

// ============ STATS BAR ============
const STATS = [
  { l:'Configurations', v:'2 & 3 BHK' },
  { l:'Size Range', v:'1000 – 2000', sub:'Sft' },
  { l:'Price', v:'₹4,250++', sub:'Per Sft' },
  { l:'Possession', v:'Jun 2028' },
  { l:'Project Area', v:'3.33 / 5', sub:'Acres' },
  { l:'Towers', v:'5 Blocks', sub:'A · B · C · D · E' },
  { l:'Floors', v:'Stilt + 5', sub:'Per Tower' },
];
function StatsBar() {
  return (
    <div className="ft-section-pad" style={{ maxWidth:1320, margin:'-80px auto 0', position:'relative', zIndex:5 }}>
      <div className="ft-stats-grid" style={{
        background:'var(--cream)', border:'1px solid var(--line)',
        boxShadow:'0 30px 60px -25px rgba(14,40,69,0.18)',
        display:'grid', gridTemplateColumns:`repeat(${STATS.length}, 1fr)`,
      }}>
        {STATS.map((s,i) => (
          <div key={s.l} style={{
            padding:'26px 22px',
            borderRight: i<STATS.length-1 ? '1px solid var(--line)' : 'none',
            textAlign:'center',
          }}>
            <div className="eyebrow" style={{ marginBottom:10, fontSize:10 }}>{s.l}</div>
            <div className="serif" style={{ fontSize:21, color:'var(--navy)', fontWeight:600, letterSpacing:'-0.01em' }}>{s.v}</div>
            {s.sub && <div style={{ fontSize:10, color:'var(--muted)', marginTop:4, letterSpacing:'0.1em', textTransform:'uppercase', fontFamily:'JetBrains Mono, monospace' }}>{s.sub}</div>}
          </div>
        ))}
      </div>
    </div>
  );
}

// ============ ABOUT ============
function About({ onPlay }) {
  return (
    <section id="about" className="ft-section-pad" style={{ padding:'140px 36px 100px' }}>
      <div className="ft-about-grid" style={{ maxWidth:1320, margin:'0 auto', display:'grid', gridTemplateColumns:'1fr 1.15fr', gap:80, alignItems:'center' }}>
        <div>
          <div className="eyebrow" style={{ marginBottom:18 }}>About the Project</div>
          <h2 className="serif ft-section-headline" style={{ fontSize:'clamp(34px, 3.6vw, 52px)', lineHeight:1.08, margin:'0 0 24px', color:'var(--navy)' }}>
            A Fortune of Space.<br/>
            <span style={{ fontStyle:'italic', color:'var(--gold-2)' }}>A Lifetime</span> of Happiness.
          </h2>
          <p style={{ fontSize:16, lineHeight:1.7, color:'var(--ink-2)', maxWidth:520, marginBottom:20 }}>
            Vedatri Fortune Towers is a thoughtfully planned premium residential
            community in the heart of Mallampet. Set across <b style={{ color:'var(--navy)' }}>3.33 acres</b> of
            curated land within the ORR Growth Corridor, this gated community houses
            <b style={{ color:'var(--navy)' }}> 5 Vaastu-aligned towers</b> with spacious 2 &amp; 3 BHK homes,
            <b style={{ color:'var(--navy)' }}> 17,125 sft of resort-grade amenities</b>, and an architectural
            language built for stillness, light, and air.
          </p>
          <p style={{ fontSize:16, lineHeight:1.7, color:'var(--ink-2)', maxWidth:520, marginBottom:32 }}>
            Every detail — from cross ventilation to balcony orientation — is
            considered for the way real families live. This isn't a building.
            It's a long, slow exhale.
          </p>

          <div className="ft-pills" style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:18, maxWidth:540 }}>
            <Pill icon={<I.Shield/>} label={<>Gated<br/>Community</>}/>
            <Pill icon={<I.Home/>} label={<>Spacious<br/>Homes</>}/>
            <Pill icon={<I.Compass/>} label={<>Vaastu<br/>Compliant</>}/>
            <Pill icon={<I.Sparkle/>} label={<>Premium<br/>Lifestyle</>}/>
          </div>
        </div>

        <button onClick={onPlay} style={{
          position:'relative', aspectRatio:'4/3', border:'none', padding:0,
          background:'#0a1f37', cursor:'pointer',
          overflow:'hidden', display:'block', width:'100%',
        }}>
          <img src="assets/render-2.png" alt="Vedatri Fortune Towers — angled view"
               style={{ width:'100%', height:'100%', objectFit:'cover', display:'block', opacity:0.85 }}/>
          <div style={{ position:'absolute', inset:0, background:'rgba(10,31,55,0.25)' }}/>
          <div style={{ position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center' }}>
            <div style={{
              width:78, height:78, borderRadius:'50%',
              background:'rgba(255,255,255,0.96)', display:'flex',
              alignItems:'center', justifyContent:'center',
              boxShadow:'0 10px 40px rgba(0,0,0,0.4)',
            }}>
              <svg width="22" height="26" viewBox="0 0 22 26" fill="var(--navy)"><polygon points="0,0 22,13 0,26"/></svg>
            </div>
          </div>
          <div style={{ position:'absolute', bottom:24, left:0, right:0, textAlign:'center', color:'var(--cream)', letterSpacing:'0.24em', fontSize:11, textTransform:'uppercase', fontWeight:600, textShadow:'0 2px 12px rgba(0,0,0,0.5)' }}>
            Watch Project Film
          </div>
        </button>
      </div>
    </section>
  );
}

function Pill({ icon, label }) {
  return (
    <div style={{ display:'flex', flexDirection:'column', alignItems:'center', textAlign:'center', gap:10 }}>
      <div style={{
        width:54, height:54, border:'1.2px solid var(--gold)', borderRadius:'50%',
        display:'flex', alignItems:'center', justifyContent:'center', color:'var(--gold-2)',
      }}>{React.cloneElement(icon, { size:24, stroke:1.4 })}</div>
      <div style={{ fontSize:11.5, lineHeight:1.3, color:'var(--ink-2)', letterSpacing:'0.04em', fontWeight:500 }}>{label}</div>
    </div>
  );
}

// ============ HIGHLIGHTS STRIP ============
const HIGHLIGHTS = [
  { i:<I.Stamp/>, l:'HMDA', sub:'Approved' },
  { i:<I.Cert/>,  l:'RERA', sub:'Registered' },
  { i:<I.Compass/>, l:'100% Vaastu', sub:'Compliant' },
  { i:<I.Car/>,   l:'Ample', sub:'Car Parking' },
  { i:<I.Shield/>,l:'24/7', sub:'Security' },
  { i:<I.Clubhouse/>, l:'17,125 Sft', sub:'Amenities' },
  { i:<I.Pin/>,   l:'ORR Growth', sub:'Corridor' },
];
function Highlights() {
  return (
    <section id="highlights" className="ft-section-pad" style={{ background:'var(--navy)', color:'var(--cream)', padding:'46px 36px', position:'relative', overflow:'hidden' }}>
      <div style={{
        position:'absolute', inset:0, opacity:0.05,
        background:'repeating-linear-gradient(45deg, transparent 0 8px, var(--cream) 8px 9px)',
        pointerEvents:'none',
      }}/>
      <div className="ft-highlights-grid" style={{ maxWidth:1320, margin:'0 auto', display:'grid', gridTemplateColumns:'180px 1fr', gap:40, alignItems:'center' }}>
        <div className="eyebrow" style={{ color:'var(--gold)' }}>Project<br/>Highlights</div>
        <div className="ft-highlights-items" style={{ display:'grid', gridTemplateColumns:`repeat(${HIGHLIGHTS.length}, 1fr)`, gap:8 }}>
          {HIGHLIGHTS.map(h => (
            <div key={h.l} style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:10, textAlign:'center', padding:'0 6px' }}>
              <div style={{ color:'var(--gold)' }}>{React.cloneElement(h.i, { size:32, stroke:1.2 })}</div>
              <div style={{ fontSize:13, lineHeight:1.3 }}>
                <div className="serif" style={{ fontWeight:500 }}>{h.l}</div>
                <div style={{ fontSize:11.5, opacity:0.7, marginTop:2 }}>{h.sub}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.HeaderC = Header;
window.HeroC = Hero;
window.StatsBarC = StatsBar;
window.AboutC = About;
window.HighlightsC = Highlights;
window.Logo = Logo;