// Montvale SNS 연동 (montvalefloristnj.com 그대로)
// Instagram @themontvaleflorist · Facebook montvaleflorist1 · Pinterest · Google Business · Yelp
// 실제 링크는 brand.ts (montvale_branding.md 정합).
import { ReactElement } from 'react'
import { Instagram, Facebook } from 'lucide-react'
import { BRAND } from '../brand'

/* ── Pinterest / Google / Yelp 인라인 SVG (lucide 미수록) ── */
function PinterestIcon({ size = 18 }: { size?: number }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor" aria-hidden="true">
      <path d="M12 2C6.48 2 2 6.48 2 12c0 4.24 2.64 7.85 6.36 9.31-.09-.79-.17-2 .03-2.86.18-.78 1.17-4.97 1.17-4.97s-.3-.6-.3-1.48c0-1.39.81-2.43 1.81-2.43.85 0 1.27.64 1.27 1.41 0 .86-.55 2.14-.83 3.33-.24 1 .5 1.81 1.48 1.81 1.78 0 3.14-1.88 3.14-4.58 0-2.4-1.72-4.07-4.19-4.07-2.85 0-4.52 2.14-4.52 4.35 0 .86.33 1.78.74 2.28.08.1.09.19.07.29l-.27 1.13c-.04.18-.14.22-.33.13-1.25-.58-2.03-2.4-2.03-3.87 0-3.15 2.29-6.04 6.6-6.04 3.46 0 6.16 2.47 6.16 5.77 0 3.44-2.17 6.21-5.18 6.21-1.01 0-1.97-.53-2.29-1.15l-.62 2.37c-.23.86-.83 1.94-1.24 2.6.94.29 1.92.44 2.95.44 5.52 0 10-4.48 10-10S17.52 2 12 2z" />
    </svg>
  )
}
function GoogleIcon({ size = 18 }: { size?: number }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} aria-hidden="true">
      <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" />
      <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23z" />
      <path fill="#FBBC05" d="M5.84 14.1a6.6 6.6 0 0 1 0-4.2V7.06H2.18a11 11 0 0 0 0 9.88l3.66-2.84z" />
      <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1A11 11 0 0 0 2.18 7.06l3.66 2.84C6.71 7.3 9.14 5.38 12 5.38z" />
    </svg>
  )
}
function YelpIcon({ size = 18 }: { size?: number }) {
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor" aria-hidden="true">
      <path d="M12.27 13.3l4.45-2.16c.51-.25.66-.92.31-1.36-1.13-1.44-2.7-2.49-4.49-2.99-.55-.15-1.08.27-1.08.84l-.02 5.04c0 .65.72 1.06 1.32.77zM12.6 15.34l4.46 2.13c.51.25 1.13-.07 1.21-.63.25-1.8-.06-3.66-.92-5.31-.27-.51-.96-.6-1.36-.18l-3.5 3.42c-.45.45-.31 1.18.11 1.4v-.84zm-2.59.4l-3.45-3.4c-.41-.4-1.09-.32-1.37.18-.86 1.64-1.18 3.49-.95 5.29.07.56.69.89 1.21.64l4.45-2.12c.6-.29.74-1.02.06-1.43zm.08 2.36l-.02 4.95c0 .57.53.99 1.08.84 1.78-.49 3.34-1.53 4.48-2.96.35-.44.2-1.11-.31-1.36l-4.45-2.15c-.6-.29-1.31.13-1.31.78l.84.01zm-.45-7.1L5.66 7.06c-.43-.7-1.46-.56-1.69.23-.13.45-.22.92-.27 1.4-.16 1.55.05 3.12.61 4.56.21.53.91.62 1.27.13l3.95-5.32c.32-.43.06-1.05-.5-1.16l.39.56z" />
    </svg>
  )
}

type SocialKey = 'instagram' | 'facebook' | 'pinterest' | 'google' | 'yelp'
const ICONS: Record<SocialKey, (p: { size?: number }) => ReactElement> = {
  instagram: ({ size }) => <Instagram size={size} />,
  facebook: ({ size }) => <Facebook size={size} />,
  pinterest: PinterestIcon,
  google: GoogleIcon,
  yelp: YelpIcon,
}
const LABELS: Record<SocialKey, string> = {
  instagram: 'Instagram', facebook: 'Facebook', pinterest: 'Pinterest', google: 'Google Business', yelp: 'Yelp',
}
const ORDER: SocialKey[] = ['instagram', 'facebook', 'pinterest', 'google', 'yelp']

// 헤더/푸터/About 소셜 아이콘 줄 (5종 그대로)
export function SocialLinks({ size = 18, className = '', iconClass = '' }: { size?: number; className?: string; iconClass?: string }) {
  return (
    <div className={`flex items-center gap-3 ${className}`}>
      {ORDER.map(k => {
        const href = (BRAND.social as any)[k] as string | undefined
        if (!href) return null
        const Icon = ICONS[k]
        return (
          <a key={k} href={href} target="_blank" rel="noreferrer" aria-label={LABELS[k]}
            className={`transition-colors ${iconClass}`}>
            <Icon size={size} />
          </a>
        )
      })}
    </div>
  )
}

/* ── 상품 공유 버튼: Instagram / Facebook / Pinterest share ──
 * Facebook·Pinterest는 표준 share URL. Instagram은 직접 share URL이 없어 프로필로 연결. */
export function ShareButtons({ url, title, image, className = '' }: { url: string; title?: string; image?: string; className?: string }) {
  const u = encodeURIComponent(url)
  const t = encodeURIComponent(title || BRAND.name)
  const img = encodeURIComponent(image || '')
  const fb = `https://www.facebook.com/sharer/sharer.php?u=${u}`
  const pin = `https://pinterest.com/pin/create/button/?url=${u}&media=${img}&description=${t}`
  const ig = BRAND.social.instagram
  const open = (href: string) => window.open(href, '_blank', 'noopener,width=640,height=600')
  return (
    <div className={`flex items-center gap-2 ${className}`}>
      <span className="text-xs text-[#a08a90]">Share:</span>
      <button type="button" onClick={() => open(ig)} aria-label="Share on Instagram"
        className="p-2 rounded-full border border-blush-100 text-blush-500 hover:bg-blush-50 transition-colors">
        <Instagram size={16} />
      </button>
      <button type="button" onClick={() => open(fb)} aria-label="Share on Facebook"
        className="p-2 rounded-full border border-blush-100 text-blush-500 hover:bg-blush-50 transition-colors">
        <Facebook size={16} />
      </button>
      <button type="button" onClick={() => open(pin)} aria-label="Share on Pinterest"
        className="p-2 rounded-full border border-blush-100 text-blush-500 hover:bg-blush-50 transition-colors">
        <PinterestIcon size={16} />
      </button>
    </div>
  )
}
