function SocialFloat() {
  const socials = [
    {
      name: 'Facebook',
      href: 'https://www.facebook.com/profile.php?id=61579985786670',
      icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073C24 5.405 18.627 0 12 0S0 5.405 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.41c0-3.025 1.792-4.697 4.533-4.697 1.312 0 2.686.236 2.686.236v2.97h-1.513c-1.491 0-1.956.93-1.956 1.883v2.27h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073z"/></svg>,
    },
    {
      name: 'Instagram',
      href: 'https://www.instagram.com/eventhusiast2020?igsh=MTIzdmN5aGh0ZzQ2bQ%3D%3D&utm_source=qr',
      icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>,
    },
    {
      name: 'Threads',
      href: 'https://www.threads.com/@eventhusiast2020?igshid=NTc4MTIwNjQ2YQ==',
      icon: <svg width="20" height="20" viewBox="0 0 192 192" fill="currentColor"><path d="M141.537 88.988a66.667 66.667 0 00-2.518-1.143c-1.482-27.307-16.403-42.94-41.457-43.1h-.34c-14.986 0-27.449 6.396-35.12 18.036l13.779 9.452c5.73-8.695 14.724-10.548 21.348-10.548h.232c8.236.052 14.45 2.449 18.466 7.123 2.951 3.386 4.928 8.096 5.914 14.05-7.326-1.244-15.25-1.626-23.744-1.14-23.928 1.376-39.286 15.403-38.257 34.882.522 9.792 5.4 18.216 13.735 23.719 7.047 4.652 16.124 6.927 25.557 6.412 12.458-.683 22.231-5.436 29.049-14.127 5.178-6.6 8.453-15.153 9.899-25.93 5.937 3.583 10.337 8.298 12.767 13.966 4.132 9.635 4.373 25.468-8.546 38.376-11.319 11.308-24.925 16.2-45.488 16.351-22.809-.169-40.06-7.484-51.275-21.742C35.236 140.033 29.666 120.32 29.428 96c.238-24.32 5.808-44.033 16.55-58.605 11.215-14.258 28.466-21.573 51.275-21.742 22.974.17 40.567 7.519 52.277 21.846 5.702 7.025 9.999 15.887 12.8 26.4l16.157-4.301c-3.399-12.53-8.826-23.335-16.232-32.25C147.933 9.218 125.775-.15 97.372 0h-.441C68.786.15 46.956 9.582 32.181 28.044 18.962 44.479 12.139 67.408 11.91 95.985v.03c.23 28.578 7.052 51.506 20.271 67.942C46.956 182.418 68.786 191.85 96.93 192h.441c24.791-.142 42.274-6.656 56.625-20.983 18.399-18.374 17.832-41.123 11.772-55.12-4.509-10.506-13.161-19.005-24.231-24.909zM97.75 140.23c-10.478.587-21.356-2.597-28.085-8.652-5.016-4.514-7.62-10.53-7.328-16.953.545-11.446 9.853-21.096 27.692-22.108 2.428-.14 4.81-.209 7.148-.209 6.058 0 11.735.534 16.93 1.576-1.918 23.94-10.77 45.462-16.357 46.346z"/></svg>,
    },
    {
      name: 'TikTok',
      href: 'https://www.tiktok.com/@tesla201005?_r=1&_t=ZS-96O4DkBs2Mv',
      icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.33 6.33 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V8.69a8.17 8.17 0 004.78 1.52V6.75a4.85 4.85 0 01-1.01-.06z"/></svg>,
    },
  ];

  return (
    <>
      {/* Fixed float — desktop only (hidden on mobile via CSS) */}
      <div className="ev-social-float" style={{
        position: 'fixed', bottom: '28px', right: '24px',
        display: 'flex', flexDirection: 'column', gap: '10px',
        zIndex: 200,
      }}>
        {socials.map((s) => (
          <a
            key={s.name}
            href={s.href}
            target="_blank"
            rel="noopener noreferrer"
            title={s.name}
            style={{
              width: '44px', height: '44px',
              background: 'rgba(255,255,255,0.92)',
              backdropFilter: 'blur(12px)',
              WebkitBackdropFilter: 'blur(12px)',
              border: '1px solid rgba(0,0,0,0.08)',
              borderRadius: '50%',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: 'var(--ink)', textDecoration: 'none',
              boxShadow: '0 2px 12px rgba(0,0,0,0.12)',
              transition: 'transform 0.18s ease, box-shadow 0.18s ease',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.transform = 'scale(1.12)'; e.currentTarget.style.boxShadow = '0 4px 20px rgba(0,0,0,0.18)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = '0 2px 12px rgba(0,0,0,0.12)'; }}
          >
            {s.icon}
          </a>
        ))}
      </div>

      {/* Footer social row — mobile only (shown via CSS) */}
      <div className="ev-footer__social">
        {socials.map((s) => (
          <a key={s.name} href={s.href} target="_blank" rel="noopener noreferrer" title={s.name}>
            {s.icon}
          </a>
        ))}
      </div>
    </>
  );
}

function Footer() {
  return (
    <>
      <footer className="ev-footer">
        <div className="ev-footer__inner">
          <div className="ev-footer__legal">
            電車玩家 · 專業特斯拉事故車收購 · 彰化市金馬路三段 168 巷 · 0938-886-773
          </div>
          <div className="ev-footer__cols">
            <div>
              <div className="ev-footer__h">服務</div>
              <a href="buyback.html">事故車收購</a>
              <a href="repair.html">事故包修</a>
              <a href="shop.html">事故包料</a>
              <a href="shop.html">特斯拉零件</a>
            </div>
            <div>
              <div className="ev-footer__h">關於</div>
              <a href="about.html">廠房介紹</a>
              <a href="faq.html">常見問題</a>
              <a href="contact.html">聯絡我們</a>
            </div>
            <div>
              <div className="ev-footer__h">聯絡</div>
              <a href="https://line.me/R/ti/p/@52ev" target="_blank" rel="noopener noreferrer">LINE @52ev</a>
              <a href="tel:0938886773">0938-886-773</a>
              <a href="contact.html">彰化市金馬路三段</a>
            </div>
          </div>
          <div className="ev-footer__copy">
            Copyright © 2026 電車玩家 EV Player. All rights reserved.<br/>
            Tesla, Model S, Model 3, Model X, Model Y 為 Tesla, Inc. 之註冊商標。本站與 Tesla, Inc. 無任何附屬關係。
          </div>
        </div>
      </footer>
      <SocialFloat />
    </>
  );
}

window.Footer = Footer;
