// Contact + Footer
function ContactSection() {
  return (
    <div className="ct section-pad">
      <style>{`
        .ct {
          background: var(--ink);
          color: var(--paper);
          position: relative;
          overflow: hidden;
        }
        .ct::before {
          content: ""; position: absolute; inset: 0;
          background: radial-gradient(60% 50% at 80% 20%, rgba(201,169,97,0.18), transparent 60%),
                      radial-gradient(50% 50% at 10% 90%, rgba(216,191,134,0.12), transparent 60%);
          pointer-events: none;
        }
        .ct .container { position: relative; z-index: 1; }
        .ct-head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 80px; }
        @media (max-width: 880px) { .ct-head { grid-template-columns: 1fr; gap: 24px; } }
        .ct-h {
          font-family: var(--serif); font-weight: 300;
          font-size: clamp(48px, 7vw, 110px);
          line-height: 0.95; letter-spacing: -0.02em;
          margin: 12px 0 0;
          color: var(--paper);
        }
        .ct-h em { font-style: italic; color: var(--gold); }
        .ct-eyebrow { color: var(--gold-soft); font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; }
        .ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
        @media (max-width: 880px) { .ct-grid { grid-template-columns: 1fr; } }

        .ct-info {
          display: grid; gap: 28px;
          padding: 36px 0;
          border-top: 1px solid rgba(255,255,255,0.1);
        }
        .ct-info .row {
          display: grid; grid-template-columns: 130px 1fr; gap: 24px; align-items: start;
          padding: 14px 0;
          border-bottom: 1px solid rgba(255,255,255,0.06);
        }
        .ct-info .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
        .ct-info .v { font-family: var(--serif); font-size: 18px; font-weight: 400; line-height: 1.4; }
        .ct-info a { color: inherit; text-decoration: none; transition: color 320ms ease; }
        .ct-info a:hover { color: var(--gold); }
        .ct-info .hours { font-family: var(--sans); font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.6; }

        .ct-cta-row { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
        .ct .btn-ghost { color: var(--paper); border-color: rgba(255,255,255,0.2); }
        .ct .btn-ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

        .ct-map {
          aspect-ratio: 4/5;
          width: 100%;
          border-radius: 4px;
          overflow: hidden;
          position: relative;
          background:
            radial-gradient(80% 60% at 50% 40%, rgba(201,169,97,0.12), transparent 70%),
            #221a14;
          border: 1px solid rgba(255,255,255,0.08);
        }
        .ct-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
        .ct-map .pin {
          position: absolute; left: 50%; top: 45%;
          transform: translate(-50%, -100%);
          width: 24px; height: 32px;
          color: var(--gold);
        }
        .ct-map .pin::after {
          content: ""; position: absolute; left: 50%; bottom: -10px; width: 14px; height: 6px;
          border-radius: 50%; background: rgba(0,0,0,0.5); filter: blur(4px);
          transform: translateX(-50%);
        }
        .ct-map .pin .ring {
          position: absolute; left: 50%; top: 50%;
          width: 60px; height: 60px;
          transform: translate(-50%, -50%);
          border: 1px solid var(--gold);
          border-radius: 50%;
          opacity: 0;
          animation: pin-pulse 2.4s ease-out infinite;
        }
        @keyframes pin-pulse {
          0% { width: 12px; height: 12px; opacity: 0.6; }
          100% { width: 80px; height: 80px; opacity: 0; }
        }
        .ct-map .label {
          position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
          font-family: var(--mono); font-size: 9px; letter-spacing: 0.3em; color: rgba(255,255,255,0.6); text-transform: uppercase;
        }

        .ftr {
          padding: 60px 0 32px;
          background: var(--ink); color: var(--paper);
          border-top: 1px solid rgba(255,255,255,0.08);
        }
        .ftr-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
        @media (max-width: 880px) { .ftr-grid { grid-template-columns: 1fr 1fr; gap: 30px; } }
        .ftr-brand .name { font-family: var(--serif); font-size: 28px; font-weight: 300; }
        .ftr-brand .tag { font-family: var(--serif); font-style: italic; color: var(--gold-soft); margin-top: 6px; font-size: 14px; }
        .ftr-col h6 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin: 0 0 14px; }
        .ftr-col a { display: block; color: var(--paper); text-decoration: none; padding: 6px 0; font-size: 14px; transition: color 320ms ease, transform 320ms ease; }
        .ftr-col a:hover { color: var(--gold); transform: translateX(4px); }
        .ftr-base {
          display: flex; justify-content: space-between; align-items: center;
          padding-top: 24px;
          border-top: 1px solid rgba(255,255,255,0.08);
          font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.4);
        }
        .ftr-socials { display: flex; gap: 10px; }
        .ftr-socials a {
          width: 36px; height: 36px; border-radius: 50%;
          border: 1px solid rgba(255,255,255,0.15);
          display: grid; place-items: center;
          color: var(--paper);
          transition: background 320ms ease, color 320ms ease, border-color 320ms ease, transform 320ms ease;
        }
        .ftr-socials a:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); transform: translateY(-2px); }
        .ftr-socials svg { width: 14px; height: 14px; }
      `}</style>
      <div className="container">
        <div className="ct-head">
          <div className="reveal">
            <div className="ct-eyebrow">— İletişim</div>
            <h2 className="ct-h">Atelyemize <em>uğrayın</em></h2>
          </div>
          <div className="reveal reveal-d1" style={{color: 'rgba(255,255,255,0.7)', fontSize: 14, maxWidth: '44ch', lineHeight: 1.7}}>
            Yıldırım'daki sessiz atelyemiz, randevu ile çalışmaktadır. Sizi en yakın müsait saatte ağırlamaktan mutluluk duyarız.
          </div>
        </div>

        <div className="ct-grid">
          <div className="reveal">
            <div className="ct-info">
              <div className="row">
                <span className="k">Adres</span>
                <span className="v">Bağlaraltı Mahallesi 412. Sokak<br/>Yıldırım · Bursa</span>
              </div>
              <div className="row">
                <span className="k">Telefon</span>
                <span className="v"><a href="tel:+905354691908">+90 535 469 19 08</a></span>
              </div>
              <div className="row">
                <span className="k">WhatsApp</span>
                <span className="v"><a href="https://wa.me/905354691908" target="_blank" rel="noopener">+90 535 469 19 08</a></span>
              </div>
              <div className="row">
                <span className="k">E-posta</span>
                <span className="v"><a href="mailto:sevgitasan@gmail.com">sevgitasan@gmail.com</a></span>
              </div>
              <div className="row">
                <span className="k">Çalışma</span>
                <span className="hours">
                  Pzt – Cum · 10:00 – 19:00<br/>
                  Cumartesi · 11:00 – 17:00<br/>
                  Pazar · Kapalı
                </span>
              </div>
            </div>
            <div className="ct-cta-row">
              <a href="#randevu" className="btn btn-gold" data-cursor="hover">
                Bize Ulaşın
                <svg className="arrow" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M2 7h10M8 3l4 4-4 4"/></svg>
              </a>
              <a href="https://wa.me/905354691908" target="_blank" rel="noopener" className="btn btn-ghost" data-cursor="hover">WhatsApp'tan Yaz</a>
            </div>
          </div>

          <div className="ct-map reveal reveal-d1">
            <svg viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice">
              <defs>
                <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
                  <path d="M40 0 H0 V40" fill="none" stroke="rgba(255,255,255,0.04)" strokeWidth="0.5"/>
                </pattern>
              </defs>
              <rect width="400" height="500" fill="url(#grid)"/>
              {/* Coastline (Bosphorus suggestion) */}
              <path d="M-20 40 C 60 80, 80 160, 60 220 C 40 280, 80 340, 50 420 L 50 520 L -20 520 Z" fill="rgba(201,169,97,0.06)" stroke="rgba(201,169,97,0.18)" strokeWidth="0.6"/>
              {/* Streets */}
              <g stroke="rgba(255,255,255,0.08)" strokeWidth="1" fill="none">
                <path d="M50 220 L 380 200"/>
                <path d="M70 280 L 380 260"/>
                <path d="M120 340 L 380 320"/>
                <path d="M180 60 L 220 480"/>
                <path d="M280 60 L 320 480"/>
              </g>
              {/* Block hints */}
              <g fill="rgba(255,255,255,0.025)">
                <rect x="220" y="210" width="40" height="38"/>
                <rect x="270" y="210" width="40" height="38"/>
                <rect x="220" y="260" width="40" height="38"/>
                <rect x="270" y="260" width="40" height="38"/>
              </g>
            </svg>
            <div className="pin">
              <span className="ring" />
              <svg viewBox="0 0 24 32" fill="currentColor"><path d="M12 0 C 5 0 0 5 0 11 C 0 19 12 32 12 32 C 12 32 24 19 24 11 C 24 5 19 0 12 0 Z" /><circle cx="12" cy="11" r="4" fill="#1a1410"/></svg>
            </div>
            <div className="label">41.0780° N · 29.0431° E</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Footer() {
  return (
    <div className="ftr">
      <div className="container">
        <div className="ftr-grid">
          <div className="ftr-brand">
            <div className="name">Sevgi Taşan</div>
            <div className="tag">Beauty Studio · Est. 2014</div>
            <p style={{maxWidth: '36ch', marginTop: 18, color: 'rgba(255,255,255,0.6)', fontSize: 13, lineHeight: 1.7}}>
              Yıldırım, Bursa'da sessiz bir atelyede; cilde nazik, ifadeye saygılı bir bakım.
            </p>
          </div>
          <div className="ftr-col">
            <h6>Stüdyo</h6>
            <a href="#hizmetler">Hizmetler</a>
            <a href="#felsefe">Felsefemiz</a>
            <a href="#randevu">Randevu</a>
            <a href="#iletisim">İletişim</a>
          </div>
          <div className="ftr-col">
            <h6>İletişim</h6>
            <a href="tel:+905354691908">+90 535 469 19 08</a>
            <a href="mailto:sevgitasan@gmail.com">sevgitasan@gmail.com</a>
            <a href="https://www.google.com/maps?q=Bağlaraltı+Mahallesi+412.+Sokak+Yıldırım+Bursa" target="_blank" rel="noopener">Yıldırım · Bursa</a>
          </div>
          <div className="ftr-col">
            <h6>Sosyal</h6>
            <div className="ftr-socials" style={{marginTop: 4}}>
              <a href="https://instagram.com/sevgitasann" target="_blank" rel="noopener" data-cursor="hover" aria-label="Instagram"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.6" fill="currentColor"/></svg></a>
              <a href="#" data-cursor="hover" aria-label="TikTok"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M14 3v10.5a3.5 3.5 0 11-3.5-3.5"/></svg></a>
              <a href="#" data-cursor="hover" aria-label="YouTube"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M22 8s0-3-1-4-2-1-3-1H6S4 3 3 4 2 8 2 8v8s0 3 1 4 2 1 3 1h12s2 0 3-1 1-4 1-4V8z" stroke="currentColor" fill="none" strokeWidth="1.4"/><path d="M10 9v6l5-3z"/></svg></a>
              <a href="#" data-cursor="hover" aria-label="Pinterest"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><circle cx="12" cy="12" r="9"/><path d="M11 6c-3 0-5 2-5 4.5s1.5 3 2 3M11 6c2.5 0 4 1.5 4 4s-1.5 4-3 4-2-1-2-1l-1 4"/></svg></a>
            </div>
          </div>
        </div>
        <div className="ftr-base">
          <span>© 2026 Sevgi Taşan Beauty Studio</span>
          <span>Made in Bursa</span>
        </div>
      </div>
    </div>
  );
}

window.ContactSection = ContactSection;
window.SiteFooter = Footer;