// Sections: Hero, Marquee, Services (categorized), About, WhyUs, Insta, Contact
// (Nav, Footer, PlaceholderImg, useReveal live in shared.jsx)

const { useState, useEffect, useRef } = React;

/* ---------- Nav ---------- */
function NavLegacy({ onBook }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  const [servicesOpen, setServicesOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const services = [
    { h: '#tirnakbakim',  t: 'Tırnak Bakım' },
    { h: '#incelme',      t: 'Bölgesel İncelme' },
    { h: '#cilt',         t: 'Cilt Bakımı' },
    { h: '#epilasyon',    t: 'Lazer Epilasyon' },
    { h: '#masaj',        t: 'Masaj' },
    { h: '#kalicimakyaj', t: 'Kalıcı Makyaj' },
    { h: '#kaskirpik',    t: 'Kirpik – Kaş Tasarım' },
  ];
  const links = [
    { h: '#galeri',     t: 'Galeri' },
    { h: '#hakkimizda', t: 'Hakkımızda' },
    { h: '#nedenbiz',   t: 'Neden Biz?' },
    { h: '#iletisim',   t: 'İletişim' },
  ];
  const go = (href, e) => {
    e.preventDefault();
    setOpen(false);
    setServicesOpen(false);
    const el = document.querySelector(href);
    if (el) window.scrollTo({ top: el.offsetTop - 80, behavior: 'smooth' });
  };
  return (
    <>
      <nav className={`nav ${scrolled ? 'nav--scrolled' : ''}`}>
        <div className="wrap nav__inner">
          <a href="#" className="brand" onClick={(e) => { e.preventDefault(); window.scrollTo({ top:0, behavior:'smooth' }); }}>
            <img src="assets/tulinail_logo.png" alt="TüliNail Beauty Club" className="brand__logo"/>
          </a>
          <ul className="nav__links">
            <li className="has-sub"
                onMouseEnter={() => setServicesOpen(true)}
                onMouseLeave={() => setServicesOpen(false)}>
              <a href="#" onClick={(e) => e.preventDefault()}>Hizmetler <span style={{fontSize:9, marginLeft:4}}>▼</span></a>
              <div className={`submenu ${servicesOpen ? 'is-open' : ''}`}>
                {services.map(s => (
                  <a key={s.h} href={s.h} onClick={(e) => go(s.h, e)}>{s.t}</a>
                ))}
              </div>
            </li>
            {links.map(l => (
              <li key={l.h}><a href={l.h} onClick={(e) => go(l.h, e)}>{l.t}</a></li>
            ))}
          </ul>
          <button className="btn btn--primary nav__cta" onClick={onBook}>
            Randevu Al <span className="arr">→</span>
          </button>
          <button className={`nav__burger ${open ? 'is-open' : ''}`} onClick={() => setOpen(o => !o)} aria-label="Menu">
            <span></span><span></span><span></span>
          </button>
        </div>
      </nav>
      <div className={`mobile-menu ${open ? 'is-open' : ''}`}>
        {[...services, ...links].map(l => (
          <a key={l.h} href={l.h} onClick={(e) => go(l.h, e)}>{l.t}</a>
        ))}
        <button className="btn btn--primary" onClick={() => { setOpen(false); onBook(); }}>Randevu Al</button>
      </div>
    </>
  );
}

/* ---------- Hero ---------- */
function Hero({ variant = 'classic', onBook }) {
  const cls = variant === 'editorial' ? 'hero hero--editorial'
            : variant === 'split' ? 'hero hero--split'
            : variant === 'photo' ? 'hero hero--photo'
            : 'hero';

  const Title = () => (
    <>
      <h1 className="hero__title hero__title--sm reveal">
        TüliNail Beauty Club Etiler
      </h1>
      <div className="hero__sub reveal reveal--delay-1">
        <h3 className="hero__subheading">Sağlıktan Gelen Hassasiyet</h3>
        <p>Florence Nightingale ve Liv Hospital bünyesinde sağlık personeli olarak görev aldım. Sağlık sektöründeki 10 yıllık deneyimimden gelen hijyen, sterilizasyon ve profesyonel bakım anlayışını güzellik ve bakım alanına taşımayı hedefledim.</p>
        <p>TüliNail Beauty Club'da uygulanan tüm işlemler; kişisel hijyen, sterilizasyon ve danışan konforu ön planda tutularak planlanır. Bu yaklaşım doğrultusunda uzman kadromuz da sağlık disiplinini yansıtan bilinç ve özenle hizmet vermektedir.</p>
        <p>Amacım yalnızca estetik bir görünüm değil; kişinin kendini daha iyi, daha bakımlı ve daha özgüvenli hissetmesini destekleyen profesyonel ve gerçekçi bir bakım deneyimi sunmaktır.</p>
        <p>Güzelliğe, sağlık disiplininden gelen hassasiyet ve farkındalık ile yaklaşıyorum.</p>
      </div>
      <div className="hero__ctas reveal reveal--delay-2">
        <a href="#kaskirpik" className="btn btn--primary" onClick={(e)=>{
          const t = document.querySelector('#kaskirpik');
          if (t) { e.preventDefault(); t.scrollIntoView({behavior:'smooth',block:'start'}); }
          else { e.preventDefault(); window.location.href = 'hizmetler.html'; }
        }}>
          Hizmetleri Keşfet <span className="arr">→</span>
        </a>
      </div>
    </>
  );

  if (variant === 'photo') {
    return (
      <section className={cls}>
        <div className="hero__bg" style={{background:"linear-gradient(90deg, rgba(255,248,243,0.75) 0%, rgba(255,248,243,0.45) 35%, rgba(255,248,243,0.25) 60%, rgba(255,248,243,0.55) 100%), url('assets/slider_.jpg') center/cover no-repeat", filter:"blur(3px)", transform:"scale(1.03)"}}></div>
        <div className="wrap">
          <div className="hero__grid">
            <div className="hero__copy"><Title /></div>
          </div>
        </div>
      </section>
    );
  }

  if (variant === 'editorial') {
    return (
      <section className={cls}>
        <div className="hero__bg"></div>
        <div className="wrap">
          <div className="hero__grid">
            <div className="hero__copy"><Title /></div>
          </div>
          <div className="hero__visual reveal reveal--delay-2">
            <div className="hero__frame floaty"><PlaceholderImg label="Tırnak Bakım" variant="rose" seed={1} tall/></div>
            <div className="hero__frame floaty--slow"><PlaceholderImg label="Kalıcı Makyaj" variant="nude" seed={2} tall/></div>
            <div className="hero__frame floaty"><PlaceholderImg label="Cilt Bakımı" variant="gold" seed={3} tall/></div>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className={cls}>
      <div className="hero__bg"></div>
      <div className="wrap">
        <div className="hero__grid">
          <div className="hero__copy"><Title /></div>
          <div className="hero__visual reveal reveal--delay-2">
            <div className="hero__frame">
              <PlaceholderImg label="Merkezimiz" variant="rose" seed={0} tall/>
            </div>
            <div className="hero__chip floaty--slow">
              <small>Konsept</small>
              <b>Butik Merkez</b>
              <span style={{fontSize:13,color:'var(--ink-soft)', fontFamily:'var(--sans)'}}>Sakin, özel, rahat deneyim</span>
            </div>
            <div className="hero__badge floaty">
              <div className="stars">★★★★★</div>
              <div>
                <small>Hastane Standartları</small>
                <b>Steril Ortam</b>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Marquee ---------- */
function Marquee() {
  const items = [
    'Kaş – Kirpik Tasarım', 'Kalıcı Makyaj', 'Tırnak Bakım',
    'Lazer Epilasyon', 'Bölgesel İncelme', 'Cilt Bakımı', 'Masaj'
  ];
  const content = (
    <span>
      {items.map((t, i) => (
        <React.Fragment key={i}>
          {t}
          <i>✦</i>
        </React.Fragment>
      ))}
    </span>
  );
  return (
    <div className="marquee">
      <div className="marquee__track">{content}{content}</div>
    </div>
  );
}

/* ---------- Service data ---------- */
const KAS_KIRPIK = [
  { name: 'Kirpik Lifting',  desc: 'Doğal kirpiklerinizi yukarı kaldırıp ton koyulaştıran, makyaja ihtiyaç bırakmayan uygulama.', variant: 'rose',     seed: 1 },
  { name: 'İpek Kirpik',     desc: 'Tek tek uygulanan ipek kirpik telleriyle dolgun, doğal ve uzun kirpik görünümü.',            variant: 'nude',     seed: 2 },
  { name: 'Kaş Dizayn',      desc: 'Yüz hatlarınıza göre analiz edilip şekillendirilen, bakımlı kaş tasarımı.',                  variant: 'milky',    seed: 3 },
  { name: 'Kaş Boyama',      desc: 'Kaş tellerini dolgun gösteren, tene uyumlu ton seçimiyle uygulanan kaş renklendirme.',       variant: 'mocha',    seed: 4 },
  { name: 'Kaş Vitamini',    desc: 'Dökülen ve inceliğen kaşlar için güçlendirici, büyüme destekleyici bakım uygulaması.',       variant: 'gold',     seed: 5 },
  { name: 'Kaş Laminasyon',  desc: 'Kaş tellerini dolgun ve yönlendirilmiş halde tutan, 6-8 haftaya kadar kalıcı uygulama.',     variant: 'pearl',    seed: 6 },
];
const KALICI_MAKYAJ = [
  { name: 'Dudak Renklendirme', desc: 'Dudağa doğal bir ton ve canlılık kazandıran, solgun dudaklar için kalıcı renklendirme.',   variant: 'berry',    seed: 1 },
  { name: 'Eyeliner',            desc: 'Gözü belirginleştiren, makyaja ihtiyaç bırakmayan kalıcı eyeliner uygulaması.',            variant: 'mocha',    seed: 2 },
  { name: 'Dipliner',            desc: 'Kirpik dibine yapılan ince çizgi ile gözlere doğal yoğunluk katan kalıcı uygulama.',       variant: 'pearl',    seed: 3 },
  { name: 'Kaş Silme',           desc: 'Hatalı ya da istenmeyen kalıcı kaş uygulamalarını profesyonel teknikle silme işlemi.',     variant: 'nude',     seed: 4 },
  { name: 'Kaş Pudralama',       desc: 'Kaşlara pudra efekti veren, yumuşak ve doğal görünümlü kalıcı makyaj tekniği.',            variant: 'gold',     seed: 5 },
  { name: 'Microblading',        desc: 'Kıl tekniğiyle tek tek çizilen, son derece doğal görünümlü kalıcı kaş uygulaması.',        variant: 'burgundy', seed: 6 },
];
const TIRNAK_BAKIM = [
  { name: 'Protez – Jel Tırnak',      desc: 'Akrilik veya polygel teknikleriyle form, uzatma ve güçlendirme. Doğal görünümlü bitiş.', variant: 'rose',  seed: 7 },
  { name: 'Medikal Manikür – Pedikür', desc: 'Batık tırnak, nasır ve tırnak problemleri için steril ortamda uzman bakım.',             variant: 'milky', seed: 8 },
  { name: 'Kalıcı Oje',                desc: 'Üç haftaya kadar parlaklığını koruyan premium jel oje uygulaması, geniş renk arşivi.',   variant: 'berry', seed: 9 },
];
const EPILASYON = [
  { name: 'Diod Lazer Epilasyon',      desc: 'Son teknoloji diod lazer ile kalıcı, ağrısız ve hızlı epilasyon uygulaması.',      variant: 'pearl',    seed: 1 },
  { name: 'Buz Kafa Lazer',            desc: 'Cildi soğutarak işlem esnasında konforu artıran, hassas ciltlere uygun teknoloji.', variant: 'nude',     seed: 2 },
  { name: 'Tüm Vücut Paketleri',       desc: 'Seanslık ya da paket olarak planlanan, ihtiyacınıza göre uyarlanmış programlar.',   variant: 'mocha',    seed: 3 },
];
const INCELME = [
  { name: 'EMS Kas Aktivasyon',        desc: 'Kasları aktive eden elektro stimülasyon teknolojisi ile form ve tonus çalışması.',   variant: 'gold',     seed: 7 },
  { name: 'Bölgesel Yağ Çözücü',       desc: 'Bölgesel yağlanmalar için cihaz destekli, ölçü alan profesyonel çözüm.',             variant: 'burgundy', seed: 8 },
  { name: '6 Adımda Vücut Şekillendirme', desc: 'Analiz ile başlayan, adım adım planlanan bütüncül vücut şekillendirme programı.', variant: 'rose',     seed: 9 },
];
const CILT = [
  { name: 'Derin Cilt Bakımı',    desc: 'Cildi temizleyen, nemlendiren ve canlandıran profesyonel klasik cilt bakımı.',        variant: 'milky', seed: 10 },
  { name: 'Leke Karşıtı Bakım',   desc: 'Hiperpigmentasyon ve güneş lekeleri için hedeflenmiş ton eşitleyici bakım protokolü.', variant: 'gold',  seed: 11 },
  { name: 'Anti-Aging Bakım',     desc: 'Kolajen destekli, kırışıklık karşıtı aktif içerikli, yaşlanma karşıtı bakım seansı.',  variant: 'pearl', seed: 12 },
  { name: 'Hydra Facial',         desc: 'Cildi derinlemesine temizleyen, nemlendiren ve parlatan çok aşamalı bakım.',           variant: 'rose',  seed: 13 },
];
const MASAJ = [
  { name: 'Klasik Masaj',         desc: 'Kasları rahatlatan, stresi alan ve dolaşımı destekleyen klasik İsveç masajı.',         variant: 'nude',     seed: 14 },
  { name: 'Aroma Terapi',         desc: 'Özel bitkisel yağlarla uygulanan, bedeni ve zihni rahatlatan aromaterapi masajı.',      variant: 'rose',     seed: 15 },
  { name: 'Sıcak Taş Masajı',     desc: 'Volkanik taşlarla yapılan, derin kasları gevşeten ve enerjiyi dengeleyen masaj.',       variant: 'mocha',    seed: 16 },
  { name: 'Lenf Drenaj Masajı',   desc: 'Lenfatik dolaşımı hızlandıran, ödem ve toksin atımına destek veren hafif basınçlı masaj.', variant: 'milky',   seed: 17 },
];

const ALL_SERVICES = [
  ...TIRNAK_BAKIM.map(s => ({ ...s, cat: 'Tırnak Bakım' })),
  ...INCELME.map(s => ({ ...s, cat: 'Bölgesel İncelme' })),
  ...CILT.map(s => ({ ...s, cat: 'Cilt Bakımı' })),
  ...EPILASYON.map(s => ({ ...s, cat: 'Lazer Epilasyon' })),
  ...MASAJ.map(s => ({ ...s, cat: 'Masaj' })),
  ...KALICI_MAKYAJ.map(s => ({ ...s, cat: 'Kalıcı Makyaj' })),
  ...KAS_KIRPIK.map(s => ({ ...s, cat: 'Kirpik – Kaş' })),
];

/* ---------- Service Category Section ---------- */
function SvcCategory({ id, eyebrow, title, subtitle, items, onBook }) {
  return (
    <section id={id} className="section svc-cat">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow center">{eyebrow}</span>
          <h2>{title}</h2>
          {subtitle && <p>{subtitle}</p>}
        </div>
        <div className="svc-cards">
          {items.map((s, i) => (
            <div className="svc-card-img reveal" style={{transitionDelay: `${(i%3)*0.08}s`}} key={s.name}>
              <div className="svc-card-img__media">
                <PlaceholderImg label={s.name} variant={s.variant} seed={s.seed}/>
              </div>
              <div className="svc-card-img__body">
                <h3>{s.name}</h3>
                <p>{s.desc}</p>
                <div className="svc-card-img__meta" style={{justifyContent: s.duration ? 'space-between' : 'flex-end'}}>
                  {s.duration && <span>⏱ {s.duration}</span>}
                  <button className="svc-card__book" onClick={() => onBook(s.name)}>
                    Randevu Al →
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Services({ onBook }) {
  return (
    <>
      <SvcCategory id="tirnakbakim"  eyebrow="Tırnak Bakım"
        title={<>Tırnak <em style={{fontFamily:'var(--serif)', color:'var(--rose-500)'}}>Bakım</em> Uygulamaları</>}
        subtitle="Steril ortamda, premium ürünlerle uygulanan medikal ve estetik tırnak bakımları."
        items={TIRNAK_BAKIM} onBook={onBook}/>
      <SvcCategory id="incelme"      eyebrow="Bölgesel İncelme"
        title={<>Bölgesel <em style={{fontFamily:'var(--serif)', color:'var(--rose-500)'}}>İncelme</em></>}
        subtitle="Cihaz destekli teknolojiler ve bütüncül programlarla hedef bölgelerde form çalışması."
        items={INCELME} onBook={onBook}/>
      <SvcCategory id="cilt"         eyebrow="Cilt Bakımı"
        title={<>Cilt <em style={{fontFamily:'var(--serif)', color:'var(--rose-500)'}}>Bakımı</em></>}
        subtitle="Kişiye özel analizle planlanan, ihtiyaca uygun cilt bakım protokolleri."
        items={CILT} onBook={onBook}/>
      <SvcCategory id="epilasyon"    eyebrow="Lazer Epilasyon"
        title={<>Lazer <em style={{fontFamily:'var(--serif)', color:'var(--rose-500)'}}>Epilasyon</em></>}
        subtitle="Modern diod lazer teknolojisi ile konforlu, kalıcı sonuçlar veren epilasyon seansları."
        items={EPILASYON} onBook={onBook}/>
      <SvcCategory id="masaj"        eyebrow="Masaj"
        title={<>Masaj <em style={{fontFamily:'var(--serif)', color:'var(--rose-500)'}}>Terapileri</em></>}
        subtitle="Bedeni gevşeten, zihni dinlendiren terapötik masaj uygulamaları."
        items={MASAJ} onBook={onBook}/>
      <SvcCategory id="kalicimakyaj" eyebrow="Kalıcı Makyaj"
        title={<>Kalıcı <em style={{fontFamily:'var(--serif)', color:'var(--rose-500)'}}>Makyaj</em> Uygulamaları</>}
        subtitle="Her güne makyajlı başlamanın konforu. Doğal, tene uyumlu, uzun ömürlü uygulamalar."
        items={KALICI_MAKYAJ} onBook={onBook}/>
      <SvcCategory id="kaskirpik"    eyebrow="Kirpik – Kaş"
        title={<>Kirpik <em style={{fontFamily:'var(--serif)', color:'var(--rose-500)'}}>&</em> Kaş Tasarımı</>}
        subtitle="Yüz hatlarınıza göre analiz edilen, doğal görünümlü kirpik ve kaş uygulamaları."
        items={KAS_KIRPIK} onBook={onBook}/>
    </>
  );
}

/* ---------- About ---------- */
function About() {
  return (
    <section id="hakkimizda" className="section about">
      <div className="wrap">
        <div className="about__grid">
          <div className="about__imgs reveal">
            <div><PlaceholderImg label="Merkezimizden" variant="rose" seed={20} tall/></div>
            <div><PlaceholderImg label="Merkezimiz" variant="nude" seed={21}/></div>
          </div>
          <div className="reveal reveal--delay-1">
            <h2>Sağlıktan Gelen Hassasiyet</h2>
            <p>
              Türkiye'nin önde gelen sağlık kuruluşlarından <b>Florence Nightingale</b> ve <b>Liv Hospital</b> bünyesinde
              2012-2021 yılları arasında doktor asistanlığı ve hemşirelik pozisyonlarında görev yaptım. Sağlık sektöründe
              çalıştığım süre zarfında sağlıklı bir birey olmanın yanında, kişinin kendisini güzel ve bakımlı hissetmesinin
              de ruhsal ve fiziksel olarak kişiye ne kadar iyi gelebileceğine bir çok kez şahit oldum.
            </p>
            <p>
              Bu konudaki tecrübemi daha fazla kişiye yansıtabilmek ve bu sefer kişilere iyi gelmenin vermiş olduğu
              mutluluğu farklı bir açıdan görmek adına ilgili olduğum güzellik sektöründe girişimci bir kadın olmaya
              karar verdim. Güzellik sektörü ile alakalı gerekli tüm eğitimlerimi aldım.
            </p>
            <p>
              Sağlık sektöründeki aktif görevlerim esnasında mesleğim gereği kişisel hijyen ve sterilizasyon konularında
              ileri düzey tecrübe edindim. Güzellik için yapılan her türlü işlem esnasında kişisel hijyen ve
              sterilizasyonun en önemli unsur olduğunu düşünmekteyim ve sizin için kullanılan tüm alet ve cihazlarda
              hastane sterilizasyon prosedürlerini salonumda uygulamaktayım.
            </p>
            <p className="svc-intro__highlight">
              En önemlisi de hizmet verdiğim her türlü işlemin sizlerde oluşturacağı tebessümün değerinin bilincindeyim.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Why Us ---------- */
function WhyUs() {
  const points = [
    { t: 'Kişiye Özel Bakım Yaklaşımı', d: 'Her uygulama öncesinde yapılan analiz ile cilt ve vücut ihtiyaçları değerlendirilir, bakım programları kişiye özel olarak planlanır.' },
    { t: 'Gelişmiş Teknolojiler',        d: 'Merkezimizde kullanılan cihaz sistemleri ve profesyonel teknikler, modern güzellik teknolojileri ile desteklenen uygulamalardan oluşur.' },
    { t: 'Butik ve Konforlu Ortam',      d: 'Butik mimarimiz sayesinde daha sakin, özel ve rahat bir bakım deneyimi sunulmaktadır.' },
    { t: 'Profesyonel Ekip',             d: 'Alanında deneyimli uzmanlarımız, bakım sürecini titizlikle planlayarak uygulamaların profesyonel şekilde gerçekleştirilmesini sağlar.' },
    { t: 'Bütüncül Bakım Anlayışı',      d: 'Cilt ve vücut bakımında yalnızca tek bir uygulama değil, ihtiyaçlara göre planlanan bütüncül bakım programları sunulur.' },
    { t: 'Sterilizasyon',                d: 'TüliNail Beauty Club kurucusunun sağlık sektöründeki 10+ yıl tecrübesinden dolayı sterilizasyona ekstra önem gösterilmektedir.' },
  ];
  return (
    <section id="nedenbiz" className="section why">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow center">Neden Biz?</span>
          <h2>Neden TüliNail Beauty Club?</h2>
          <p>TüliNail Beauty Club'da bakım deneyimi, sadece bir uygulama değil; kendinize ayırdığınız özel bir zaman haline gelir.</p>
        </div>
        <div className="why__grid">
          {points.map((p, i) => (
            <div key={p.t} className="why__item reveal" style={{transitionDelay: `${(i%3)*0.08}s`}}>
              <h3>{p.t}</h3>
              <p>{p.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Instagram ---------- */
function Insta() {
  const imgs = [
    {v:'rose',s:11, label:'Nail'},
    {v:'burgundy',s:2, label:'Makyaj'},
    {v:'milky',s:3, label:'Kaş'},
    {v:'gold',s:4, label:'Cilt'},
    {v:'nude',s:5, label:'Kirpik'},
    {v:'berry',s:6, label:'Studio'},
  ];
  return (
    <section className="section section--tight" style={{background:'var(--cream)'}}>
      <div className="wrap">
        <div className="section-head reveal" style={{marginBottom:40}}>
          <span className="eyebrow center">@tulinailbeauty</span>
          <h2>Bizi <em style={{fontFamily:'var(--serif)', color:'var(--rose-500)'}}>Instagram'da</em> takip edin</h2>
        </div>
        <div className="insta-grid">
          {imgs.map((p, i) => (
            <a key={i} href="https://www.instagram.com/tulinailbeautyclub" target="_blank" rel="noopener"
               className="insta-item reveal" style={{transitionDelay:`${i*0.04}s`}}>
              <PlaceholderImg label={p.label} variant={p.v} seed={p.s + 30}/>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Contact + Map + Footer ---------- */
function Contact() {
  return (
    <section id="iletisim" className="section">
      <div className="wrap">
        <div className="section-head reveal" style={{textAlign:'left', marginBottom: 40}}>
          <span className="eyebrow">İletişim</span>
          <h2 style={{fontSize:'clamp(36px,5vw,54px)'}}>Sizi merkezimizde <em style={{fontFamily:'var(--serif)', color:'var(--rose-500)'}}>ağırlamak</em> isteriz</h2>
        </div>
        <div className="contact-grid">
          <div className="contact-card reveal">
            <div className="contact-row">
              <div className="contact-row__icon">📍</div>
              <div>
                <small>Adres</small>
                <b>Kültür Mah. Suna Sk.</b>
                <span>Hareket Sitesi No: 76 İç Kapı No: 2</span>
                <span>Etiler / Beşiktaş / İstanbul</span>
              </div>
            </div>
            <div className="contact-row">
              <div className="contact-row__icon">☎</div>
              <div>
                <small>Nail</small>
                <b>+90 545 345 24 31</b>
                <span>WhatsApp üzerinden de ulaşabilirsiniz</span>
              </div>
            </div>
            <div className="contact-row">
              <div className="contact-row__icon">☎</div>
              <div>
                <small>Beauty</small>
                <b>+90 506 198 27 31</b>
                <span>Cilt, epilasyon ve bakım hizmetleri</span>
              </div>
            </div>
            <div className="contact-row">
              <div className="contact-row__icon">⏱</div>
              <div>
                <small>Çalışma Saatleri</small>
                <b>Salı – Pazar · 10:00 – 19:00</b>
                <span>Pazartesi kapalıdır</span>
              </div>
            </div>
            <div className="contact-row">
              <div className="contact-row__icon">💬</div>
              <div>
                <small>WhatsApp</small>
                <b><a href="http://web.whatsapp.com/send?phone=905453452431&text=Merhaba" target="_blank" rel="noopener">Mesaj Gönder</a></b>
                <span>+90 545 345 24 31</span>
              </div>
            </div>
          </div>
          <div className="map-wrap reveal reveal--delay-1">
            <div className="map">
              <svg className="map__svg" viewBox="0 0 600 440" preserveAspectRatio="xMidYMid slice">
                <defs>
                  <pattern id="grd" width="60" height="60" patternUnits="userSpaceOnUse">
                    <path d="M0 0 L60 0 L60 60 L0 60 Z" fill="none" stroke="rgba(255,255,255,.35)" strokeWidth="0.8"/>
                  </pattern>
                </defs>
                <rect width="600" height="440" fill="url(#grd)"/>
                <path d="M-20 240 Q200 200 620 280" fill="none" stroke="#fff" strokeWidth="14" opacity="0.9"/>
                <path d="M-20 240 Q200 200 620 280" fill="none" stroke="#e8d4c4" strokeWidth="10"/>
                <path d="M320 -20 Q340 200 300 460" fill="none" stroke="#fff" strokeWidth="10" opacity="0.8"/>
                <path d="M320 -20 Q340 200 300 460" fill="none" stroke="#e8d4c4" strokeWidth="6"/>
                <path d="M60 50 L250 180 L300 170 L500 340" fill="none" stroke="#fff" strokeWidth="6" opacity="0.6"/>
                <rect x="40"  y="60"  width="150" height="90"  rx="8" fill="#f3e2d0" opacity="0.8"/>
                <rect x="210" y="60"  width="80"  height="90"  rx="8" fill="#f3e2d0" opacity="0.8"/>
                <rect x="360" y="60"  width="180" height="70"  rx="8" fill="#f3e2d0" opacity="0.8"/>
                <rect x="40"  y="300" width="220" height="120" rx="8" fill="#f3e2d0" opacity="0.8"/>
                <rect x="370" y="310" width="160" height="110" rx="8" fill="#f3e2d0" opacity="0.8"/>
                <circle cx="475" cy="175" r="40" fill="#d3c7a4" opacity="0.7"/>
                <circle cx="490" cy="165" r="8" fill="#a8b882" opacity="0.8"/>
                <circle cx="460" cy="185" r="6" fill="#a8b882" opacity="0.8"/>
              </svg>
              <div className="map__pin"><div className="map__pin-body"></div></div>
              <div className="map__card">
                <div>
                  <b>TüliNail Beauty Club</b>
                </div>
                <a href="https://www.google.com/maps/search/?api=1&query=K%C3%BClt%C3%BCr+Mah.+Suna+Sk.+Hareket+Sitesi+No+76+Be%C5%9Fikta%C5%9F+%C4%B0stanbul" target="_blank" rel="noopener">Yol Tarifi</a>
              </div>
            </div>
            <p className="map__caption">Kültür Mah. Suna Sk. No:76 · Etiler / Beşiktaş / İstanbul</p>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  NavLegacy, Hero, Marquee, Services, ALL_SERVICES,
  About, WhyUs, Insta, Contact,
});