import { useState } from 'react';
import { ChevronDown, ChevronUp } from 'lucide-react';

interface BlogOwner {
  name: string;
  photo: string;
  shortBio: string;
  fullBioContent: JSX.Element;
}

const blogOwner: BlogOwner = {
  name: 'Илья Дмитриевич Золкин',
  photo: '/images/master.jpg?auto=format&fit=crop&q=80&w=400&h=400',
  shortBio: 'Я, Илья Золкин, учредитель и главный редактор портала «Культура двух столиц» приветствую и благодарю Вас за проявленные любопытство и внимание. ...',
  fullBioContent: (
    <>
      <p>
        Я, <strong>Илья Золкин, учредитель и главный редактор портала «Культура двух столиц»</strong> приветствую и благодарю Вас за проявленные любопытство и внимание.
      </p>

      <p>
        <strong>О проекте</strong>
      </p>
      <p>
        «Культура двух столиц»- это площадка, объединившая журналистов, критиков, актеров, режиссеров, музыкантов и всех тех, кто принимает самое непосредственное участие в культурной жизни Москвы и Санкт-Петербурга. Это пространство для диалога между творцами и зрителями, между критиками и художниками. Это не только агрегатор новостей и анонсов, а живой организм, стремящийся отразить пульс современной культуры двух главных городов России.
      </p>

      <p>
        Культурная жизнь страны сейчас представляет собой калейдоскоп, которая как стеклышки в трубе мгновенно меняется и переливается разноцветными красками. Наряду с академическими театрами, бережно хранящими традиции, появляются экспериментальные площадки, где молодые режиссеры и актеры ищут новые формы выражения. Современный театр смело экспериментирует с жанрами, стилями и технологиями, стремясь говорить со зрителем на понятном ему языке.
      </p>

      <p>
        Однако, несмотря на все перемены, театр, киноискусство, эстрада, классическая музыка остается местом, где рождаются эмоции, где зритель может встретиться с самим собой. Культура продолжает играть важную роль в формировании, поддержании духовности и нравственности общества.
      </p>

      <p>
        <strong>О себе</strong>
      </p>
      <p>
        Я родился в одном из самых красивых и театральных городов мира, в Санкт- Петербурге. По первому образованию, которое получил в Санкт-Петербургском Балтийском институте иностранных языков и межкультурного сотрудничества в 2014 году, окончив актерское отделение мастеров Б.Г. Смолкина Б.Г. и О.Г. Кирсановой- Миропольской, я актер театра и кино.
      </p>

      <p>
        <strong>Мои достижения</strong>
      </p>
      <ul className="list-disc list-inside space-y-2 ml-4">
        <li>Поработав в нескольких театрах Петербурга и Москвы, я стал театральным обозревателем и в 2015 году разработал и запустил <strong>сайт «Культура двух столиц».</strong></li>
        <li>Создал <strong>авторскую программу «Снимаю шляпу»</strong> на 78-канале телевидения Санкт-Петербурга, где я делюсь своим профессиональным взглядом на спектакли, актеров и театральные события. </li>
        <li>Как фотохудожник являюсь автором и организатором <strong>фотопроекта "Актеры и образы"</strong>, цель которого запечатлеть выдающихся актеров нашего времени в их самых ярких театральных образах, которая с успехом проходила в театральном музее им. Бахрушина и культурном центре им. В. Я. Вульфа, а также на других популярных площадках Москвы.</li>
        <li>В качестве фотокорреспондента ежегодно участвую в <strong>крупнейших кинофестивалях страны</strong>: Московский международный кинофестиваль, «Виват кино России», «Амурская осень», «Литература и кино».</li>
        <li>Участник телевизионных проектов: <strong>на канале «Культура»</strong> в телепередаче А. Максимова «Наблюдатель». <strong>На ТВЦ</strong> постоянно участвую в программе «Хватит слухов» в качестве культурного обозревателя.</li>
        <li>Организатор, ведущий и участник <strong>культурных мероприятий и концертов</strong>, в том числе в Доме –музее Зинаиды Юсуповой и особняке Шредера в Санкт-Петербурге.</li>
      </ul>
    </>
  )
};

export function BlogOwnerSectionFull() {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <section className="bg-gradient-to-br from-slate-50 to-blue-50 py-4 px-4 sm:px-6 lg:px-8">
      <div className="max-w-5xl mx-auto">
        <div className="bg-white rounded-2xl shadow-xl overflow-hidden">
          <div className="md:flex">
            <div className="md:flex-shrink-0 md:w-80">
              <div className="h-full w-full relative">
                <img
                  src={blogOwner.photo}
                  alt={blogOwner.name}
                  className="h-full w-full object-cover md:min-h-[150px]"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent md:hidden" />
              </div>
            </div>
            <div className="p-8 md:p-12 flex-1">
              <div className="flex items-center justify-between mb-4">
                <div>
                  <h2 className="text-3xl font-bold text-gray-900 mb-2">
                    {blogOwner.name}
                  </h2>
                  <p className="text-blue-600 font-medium text-lg">
                    Учредитель и Главный Редактор
                  </p>
                </div>
              </div>

              <div className="relative">
                <div className={`text-gray-700 leading-relaxed ${!isExpanded ? 'line-clamp-3' : ''}`}>
                  {isExpanded ? (
                    <div className="space-y-4">
                      {blogOwner.fullBioContent}
                    </div>
                  ) : (
                    <p>{blogOwner.shortBio}</p>
                  )}
                </div>

                {!isExpanded && (
                  <div className="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-white to-transparent pointer-events-none" />
                )}
              </div>

              <button
                onClick={() => setIsExpanded(!isExpanded)}
                className="mt-6 inline-flex items-center gap-2 text-blue-600 hover:text-blue-700 font-medium transition-colors group"
                aria-expanded={isExpanded}
                aria-label={isExpanded ? 'Закрыть' : 'Читать'}
              >
                <span>{isExpanded ? 'Закрыть' : 'Читать'}</span>
                {isExpanded ? (
                  <ChevronUp className="w-5 h-5 group-hover:-translate-y-0.5 transition-transform" />
                ) : (
                  <ChevronDown className="w-5 h-5 group-hover:translate-y-0.5 transition-transform" />
                )}
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
