// ============ FLOOR PLANS ============
const PLAN_VARIANTS = [
  {
    id:'2bhk-compact', label:'2 BHK', size:'1000 – 1120', block:'Block A · C',
    facing:'East / North-East', flats:[ 'A-5','A-6,7,8,9','C-9,18,19,20,21' ],
    accent:'2BHK · Compact', image:'assets/plan-2bhk.png',
    rooms:['Master bedroom','Bedroom 2','Living · Dining','Modular kitchen','2 bathrooms','Balcony'],
  },
  {
    id:'2bhk-large', label:'2 BHK Large', size:'1150 – 1240', block:'Block A · B · C · D',
    facing:'East / West', flats:[ 'A-1,2,3,4,10–13','B-13,15,16','C-3,4,5,6','D-2,3,4,5,6,9–13' ],
    accent:'2BHK · Large', image:'assets/plan-2bhk-large.png',
    rooms:['Master with walk-in','Bedroom 2','Living · Dining','Modular kitchen','Pooja niche','2 bathrooms','Utility','2 balconies'],
  },
  {
    id:'3bhk-classic', label:'3 BHK', size:'1500 – 1700', block:'Block B · C · D',
    facing:'East / North',  flats:[ 'B-1,2,3,4,5,7,8,22','C-1,2,7,8,10,11,16,17','D-1,7,14' ],
    accent:'3BHK · Classic', image:'assets/plan-3bhk.png',
    rooms:['Master suite','Bedroom 2','Bedroom 3','Living · Dining','Modular kitchen','Pooja','3 bathrooms','Utility','2 balconies'],
  },
  {
    id:'3bhk-premium', label:'3 BHK Premium', size:'1900 – 2000', block:'Block A · D · E',
    facing:'East — Corner unit', flats:[ 'A-19 (2000 sft)','D-8 (1920 sft)','E-1 (1900 sft)' ],
    accent:'3BHK · Premium', image:'assets/plan-3bhk-premium.png',
    rooms:['Master suite + walk-in','Bedroom 2 + en-suite','Bedroom 3','Living · Dining','Modular kitchen + utility','Pooja','3 bathrooms','Study nook','3 balconies'],
  },
];

// Fallback SVG floor plan rendering — used when no real image is available yet.
function FloorPlanSVG({ variant }) {
  const W = 320, H = 260;
  const has3 = variant.id.startsWith('3bhk');
  const premium = variant.id === '3bhk-premium';
  return (
    <svg viewBox={`0 0 ${W} ${H}`} style={{ width:'100%', height:'100%', display:'block' }}>
      <defs>
        <pattern id={`floor-${variant.id}`} x="0" y="0" width="6" height="6" patternUnits="userSpaceOnUse">
          <rect width="6" height="6" fill="#efe7d6"/>
          <line x1="0" y1="6" x2="6" y2="0" stroke="#d8ceb4" strokeWidth="0.4"/>
        </pattern>
      </defs>
      <rect width={W} height={H} fill="#fbf7ee"/>
      <rect x="20" y="20" width={W-40} height={H-40} fill={`url(#floor-${variant.id})`} stroke="#0e2845" strokeWidth="2.5"/>
      <rect x="20" y="20" width="110" height="100" fill="#f7f1e6" stroke="#0e2845" strokeWidth="1.4"/>
      <text x="75" y="62" textAnchor="middle" fontFamily="Manrope, sans-serif" fontSize="9" fill="#0e2845" fontWeight="600" letterSpacing="1">MASTER</text>
      <text x="75" y="74" textAnchor="middle" fontFamily="Manrope, sans-serif" fontSize="9" fill="#0e2845" fontWeight="600" letterSpacing="1">BEDROOM</text>
      <rect x="20" y="120" width="50" height="50" fill="#efe7d6" stroke="#0e2845" strokeWidth="1.2"/>
      <text x="45" y="150" textAnchor="middle" fontSize="7" fill="#0e2845" fontFamily="Manrope, sans-serif">BATH</text>
      <rect x="20" y="170" width="110" height={H-20-170} fill="#f7f1e6" stroke="#0e2845" strokeWidth="1.4"/>
      <text x="75" y={H-50} textAnchor="middle" fontSize="9" fill="#0e2845" fontFamily="Manrope, sans-serif" fontWeight="600" letterSpacing="1">BEDROOM 2</text>
      <rect x="130" y="20" width={has3?100:170} height="140" fill="#f7f1e6" stroke="#0e2845" strokeWidth="1.4"/>
      <text x={130+(has3?50:85)} y="80" textAnchor="middle" fontSize="10" fill="#0e2845" fontFamily="Manrope, sans-serif" fontWeight="600" letterSpacing="1.4">LIVING · DINING</text>
      <rect x="145" y="125" width={has3?70:140} height="25" rx="3" fill="#d8c79f" stroke="#0e2845" strokeWidth="0.8"/>
      {has3 && (<>
        <rect x="230" y="20" width={W-20-230} height="100" fill="#f7f1e6" stroke="#0e2845" strokeWidth="1.4"/>
        <text x={(230+W-20)/2} y="65" textAnchor="middle" fontSize="9" fill="#0e2845" fontWeight="600" fontFamily="Manrope, sans-serif" letterSpacing="1">BEDROOM 3</text>
      </>)}
      <rect x="130" y="160" width="90" height={H-20-160} fill="#efe7d6" stroke="#0e2845" strokeWidth="1.4"/>
      <text x="175" y={(160+H-20)/2+3} textAnchor="middle" fontSize="9" fill="#0e2845" fontWeight="600" fontFamily="Manrope, sans-serif" letterSpacing="1">KITCHEN</text>
      <rect x="220" y="160" width={W-20-220} height={H-20-160} fill="#efe7d6" stroke="#0e2845" strokeWidth="1.2"/>
      <text x={(220+W-20)/2} y={(160+H-20)/2+3} textAnchor="middle" fontSize="7" fill="#0e2845" fontFamily="Manrope, sans-serif">UTILITY</text>
      {has3 && (<>
        <rect x="220" y="120" width="40" height="40" fill="#efe7d6" stroke="#0e2845" strokeWidth="1"/>
        <text x="240" y="145" textAnchor="middle" fontSize="6.5" fill="#0e2845" fontFamily="Manrope, sans-serif">BATH 2</text>
      </>)}
      {premium && (<rect x="260" y="120" width={W-20-260} height="40" fill="none" stroke="#c9a25b" strokeWidth="1.4" strokeDasharray="3 2"/>)}
      <g transform="translate(295,235)">
        <circle r="10" fill="#fff" stroke="#c9a25b" strokeWidth="0.8"/>
        <path d="M0 -7 L3 0 L0 7 L-3 0Z" fill="#0e2845"/>
        <text y="-12" textAnchor="middle" fontSize="7" fontFamily="Manrope, sans-serif" fontWeight="700" fill="#c9a25b">N</text>
      </g>
    </svg>
  );
}

