import React from 'react'
import type { SupportViewModel } from './supportViewModel'

interface ContactInfoProps {
  support: SupportViewModel
}

export function SupportContactInfo({ support }: ContactInfoProps) {
  const { phone, email, addressLines, brandColor } = support

  return (
    <div className="bg-gray-50 dark:bg-gray-800/50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div className="text-center mb-12">
          <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4">Get in Touch</h2>
          <p className="text-xl text-gray-600 dark:text-gray-300">We&apos;re here to help you succeed</p>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          <div className="text-center">
            <div className="w-16 h-16 bg-brand-100 dark:bg-brand-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4" style={brandColor ? { backgroundColor: brandColor + '22' } : undefined}>
              <svg className="w-8 h-8 text-brand-600 dark:text-brand-400" style={brandColor ? { color: brandColor } : undefined} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /></svg>
            </div>
            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Phone</h3>
            <p className="text-gray-600 dark:text-gray-300">{phone}</p>
            <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">Mon-Fri 9AM-6PM Local</p>
          </div>
          <div className="text-center">
            <div className="w-16 h-16 bg-brand-100 dark:bg-brand-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4" style={brandColor ? { backgroundColor: brandColor + '22' } : undefined}>
              <svg className="w-8 h-8 text-brand-600 dark:text-brand-400" style={brandColor ? { color: brandColor } : undefined} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
            </div>
            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Email</h3>
            <p className="text-gray-600 dark:text-gray-300">{email}</p>
            <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">24/7 Response</p>
          </div>
          <div className="text-center">
            <div className="w-16 h-16 bg-brand-100 dark:bg-brand-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4" style={brandColor ? { backgroundColor: brandColor + '22' } : undefined}>
              <svg className="w-8 h-8 text-brand-600 dark:text-brand-400" style={brandColor ? { color: brandColor } : undefined} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
            </div>
            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Office</h3>
            {addressLines.length > 0 ? addressLines.map((l,i)=>{ const k = `${l}-${i}`; return (<p key={k} className="text-gray-600 dark:text-gray-300">{l}</p>); }) : <p className="text-gray-600 dark:text-gray-300">123 Business Ave</p>}
          </div>
          <div className="text-center">
            <div className="w-16 h-16 bg-brand-100 dark:bg-brand-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4" style={brandColor ? { backgroundColor: brandColor + '22' } : undefined}>
              <svg className="w-8 h-8 text-brand-600 dark:text-brand-400" style={brandColor ? { color: brandColor } : undefined} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
            </div>
            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Hours</h3>
            <p className="text-gray-600 dark:text-gray-300">Mon-Fri: 9AM-6PM</p>
            <p className="text-gray-600 dark:text-gray-300">Sat-Sun: 10AM-4PM</p>
          </div>
        </div>
      </div>
    </div>
  )
}