/* global React, Icons, Art */
const { useState, useEffect, useRef } = React;

// ─────────────────────────────────────────────
// INSTAGRAM
// ─────────────────────────────────────────────
function InstagramFeed() {
  const ref = useRef(null);
  useEffect(() => {
    if (!ref.current) return;
    if (ref.current.querySelector('behold-widget')) return;
    const w = document.createElement('behold-widget');
    w.setAttribute('feed-id', 'X2RAGL6fxhygz4lXMvCL');
    ref.current.appendChild(w);
  }, []);

  return (
    <section id="instagram">
      <div className="wrap">
        <div className="section-head reveal">
          <div className="num">— 03 / Instagram</div>
          <div>
            <h2>Canlı <em>akış</em>.</h2>
            <div className="head-meta" style={{marginTop: 16}}>
              @balaban1digital — son içerikler, kulis kareleri ve
              müşteri kampanyalarından örnekler.
            </div>
          </div>
        </div>

        <div className="ig-embed reveal" ref={ref}></div>

        <div className="ig-cta reveal">
          <div className="ig-cta-text">
            <Icons.Instagram size={28}/>
            <div>
              <strong>@balaban1digital</strong>
              <div style={{fontSize: 12, color: 'var(--fg-faint)', fontFamily: 'var(--mono)', letterSpacing: '0.15em', textTransform: 'uppercase', marginTop: 4}}>
                Günlük güncel içerik
              </div>
            </div>
          </div>
          <a href="https://www.instagram.com/balaban1digital/" target="_blank" rel="noopener" className="btn btn-primary">
            <span className="dot"></span>
            Takip Et
          </a>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────
// CONTACT
// ─────────────────────────────────────────────
function Contact() {
  const [waService, setWaService] = useState("");

  useEffect(() => {
    const handler = (e) => setWaService(e.detail || "");
    window.addEventListener('balaban:prefillService', handler);
    return () => window.removeEventListener('balaban:prefillService', handler);
  }, []);

  const waHref = "https://wa.me/905346602639";

  return (
    <section id="iletisim">
      <div className="wrap">
        <div className="section-head reveal">
          <div className="num">— 04 / İletişim</div>
          <div>
            <h2>Bir <em>kahve</em> içelim, projenizi konuşalım.</h2>
            <div className="head-meta" style={{marginTop: 16}}>
              WhatsApp'tan tek tıkla yazın. 48 saat içinde size dönüş yapıyoruz.
            </div>
          </div>
        </div>

        <div className="contact-grid">
          <div className="contact-info reveal">
            <h3>Doğrudan <em>iletişime</em> geçin.</h3>
            <p>Sosyal medya yönetiminden web sitesine, reklam kampanyalarından
            stratejiye — projenizi anlatın, neye ihtiyacınız olduğunu birlikte planlayalım.</p>

            <div className="contact-list">
              <a href="tel:+905346602639" className="contact-item">
                <div className="contact-icon"><Icons.Phone size={16}/></div>
                <div>
                  <div className="lbl">Telefon</div>
                  <div className="val">+90 534 660 26 39</div>
                </div>
              </a>
              <a href="mailto:murat@balabandigital.com" className="contact-item">
                <div className="contact-icon"><Icons.Mail size={16}/></div>
                <div>
                  <div className="lbl">E-posta</div>
                  <div className="val">murat@balabandigital.com</div>
                </div>
              </a>
              <a href="https://www.instagram.com/balaban1digital/" target="_blank" rel="noopener" className="contact-item">
                <div className="contact-icon"><Icons.Instagram size={16}/></div>
                <div>
                  <div className="lbl">Instagram</div>
                  <div className="val">@balaban1digital</div>
                </div>
              </a>
              <div className="contact-item">
                <div className="contact-icon"><Icons.Pin size={16}/></div>
                <div>
                  <div className="lbl">Konum</div>
                  <div className="val">İnegöl, Bursa, Türkiye</div>
                </div>
              </div>
            </div>

            <a href={waHref} target="_blank" rel="noopener" className="wa-btn">
              <Icons.Whatsapp size={20}/>
              WhatsApp'tan Yazın
              <Icons.Arrow size={16}/>
            </a>
          </div>

          <a href={waHref} target="_blank" rel="noopener" className="wa-card reveal">
            <div className="wa-card-bg" aria-hidden="true">
              <span></span><span></span><span></span>
            </div>
            <div className="wa-card-inner">
              <div className="wa-card-icon">
                <Icons.Whatsapp size={44} stroke={1.6}/>
              </div>
              <div className="wa-card-tag">— Tek tıkla iletişim</div>
              <h3 className="wa-card-title">
                <em>WhatsApp'tan</em><br/>yazın.
              </h3>
              <p className="wa-card-sub">
                {waService
                  ? `“${waService}” hakkında konuşalım. Mesajınız hazır, sadece gönderin.`
                  : "Markanızı, ihtiyacınızı yazın — en geç 48 saatte size dönüş yapıyoruz."}
              </p>
              <div className="wa-card-cta">
                <span className="wa-card-pulse"></span>
                <span>{waService ? "Bilgi al" : "Mesaj yaz"}</span>
                <Icons.Arrow size={18}/>
              </div>
              <div className="wa-card-foot">
                <span>+90 534 660 26 39</span>
                <span>~ 48 saatte yanıt</span>
              </div>
            </div>
          </a>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────
// FOOTER
// ─────────────────────────────────────────────
function Footer() {
  const year = new Date().getFullYear();
  return (
    <footer className="footer">
      <div className="footer-top reveal">
        <em>Hadi</em> başlayalım.
      </div>

      <div className="footer-grid wrap" style={{padding:0, maxWidth:'100%'}}>
        <div className="footer-col footer-brand">
          <img src="assets/balabandigital_logo_transparent.png" alt="Balaban Digital"/>
          <p>İnegöl merkezli dijital pazarlama stüdyosu.
          Markanızın dijital yüzü, tek elden.</p>
        </div>
        <div className="footer-col">
          <h6>Menü</h6>
          <a href="#top">Ana Sayfa</a>
          <a href="#hakkimda">Hakkımda</a>
          <a href="#hizmetler">Hizmetler</a>
          <a href="#iletisim">İletişim</a>
        </div>
        <div className="footer-col">
          <h6>İletişim</h6>
          <a href="tel:+905346602639">+90 534 660 26 39</a>
          <a href="mailto:murat@balabandigital.com">murat@balabandigital.com</a>
          <a href="https://wa.me/905346602639" target="_blank" rel="noopener">WhatsApp</a>
        </div>
        <div className="footer-col">
          <h6>Sosyal</h6>
          <a href="https://www.instagram.com/balaban1digital/" target="_blank" rel="noopener">Instagram</a>
          <p>@balaban1digital</p>
        </div>
      </div>

      <div className="footer-bot">
        <div>© {year} Balaban Digital · Tüm hakları saklıdır</div>
      </div>
    </footer>
  );
}

window.InstagramFeed = InstagramFeed;
window.Contact = Contact;
window.Footer = Footer;