import React from 'react'
import { Globe, Instagram } from 'lucide-react'
import type { SupportViewModel } from './supportViewModel'

interface ResourcesProps {
  support: SupportViewModel
}

export function SupportResources({ support }: ResourcesProps) {
  const brandColor = support.brandColor
  return (
    <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">Additional Resources</h2>
        <p className="text-xl text-gray-600 dark:text-gray-300">Explore more ways to get help and stay informed</p>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <a href={support.websiteUrl || '#'} target="_blank" rel="noopener noreferrer" className="group bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg border border-gray-200 dark:border-gray-700 hover:shadow-xl transition-all duration-200 hover:-translate-y-1 flex flex-col items-center text-center md:items-start md:text-left">
          <div className="w-12 h-12 bg-brand-100 dark:bg-brand-900/30 rounded-xl flex items-center justify-center mb-6 group-hover:bg-brand-200 dark:group-hover:bg-brand-800/40 transition-colors duration-200" style={brandColor ? { backgroundColor: brandColor + '22' } : undefined}>
            <Globe className="w-6 h-6 text-brand-600 dark:text-brand-400" style={brandColor ? { color: brandColor } : undefined} strokeWidth={2} />
          </div>
          <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">Website</h3>
          <p className="text-gray-600 dark:text-gray-300">Visit our official site</p>
        </a>
        {support.instagramUrl && (
          <a href={support.instagramUrl} target="_blank" rel="noopener noreferrer" className="group bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg border border-gray-200 dark:border-gray-700 hover:shadow-xl transition-all duration-200 hover:-translate-y-1 flex flex-col items-center text-center md:items-start md:text-left">
            <div className="w-12 h-12 bg-brand-100 dark:bg-brand-900/30 rounded-xl flex items-center justify-center mb-6 group-hover:bg-brand-200 dark:group-hover:bg-brand-800/40 transition-colors duration-200" style={brandColor ? { backgroundColor: brandColor + '22' } : undefined}>
              <Instagram className="w-6 h-6 text-brand-600 dark:text-brand-400" style={brandColor ? { color: brandColor } : undefined} strokeWidth={2} />
            </div>
            <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">Instagram</h3>
            <p className="text-gray-600 dark:text-gray-300">Follow us for updates</p>
          </a>
        )}
        {support.linkedinUrl && (
          <a href={support.linkedinUrl} target="_blank" rel="noopener noreferrer" className="group bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg border border-gray-200 dark:border-gray-700 hover:shadow-xl transition-all duration-200 hover:-translate-y-1 flex flex-col items-center text-center md:items-start md:text-left">
            <div className="w-12 h-12 bg-brand-100 dark:bg-brand-900/30 rounded-xl flex items-center justify-center mb-6 group-hover:bg-brand-200 dark:group-hover:bg-brand-800/40 transition-colors duration-200" style={brandColor ? { backgroundColor: brandColor + '22' } : undefined}>
              <svg className="w-6 h-6 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="M16 8a6 6 0 016 6v5h-4v-5a2 2 0 00-2-2h-1a2 2 0 00-2 2v5h-4v-5a6 6 0 016-6z" />
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2 9h4v12H2z" />
                <circle cx="4" cy="4" r="2" strokeWidth={2} stroke="currentColor" fill="none" />
              </svg>
            </div>
            <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">LinkedIn</h3>
            <p className="text-gray-600 dark:text-gray-300">Connect professionally</p>
          </a>
        )}
        {support.youtubeUrl && (
          <a href={support.youtubeUrl} target="_blank" rel="noopener noreferrer" className="group bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg border border-gray-200 dark:border-gray-700 hover:shadow-xl transition-all duration-200 hover:-translate-y-1 flex flex-col items-center text-center md:items-start md:text-left">
            <div className="w-12 h-12 bg-brand-100 dark:bg-brand-900/30 rounded-xl flex items-center justify-center mb-6 group-hover:bg-brand-200 dark:group-hover:bg-brand-800/40 transition-colors duration-200" style={brandColor ? { backgroundColor: brandColor + '22' } : undefined}>
              <svg className="w-6 h-6 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="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
              </svg>
            </div>
            <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-3">YouTube</h3>
            <p className="text-gray-600 dark:text-gray-300">Watch tutorials & demos</p>
          </a>
        )}
      </div>
    </div>
  )
}