import React from 'react';
import ChatInput from './ChatInput';
import { CurrentView } from '../types';
import { ArrowDownTrayIcon } from './icons';
import { SECTION_IDS } from '../constants';

interface HeroSectionProps {
  setCurrentView: (view: CurrentView) => void;
  isChatHidden?: boolean;
}

const HeroSection: React.FC<HeroSectionProps> = ({ setCurrentView, isChatHidden = false }) => {
  return (
    <section 
      id="hero"
      className="relative min-h-screen flex items-center justify-center overflow-hidden bg-white p-4" 
    >
      <div className="w-full max-w-3xl text-center">
        <h1 className="mb-6 mx-auto text-4xl sm:text-5xl font-semibold leading-tight tracking-tight text-slate-900 font-quicksand">
          Чем мы можем помочь?
        </h1>
        <div className={`transition-opacity duration-300 ${isChatHidden ? 'opacity-0' : 'opacity-100'}`}>
          <ChatInput setCurrentView={setCurrentView} />
        </div>
      </div>

      <a
        href={`#${SECTION_IDS.story}`}
        onClick={(e) => {
          e.preventDefault();
          document.getElementById(SECTION_IDS.story)?.scrollIntoView({ behavior: 'smooth' });
        }}
        className="absolute bottom-8 left-1/2 -translate-x-1/2 z-10"
        aria-label="Прокрутить вниз"
      >
        <ArrowDownTrayIcon className="h-8 w-8 text-slate-500 animate-bounce hover:text-slate-700 transition-colors" />
      </a>
    </section>
  );
};

export default HeroSection;