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

interface HeroProps {
  support: SupportViewModel
}

export function SupportHero({ support }: HeroProps) {
  const brandColor = support.brandColor
  const gradientStyle: React.CSSProperties = brandColor ? {
    backgroundImage: `linear-gradient(to top, ${brandColor}22, rgba(255,255,255,0))`
  } : {}

  return (
    <div className="bg-gradient-to-t from-brand-200 to-white dark:from-brand-900/20 dark:to-brand-800/20" style={gradientStyle}>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-24">
        <div className="text-center">
          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-white mb-6">
            {support.displayName ? `${support.displayName} Support` : 'How can we help you?'}
          </h1>
          <p className="text-xl sm:text-2xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto mb-12">
            {support.displayName ? `Find answers and get help for ${support.displayName}.` : 'Find answers to common questions, get in touch with our support team, or explore our resources.'}
          </p>
        </div>
      </div>
    </div>
  )
}