// ── HERO ────────────────────────────────────────────────────────
function Hero() {
  const [loaded, setLoaded] = useState(false);
  const [currentSlide, setCurrentSlide] = useState(0);
  
  const slides = [
    { img: 'uploads/henna/1.jpg', pos: 'center 30%' },
    { img: 'uploads/nida/1.JPG', pos: 'center 40%' },
    { img: 'uploads/lotus/1.JPEG', pos: 'center 35%' },
    { img: 'uploads/riva/1.JPG', pos: 'center 45%' },
  ];
  
  useEffect(() => { 
    setTimeout(() => setLoaded(true), 100);
    
    // Auto-slide every 4.5 seconds
    const interval = setInterval(() => {
      setCurrentSlide(prev => (prev + 1) % slides.length);
    }, 4500);
    
    return () => clearInterval(interval);
  }, []);
  
  const nextSlide = () => setCurrentSlide((prev) => (prev + 1) % slides.length);
  const prevSlide = () => setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);

  return (
    <section id="hero" style={{
      position:'relative', minHeight:'100vh',
      display:'flex', alignItems:'center', justifyContent:'center',
      overflow:'hidden', padding:'0 20px',
    }}>
      {/* Slider images */}
      {slides.map((slide, idx) => (
        <div key={idx} style={{
          position:'absolute', inset:0,
          backgroundImage:`url(${slide.img})`,
          backgroundSize:'cover', backgroundPosition: slide.pos,
          filter:'brightness(0.35)',
          transform: loaded ? 'scale(1)' : 'scale(1.06)',
          transition: 'opacity 1s ease, transform 2s ease',
          opacity: currentSlide === idx ? 1 : 0,
          zIndex: currentSlide === idx ? 1 : 0,
        }}/>
      ))}
      
      <div style={{
        position:'absolute', inset:0, zIndex:2,
        background:'linear-gradient(180deg, rgba(26,25,24,0.5) 0%, rgba(26,25,24,0.1) 40%, rgba(26,25,24,0.75) 100%)',
      }}/>
      {/* Slide indicators */}
      <div style={{
        position:'absolute', bottom:'clamp(30px, 5vw, 40px)', left:'50%', transform:'translateX(-50%)', zIndex:10,
        display:'flex', gap:10, padding:'10px 16px',
        background:'rgba(26,25,24,0.6)', border:'1px solid rgba(201,168,76,0.2)',
        backdropFilter:'blur(6px)', borderRadius:24
      }}>
        {slides.map((_, idx) => (
          <button key={idx} aria-label={`Slide ${idx + 1}`} onClick={() => setCurrentSlide(idx)} style={{
            width:idx === currentSlide ? 24 : 8, height:8, padding:0, border:'none', cursor:'pointer',
            background: idx === currentSlide ? 'var(--gold)' : 'rgba(201,168,76,0.3)',
            transition:'all 0.4s', borderRadius:4
          }}/>
        ))}
      </div>

      {/* Left Arrow */}
      <button onClick={prevSlide} aria-label="Previous Slide" style={{
        position:'absolute', left:'clamp(10px, 3vw, 30px)', top:'50%', transform:'translateY(-50%)', zIndex:10,
        background:'rgba(26,25,24,0.4)', border:'1px solid rgba(201,168,76,0.2)', color:'var(--gold)',
        width:44, height:44, borderRadius:'50%', display:'flex', alignItems:'center', justifyContent:'center',
        cursor:'pointer', backdropFilter:'blur(4px)', transition:'all 0.3s'
      }}
      onMouseEnter={e => { e.currentTarget.style.background='rgba(26,25,24,0.8)'; e.currentTarget.style.borderColor='var(--gold)'; }}
      onMouseLeave={e => { e.currentTarget.style.background='rgba(26,25,24,0.4)'; e.currentTarget.style.borderColor='rgba(201,168,76,0.2)'; }}
      >
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><polyline points="15 18 9 12 15 6"/></svg>
      </button>

      {/* Right Arrow */}
      <button onClick={nextSlide} aria-label="Next Slide" style={{
        position:'absolute', right:'clamp(10px, 3vw, 30px)', top:'50%', transform:'translateY(-50%)', zIndex:10,
        background:'rgba(26,25,24,0.4)', border:'1px solid rgba(201,168,76,0.2)', color:'var(--gold)',
        width:44, height:44, borderRadius:'50%', display:'flex', alignItems:'center', justifyContent:'center',
        cursor:'pointer', backdropFilter:'blur(4px)', transition:'all 0.3s'
      }}
      onMouseEnter={e => { e.currentTarget.style.background='rgba(26,25,24,0.8)'; e.currentTarget.style.borderColor='var(--gold)'; }}
      onMouseLeave={e => { e.currentTarget.style.background='rgba(26,25,24,0.4)'; e.currentTarget.style.borderColor='rgba(201,168,76,0.2)'; }}
      >
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><polyline points="9 18 15 12 9 6"/></svg>
      </button>
      
      {[0.15, 0.85].map((x, i) => (
        <div key={i} style={{
          position:'absolute', top:0, bottom:0, zIndex:3,
          left: `${x * 100}%`, width:1,
          background: 'linear-gradient(180deg, transparent, rgba(201,168,76,0.25) 30%, rgba(201,168,76,0.25) 70%, transparent)',
        }}/>
      ))}
      <div style={{
        position:'relative', zIndex:5, textAlign:'center', maxWidth:820, padding:'0 20px',
        opacity: loaded ? 1 : 0, transform: loaded ? 'translateY(0)' : 'translateY(30px)',
        transition: 'all 1.4s ease 0.3s',
      }}>
        <span style={{
          display:'block', fontFamily:'var(--sans)', fontSize:'clamp(7px, 2vw, 9px)', letterSpacing:'0.45em',
          fontWeight:600, textTransform:'uppercase', color:'var(--gold)', marginBottom:'clamp(16px, 3vw, 28px)',
        }}>Est. 2016 · Ankara</span>
        <h1 style={{
          fontFamily:'var(--serif)', fontSize:'clamp(38px, 9vw, 100px)', fontWeight:300,
          lineHeight:1.05, color:'var(--cream)', marginBottom:12, letterSpacing:'0.02em',
        }}>
          Lüks Yaşamın<br/><em style={{fontStyle:'italic',color:'var(--gold-light)'}}>Sanatı</em>
        </h1>
        <div style={{margin:'clamp(20px, 4vw, 28px) auto', maxWidth:380}}>
          <OrnamentDivider width={Math.min(380, window.innerWidth - 80)}/>
        </div>
        <p style={{
          fontFamily:'var(--sans)', fontSize:'clamp(11px, 2.2vw, 13px)', fontWeight:300,
          color:'rgba(242,235,224,0.7)', lineHeight:1.9, letterSpacing:'0.05em',
          maxWidth:560, margin:'0 auto clamp(28px, 5vw, 44px)',
        }}>
          Klasik varaklı zarafetin buluştuğu yer — el işçiliğiyle tasarlanmış, yaşam alanlarınızı kalıcı bir esere dönüştüren mobilyalar.
        </p>
        <div style={{display:'flex', gap:16, justifyContent:'center', flexWrap:'wrap'}}>
          <a href="#koleksiyonlar" style={{
            fontFamily:'var(--sans)', fontSize:9.5, letterSpacing:'0.28em', fontWeight:500,
            textTransform:'uppercase', color:'var(--anthracite)', background:'var(--gold)',
            padding:'16px 38px', textDecoration:'none', transition:'all 0.3s',
          }}
          onMouseEnter={e => { e.currentTarget.style.background='var(--gold-light)'; }}
          onMouseLeave={e => { e.currentTarget.style.background='var(--gold)'; }}
          >Koleksiyonları İncele</a>
          <a href="#iletisim" style={{
            fontFamily:'var(--sans)', fontSize:9.5, letterSpacing:'0.28em', fontWeight:500,
            textTransform:'uppercase', color:'var(--gold)', background:'transparent',
            padding:'16px 38px', textDecoration:'none', border:'1px solid rgba(201,168,76,0.4)',
            transition:'all 0.3s',
          }}
          onMouseEnter={e => { e.currentTarget.style.borderColor='var(--gold)'; e.currentTarget.style.background='rgba(201,168,76,0.08)'; }}
          onMouseLeave={e => { e.currentTarget.style.borderColor='rgba(201,168,76,0.4)'; e.currentTarget.style.background='transparent'; }}
          >İletişime Geçin</a>
        </div>
      </div>
      <div style={{
        position:'absolute', bottom:36, left:'50%', transform:'translateX(-50%)',
        display:'flex', flexDirection:'column', alignItems:'center', gap:8,
        opacity: loaded ? 0.5 : 0, transition:'opacity 1s ease 1.5s',
      }}>
        <span style={{fontFamily:'var(--sans)',fontSize:8,letterSpacing:'0.3em',color:'var(--gold)',fontWeight:500}}>KEŞFET</span>
        <div style={{width:1,height:40,background:'linear-gradient(180deg,var(--gold),transparent)',animation:'scrollPulse 2s infinite'}}/>
      </div>
    </section>
  );
}

