// ── NAVIGATION ──────────────────────────────────────────────────
function Nav({ activeSection, mode = 'home' }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const [scrollDir, setScrollDir] = useState('up');
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const handleResize = () => setIsMobile(window.innerWidth <= 768);
    handleResize(); // Init
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  useEffect(() => {
    let lastScrollY = window.scrollY;
    const onScroll = () => {
      const currentScrollY = window.scrollY;
      setScrolled(currentScrollY > 60);

      if (currentScrollY > lastScrollY && currentScrollY > 80) {
        setScrollDir('down');
      } else if (currentScrollY < lastScrollY) {
        setScrollDir('up');
      }
      lastScrollY = currentScrollY;
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { id: 'koleksiyonlar', label: 'Koleksiyonlar' },
    { id: 'hakkimizda', label: 'Hakkımızda' },
    { id: 'iletisim', label: 'İletişim' },
  ];

  const hrefFor = (id) => mode === 'home' ? `#${id}` : `/#${id}`;
  const ctaHref = mode === 'home' ? '#iletisim' : '/#iletisim';
  const logoClick = () => {
    if (mode === 'home') window.scrollTo({top:0, behavior:'smooth'});
    else window.location.href = '/';
  };

  const forceSolid = mode === 'product' || menuOpen;
  const isSolid = scrolled || forceSolid;

  const navStyle = {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 1000, width: '100%',
    padding: isSolid ? '12px clamp(20px, 5vw, 60px)' : '20px clamp(20px, 5vw, 60px)',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    background: isSolid ? 'rgba(26,25,24,0.97)' : 'transparent',
    borderBottom: isSolid ? '1px solid rgba(201,168,76,0.15)' : '1px solid transparent',
    transition: 'transform 0.4s ease, background 0.5s ease, padding 0.5s ease',
    transform: (scrollDir === 'down' && !menuOpen && scrolled && !isMobile) ? 'translateY(-100%)' : 'translateY(0)',
    backdropFilter: isSolid ? 'blur(12px)' : 'none',
  };

  return (
    <nav style={navStyle}>
      {/* Logo */}
      <div style={{display:'flex',alignItems:'center',cursor:'pointer'}} onClick={logoClick}>
        <img src="uploads/Gemini_Generated_Image_nv2k2xnv2k2xnv2k.png" alt="Lavons Mobilya" style={{
          height: isSolid ? 'clamp(36px, 6vw, 52px)' : 'clamp(42px, 7vw, 62px)',
          width:'auto', objectFit:'contain', transition:'height 0.5s ease',
          minWidth: '40px'
        }}/>
      </div>

      {/* Desktop links */}
      <div className="mobile-hide" style={{display:'flex',gap:'clamp(20px, 3vw, 40px)',alignItems:'center'}}>
        {links.map(l => (
          <a key={l.id} href={hrefFor(l.id)} style={{
            fontFamily:'var(--sans)', fontSize:'clamp(8px, 1vw, 10px)', letterSpacing:'0.2em',
            fontWeight:500, textTransform:'uppercase',
            textDecoration:'none', transition:'color 0.3s',
            color: activeSection === l.id ? 'var(--gold)' : 'rgba(242,235,224,0.6)',
          }}
          onMouseEnter={e => e.target.style.color = 'var(--gold-light)'}
          onMouseLeave={e => e.target.style.color = activeSection === l.id ? 'var(--gold)' : 'rgba(242,235,224,0.6)'}
          >{l.label}</a>
        ))}
        <a href={ctaHref} style={{
          fontFamily:'var(--sans)', fontSize:'clamp(7px, 0.9vw, 9px)', letterSpacing:'0.25em',
          fontWeight:500, textTransform:'uppercase', color:'var(--anthracite)',
          textDecoration:'none', background:'var(--gold)', padding:'10px 22px',
          transition:'background 0.3s',
        }}
        onMouseEnter={e => e.target.style.background = 'var(--gold-light)'}
        onMouseLeave={e => e.target.style.background = 'var(--gold)'}
        >Teklif Alın</a>
      </div>

      {/* Mobile hamburger */}
      <button className="mobile-show" onClick={() => setMenuOpen(!menuOpen)} style={{
        background:'none', border:'none', cursor:'pointer',
        alignItems:'center', justifyContent:'center', position:'relative',
        flexDirection:'column', gap:6, padding:10, zIndex:1001, width: 46, height: 46,
      }}
      aria-label="Menu">
        <span style={{display:'block',width:26,height:2,backgroundColor:'var(--gold)',transition:'all 0.3s',transform:menuOpen?'translateY(8px) rotate(45deg)':'none'}}/>
        <span style={{display:'block',width:26,height:2,backgroundColor:'var(--gold)',transition:'all 0.3s',opacity:menuOpen?0:1}}/>
        <span style={{display:'block',width:26,height:2,backgroundColor:'var(--gold)',transition:'all 0.3s',transform:menuOpen?'translateY(-8px) rotate(-45deg)':'none'}}/>
      </button>

      {/* Mobile menu */}
      {menuOpen && (
        <div style={{
          position:'fixed', top:0, left:0, right:0, bottom:0, width:'100vw', height:'100vh',
          background:'rgba(26,25,24,0.98)', backdropFilter:'blur(10px)',
          display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center',
          gap:28, zIndex:1000, padding:'80px 40px',
        }} onClick={() => setMenuOpen(false)}>
          {links.map(l => (
            <a key={l.id} href={hrefFor(l.id)} style={{
              fontFamily:'var(--sans)', fontSize:14, letterSpacing:'0.3em',
              fontWeight:500, textTransform:'uppercase', color:'var(--cream)',
              textDecoration:'none',
            }}>{l.label}</a>
          ))}
          <a href={ctaHref} style={{
            fontFamily:'var(--sans)', fontSize:11, letterSpacing:'0.28em',
            fontWeight:600, textTransform:'uppercase', color:'var(--anthracite)',
            textDecoration:'none', background:'var(--gold)', padding:'14px 32px',
            marginTop:16,
          }}>Teklif Alın</a>
        </div>
      )}
    </nav>
  );
}

// ── FOOTER ──────────────────────────────────────────────────────
function Footer() {
  return (
    <footer style={{background:'#0e0d0c', borderTop:'1px solid rgba(201,168,76,0.15)'}}>
      {/* Main footer content */}
      <div style={{
        maxWidth:1280, margin:'0 auto',
        padding:'clamp(60px, 8vw, 80px) clamp(20px, 5vw, 60px) clamp(40px, 6vw, 60px)',
      }}>
        <div style={{
          display:'grid',
          gridTemplateColumns: window.innerWidth > 768 ? 'repeat(4, 1fr)' : '1fr',
          gap:'clamp(32px, 5vw, 48px)',
        }}>
          {/* Brand column */}
          <div>
            <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:20}}>
              <div style={{
                width:40, height:40, border:'1px solid rgba(201,168,76,0.4)',
                display:'flex', alignItems:'center', justifyContent:'center',
              }}>
                <span style={{fontSize:16,fontFamily:'var(--serif)',fontWeight:600,color:'var(--gold)'}}>L</span>
              </div>
              <div>
                <div style={{fontFamily:'var(--serif)',fontSize:16,fontWeight:400,letterSpacing:'0.12em',color:'var(--cream)'}}>LAVONS</div>
                <div style={{fontFamily:'var(--sans)',fontSize:8,letterSpacing:'0.3em',color:'rgba(201,168,76,0.6)',marginTop:2}}>COLLECTIONS</div>
              </div>
            </div>
            <p style={{
              fontFamily:'var(--sans)', fontSize:11.5, lineHeight:1.8,
              color:'rgba(242,235,224,0.4)', marginBottom:24, maxWidth:240,
            }}>
              2016'dan beri Ankara'da, her parça atölyemizde el işçiliğiyle üretilir.
            </p>
            {/* Social media */}
            <div style={{display:'flex', gap:12}}>
              {['Instagram', 'Pinterest'].map(s => (
                <a key={s} href="#" style={{
                  width:36, height:36,
                  border:'1px solid rgba(201,168,76,0.3)',
                  display:'flex', alignItems:'center', justifyContent:'center',
                  textDecoration:'none', transition:'all 0.3s',
                  fontFamily:'var(--sans)', fontSize:8, color:'rgba(201,168,76,0.5)',
                }}
                onMouseEnter={e => {
                  e.currentTarget.style.borderColor='var(--gold)';
                  e.currentTarget.style.background='rgba(201,168,76,0.1)';
                  e.currentTarget.style.color='var(--gold)';
                }}
                onMouseLeave={e => {
                  e.currentTarget.style.borderColor='rgba(201,168,76,0.3)';
                  e.currentTarget.style.background='transparent';
                  e.currentTarget.style.color='rgba(201,168,76,0.5)';
                }}
                >{s[0]}</a>
              ))}
            </div>
          </div>

          {/* Quick Links */}
          <div>
            <div style={{
              fontFamily:'var(--sans)', fontSize:9, letterSpacing:'0.3em',
              fontWeight:600, textTransform:'uppercase', color:'var(--gold)',
              marginBottom:20,
            }}>Hızlı Bağlantılar</div>
            <div style={{display:'flex', flexDirection:'column', gap:14}}>
              {[
                {label:'Koleksiyonlar', href:'#koleksiyonlar'},
                {label:'Hakkımızda', href:'#hakkimizda'},
                {label:'İletişim', href:'#iletisim'},
              ].map(l => (
                <a key={l.label} href={l.href} style={{
                  fontFamily:'var(--sans)', fontSize:11.5,
                  color:'rgba(242,235,224,0.4)', textDecoration:'none',
                  transition:'color 0.3s',
                }}
                onMouseEnter={e => e.target.style.color='var(--gold-light)'}
                onMouseLeave={e => e.target.style.color='rgba(242,235,224,0.4)'}
                >{l.label}</a>
              ))}
            </div>
          </div>

          {/* Koleksiyonlar */}
          <div>
            <div style={{
              fontFamily:'var(--sans)', fontSize:9, letterSpacing:'0.3em',
              fontWeight:600, textTransform:'uppercase', color:'var(--gold)',
              marginBottom:20,
            }}>Koleksiyonlar</div>
            <div style={{display:'flex', flexDirection:'column', gap:14}}>
              {[
                'Oturma Grupları',
                'Yemek Odaları',
                'Özel Tasarım',
              ].map(c => (
                <a key={c} href="#koleksiyonlar" style={{
                  fontFamily:'var(--sans)', fontSize:11.5,
                  color:'rgba(242,235,224,0.4)', textDecoration:'none',
                  transition:'color 0.3s',
                }}
                onMouseEnter={e => e.target.style.color='var(--gold-light)'}
                onMouseLeave={e => e.target.style.color='rgba(242,235,224,0.4)'}
                >{c}</a>
              ))}
            </div>
          </div>

          {/* İletişim */}
          <div>
            <div style={{
              fontFamily:'var(--sans)', fontSize:9, letterSpacing:'0.3em',
              fontWeight:600, textTransform:'uppercase', color:'var(--gold)',
              marginBottom:20,
            }}>İletişim</div>
            <div style={{display:'flex', flexDirection:'column', gap:16}}>
              <div>
                <div style={{
                  fontFamily:'var(--sans)', fontSize:9, letterSpacing:'0.2em',
                  color:'rgba(242,235,224,0.3)', marginBottom:6, textTransform:'uppercase',
                }}>Telefon</div>
                <a href="tel:+905340898583" style={{
                  fontFamily:'var(--sans)', fontSize:12,
                  color:'rgba(242,235,224,0.5)', textDecoration:'none',
                  transition:'color 0.3s',
                }}
                onMouseEnter={e => e.target.style.color='var(--gold-light)'}
                onMouseLeave={e => e.target.style.color='rgba(242,235,224,0.5)'}
                >+90 534 089 85 83</a>
              </div>
              <div>
                <div style={{
                  fontFamily:'var(--sans)', fontSize:9, letterSpacing:'0.2em',
                  color:'rgba(242,235,224,0.3)', marginBottom:6, textTransform:'uppercase',
                }}>E-posta</div>
                <a href="mailto:info@lavons.com.tr" style={{
                  fontFamily:'var(--sans)', fontSize:12,
                  color:'rgba(242,235,224,0.5)', textDecoration:'none',
                  transition:'color 0.3s',
                }}
                onMouseEnter={e => e.target.style.color='var(--gold-light)'}
                onMouseLeave={e => e.target.style.color='rgba(242,235,224,0.5)'}
                >info@lavons.com.tr</a>
              </div>
              <div>
                <div style={{
                  fontFamily:'var(--sans)', fontSize:9, letterSpacing:'0.2em',
                  color:'rgba(242,235,224,0.3)', marginBottom:6, textTransform:'uppercase',
                }}>Adres</div>
                <p style={{
                  fontFamily:'var(--sans)', fontSize:11.5, lineHeight:1.7,
                  color:'rgba(242,235,224,0.4)', margin:0,
                }}>
                  <a href="https://maps.app.goo.gl/71mg1mPmpbs8WAsWA" target="_blank" rel="noopener noreferrer" style={{
                    color:'rgba(242,235,224,0.4)', textDecoration:'none', transition:'color 0.3s'
                  }} onMouseEnter={e => e.target.style.color='var(--gold-light)'} onMouseLeave={e => e.target.style.color='rgba(242,235,224,0.4)'}>
                    Ereğli Cd. No: 71/B, Siteler<br/>
                    Altındağ, Ankara, Türkiye
                  </a>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Bottom bar */}
      <div style={{
        borderTop:'1px solid rgba(201,168,76,0.08)',
        padding:'clamp(20px, 3vw, 28px) clamp(20px, 5vw, 60px)',
      }}>
        <div style={{
          maxWidth:1280, margin:'0 auto',
          display:'flex', justifyContent:'space-between', alignItems:'center',
          flexWrap:'wrap', gap:16,
        }}>
          <div style={{fontFamily:'var(--sans)',fontSize:9.5,color:'rgba(242,235,224,0.25)',letterSpacing:'0.08em'}}>
            © 2026 Lavons Mobilya. Tüm hakları saklıdır.
          </div>
          <div style={{display:'flex', gap:24, flexWrap:'wrap'}}>
            {['Gizlilik Politikası', 'Kullanım Koşulları', 'Çerez Politikası'].map(l => (
              <a key={l} href="#" style={{
                fontFamily:'var(--sans)', fontSize:9, letterSpacing:'0.1em',
                color:'rgba(242,235,224,0.3)', textDecoration:'none',
                transition:'color 0.3s',
              }}
              onMouseEnter={e => e.target.style.color='var(--gold)'}
              onMouseLeave={e => e.target.style.color='rgba(242,235,224,0.3)'}
              >{l}</a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Footer });