/* ===== Troyamarin — Nav, Hero, About, Services, Contact, Footer ===== */
const { useState: useS3, useEffect: useE3 } = React;

const NAV_LINKS = [
  ['Ana Sayfa', 'index.html#top', 'top'], ['İlanlar', 'index.html#ilanlar', 'ilanlar'],
  ['Bölgeler', 'index.html#bolgeler', 'bolgeler'], ['Hakkımızda', 'index.html#hakkimizda', 'hakkimizda'],
  ['Hizmetler', 'index.html#hizmetler', 'hizmetler'], ['İletişim', 'index.html#iletisim', 'iletisim'],
];

function Nav() {
  const [solid, setSolid] = useS3(false);
  const [lang, setLang] = useS3('TR');
  const [open, setOpen] = useS3(false);
  const [active, setActive] = useS3('top');

  useE3(() => {
    const f = () => setSolid(window.scrollY > 60);
    f(); window.addEventListener('scroll', f, { passive: true });
    return () => window.removeEventListener('scroll', f);
  }, []);

  useE3(() => {
    const ids = NAV_LINKS.map(([, , id]) => id);
    const onScroll = () => {
      const scrollY = window.scrollY + 120;
      let current = ids[0];
      for (const id of ids) {
        const el = document.getElementById(id);
        if (el && el.offsetTop <= scrollY) current = id;
      }
      setActive(current);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <React.Fragment>
      <nav className={'nav' + (solid ? ' solid' : '')}>
        <div className="nav-in">
          <a href="index.html#top" aria-label="Troyamarin">
            <img className="nav-logo" src="assets/troyamarin-logo.png" alt="Troya Marin " />
          </a>
          <div className="nav-links">
            {NAV_LINKS.map(([t, h, id]) => (
              <a key={h} href={h} className={active === id ? 'nav-active' : ''}>{t}</a>
            ))}
          </div>
          <div className="nav-right">
            <div className="lang">
              {['TR', 'EN'].map((l) => (
                <button key={l} className={lang === l ? 'on' : ''} onClick={() => setLang(l)}>{l}</button>
              ))}
            </div>
            <a className="btn btn-clay" href="index.html#iletisim">Teklif Al</a>
            <button className="nav-toggle" onClick={() => setOpen(true)} aria-label="Menü"><span /></button>
          </div>
        </div>
      </nav>
      <div className={'mobile-menu' + (open ? ' open' : '')}>
        <button className="mclose" onClick={() => setOpen(false)} aria-label="Kapat">✕</button>
        {NAV_LINKS.map(([t, h]) => <a key={h} href={h} onClick={() => setOpen(false)}>{t}</a>)}
      </div>
    </React.Fragment>
  );
}

function Hero({ parcels, bgVideo, bgPoster }) {
  const [sel, setSel] = useS3(parcels[0].id);
  return (
    <header className="hero" id="top">
      <div className="hero-bg">
        {bgVideo && (
          <video className="hero-video" autoPlay muted loop playsInline poster={bgPoster}>
            <source src={bgVideo} type="video/mp4" />
          </video>
        )}
        <div className="hero-overlay" />
      </div>
      <div className="wrap" style={{ width: '100%' }}>
        <div className="hero-grid">
          <div className="hero-copy">
            <span className="eyebrow reveal in">Çanakkale · Muğla</span>
            <h1 className="display reveal in d1">
              Geleceğin<br /><em>toprakları</em><br />burada.
            </h1>
            <p className="lead reveal in d2">
              Antik Troya'nın bereketli ovalarından Ege'nin ışıltılı koylarına;
              tapusu net, imarı belli, değer kazanan arsa ve tarlalar.
            </p>
            <div className="hero-cta reveal in d3">
              <a className="btn btn-primary" href="#ilanlar">Portföyü keşfet <span className="ar">→</span></a>
              <a className="btn btn-ghost" href="#iletisim">Danışmanlık al</a>
            </div>
            <div className="hero-meta reveal in d4">
              <div><div className="num">45+</div><div className="lbl">yıllık tecrübe</div></div>
              <div><div className="num">999+</div><div className="lbl">tamamlanan satış</div></div>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}

function About({ img }) {
  return (
    <section className="sec" id="hakkimizda">
      <div className="wrap">
        <div className="about-grid">
          <div className="about-media reveal">
            <img src={img} alt="Assos, Çanakkale" loading="lazy" />
            <div className="about-stamp">EST.<br />TROYA<br />· 2008 ·</div>
          </div>
          <div>
            <span className="eyebrow reveal">Hakkımızda</span>
            <h2 className="section-title reveal d1" style={{ marginTop: '16px' }}>
              Bir toprağın <em>hikâyesi</em> vardır
            </h2>
            <p className="about-q reveal d1">
              "Üç bin yıllık bu topraklarda; her parselin bir geçmişi, her
              yatırımın bir geleceği var."
            </p>
            <p className="lead reveal d2" style={{ fontSize: '16px' }}>
              Troya Marin , Sadece Çanakkale ve Muğla bölgesinde değil, Türkiye'nin her yerinde arazi ve arsa
              yatırımında uzmanlaşmış bir ekiptir. Her portföyümüzü güven,
              şeffaflık ve uzun vadeli değer ilkesiyle seçeriz.
            </p>
            <div className="about-points">
              <div className="ap reveal d2"><div className="n">01</div><div>
                <h5>Yerinde inceleme</h5><p>Her parsel; tapu, imar ve zemin durumu açısından ekibimizce sahada doğrulanır.</p></div></div>
              <div className="ap reveal d3"><div className="n">02</div><div>
                <h5>Şeffaf süreç</h5><p>Gizli masraf yok. Değerleme, tapu ve devir sürecinin her adımında yanınızdayız.</p></div></div>
              <div className="ap reveal d4"><div className="n">03</div><div>
                <h5>Yatırım danışmanlığı</h5><p>Bölgesel gelişim ve değer artış potansiyeline göre size özel yönlendirme.</p></div></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

const SERVICES = [
  ['01', 'Arsa & Tarla Satışı', 'Tapusu net, imarı belli parsellerden oluşan özenle seçilmiş bir portföy; deniz manzaralı arsalardan verimli zeytinliklere.'],
  ['02', 'Yatırım Danışmanlığı', 'Bölgesel gelişim verileri ve değer artış potansiyeline dayalı, size özel yatırım stratejisi ve portföy yönlendirmesi.'],
  ['03', 'Tapu & İmar İşlemleri', 'Değerleme, ifraz, tevhid ve devir süreçlerinin tamamında uçtan uca hukuki ve teknik destek.'],
];

function goToContact(hizmet) {
  if (window.__setHizmet) window.__setHizmet(hizmet);
  const el = document.getElementById('iletisim');
  if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

function Services({ bg }) {
  return (
    <section className="sec ink-bg" id="hizmetler" style={bg ? { backgroundImage: `url(${bg})` } : undefined}>
      <div className="ink-bg-overlay" />
      <div className="wrap">
        <div className="sec-head">
          <div>
            <span className="eyebrow reveal">Hizmetler</span>
            <h2 className="section-title reveal d1" style={{ marginTop: '16px' }}>
              Topraktan <em>tapuya</em> kadar
            </h2>
          </div>
          <p className="lead reveal d2">
            Bir arsa almak bir başlangıçtır. Biz sürecin başından sonuna kadar
            yanınızda kalırız.
          </p>
        </div>
        <div className="svc-grid">
          {SERVICES.map(([n, t, d], i) => (
            <div className={`svc reveal d${i + 1}`} key={n}>
              <div className="snum">{n}</div>
              <h3>{t}</h3>
              <p>{d}</p>
              <button className="sl" onClick={() => goToContact(t)}>
                Detaylı bilgi <span className="ar">→</span>
              </button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Contact() {
  const [sent, setSent] = useS3(false);
  const [hizmet, setHizmet] = useS3('');
  const submit = (e) => { e.preventDefault(); setSent(true); };

  useE3(() => {
    window.__setHizmet = (h) => {
      setHizmet(h);
      setSent(false);
    };
    return () => { delete window.__setHizmet; };
  }, []);

  return (
    <section className="sec alt-bg" id="iletisim">
      <div className="wrap">
        <div className="contact-grid">
          <div className="cinfo">
            <span className="eyebrow reveal">İletişim</span>
            <h2 className="section-title reveal d1" style={{ margin: '16px 0 26px' }}>
              Bir <em>teklif</em> alın
            </h2>
            <p className="lead reveal d1" style={{ fontSize: '16px', marginBottom: '20px' }}>
              Aradığınız parseli birlikte bulalım. Formu doldurun; uzman
              danışmanımız 24 saat içinde sizi arasın.
            </p>
            <div className="reveal d2">
              <div className="ci"><div className="cl">Telefon</div><div className="cv">+90 286 000 00 00<small>Hafta içi 09:00 – 18:00</small></div></div>
              <div className="ci"><div className="cl">E-posta</div><div className="cv">iletisim@troyamarin.com<small>Her zaman yanıtlıyoruz</small></div></div>
              <div className="ci"><div className="cl">Ofis</div><div className="cv">Çanakkale · Muğla<small>Cevatpaşa Mah. — randevu ile</small></div></div>
            </div>
          </div>

          <div className="form reveal d2">
            {sent ? (
              <div className="sent">
                <div className="ic">✓</div>
                <h3>Talebiniz alındı</h3>
                <p>Teşekkür ederiz. Danışmanımız en kısa sürede sizinle iletişime geçecek.</p>
              </div>
            ) : (
              <form onSubmit={submit}>
                <div className="frow">
                  <div className="field"><label>Ad Soyad</label><input required placeholder="Adınız" /></div>
                  <div className="field"><label>Telefon</label><input required placeholder="05__ ___ __ __" /></div>
                </div>
                <div className="field"><label>E-posta</label><input type="email" placeholder="ornek@mail.com" /></div>
                <div className="field">
                  <label>Hizmet</label>
                  <select value={hizmet} onChange={(e) => setHizmet(e.target.value)}>
                    <option value="">Seçiniz…</option>
                    {SERVICES.map(([, t]) => <option key={t} value={t}>{t}</option>)}
                  </select>
                </div>
                <div className="frow">
                  <div className="field"><label>İlgilendiğiniz bölge</label>
                    <select><option>Çanakkale</option><option>Muğla</option><option>Her ikisi de</option></select></div>
                  <div className="field"><label>Arazi tipi</label>
                    <select><option>Arsa (imarlı)</option><option>Tarla</option><option>Zeytinlik / Bağ</option><option>Yatırım — farketmez</option></select></div>
                </div>
                <div className="field"><label>Mesajınız</label><textarea placeholder="Bütçeniz ve beklentilerinizden kısaca bahsedin..."></textarea></div>
                <button className="btn btn-primary" type="submit">Teklif talebi gönder <span className="ar">→</span></button>
                <p className="form-note">Bilgileriniz yalnızca size dönüş yapmak için kullanılır.</p>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="foot-top">
          <div>
            <img className="foot-logo" src="assets/troyamarin-logo-cream.png" alt="Troyamarin" />
            <p>Çanakkale ve Muğla'da arazi & arsa yatırımının güvenilir adresi. Toprağın değerini, geleceğin vizyonuyla buluşturuyoruz.</p>
          </div>
          <div className="foot-col">
            <h6>Keşfet</h6>
            <a href="index.html#ilanlar">Öne çıkan ilanlar</a><a href="index.html#bolgeler">Bölgeler</a>
            <a href="index.html#hakkimizda">Hakkımızda</a><a href="index.html#hizmetler">Hizmetler</a>
          </div>
          <div className="foot-col">
            <h6>Bölgeler</h6>
            <a href="index.html#bolgeler">Çanakkale Merkez</a><a href="index.html#bolgeler">Assos · Ayvacık</a>
            <a href="index.html#bolgeler">Bodrum</a><a href="index.html#bolgeler">Datça · Marmaris</a>
          </div>
          <div className="foot-col">
            <h6>İletişim</h6>
            <a href="index.html#iletisim">+90 286 000 00 00</a><a href="index.html#iletisim">iletisim@troyamarin.com</a>
            <a href="index.html#iletisim">Teklif al</a>
          </div>
        </div>
        <div className="foot-bot">
          <span>© 2026 Troya Marin . Tüm hakları saklıdır.</span>
          <span>Çanakkale · Muğla · Türkiye</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, About, Services, Contact, Footer });