// ── STATS BAR ───────────────────────────────────────────────────
function StatsBar() {
  const stats = [
    { num: '20+', label: 'Yıl Deneyim' },
    { num: '500+', label: 'Teslim Edilen Proje' },
    { num: '5+', label: 'Ülkeye İhracat' },
    { num: '%100', label: 'El İşçiliği' },
  ];
  return (
    <div style={{
      background:'var(--navy)', borderTop:'1px solid rgba(201,168,76,0.15)',
      borderBottom:'1px solid rgba(201,168,76,0.15)',
      padding:'clamp(28px, 5vw, 38px) clamp(20px, 6vw, 80px)',
      display:'grid',
      gridTemplateColumns: 'repeat(auto-fit, minmax(130px, 1fr))',
      gap:'clamp(24px, 4vw, 32px)',
    }}>
      {stats.map((s,i) => (
        <div key={i} style={{textAlign:'center', padding:'8px 0'}}>
          <div style={{fontFamily:'var(--serif)',fontSize:'clamp(32px, 6vw, 40px)',fontWeight:300,color:'var(--gold)',lineHeight:1}}>{s.num}</div>
          <div style={{fontFamily:'var(--sans)',fontSize:'clamp(8px, 1.4vw, 9px)',letterSpacing:'0.25em',color:'var(--text-muted)',marginTop:10,fontWeight:500,textTransform:'uppercase'}}>{s.label}</div>
        </div>
      ))}
    </div>
  );
}

