// components/home.jsx
// Home page-only sections: ServicesSummary (7 category cards), AboutShort, ContactCard.

const { useState: useState_h } = React;

/* ---------- ServicesSummary: 7 category cards that link to detail pages ---------- */
function ServicesSummary() {
  const cats = [
    { slug: 'tirnak-bakim',  t: 'Tırnak Bakım Uygulamaları',      d: 'Steril ortamda, premium ürünlerle uygulanan medikal ve estetik tırnak bakımları. Doğal tırnağınızın sağlığını korurken estetiğini ön plana çıkarıyoruz.', variant: 'rose',     seed: 101, img: 'assets/tirnakbakim.jpg' },
    { slug: 'incelme',       t: 'Bölgesel İncelme Uygulamaları',  d: 'EMS, yağ çözücü ve bütüncül şekillendirme programları ile hedef bölgelerde form çalışması.',  variant: 'gold',     seed: 102, img: 'assets/bolgeselincelme.jpg' },
    { slug: 'cilt',          t: 'Cilt Bakımı Uygulamaları',       d: 'Analize göre planlanan derin bakım, anti-aging, leke karşıtı ve hydra facial protokolleri.',  variant: 'milky',    seed: 103, img: 'assets/ciltbakimi.jpg' },
    { slug: 'epilasyon',     t: 'Lazer Epilasyon Uygulaması',     d: 'Modern diod lazer teknolojisi ile konforlu, kalıcı sonuçlar veren bölgesel ve tam seans.',    variant: 'nude',     seed: 104, img: 'assets/lazerepilasyon.jpg' },
    { slug: 'masaj',         t: 'Masaj Hizmetleri',               d: 'Klasik, aroma terapi, sıcak taş ve lenf drenajı ile bedeni gevşeten terapötik masajlar.',    variant: 'mocha',    seed: 105, img: 'assets/masaj.jpg' },
    { slug: 'kalici-makyaj', t: 'Kalıcı Makyaj Uygulamaları',     d: 'Dudak renklendirme, eyeliner, dipliner, microblading ile doğal ve uzun ömürlü uygulamalar.', variant: 'burgundy', seed: 106, img: 'assets/kalici_makyaj.jpg' },
    { slug: 'kirpik-kas',    t: 'Kirpik - Kaş Uygulamaları',      d: 'İpek kirpik, kirpik lifting, kaş dizayn, laminasyon ile yüz hatlarına uygun uygulamalar.',   variant: 'berry',    seed: 107, img: 'assets/kasbakim.jpg' },
  ];
  return (
    <section id="hizmetler" className="section svc-summary">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow center">Hizmetlerimiz</span>
          <h2>Her ayrıntısı sizin için <em style={{fontFamily:'var(--serif)', color:'var(--rose-500)'}}>düşünüldü</em>.</h2>
        </div>
        <div className="svc-summary__grid">
          {cats.map((c, i) => (
            <a key={c.slug}
               href={`hizmetler/${c.slug}.html`}
               className="svc-sum-card svc-sum-card--text reveal"
               style={{transitionDelay: `${(i%3)*0.06}s`}}>
              <div className="svc-sum-card__body">
                <h3>{c.t}</h3>
                <span className="svc-sum-card__link">İncele <span className="arr">→</span></span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- AboutShort: compact about on home page ---------- */
function AboutShort() {
  return (
    <section id="hakkimizda" className="section about about--short">
      <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 <em style={{fontFamily:'var(--serif)', color:'var(--rose-500)'}}>hassasiyet</em>.</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 kişilere iyi gelmenin verdiği
              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. Sağlık sektöründeki görevlerim esnasında mesleğim gereği
              kişisel hijyen ve sterilizasyon konularında ileri düzey tecrübe edindim.
            </p>
            <p>
              Güzellik için yapılan her türlü işlem esnasında kişisel hijyen ve sterilizasyonun
              en önemli unsur olduğunu düşünüyor, sizin için kullanılan tüm alet ve cihazlarda
              <b> hastane sterilizasyon prosedürlerini</b> salonumda uyguluyorum. 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>
  );
}

/* ---------- Reviews carousel (Google Maps yorumları, manuel kuratörlü) ---------- */
function Reviews() {
  const items = [
    { stars: 5, date: 'bir hafta önce', isNew: true, text: 'Yaklaşık 3 yıldır kaş için Tülin hanıma gidiyorum. Bence kaş konusunda en iyisi. Ayrıca salonun temizliği ve çalışanların güleryüzlü olmasıda çok önemli. Hepsi hem çok yardımsever hemde çok ilgili.' },
    { stars: 5, date: '5 ay önce', edited: true, text: 'Düzenli olarak manikür, pedikür ve kalıcı oje yaptırıyorum. 10 günlük deniz tatili dahil 3 hafta sonunda ojelerim ilk günkü gibiydi. Hem hizmet hem mekandan gayet memnunum ve kesinlikle tavsiye ederim.' },
    { stars: 5, date: '6 ay önce', text: 'Hijyen konusunda çok titiz bir salon, tertemiz ve yaptıkları her iş son derece özenli. Randevu saatleri konusunda yaklaşımları da oldukça profesyonel ve dakik. Manikür, pedikür ve kalıcı oje yaptırdım, hepsinden de çok memnun kaldım. Kesinlikle tavsiye ederim 💅' },
    { stars: 5, date: '6 ay önce', text: '1 seneden fazla bir süredir tırnaklarımı burada yaptırıyorum. Çok çok memnunum ❤️' },
    { stars: 5, date: '6 ay önce', text: 'Her zaman geliyorum zaten asla yanıltmıyor. Gerek titizlikleri gerek profesyonellikleriyle harika bir işletme.' },
    { stars: 5, date: '7 ay önce', text: 'Güleryüz, hijyen, şahane hizmet. Herşey için teşekkürler.' },
    { stars: 5, date: '7 ay önce', text: 'Yaklaşık bir yıldır düzenli olarak geliyorum ve bugüne kadar aldığım hizmetlerden her zaman çok memnun kaldım. 🌿 Hem temizlik açısından hem de güleryüz ve özen bakımından gerçekten kusursuz bir yer. Tülin Hanım ve ekibi her zaman aynı profesyonellik ve titizlikle çalışıyorlar. Gönül rahatlığıyla herkese tavsiye ederim, hiç düşünmeden tercih edebilirsiniz. 💫' },
    { stars: 5, date: '7 ay önce', text: 'Çok iyi işçilik, tırnaklarım prime dönemini yaşıyor diyebilirim 💙👏' },
    { stars: 5, date: '8 ay önce', text: 'Çok temiz bir salon, çok yetenekli bir ekip 💙' },
    { stars: 5, date: 'yakın zamanda', text: 'Yaklaşık 1 ay önce tanıştık ve şimdiden 3. randevum için plan yapmaya başladım. Özen gösterip titizlikle çalışıyorlar. Emek veriyorlar, ellerine sağlık.' },
  ];
  const [index, setIndex] = useState_h(0);
  const [paused, setPaused] = useState_h(false);
  React.useEffect(() => {
    if (paused) return;
    const id = setInterval(() => setIndex(i => (i + 1) % items.length), 6500);
    return () => clearInterval(id);
  }, [paused, items.length]);
  const prev = () => setIndex(i => (i - 1 + items.length) % items.length);
  const next = () => setIndex(i => (i + 1) % items.length);
  return (
    <section className="section reviews" id="yorumlar">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow center">Yorumlar</span>
          <h2>Misafir Deneyimlerimiz</h2>
        </div>
        <div className="reviews__carousel reveal"
             onMouseEnter={() => setPaused(true)}
             onMouseLeave={() => setPaused(false)}>
          <button className="reviews__nav reviews__nav--prev" onClick={prev} aria-label="Önceki yorum">
            <i className="fa-solid fa-chevron-left"></i>
          </button>
          <div className="reviews__viewport">
            <div className="reviews__track" style={{transform: `translateX(-${index * 100}%)`}}>
              {items.map((r, i) => (
                <article key={i} className="reviews__card">
                  <div className="reviews__stars" aria-label={`${r.stars} yıldız`}>
                    {Array.from({length: r.stars}).map((_, k) => <i key={k} className="fa-solid fa-star"></i>)}
                  </div>
                  <p className="reviews__text">{r.text}</p>
                  <div className="reviews__meta">
                    <i className="fa-brands fa-google reviews__source" aria-label="Google"></i>
                    <span>Google Maps</span>
                    {r.isNew && <span className="reviews__badge">Yeni</span>}
                  </div>
                </article>
              ))}
            </div>
          </div>
          <button className="reviews__nav reviews__nav--next" onClick={next} aria-label="Sonraki yorum">
            <i className="fa-solid fa-chevron-right"></i>
          </button>
        </div>
        <div className="reviews__dots">
          {items.map((_, i) => (
            <button key={i}
                    className={`reviews__dot ${i===index ? 'is-active' : ''}`}
                    onClick={() => setIndex(i)}
                    aria-label={`${i+1}. yorum`}/>
          ))}
        </div>
        <div className="reviews__cta reveal">
          <a href="https://www.google.com.tr/maps/place/T%C3%BCliNail+Art+%26+Beauty+Studio/@41.073853,29.0337362,19.39z/data=!4m8!3m7!1s0x14cab77620f560f5:0x41730511a8abf04b!8m2!3d41.0741556!4d29.0338133!9m1!1b1!16s%2Fg%2F11pccrtplh"
             target="_blank" rel="noopener noreferrer"
             className="btn btn--ghost">
            <i className="fa-brands fa-google" style={{marginRight:6}}></i>
            Tüm Yorumları Google'da Gör <span className="arr">→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

/* ---------- ContactCard: home contact with map + info + WA cta ---------- */
function ContactCard() {
  return (
    <section id="iletisim" className="section">
      <div className="wrap">
        <div className="section-head reveal" style={{textAlign:'left', marginBottom: 40}}>
          <h2 style={{fontSize:'clamp(34px,5vw,52px)'}}>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 style={{display:'flex', gap:12, marginTop:8, flexWrap:'wrap'}}>
              <a href="http://web.whatsapp.com/send?phone=905453452431&text=Merhaba" target="_blank" rel="noopener" className="btn btn--primary">WhatsApp'tan Yaz <span className="arr">→</span></a>
              <a href="iletisim.html#randevu" className="btn btn--ghost">Randevu Formu</a>
            </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-home" 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-home)"/>
                <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"/>
              </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, { ServicesSummary, AboutShort, ContactCard, Reviews });