// Image-or-fallback: renders <img> if loadable, otherwise the SVG schematic
function PlanImage({ variant }) {
  const [failed, setFailed] = React.useState(false);
  if (!variant.image || failed) return <FloorPlanSVG variant={variant} />;
  return (
    <img src={variant.image} alt={variant.label + ' floor plan'}
         onError={() => setFailed(true)}
         style={{ width:'100%', height:'100%', objectFit:'contain', display:'block', background:'#fbf7ee' }}/>
  );
}

function FloorPlans({ onOpen }) {
  const [selected, setSelected] = React.useState(0);
  const v = PLAN_VARIANTS[selected];
  return (
    <section id="plans" className="ft-section-pad" style={{ padding:'120px 36px', background:'var(--paper)' }}>
      <div style={{ maxWidth:1320, margin:'0 auto' }}>
        <div style={{ textAlign:'center', marginBottom:50 }}>
          <div className="eyebrow" style={{ marginBottom:14 }}>Floor Plans</div>
          <h2 className="serif ft-section-headline" style={{ fontSize:'clamp(34px, 3.6vw, 52px)', margin:'0 0 14px', color:'var(--navy)' }}>
            Homes Designed <span style={{ fontStyle:'italic', color:'var(--gold-2)' }}>Around You</span>
          </h2>
          <p style={{ color:'var(--muted)', maxWidth:540, margin:'0 auto', fontSize:15 }}>
            Twelve Vaastu-aligned layouts across five towers. Cross-ventilation,
            double-loaded balconies, dedicated utility — by design.
          </p>
        </div>

        {/* Tab selector */}
        <div className="ft-plans-tabs" style={{
          display:'flex', justifyContent:'center', borderBottom:'1px solid var(--line-2)',
          marginBottom:40, gap:0, flexWrap:'wrap',
        }}>
          {PLAN_VARIANTS.map((p, i) => (
            <button key={p.id} onClick={() => setSelected(i)} style={{
              background:'transparent', border:'none', padding:'18px 28px',
              cursor:'pointer', position:'relative', display:'flex', flexDirection:'column', gap:4, alignItems:'center',
              color: selected===i ? 'var(--navy)' : 'var(--muted)',
              borderBottom: selected===i ? '2px solid var(--gold)' : '2px solid transparent',
              marginBottom:-1, transition:'color .2s',
            }}>
              <span className="serif" style={{ fontSize:18, fontWeight:500 }}>{p.label}</span>
              <span style={{ fontSize:10, letterSpacing:'0.16em', textTransform:'uppercase', fontFamily:'JetBrains Mono, monospace' }}>{p.size} Sft</span>
            </button>
          ))}
        </div>

        {/* Featured plan */}
        <div className="ft-plans-grid" style={{
          display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:0,
          background:'var(--cream)', border:'1px solid var(--line)',
          minHeight:520, transition:'all .3s',
        }}>
          <div style={{ position:'relative', background:'#fbf7ee', borderRight:'1px solid var(--line)', padding:30, display:'flex', alignItems:'center', justifyContent:'center' }}>
            <div style={{ width:'100%', height:'100%', minHeight:460 }}>
              <PlanImage variant={v} />
            </div>
            <div style={{
              position:'absolute', top:18, left:18,
              fontFamily:'JetBrains Mono, monospace', fontSize:10, letterSpacing:'0.2em',
              color:'var(--gold-2)', textTransform:'uppercase',
            }}>{v.accent}</div>
            <button onClick={() => onOpen(v)} style={{
              position:'absolute', bottom:18, right:18,
              background:'rgba(14,40,69,0.92)', color:'var(--cream)', border:'none',
              padding:'10px 16px', fontSize:10.5, letterSpacing:'0.18em',
              textTransform:'uppercase', fontWeight:600, cursor:'pointer',
              display:'flex', alignItems:'center', gap:8,
            }}>Expand <I.Arrow size={12}/></button>
          </div>

          <div style={{ padding:'40px 42px', display:'flex', flexDirection:'column' }}>
            <h3 className="serif" style={{ fontSize:36, color:'var(--navy)', margin:'0 0 6px', fontWeight:500, letterSpacing:'-0.01em' }}>
              {v.label}
            </h3>
            <div style={{ fontSize:14, color:'var(--ink-2)', marginBottom:24 }}>
              {v.size} Sft · {v.facing}
            </div>

            <div style={{ borderTop:'1px solid var(--line)', paddingTop:18, marginBottom:14 }}>
              <Row k="Towers" v={v.block}/>
              <Row k="Floors" v="Stilt + 5"/>
              <Row k="Carpet (approx.)" v={v.size + ' Sft'}/>
              <Row k="Indicative price" v={'₹ ' + (4250).toLocaleString('en-IN') + '++ / Sft'}/>
            </div>

            <div className="eyebrow" style={{ marginTop:10, marginBottom:10 }}>Includes</div>
            <ul style={{ listStyle:'none', padding:0, margin:0, display:'grid', gridTemplateColumns:'1fr 1fr', gap:'8px 16px' }}>
              {v.rooms.map(r => (
                <li key={r} style={{ fontSize:13, color:'var(--ink-2)', display:'flex', gap:8, alignItems:'flex-start' }}>
                  <span style={{ color:'var(--gold-2)', marginTop:3 }}><I.Check size={12} stroke={2}/></span> {r}
                </li>
              ))}
            </ul>

            <div style={{ marginTop:18, padding:'12px 14px', background:'var(--cream-2)', fontSize:11.5, color:'var(--ink-2)', lineHeight:1.55 }}>
              <b style={{ color:'var(--navy)' }}>Available flats:</b> {v.flats.join(' · ')}
            </div>

            <div style={{ marginTop:'auto', paddingTop:24, display:'flex', gap:10 }}>
              <button onClick={() => onOpen(v)} style={{
                flex:1, background:'var(--navy)', color:'var(--cream)', border:'none',
                padding:'14px', fontSize:11, letterSpacing:'0.22em', textTransform:'uppercase',
                fontWeight:600, cursor:'pointer',
              }}>Enquire</button>
              <button style={{
                flex:1, background:'transparent', color:'var(--navy)', border:'1.4px solid var(--navy)',
                padding:'14px', fontSize:11, letterSpacing:'0.22em', textTransform:'uppercase',
                fontWeight:600, cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', gap:8,
              }}><I.Download size={13}/> PDF</button>
            </div>
          </div>
        </div>

        {/* Compare strip */}
        <div className="ft-plans-compare" style={{ marginTop:30, display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:14 }}>
          {PLAN_VARIANTS.map((p, i) => (
            <button key={p.id} onClick={() => setSelected(i)} style={{
              padding:'18px 18px 20px', background: selected===i ? 'var(--navy)' : 'var(--cream)',
              color: selected===i ? 'var(--cream)' : 'var(--navy)',
              border:'1px solid '+(selected===i?'var(--navy)':'var(--line)'),
              cursor:'pointer', textAlign:'left', transition:'all .2s',
            }}>
              <div className="serif" style={{ fontSize:20, fontWeight:500, marginBottom:4 }}>{p.label}</div>
              <div style={{ fontSize:12, opacity:0.75 }}>{p.size} Sft · {p.facing}</div>
              <div style={{ marginTop:12, fontSize:10.5, letterSpacing:'0.16em', textTransform:'uppercase', opacity:0.6 }}>
                {selected===i ? '● Selected' : 'View →'}
              </div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

// Floor plan modal — full view
function PlanModal({ plan, onClose }) {
  if (!plan) return null;
  return (
    <div onClick={onClose} style={{
      position:'fixed', inset:0, background:'rgba(10,31,55,0.85)', zIndex:100,
      display:'flex', alignItems:'center', justifyContent:'center', padding:30,
    }}>
      <div onClick={e=>e.stopPropagation()} className="ft-plan-modal" style={{
        background:'var(--paper)', maxWidth:1100, width:'100%', maxHeight:'90vh',
        overflow:'auto', display:'grid', gridTemplateColumns:'1.3fr 1fr', gap:0,
      }}>
        <div style={{ background:'var(--cream)', padding:40, borderRight:'1px solid var(--line)', display:'flex', alignItems:'center' }}>
          <div style={{ width:'100%', height:'100%', minHeight:400 }}>
            <PlanImage variant={plan} />
          </div>
        </div>
        <div className="ft-plan-detail" style={{ padding:'40px 36px', position:'relative' }}>
          <button onClick={onClose} style={{
            position:'absolute', top:20, right:20, background:'none', border:'1px solid var(--line-2)',
            width:36, height:36, cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center',
          }}><I.Close size={14}/></button>
          <div className="eyebrow" style={{ marginBottom:14 }}>{plan.accent}</div>
          <h3 className="serif" style={{ fontSize:36, color:'var(--navy)', margin:'0 0 8px', fontWeight:500 }}>{plan.label}</h3>
          <div style={{ fontSize:14, color:'var(--ink-2)', marginBottom:30 }}>{plan.size} Sft · {plan.facing}</div>
          <div style={{ borderTop:'1px solid var(--line)', padding:'18px 0' }}>
            <Row k="Configuration" v={plan.label}/>
            <Row k="Carpet (approx.)" v={plan.size + ' Sft'}/>
            <Row k="Facing" v={plan.facing}/>
            <Row k="Towers" v={plan.block}/>
            <Row k="Floors" v="Stilt + 5"/>
            <Row k="Indicative price" v={'₹ ' + (4250).toLocaleString('en-IN') + '++ / Sft'}/>
          </div>
          <div style={{ marginTop:14, padding:14, background:'var(--cream-2)', fontSize:12, color:'var(--ink-2)', lineHeight:1.6 }}>
            <b style={{ color:'var(--navy)' }}>Available units</b><br/>
            {plan.flats.join(' · ')}
          </div>
          <button style={{
            marginTop:22, width:'100%', background:'var(--navy)', color:'var(--cream)', border:'none',
            padding:'16px', fontSize:11.5, letterSpacing:'0.22em', textTransform:'uppercase',
            fontWeight:600, cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', gap:10,
          }}>Enquire about this plan <I.Arrow size={15}/></button>
          <button style={{
            marginTop:10, width:'100%', background:'transparent', color:'var(--navy)', border:'1.4px solid var(--navy)',
            padding:'14px', fontSize:11.5, letterSpacing:'0.22em', textTransform:'uppercase',
            fontWeight:600, cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', gap:10,
          }}><I.Download size={14}/> Download PDF Plan</button>
        </div>
      </div>
    </div>
  );
}
function Row({ k, v }) {
  return (
    <div style={{ display:'flex', justifyContent:'space-between', padding:'10px 0', borderBottom:'1px dashed var(--line)', fontSize:13.5 }}>
      <span style={{ color:'var(--muted)' }}>{k}</span>
      <span style={{ color:'var(--navy)', fontWeight:600 }}>{v}</span>
    </div>
  );
}

// ============ AMENITIES ============
const AMENITIES = [
  { i:<I.Clubhouse/>, l:'Clubhouse', s:'Community lounge',   img:'assets/amenity-8.png' },
  { i:<I.Pool/>,      l:'Terrace Pool', s:'Sky-level infinity', img:'assets/amenity-4.png' },
  { i:<I.Dumbbell/>,  l:'Gym & Fitness', s:'Fully equipped',  img:'assets/amenity-1.png' },
  { i:<I.Play/>,      l:"Kids' Play", s:'Soft-surface zone',  img:'assets/amenity-11.png' },
  { i:<I.Tree/>,      l:'Gardens', s:'Landscaped walks',      img:'assets/amenity-0.png' },
  { i:<I.Theatre/>,   l:'Amphitheatre', s:'Open-air seating', img:'assets/amenity-12.png' },
  { i:<I.Games/>,     l:'Indoor Games', s:'Lounge & arcade',  img:'assets/amenity-10.png' },
  { i:<I.Run/>,       l:'Jogging Track', s:'Cycling zone',    img:'assets/amenity-7.png' },
  { i:<I.Badminton/>, l:'Shuttle Court', s:'Indoor sports',   img:'assets/amenity-9.png' },
  { i:<I.Senior/>,    l:'Senior Zone', s:'Quiet seating',     img:'assets/amenity-6.png' },
  { i:<I.Cart/>,      l:'Super Market', s:'On-site retail',   img:'assets/amenity-3.png' },
  { i:<I.Bed/>,       l:'Guest Rooms', s:'For visitors',      img:'assets/amenity-5.png' },
  { i:<I.Car/>,       l:'Ample Parking', s:'Stilt-level',     img:'assets/amenity-2.png' },
  { i:<I.Drop/>,      l:'STP & Water', s:'Sustainable' },
];
function Amenities() {
  return (
    <section id="amenities" className="ft-section-pad" style={{ padding:'120px 36px', background:'var(--cream)' }}>
      <div style={{ maxWidth:1320, margin:'0 auto' }}>
        <div style={{ textAlign:'center', marginBottom:60 }}>
          <div className="eyebrow" style={{ marginBottom:14 }}>Amenities · 17,125 Sft</div>
          <h2 className="serif ft-section-headline" style={{ fontSize:'clamp(34px, 3.6vw, 52px)', margin:'0 0 14px', color:'var(--navy)' }}>
            Luxury Amenities for a <span style={{ fontStyle:'italic', color:'var(--gold-2)' }}>Better Life</span>
          </h2>
          <p style={{ color:'var(--muted)', maxWidth:560, margin:'0 auto', fontSize:15 }}>
            A dedicated 17,125 sft clubhouse block + open-air spaces — crafted for
            comfort, designed for security, built for community.
          </p>
        </div>

        {/* Lifestyle banner */}
        <div style={{
          position:'relative', height:280, marginBottom:30, overflow:'hidden',
        }}>
          <img src="assets/amenities-bg.png" alt="Cycling at Vedatri Fortune Towers"
               style={{ width:'100%', height:'100%', objectFit:'cover', display:'block' }}/>
          <div style={{ position:'absolute', inset:0, background:'linear-gradient(90deg, rgba(10,31,55,0.78) 0%, rgba(10,31,55,0.4) 50%, rgba(10,31,55,0) 80%)' }}/>
          <div style={{ position:'absolute', inset:0, padding:'0 50px', display:'flex', alignItems:'center', color:'var(--cream)' }}>
            <div style={{ maxWidth:480 }}>
              <div className="eyebrow" style={{ color:'var(--gold)', marginBottom:14 }}>Crafted for comfort</div>
              <h3 className="serif" style={{ fontSize:'clamp(24px, 2.6vw, 36px)', margin:'0 0 10px', lineHeight:1.15, fontWeight:500 }}>
                Designed for security.<br/>
                <span style={{ fontStyle:'italic', color:'var(--gold)' }}>Built for community.</span>
              </h3>
              <p style={{ fontSize:13.5, opacity:0.85, margin:0 }}>
                Jogging track, cycling zone &amp; open-air seating areas — set within landscaped grounds.
              </p>
            </div>
          </div>
        </div>

        <div className="ft-amenities-grid" style={{
          display:'grid', gridTemplateColumns:'repeat(7, 1fr)', gap:0,
          border:'1px solid var(--line)', background:'var(--paper)',
        }}>
          {AMENITIES.map((a,i) => (
            <div key={a.l} style={{
              display:'flex', flexDirection:'column',
              borderRight: (i%7!==6) ? '1px solid var(--line)' : 'none',
              borderBottom: i<7 ? '1px solid var(--line)' : 'none',
              background:'var(--paper)',
            }}>
              {a.img ? (
                <div style={{ aspectRatio:'4/3', overflow:'hidden', background:'#e6dec9' }}>
                  <img src={a.img} alt={a.l}
                       style={{ width:'100%', height:'100%', objectFit:'cover', display:'block',
                                transition:'transform .5s ease' }}
                       onMouseEnter={e=>e.currentTarget.style.transform='scale(1.06)'}
                       onMouseLeave={e=>e.currentTarget.style.transform='scale(1)'}/>
                </div>
              ) : (
                <div style={{ aspectRatio:'4/3', display:'flex', alignItems:'center', justifyContent:'center', background:'var(--navy)', color:'var(--gold)' }}>
                  {React.cloneElement(a.i, { size:54, stroke:1 })}
                </div>
              )}
              <div style={{ padding:'18px 14px', textAlign:'center', flex:1 }}>
                <div style={{ color:'var(--gold-2)', display:'flex', justifyContent:'center', marginBottom:8 }}>
                  {React.cloneElement(a.i, { size:22, stroke:1.3 })}
                </div>
                <div className="serif" style={{ fontSize:14, color:'var(--navy)', fontWeight:500, marginBottom:2 }}>{a.l}</div>
                <div style={{ fontSize:10.5, color:'var(--muted)', letterSpacing:'0.04em' }}>{a.s}</div>
              </div>
            </div>
          ))}
        </div>

        <div className="ft-amenities-quotes" style={{ marginTop:50, display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:24 }}>
          <Quote l="17,125" sub="Sft of dedicated amenities"/>
          <Quote l="3.33 ac" sub="Open landscaped grounds"/>
          <Quote l="100%" sub="Vaastu-aligned planning"/>
        </div>
      </div>
    </section>
  );
}
function Quote({ l, sub }) {
  return (
    <div style={{ background:'var(--navy)', color:'var(--cream)', padding:'30px 32px', display:'flex', alignItems:'baseline', gap:20 }}>
      <div className="serif" style={{ fontSize:46, fontWeight:600, color:'var(--gold)' }}>{l}</div>
      <div style={{ fontSize:13, opacity:0.85, letterSpacing:'0.02em' }}>{sub}</div>
    </div>
  );
}

// ============ GALLERY ============
const GALLERY = [
  { 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.' },
];
function Gallery({ onOpen }) {
  return (
    <section id="gallery" className="ft-section-pad" style={{ padding:'120px 36px', background:'var(--paper)' }}>
      <div style={{ maxWidth:1320, margin:'0 auto' }}>
        <div style={{ display:'flex', alignItems:'end', justifyContent:'space-between', marginBottom:48, flexWrap:'wrap', gap:24 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom:14 }}>Gallery</div>
            <h2 className="serif ft-section-headline" style={{ fontSize:'clamp(34px, 3.6vw, 52px)', margin:0, color:'var(--navy)' }}>
              A Glimpse of <span style={{ fontStyle:'italic', color:'var(--gold-2)' }}>Fortune</span>
            </h2>
          </div>
          <div style={{ display:'flex', gap:10, fontSize:11, letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--muted)', fontWeight:600 }}>
            <button style={chip(true)}>All</button>
            <button style={chip()}>Exteriors</button>
            <button style={chip()}>Interiors</button>
            <button style={chip()}>Amenities</button>
          </div>
        </div>

        <div className="ft-gallery-grid" style={{ display:'grid', gridTemplateColumns:'2fr 1fr 1fr', gridAutoRows:'200px', gap:14 }}>
          {GALLERY.map((g,i) => (
            <button key={i} onClick={() => onOpen(i)} style={{
              gridColumn: i===0 ? 'span 2' : 'span 1',
              gridRow: i===0 ? 'span 2' : 'span 1',
              padding:0, border:'none', cursor:'pointer', position:'relative',
              overflow:'hidden', background:'#1a2f48',
            }}>
              <img src={g.img} alt={g.tag}
                   style={{ width:'100%', height:'100%', objectFit:'cover', display:'block',
                            transition:'transform .6s ease' }}
                   onMouseEnter={e=>e.currentTarget.style.transform='scale(1.05)'}
                   onMouseLeave={e=>e.currentTarget.style.transform='scale(1)'}/>
              <div style={{
                position:'absolute', inset:0,
                background:'linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(10,31,55,0.85) 100%)',
              }}/>
              <div style={{ position:'absolute', inset:0, display:'flex', flexDirection:'column', justifyContent:'flex-end', padding:20, color:'var(--cream)', textAlign:'left' }}>
                <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize:9.5, letterSpacing:'0.16em', opacity:0.85, marginBottom:6, textTransform:'uppercase' }}>{`0${i+1} · IMG`}</div>
                <div className="serif" style={{ fontSize: i===0 ? 28 : 17, fontWeight:500 }}>{g.tag}</div>
              </div>
              <div style={{
                position:'absolute', top:14, right:14, opacity:0.85,
                background:'rgba(10,31,55,0.5)', backdropFilter:'blur(4px)',
                width:32, height:32, display:'flex', alignItems:'center', justifyContent:'center',
              }}>
                <I.Camera size={16} color="var(--cream)" stroke={1.2}/>
              </div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}
const chip = (active) => ({
  background: active ? 'var(--navy)' : 'transparent',
  color: active ? 'var(--cream)' : 'var(--navy)',
  border:'1px solid '+(active?'var(--navy)':'var(--line-2)'),
  padding:'8px 16px', fontSize:11, letterSpacing:'0.18em', textTransform:'uppercase',
  fontWeight:600, cursor:'pointer',
});
// ============ LOCATION ============
const CONNECT = [
  { i:<I.Clock/>, k:'Outer Ring Road (ORR)', v:'10 mins' },
  { i:<I.Office/>, k:'DLF Cybercity', v:'15 mins' },
  { i:<I.Office/>, k:'Gachibowli', v:'20 mins' },
  { i:<I.School/>, k:'Schools & Colleges', v:'5–10 mins' },
  { i:<I.Hospital/>, k:'Hospitals', v:'8 mins' },
  { i:<I.Pin/>, k:'Patancheru, Miyapur', v:'12 mins' },
];

function LocationSection() {
  return (
    <section id="location" className="ft-section-pad" style={{ padding:'120px 36px', background:'var(--cream)' }}>
      <div style={{ maxWidth:1320, margin:'0 auto' }}>
        <div className="ft-location-grid" style={{ display:'grid', gridTemplateColumns:'1.1fr 1fr', gap:50, alignItems:'start' }}>
          <div>
            <div className="eyebrow" style={{ marginBottom:14 }}>Prime Location</div>
            <h2 className="serif ft-section-headline" style={{ fontSize:'clamp(34px, 3.6vw, 52px)', margin:'0 0 12px', color:'var(--navy)' }}>
              Mallampet, <span style={{ fontStyle:'italic', color:'var(--gold-2)' }}>Hyderabad</span>
            </h2>
            <div style={{ fontSize:13.5, color:'var(--muted)', marginBottom:30, letterSpacing:'0.02em' }}>
              Survey Nos. 264, 265, 267, 268 · Kazipally ORR-GC · Jinnaram Mandal · Sangareddy District
            </div>

            <div style={{ background:'var(--paper)', border:'1px solid var(--line)', padding:6 }}>
              <div style={{ position:'relative', width:'100%', height:380 }}>
                <iframe
                  title="Vedatri Fortune Towers — Mallampet"
                  src="https://www.google.com/maps?q=Mallampet,+Hyderabad,+Telangana&t=&z=13&ie=UTF8&iwloc=&output=embed"
                  style={{ width:'100%', height:'100%', border:0, display:'block', filter:'saturate(0.85) contrast(0.95)' }}
                  loading="lazy"
                  referrerPolicy="no-referrer-when-downgrade"
                />
                {/* Floating project pin card */}
                <div style={{
                  position:'absolute', top:18, left:18, background:'var(--paper)',
                  padding:'12px 16px', border:'1px solid var(--line-2)',
                  boxShadow:'0 10px 30px -10px rgba(14,40,69,0.25)', maxWidth:240,
                }}>
                  <div style={{ display:'flex', gap:10, alignItems:'flex-start' }}>
                    <div style={{ color:'var(--gold-2)', marginTop:2 }}><I.Pin size={18}/></div>
                    <div>
                      <div className="serif" style={{ fontSize:14, color:'var(--navy)', fontWeight:600, letterSpacing:'0.04em' }}>
                        Vedatri Fortune Towers
                      </div>
                      <div style={{ fontSize:11.5, color:'var(--muted)', marginTop:3, lineHeight:1.45 }}>
                        Mallampet, Kazipally ORR-GC,<br/>Sangareddy
                      </div>
                    </div>
                  </div>
                </div>
                <a href="https://www.google.com/maps/search/?api=1&query=Mallampet+Hyderabad" target="_blank" rel="noopener noreferrer"
                   style={{
                     position:'absolute', bottom:14, right:14, background:'var(--navy)', color:'var(--cream)',
                     padding:'9px 14px', fontSize:10.5, letterSpacing:'0.18em', textTransform:'uppercase',
                     fontWeight:600, textDecoration:'none', display:'flex', alignItems:'center', gap:8,
                   }}>Open in Maps <I.Arrow size={12}/></a>
              </div>
            </div>
            <p style={{ color:'var(--muted)', fontSize:12, fontStyle:'italic', marginTop:10 }}>
              Interactive · drag to pan, scroll to zoom
            </p>
          </div>

          <div>
            <h3 className="serif" style={{ fontSize:24, color:'var(--navy)', margin:'0 0 24px', fontWeight:500 }}>
              Connectivity
            </h3>
            <div style={{ display:'flex', flexDirection:'column', gap:0 }}>
              {CONNECT.map((c,i) => (
                <div key={c.k} style={{
                  display:'flex', alignItems:'center', gap:16, padding:'18px 0',
                  borderTop: i===0 ? '1px solid var(--line-2)' : 'none',
                  borderBottom: '1px solid var(--line-2)',
                }}>
                  <div style={{ color:'var(--gold-2)' }}>{React.cloneElement(c.i, { size:24, stroke:1.4 })}</div>
                  <div style={{ flex:1 }}>
                    <div className="serif" style={{ fontSize:17, color:'var(--navy)', fontWeight:500 }}>{c.k}</div>
                  </div>
                  <div style={{
                    fontFamily:'JetBrains Mono, monospace', fontSize:13, color:'var(--navy)',
                    letterSpacing:'0.06em', fontWeight:500,
                  }}>{c.v}</div>
                </div>
              ))}
            </div>

            <div style={{ marginTop:30, background:'var(--navy)', color:'var(--cream)', padding:'28px 30px' }}>
              <div className="eyebrow" style={{ color:'var(--gold)', marginBottom:10 }}>Why Mallampet</div>
              <p style={{ fontSize:14, lineHeight:1.65, opacity:0.92, margin:0 }}>
                Part of the ORR Growth Corridor — Hyderabad's fastest-appreciating
                belt. Designated Special Development Zone (SDZ) with planned
                infrastructure, sub-15 minute access to Cybercity, and 100m+ road
                width along key arterials.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ ENQUIRY ============
function Enquiry() {
  const [data, setData] = React.useState({ name:'', phone:'', email:'', interest:'2 BHK' });
  const [sent, setSent] = React.useState(false);
  const submit = (e) => {
    e.preventDefault();
    if (!data.name || !data.phone) return;
    setSent(true);
    setTimeout(() => setSent(false), 4000);
    setData({ name:'', phone:'', email:'', interest:'2 BHK' });
  };
  const inp = {
    width:'100%', padding:'16px 18px', background:'rgba(255,255,255,0.06)',
    border:'1px solid rgba(247,241,230,0.18)', color:'var(--cream)',
    fontFamily:'Manrope, sans-serif', fontSize:14, outline:'none',
  };
  return (
    <section id="contact" className="ft-section-pad" style={{ padding:'100px 36px', background:'var(--navy)', color:'var(--cream)', position:'relative', overflow:'hidden' }}>
      {/* corner ornament */}
      <svg viewBox="0 0 400 400" style={{ position:'absolute', top:-100, right:-100, width:500, height:500, opacity:0.06 }}>
        <circle cx="200" cy="200" r="180" fill="none" stroke="#c9a25b" strokeWidth="0.6"/>
        <circle cx="200" cy="200" r="140" fill="none" stroke="#c9a25b" strokeWidth="0.6"/>
        <circle cx="200" cy="200" r="100" fill="none" stroke="#c9a25b" strokeWidth="0.6"/>
      </svg>

      <div className="ft-enquiry-grid" style={{ maxWidth:1100, margin:'0 auto', display:'grid', gridTemplateColumns:'1fr 1.1fr', gap:80, alignItems:'center', position:'relative' }}>
        <div>
          <div className="eyebrow" style={{ color:'var(--gold)', marginBottom:18 }}>Enquire Now</div>
          <h2 className="serif ft-section-headline" style={{ fontSize:'clamp(34px, 3.6vw, 50px)', margin:'0 0 20px', lineHeight:1.1 }}>
            Book your <span style={{ fontStyle:'italic', color:'var(--gold)' }}>dream home</span> today.
          </h2>
          <p style={{ fontSize:15, opacity:0.85, lineHeight:1.7, maxWidth:380, marginBottom:32 }}>
            Schedule a site visit, request a private walkthrough of a sample
            apartment, or get a tailored cost sheet within 24 hours.
          </p>
          <div style={{ display:'flex', flexDirection:'column', gap:14, fontSize:14 }}>
            <ContactLine icon={<I.Phone/>} text="+91 92957 09846"/>
            <ContactLine icon={<I.Mail/>} text="sales@fortunetowers.in"/>
          </div>
        </div>

        <form onSubmit={submit} className="ft-enquiry-form" style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14 }}>
          <input style={inp} placeholder="Name" value={data.name} onChange={e=>setData({...data,name:e.target.value})} />
          <input style={inp} placeholder="Mobile number" value={data.phone} onChange={e=>setData({...data,phone:e.target.value})} />
          <input style={{...inp, gridColumn:'span 2'}} placeholder="Email address" value={data.email} onChange={e=>setData({...data,email:e.target.value})} />
          <select style={{...inp, gridColumn:'span 2', appearance:'none'}} value={data.interest} onChange={e=>setData({...data,interest:e.target.value})}>
            <option>2 BHK · 1000–1240 Sft</option>
            <option>2.5 BHK · 1500 Sft</option>
            <option>3 BHK · 1500–1700 Sft</option>
            <option>3 BHK Premium · 1900–2000 Sft</option>
            <option>Just want to know more</option>
          </select>
          <button type="submit" style={{
            gridColumn:'span 2', background: sent ? '#1e8a5a' : 'var(--gold)',
            color: sent ? '#fff' : 'var(--navy)', border:'none',
            padding:'18px', fontSize:11.5, letterSpacing:'0.24em', textTransform:'uppercase',
            fontWeight:700, cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', gap:10,
            transition:'background .3s',
          }}>
            {sent ? <><I.Check size={16}/> Thank you — we'll be in touch</> : <>Submit Enquiry <I.Arrow size={16}/></>}
          </button>
          <p style={{ gridColumn:'span 2', fontSize:11, opacity:0.6, marginTop:4 }}>
            By submitting you agree to be contacted by our sales team.
            RERA P01100010672 · HMDA Sanctioned.
          </p>
        </form>
      </div>
    </section>
  );
}
function ContactLine({ icon, text }) {
  return (
    <div style={{ display:'flex', alignItems:'center', gap:14 }}>
      <div style={{ color:'var(--gold)' }}>{React.cloneElement(icon, { size:18, stroke:1.4 })}</div>
      <div style={{ opacity:0.92 }}>{text}</div>
    </div>
  );
}

// ============ FOOTER ============
function Footer() {
  return (
    <footer className="ft-section-pad" style={{ background:'var(--navy-2)', color:'var(--cream)', padding:'70px 36px 30px' }}>
      <div className="ft-footer-grid" style={{ maxWidth:1320, margin:'0 auto', display:'grid', gridTemplateColumns:'1.5fr 1fr 1fr 1.2fr', gap:50 }}>
        <div>
          <Logo light/>
          <p style={{ fontSize:13, opacity:0.7, lineHeight:1.7, marginTop:22, maxWidth:300 }}>
            A premium gated community offering spacious 2 &amp; 3 BHK homes in Mallampet, Hyderabad — across 3.33 acres along the ORR Growth Corridor.
          </p>
          <div style={{ display:'flex', gap:14, marginTop:24 }}>
            {['F','I','Y','in'].map(s => (
              <div key={s} style={{
                width:32, height:32, border:'1px solid rgba(247,241,230,0.2)',
                display:'flex', alignItems:'center', justifyContent:'center',
                fontSize:11, letterSpacing:0, color:'var(--cream)', cursor:'pointer',
              }}>{s}</div>
            ))}
          </div>
        </div>

        <FooterCol title="Explore" items={['Home','About','Highlights','Floor Plans','Amenities']}/>
        <FooterCol title="Useful" items={['Gallery','Location','Contact','Privacy Policy','Terms & Conditions']}/>

        <div>
          <div className="eyebrow" style={{ color:'var(--gold)', marginBottom:18 }}>Contact</div>
          <div style={{ display:'flex', flexDirection:'column', gap:12, fontSize:13.5 }}>
            <div style={{ display:'flex', gap:10 }}><I.Phone size={16} color="var(--gold)"/> +91 92957 09846</div>
            <div style={{ display:'flex', gap:10 }}><I.Mail size={16} color="var(--gold)"/> sales@fortunetowers.in</div>
            <div style={{ display:'flex', gap:10 }}><I.Pin size={16} color="var(--gold)"/> Mallampet, Hyderabad<br/>Telangana</div>
          </div>
          <div style={{ marginTop:24, padding:'14px 16px', border:'1px dashed rgba(247,241,230,0.18)', fontSize:11, lineHeight:1.6, fontFamily:'JetBrains Mono, monospace' }}>
            <div style={{ color:'var(--gold)', letterSpacing:'0.16em' }}>RERA</div>
            <div style={{ opacity:0.85 }}>P01100010672</div>
            <div style={{ color:'var(--gold)', letterSpacing:'0.16em', marginTop:6 }}>HMDA</div>
            <div style={{ opacity:0.85 }}>061358/ZOC/R1/U6/HMDA</div>
          </div>
        </div>
      </div>

      <div style={{ maxWidth:1320, margin:'50px auto 0', paddingTop:24, borderTop:'1px solid rgba(247,241,230,0.12)', display:'flex', justifyContent:'space-between', fontSize:11.5, opacity:0.6, letterSpacing:'0.04em' }}>
        <div>© 2026 Vedatri Fortune Towers · All rights reserved.</div>
        <div>Indicative artist impressions · Specs may change as per approvals.</div>
      </div>
    </footer>
  );
}
function FooterCol({ title, items }) {
  return (
    <div>
      <div className="eyebrow" style={{ color:'var(--gold)', marginBottom:18 }}>{title}</div>
      <ul style={{ listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:11 }}>
        {items.map(i => <li key={i} style={{ fontSize:13.5, opacity:0.85, cursor:'pointer' }}>{i}</li>)}
      </ul>
    </div>
  );
}

Object.assign(window, {
  FloorPlans, PlanModal, Amenities, Gallery, LocationSection, Enquiry, Footer
});