// ── ABOUT ───────────────────────────────────────────────────────
function About() {
  const [expanded, setExpanded] = React.useState(false);
  const values = [
    { icon: '◈', title: 'Avangard Tutum', desc: 'Cesur, heykelsi ve dingin formlarla geçici trendleri aşan kalıcı bir tasarım vizyonunu temsil ediyoruz.' },
    { icon: '◈', title: 'Kişiye Özel Uyum', desc: 'Süreci sizinle paylaşıyor; oranlardan kenar detaylarına kadar yaşam alanınıza özel bir mekân akışı yaratıyoruz.' },
    { icon: '◈', title: 'Sabırlı İşçilik', desc: 'Mobilyalarımız seri bir hatta değil; ahşaba, kumaşa ve metale yalnızca ona zaman ayıran ustaların ellerinde şekillenir.' },
    { icon: '◈', title: 'Zamansız Malzeme', desc: 'Yılları taşıyacak dayanıklılıkta ve dokusuyla mekâna değer katacak birinci sınıf materyalleri özenle seçeriz.' },
  ];

  const isMobile = window.innerWidth <= 768;

  return (
    <section id="hakkimizda" style={{background:'var(--navy)', padding:'clamp(60px, 12vw, 100px) 0', position:'relative', overflow:'hidden'}}>
      <div style={{
        position:'absolute', inset:0, opacity:0.03,
        backgroundImage:'repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(201,168,76,1) 60px), repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(201,168,76,1) 60px)',
      }}/>
      <div style={{maxWidth:1200, margin:'0 auto', padding:'0 clamp(20px, 5vw, 60px)', position:'relative'}}>
        <div style={{display:'grid', gridTemplateColumns:window.innerWidth > 768 ? '1fr 1fr' : '1fr', gap:'clamp(40px, 8vw, 80px)', alignItems:'center'}}>
          <div>
            <span className="section-eyebrow">Hikayemiz</span>
            <h2 style={{fontFamily:'var(--serif)',fontSize:'clamp(32px,3.5vw,52px)',fontWeight:300,color:'var(--cream)',marginBottom:20,lineHeight:1.15}}>
              Lüksün Yeniden<br/><em style={{fontStyle:'italic',color:'var(--gold-light)'}}>Tanımlanması</em>
            </h2>
            <div style={{margin:'24px 0'}}><OrnamentDivider width={Math.min(220, window.innerWidth - 60)}/></div>
            <p style={{fontFamily:'var(--sans)',fontSize:'clamp(12px, 2.5vw, 13px)',lineHeight:2,fontWeight:300,color:'rgba(242,235,224,0.65)',marginBottom:16}}>
              Lavons Mobilya, 2016 yılında Ankara'da, "mobilya sadece bir eşya değil, içinde yaşadığımız mekânın karakteridir" düşüncesiyle yola çıktı. Kurulduğumuz günden bu yana avangard çizgiyi merkezimize aldık; kimi zaman cesur ve heykelsi, kimi zaman sade ve dingin formlarla alışılmışın bir adım ötesini aramayı kendimize ilke edindik.
            </p>
            <p style={{fontFamily:'var(--sans)',fontSize:'clamp(12px, 2.5vw, 13px)',lineHeight:2,fontWeight:300,color:'rgba(242,235,224,0.65)',marginBottom:expanded ? 16 : 32}}>
              Salon, oturma odası ve yemek odası koleksiyonlarımızda her parça, mekânın akışına dâhil olan bağımsız bir karakter olarak tasarlanır. Özel tasarım taleplerinde ise süreci müşterimizle birlikte kuruyor; bir oturma grubunun oranlarından bir yemek masasının kenar detayına kadar her tercihi onun yaşam alanına özel olarak şekillendiriyoruz.
            </p>
            
            {expanded && (
              <>
                <p style={{fontFamily:'var(--sans)',fontSize:'clamp(12px, 2.5vw, 13px)',lineHeight:2,fontWeight:300,color:'rgba(242,235,224,0.65)',marginBottom:16}}>
                  Üretim anlayışımızın temelinde üç ilke var: doğru malzeme, sabırlı işçilik ve tasarıma sadakat. Kullandığımız ahşapları, kaplamaları, kumaşları ve metal aksesuarları yılları taşıyacak dayanıklılıkta ve dokusuyla mekâna değer katacak şekilde seçiyoruz. Her parça, seri bir üretim hattında değil; ona zaman ayıran ustaların ellerinde son hâlini buluyor.
                </p>
                <p style={{fontFamily:'var(--sans)',fontSize:'clamp(12px, 2.5vw, 13px)',lineHeight:2,fontWeight:300,color:'rgba(242,235,224,0.65)',marginBottom:32}}>
                  Lavons için avangard, geçici bir trend değil bir tasarım tutumudur. Bugün Ankara'daki atölyemizden çıkan koleksiyonlarımızla mobilyayı yalnızca bir iç mekân nesnesi olmaktan çıkarıp, içinde yaşandıkça hikâye biriktiren bir tasarım nesnesine dönüştürmeye devam ediyoruz.
                </p>
              </>
            )}

            {!expanded && (
              <button 
                onClick={() => setExpanded(true)}
                style={{
                  background: 'none', border: 'none', padding: 0, cursor: 'pointer',
                  fontFamily:'var(--sans)', fontSize:'clamp(12px, 2.5vw, 13px)', fontWeight:500,
                  color:'var(--gold)', textDecoration:'underline', display:'inline-block', marginBottom:32,
                  marginTop: -16
                }}
              >
                Devamını oku
              </button>
            )}

            <div style={{display:'flex', gap:16, flexWrap:'wrap'}}>
              <a href="#iletisim" style={{
                display:'inline-block', fontFamily:'var(--sans)', fontSize:'clamp(8.5px, 1.8vw, 9.5px)', letterSpacing:'0.25em',
                fontWeight:500, textTransform:'uppercase', color:'var(--anthracite)',
                background:'var(--gold)', padding:'clamp(14px, 3vw, 16px) clamp(26px, 5vw, 32px)', textDecoration:'none', transition:'background 0.3s',
                width: isMobile ? '100%' : 'auto', textAlign:'center', minHeight:44,
              }}
              onMouseEnter={e => e.currentTarget.style.background='var(--gold-light)'}
              onMouseLeave={e => e.currentTarget.style.background='var(--gold)'}
              >Atölyemizi Tanıyın</a>
            </div>
          </div>
          <div style={{display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap:2}}>
            {values.map((v, i) => (
              <div key={i} style={{
                padding:'clamp(24px, 5vw, 32px) clamp(20px, 4vw, 28px)',
                background:'rgba(242,235,224,0.03)',
                border:'1px solid rgba(201,168,76,0.1)',
                transition:'background 0.3s, border-color 0.3s',
              }}
              onMouseEnter={e => { e.currentTarget.style.background='rgba(201,168,76,0.06)'; e.currentTarget.style.borderColor='rgba(201,168,76,0.25)'; }}
              onMouseLeave={e => { e.currentTarget.style.background='rgba(242,235,224,0.03)'; e.currentTarget.style.borderColor='rgba(201,168,76,0.1)'; }}
              >
                <div style={{color:'var(--gold)',fontSize:18,marginBottom:14}}>{v.icon}</div>
                <div style={{fontFamily:'var(--serif)',fontSize:'clamp(16px, 3.5vw, 18px)',fontWeight:400,color:'var(--cream)',marginBottom:10}}>{v.title}</div>
                <div style={{fontFamily:'var(--sans)',fontSize:'clamp(10.5px, 2.2vw, 11px)',lineHeight:1.8,fontWeight:300,color:'rgba(242,235,224,0.55)'}}>{v.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── ATELIER ─────────────────────────────────────────────────────
function Atelier() {
  return (
    <section id="atelier" style={{background:'var(--anthracite)', padding:'clamp(60px, 12vw, 100px) 0'}}>
      <div style={{maxWidth:1200, margin:'0 auto', padding:'0 clamp(20px, 5vw, 60px)'}}>
        <div style={{textAlign:'center', marginBottom:60}}>
          <span className="section-eyebrow">Atelier</span>
          <h2 style={{fontFamily:'var(--serif)',fontSize:'clamp(32px,3.5vw,52px)',fontWeight:300,color:'var(--cream)',marginBottom:20,lineHeight:1.1}}>
            Ustalık <em style={{fontStyle:'italic',color:'var(--gold-light)'}}>Her Detayda</em>
          </h2>
          <OrnamentDivider width={260}/>
        </div>
        <div style={{display:'grid', gridTemplateColumns: window.innerWidth > 640 ? '1fr 1fr' : '1fr', gap:3}}>
          <div style={{position:'relative', overflow:'hidden', height:500}}>
            <img src="uploads/pasted-1776768191477-0.png" alt="Klasik koleksiyon" style={{
              width:'100%', height:'100%', objectFit:'cover', filter:'brightness(0.65)',
              transition:'transform 0.8s ease',
            }}
            onMouseEnter={e => e.target.style.transform='scale(1.05)'}
            onMouseLeave={e => e.target.style.transform='scale(1)'}
            />
            <div style={{position:'absolute', inset:0, background:'linear-gradient(180deg, transparent 40%, rgba(26,25,24,0.85) 100%)'}}/>
            <div style={{position:'absolute',bottom:0,left:0,right:0,padding:'36px 40px'}}>
              <div style={{fontFamily:'var(--sans)',fontSize:8.5,letterSpacing:'0.3em',color:'var(--gold)',fontWeight:600,marginBottom:10,textTransform:'uppercase'}}>Klasik Varaklı</div>
              <div style={{fontFamily:'var(--serif)',fontSize:28,fontWeight:300,color:'var(--cream)',lineHeight:1.2}}>Barok & Osmanlı<br/>Geleneği</div>
              <div style={{width:40,height:1,background:'var(--gold)',marginTop:16}}/>
            </div>
          </div>
          <div style={{position:'relative', overflow:'hidden', height:500}}>
            <img src="uploads/pasted-1776768177413-0.png" alt="Avangard koleksiyon" style={{
              width:'100%', height:'100%', objectFit:'cover', filter:'brightness(0.65)',
              transition:'transform 0.8s ease',
            }}
            onMouseEnter={e => e.target.style.transform='scale(1.05)'}
            onMouseLeave={e => e.target.style.transform='scale(1)'}
            />
            <div style={{position:'absolute', inset:0, background:'linear-gradient(180deg, transparent 40%, rgba(18,21,30,0.9) 100%)'}}/>
            <div style={{position:'absolute',bottom:0,left:0,right:0,padding:'36px 40px'}}>
              <div style={{fontFamily:'var(--sans)',fontSize:8.5,letterSpacing:'0.3em',color:'var(--gold)',fontWeight:600,marginBottom:10,textTransform:'uppercase'}}>Avangard Şık</div>
              <div style={{fontFamily:'var(--serif)',fontSize:28,fontWeight:300,color:'var(--cream)',lineHeight:1.2}}>Çağdaş Güç<br/>Estetiği</div>
              <div style={{width:40,height:1,background:'var(--gold)',marginTop:16}}/>
            </div>
          </div>
        </div>
        <div style={{marginTop:60, textAlign:'center'}}>
          <OrnamentDivider width={480}/>
          <p style={{fontFamily:'var(--serif)', fontSize:20, fontStyle:'italic', fontWeight:300, color:'rgba(242,235,224,0.5)', marginTop:24, letterSpacing:'0.05em'}}>
            "Bir mobilya, bir evin ruhunu taşır."
          </p>
        </div>
      </div>
    </section>
  );
}

// ── CONTACT ─────────────────────────────────────────────────────
function Contact() {
  const [form, setForm] = useState({ name:'', phone:'', email:'', message:'', interest:'Klasik Varaklı' });
  const [sent, setSent] = useState(false);
  const isMobile = window.innerWidth <= 768;

  const handleSubmit = (e) => { e.preventDefault(); setSent(true); };

  const inputStyle = {
    width:'100%', padding:'14px 18px',
    background:'rgba(242,235,224,0.04)', border:'1px solid rgba(201,168,76,0.2)',
    color:'var(--cream)', fontFamily:'var(--sans)', fontSize:'clamp(11px, 2.2vw, 12px)', fontWeight:300,
    outline:'none', transition:'border-color 0.3s',
  };

  return (
    <section id="iletisim" style={{background:'var(--navy)', padding:'clamp(60px, 12vw, 100px) 0', position:'relative'}}>
      <div style={{position:'absolute',top:0,left:0,right:0,height:1,background:'linear-gradient(90deg,transparent,var(--gold),transparent)'}}/>
      <div style={{maxWidth:1100, margin:'0 auto', padding:'0 clamp(20px, 5vw, 60px)'}}>
        <div style={{textAlign:'center', marginBottom:'clamp(40px, 8vw, 64px)'}}>
          <span className="section-eyebrow">İletişim</span>
          <h2 style={{fontFamily:'var(--serif)',fontSize:'clamp(32px,3.5vw,52px)',fontWeight:300,color:'var(--cream)',marginBottom:20}}>
            Hayalinizi <em style={{fontStyle:'italic',color:'var(--gold-light)'}}>Gerçekleştirelim</em>
          </h2>
          <OrnamentDivider width={Math.min(260, window.innerWidth - 60)}/>
        </div>
        <div style={{display:'grid', gridTemplateColumns: window.innerWidth > 768 ? '1fr 1.4fr' : '1fr', gap:'clamp(40px, 8vw, 80px)'}}>
          <div>
            <div style={{marginBottom:48}}>
              <h3 style={{fontFamily:'var(--serif)',fontSize:'clamp(20px, 4vw, 22px)',fontWeight:300,color:'var(--gold-light)',marginBottom:20}}>Bize Ulaşın</h3>
              {[
                {label:'Adres', val:'Ereğli Cd. No: 71/B, Siteler\nAltındağ / Ankara', href:'https://maps.app.goo.gl/71mg1mPmpbs8WAsWA', blank:true},
                {label:'Telefon', val:'+90 534 089 85 83'},
                {label:'E-posta', val:'info@lavonsmobilya.com'},
                {label:'Çalışma Saatleri', val:'Pzt–Cmt: 10:00–19:00'},
              ].map((item, i) => (
                <div key={i} style={{padding:'clamp(14px, 3vw, 18px) 0', borderBottom:'1px solid rgba(201,168,76,0.1)', display:'flex', gap:isMobile ? 12 : 24, flexDirection: isMobile ? 'column' : 'row'}}>
                  <span style={{fontFamily:'var(--sans)',fontSize:'clamp(8px, 1.8vw, 9px)',letterSpacing:'0.25em',fontWeight:600,color:'var(--gold)',textTransform:'uppercase',minWidth: isMobile ? 'auto' : 120,paddingTop:isMobile ? 0 : 2}}>{item.label}</span>
                  {item.href ? (
                    <a href={item.href} target={item.blank ? "_blank" : "_self"} rel={item.blank ? "noopener noreferrer" : ""} style={{fontFamily:'var(--sans)',fontSize:'clamp(11.5px, 2.3vw, 12px)',fontWeight:300,color:'rgba(242,235,224,0.65)',lineHeight:1.7,whiteSpace:'pre-line',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.65)'}>
                      {item.val}
                    </a>
                  ) : (
                    <span style={{fontFamily:'var(--sans)',fontSize:'clamp(11.5px, 2.3vw, 12px)',fontWeight:300,color:'rgba(242,235,224,0.65)',lineHeight:1.7,whiteSpace:'pre-line'}}>{item.val}</span>
                  )}
                </div>
              ))}
            </div>
            <div>
              <div style={{fontFamily:'var(--sans)',fontSize:'clamp(8px, 1.8vw, 9px)',letterSpacing:'0.25em',color:'var(--gold)',fontWeight:600,textTransform:'uppercase',marginBottom:16}}>Sosyal Medya</div>
              <div style={{display:'flex', gap:12, flexWrap:'wrap'}}>
                {['Instagram'].map(s => (
                  <a key={s} href="#" style={{
                    fontFamily:'var(--sans)', fontSize:'clamp(8px, 1.7vw, 9px)', letterSpacing:'0.15em', fontWeight:500,
                    color:'rgba(242,235,224,0.5)', textDecoration:'none',
                    padding:'clamp(10px, 2vw, 12px) clamp(14px, 3vw, 16px)', border:'1px solid rgba(201,168,76,0.15)',
                    transition:'all 0.3s', minHeight:44,
                    display:'inline-flex', alignItems:'center', justifyContent:'center',
                  }}
                  onMouseEnter={e => { e.currentTarget.style.color='var(--gold)'; e.currentTarget.style.borderColor='rgba(201,168,76,0.4)'; }}
                  onMouseLeave={e => { e.currentTarget.style.color='rgba(242,235,224,0.5)'; e.currentTarget.style.borderColor='rgba(201,168,76,0.15)'; }}
                  >{s}</a>
                ))}
              </div>
            </div>
          </div>
          <div style={{padding:'clamp(28px, 6vw, 48px) clamp(24px, 5vw, 48px)', border:'1px solid rgba(201,168,76,0.15)', background:'rgba(242,235,224,0.02)', position:'relative'}}>
            {[{t:12,l:12},{t:12,r:12,transform:'scaleX(-1)'},{b:12,l:12,transform:'scaleY(-1)'},{b:12,r:12,transform:'scale(-1)'}].map((pos,i) => (
              <div key={i} style={{position:'absolute',zIndex:2,...pos}}><CornerOrnament size={28}/></div>
            ))}
            {sent ? (
              <div style={{textAlign:'center', padding:'clamp(30px, 6vw, 40px) 0'}}>
                <div style={{color:'var(--gold)',fontSize:32,marginBottom:16}}>◈</div>
                <h3 style={{fontFamily:'var(--serif)',fontSize:'clamp(22px, 4.5vw, 26px)',fontWeight:300,color:'var(--cream)',marginBottom:12}}>Teşekkürler</h3>
                <p style={{fontFamily:'var(--sans)',fontSize:'clamp(11.5px, 2.3vw, 12px)',fontWeight:300,color:'rgba(242,235,224,0.6)',lineHeight:1.8}}>Mesajınız alındı. Danışmanımız en kısa sürede sizinle iletişime geçecektir.</p>
              </div>
            ) : (
              <form onSubmit={handleSubmit}>
                <div style={{marginBottom:16}}>
                  <div style={{fontFamily:'var(--sans)',fontSize:'clamp(8px, 1.7vw, 8.5px)',letterSpacing:'0.25em',color:'var(--gold)',fontWeight:600,textTransform:'uppercase',marginBottom:6}}>İlgilendiğiniz Ürün</div>
                  <select value={form.interest} onChange={e => setForm({...form,interest:e.target.value})} style={{...inputStyle, cursor:'pointer', minHeight:44}}>
                    <option value="">Lütfen seçiniz</option>
                    {(window.ALL_ITEMS || []).map((item) => (
                      <option key={item.slug} value={item.name} style={{background:'var(--navy)', color:'var(--cream)'}}>{item.name}</option>
                    ))}
                  </select>
                </div>
                <div style={{display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap:12, marginBottom:12}}>
                  <div>
                    <div style={{fontFamily:'var(--sans)',fontSize:'clamp(8px, 1.7vw, 8.5px)',letterSpacing:'0.25em',color:'var(--gold)',fontWeight:600,textTransform:'uppercase',marginBottom:6}}>Adınız</div>
                    <input type="text" required placeholder="Ad Soyad" value={form.name} onChange={e => setForm({...form,name:e.target.value})} style={{...inputStyle, minHeight:44}}/>
                  </div>
                  <div>
                    <div style={{fontFamily:'var(--sans)',fontSize:'clamp(8px, 1.7vw, 8.5px)',letterSpacing:'0.25em',color:'var(--gold)',fontWeight:600,textTransform:'uppercase',marginBottom:6}}>Telefon</div>
                    <input type="tel" placeholder="+90 5xx xxx xx xx" value={form.phone} onChange={e => setForm({...form,phone:e.target.value})} style={{...inputStyle, minHeight:44}}/>
                  </div>
                </div>
                <div style={{marginBottom:12}}>
                  <div style={{fontFamily:'var(--sans)',fontSize:'clamp(8px, 1.7vw, 8.5px)',letterSpacing:'0.25em',color:'var(--gold)',fontWeight:600,textTransform:'uppercase',marginBottom:6}}>E-posta</div>
                  <input type="email" required placeholder="ornek@email.com" value={form.email} onChange={e => setForm({...form,email:e.target.value})} style={{...inputStyle, minHeight:44}}/>
                </div>
                <div style={{marginBottom:24}}>
                  <div style={{fontFamily:'var(--sans)',fontSize:'clamp(8px, 1.7vw, 8.5px)',letterSpacing:'0.25em',color:'var(--gold)',fontWeight:600,textTransform:'uppercase',marginBottom:6}}>Mesajınız</div>
                  <textarea rows={4} placeholder="Mekan ölçüleri, tercihleriniz veya sorularınız..." value={form.message} onChange={e => setForm({...form,message:e.target.value})} style={{...inputStyle, resize:'vertical', minHeight:100}}/>
                </div>
                <button type="submit" style={{
                  width:'100%', padding:'clamp(16px, 3.5vw, 18px)', border:'none', cursor:'pointer',
                  background:'var(--gold)', color:'var(--anthracite)',
                  fontFamily:'var(--sans)', fontSize:'clamp(8.5px, 1.8vw, 9.5px)', letterSpacing:'0.3em',
                  fontWeight:600, textTransform:'uppercase', transition:'background 0.3s',
                  minHeight:48,
                }}
                onMouseEnter={e => e.currentTarget.style.background='var(--gold-light)'}
                onMouseLeave={e => e.currentTarget.style.background='var(--gold)'}
                >Teklif Talep Et</button>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, StatsBar, About, Atelier, Contact });
