LocationCard

'use client'
import { useState } from 'react'

const LOCATIONS = [
  { name: 'Empire UI HQ', address: '42 Rue de Rivoli, 75001 Paris, France', phone: '+33 1 23 45 67 89', hours: 'Mon-Fri 9am-6pm CET', lat: 48.8566, lng: 2.3522, type: 'office' },
  { name: 'Digital Empire Studio', address: '15 Tech Square, London EC1V 9BX', phone: '+44 20 7946 0000', hours: 'Mon-Fri 8am-8pm GMT', lat: 51.5074, lng: -0.1278, type: 'studio' },
]

export default function LocationCard() {
  const [idx, setIdx] = useState(0)
  const [copied, setCopied] = useState(false)
  const loc = LOCATIONS[idx]

  function copyAddr() {
    navigator.clipboard.writeText(loc.address)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  return (
    <div style={{ padding: 32, background: '#0A0A0A', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
      <div style={{ display: 'flex', gap: 8 }}>
        {LOCATIONS.map((l, i) => (
          <button key={i} onClick={() => setIdx(i)} style={{ background: idx === i ? 'rgba(201,168,76,0.12)' : 'rgba(255,255,255,0.04)', border: '1px solid', borderColor: idx === i ? 'rgba(201,168,76,0.3)' : 'rgba(255,255,255,0.08)', color: idx === i ? '#C9A84C' : 'rgba(255,255,255,0.4)', borderRadius: 6, padding: '6px 14px', cursor: 'pointer', fontSize: 12 }}>{l.name.split(' ')[0]}</button>
        ))}
      </div>

      <div style={{ background: '#111', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 16, overflow: 'hidden', width: 360 }}>
        {/* Map placeholder */}
        <div style={{ height: 160, background: 'linear-gradient(135deg, #0d1117, #161b22)', position: 'relative', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          {/* Grid lines */}
          {Array.from({ length: 8 }).map((_, i) => (
            <div key={i} style={{ position: 'absolute', left: `${i * 14}%`, top: 0, bottom: 0, width: 1, background: 'rgba(255,255,255,0.04)' }} />
          ))}
          {Array.from({ length: 6 }).map((_, i) => (
            <div key={i} style={{ position: 'absolute', top: `${i * 20}%`, left: 0, right: 0, height: 1, background: 'rgba(255,255,255,0.04)' }} />
          ))}
          {/* Roads */}
          <div style={{ position: 'absolute', top: '45%', left: '15%', right: '15%', height: 2, background: 'rgba(255,255,255,0.06)', borderRadius: 1 }} />
          <div style={{ position: 'absolute', left: '40%', top: '20%', bottom: '20%', width: 2, background: 'rgba(255,255,255,0.06)', borderRadius: 1 }} />
          {/* Pin */}
          <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
            <div style={{ width: 36, height: 36, borderRadius: '50% 50% 50% 0', background: '#C9A84C', transform: 'rotate(-45deg)', boxShadow: '0 0 20px rgba(201,168,76,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <span style={{ transform: 'rotate(45deg)', fontSize: 16 }}>📍</span>
            </div>
            <div style={{ width: 8, height: 8, background: 'rgba(0,0,0,0.3)', borderRadius: '50%', marginTop: 2, filter: 'blur(2px)' }} />
          </div>
        </div>

        {/* Info */}
        <div style={{ padding: 20 }}>
          <div style={{ color: '#F5F5F0', fontSize: 16, fontWeight: 700, marginBottom: 4 }}>{loc.name}</div>
          <div style={{ color: 'rgba(255,255,255,0.45)', fontSize: 13, lineHeight: 1.5, marginBottom: 16 }}>{loc.address}</div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 16 }}>
            {[{ icon: '📞', val: loc.phone }, { icon: '🕐', val: loc.hours }].map(({ icon, val }) => (
              <div key={val} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ fontSize: 14 }}>{icon}</span>
                <span style={{ color: 'rgba(255,255,255,0.55)', fontSize: 13 }}>{val}</span>
              </div>
            ))}
          </div>

          <div style={{ display: 'flex', gap: 8 }}>
            <button onClick={copyAddr} style={{ flex: 1, background: copied ? 'rgba(34,197,94,0.1)' : 'rgba(255,255,255,0.04)', border: '1px solid', borderColor: copied ? 'rgba(34,197,94,0.25)' : 'rgba(255,255,255,0.08)', color: copied ? '#22c55e' : 'rgba(255,255,255,0.6)', borderRadius: 8, padding: '9px', cursor: 'pointer', fontSize: 12, fontWeight: 500, transition: 'all 0.2s' }}>
              {copied ? '✓ Copied' : '📋 Copy address'}
            </button>
            <button style={{ flex: 1, background: '#C9A84C', color: '#0A0A0A', border: 'none', borderRadius: 8, padding: '9px', cursor: 'pointer', fontSize: 12, fontWeight: 700 }}>
              🗺 Get directions
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}

Component info

About

Location/address card with static map placeholder, directions link, copy address, and business info