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

interface BlogOwner {
  name: string;
  photo: string;
  shortBio: string;
  fullBio: string;
}

const blogOwner: BlogOwner = {
  name: 'Илья Дмитриевич Золкин',
  photo: '/images/master.jpg?auto=format&fit=crop&q=80&w=400&h=400',
  shortBio: 'Я, Илья Золкин, учредитель и главный редактор портала «Культура двух столиц» приветствую и благодарю Вас за проявленные любопытство и внимание. ...',
  fullBio: `Я, Илья Золкин, учредитель и главный редактор портала «Культура двух столиц» приветствую и благодарю Вас за проявленные любопытство и внимание.
   
О проекте
   
«Культура двух столиц»- это площадка, объединившая журналистов, критиков, актеров, режиссеров, музыкантов и всех тех, кто принимает самое непосредственное участие в культурной жизни Москвы и Санкт-Петербурга. Это пространство для диалога между творцами и зрителями, между критиками и художниками. Это не только агрегатор новостей и анонсов, а живой организм, стремящийся отразить пульс современной культуры двух главных городов России.

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

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

О себе

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

Мои достижения

Beyond my professional work, I'm passionate about cultural education and mentorship. I regularly conduct workshops for aspiring writers and curators, believing that the next generation of cultural critics will bring fresh perspectives that we desperately need.

Through CultureScope, I aim to bridge the gap between high culture and popular culture, between tradition and innovation, and between different communities around the world. Every article, every story we publish is an invitation to see the world through a different lens and to appreciate the rich tapestry of human creativity that surrounds us.`
};

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

  return (
    <section className="bg-gradient-to-br from-slate-50 to-blue-50 py-16 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-[400px]"
                />
                <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 whitespace-pre-line">
                      {blogOwner.fullBio}
                    </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>
  );
}
