export default function ArtistPortfolioSite() {
  const works = [
    {
      title: "Свет в тишине",
      year: "2025",
      note: "Холст, масло",
    },
    {
      title: "Тёплый воздух",
      year: "2024",
      note: "Холст, акрил",
    },
    {
      title: "Память цвета",
      year: "2025",
      note: "Смешанная техника",
    },
    {
      title: "Сад после дождя",
      year: "2023",
      note: "Холст, масло",
    },
    {
      title: "Тихая мастерская",
      year: "2024",
      note: "Картон, пастель",
    },
    {
      title: "На границе света",
      year: "2025",
      note: "Холст, масло",
    },
  ];

  return (
    <div className="min-h-screen bg-stone-50 text-stone-900">
      <header className="sticky top-0 z-30 border-b border-stone-200/70 bg-stone-50/90 backdrop-blur">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4 md:px-10">
          <div>
            <div className="text-lg font-semibold tracking-wide">Имя художника</div>
            <div className="text-sm text-stone-500">Авторская живопись</div>
          </div>
          <nav className="hidden gap-6 text-sm text-stone-600 md:flex">
            <a href="#works" className="transition hover:text-stone-900">Работы</a>
            <a href="#about" className="transition hover:text-stone-900">Об авторе</a>
            <a href="#studio" className="transition hover:text-stone-900">Студия</a>
            <a href="#contacts" className="transition hover:text-stone-900">Контакты</a>
          </nav>
        </div>
      </header>

      <main>
        <section className="mx-auto grid max-w-7xl gap-10 px-6 py-16 md:grid-cols-2 md:px-10 md:py-24">
          <div className="flex flex-col justify-center">
            <div className="mb-4 text-sm uppercase tracking-[0.28em] text-stone-500">
              Портфолио художника
            </div>
            <h1 className="max-w-xl text-4xl font-semibold leading-tight md:text-6xl">
              Живопись как пространство тишины, света и внутреннего движения
            </h1>
            <p className="mt-6 max-w-lg text-base leading-7 text-stone-600 md:text-lg">
              Авторские работы, собранные в едином пространстве: избранная живопись,
              история художника и студия, где можно увидеть картины вживую и работать с цветом напрямую.
            </p>
            <div className="mt-8 flex flex-wrap gap-4">
              <a
                href="#works"
                className="rounded-2xl bg-stone-900 px-6 py-3 text-sm font-medium text-white shadow-sm transition hover:opacity-90"
              >
                Смотреть работы
              </a>
              <a
                href="#studio"
                className="rounded-2xl border border-stone-300 px-6 py-3 text-sm font-medium text-stone-800 transition hover:bg-stone-100"
              >
                О студии
              </a>
            </div>
          </div>

          <div className="grid gap-4 sm:grid-cols-2">
            <div className="rounded-[2rem] bg-stone-200 p-3 shadow-sm">
              <div className="flex h-80 items-end rounded-[1.5rem] bg-gradient-to-br from-stone-300 via-stone-200 to-stone-100 p-5 text-sm text-stone-600">
                Главное изображение / картина художника
              </div>
            </div>
            <div className="space-y-4 pt-8 sm:pt-16">
              <div className="rounded-[2rem] bg-stone-100 p-3 shadow-sm">
                <div className="flex h-40 items-end rounded-[1.5rem] bg-gradient-to-br from-stone-200 to-stone-50 p-4 text-sm text-stone-500">
                  Фрагмент работы
                </div>
              </div>
              <div className="rounded-[2rem] bg-stone-100 p-3 shadow-sm">
                <div className="flex h-56 items-end rounded-[1.5rem] bg-gradient-to-br from-stone-200 to-stone-50 p-4 text-sm text-stone-500">
                  Атмосфера мастерской
                </div>
              </div>
            </div>
          </div>
        </section>

        <section id="works" className="border-t border-stone-200/80 bg-white">
          <div className="mx-auto max-w-7xl px-6 py-16 md:px-10 md:py-24">
            <div className="mb-10 flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
              <div>
                <div className="text-sm uppercase tracking-[0.24em] text-stone-500">Галерея</div>
                <h2 className="mt-3 text-3xl font-semibold md:text-4xl">Избранные работы</h2>
              </div>
              <p className="max-w-xl text-sm leading-6 text-stone-600 md:text-base">
                Здесь может быть подборка ключевых произведений с возможностью позже добавить отдельные страницы,
                серии, размеры, технику, стоимость и статус доступности.
              </p>
            </div>

            <div className="grid gap-6 sm:grid-cols-2 xl:grid-cols-3">
              {works.map((work) => (
                <article key={work.title} className="rounded-[2rem] border border-stone-200 bg-stone-50 p-4 shadow-sm transition hover:-translate-y-1 hover:shadow-md">
                  <div className="flex h-72 items-end rounded-[1.5rem] bg-gradient-to-br from-stone-200 via-stone-100 to-white p-4 text-sm text-stone-500">
                    Изображение работы
                  </div>
                  <div className="px-1 pb-1 pt-4">
                    <div className="flex items-start justify-between gap-3">
                      <h3 className="text-lg font-medium">{work.title}</h3>
                      <span className="text-sm text-stone-500">{work.year}</span>
                    </div>
                    <p className="mt-2 text-sm text-stone-600">{work.note}</p>
                  </div>
                </article>
              ))}
            </div>
          </div>
        </section>

        <section id="about" className="border-t border-stone-200/80 bg-stone-50">
          <div className="mx-auto grid max-w-7xl gap-10 px-6 py-16 md:grid-cols-[1.1fr_0.9fr] md:px-10 md:py-24">
            <div>
              <div className="text-sm uppercase tracking-[0.24em] text-stone-500">Об авторе</div>
              <h2 className="mt-3 text-3xl font-semibold md:text-4xl">Художник и её язык</h2>
              <div className="mt-6 max-w-2xl space-y-4 text-base leading-7 text-stone-700">
                <p>
                  Здесь размещается короткий, живой текст о художнике: чем она работает,
                  что ищет в живописи, какие состояния, темы и образы для неё важны.
                </p>
                <p>
                  Хорошо, если этот блок будет звучать не как официальная биография,
                  а как спокойное авторское высказывание — чтобы зритель почувствовал характер,
                  интонацию и внутреннюю логику работ.
                </p>
              </div>
            </div>

            <div className="rounded-[2rem] border border-stone-200 bg-white p-6 shadow-sm md:p-8">
              <h3 className="text-lg font-semibold">Что можно добавить в этот блок</h3>
              <div className="mt-5 space-y-4 text-sm leading-6 text-stone-600">
                <div>— художественное направление или жанры</div>
                <div>— материалы и техники</div>
                <div>— участие в выставках и проектах</div>
                <div>— публикации или отзывы</div>
                <div>— 1–2 авторские фотографии</div>
              </div>
            </div>
          </div>
        </section>

        <section id="studio" className="border-t border-stone-200/80 bg-white">
          <div className="mx-auto grid max-w-7xl gap-10 px-6 py-16 md:grid-cols-2 md:px-10 md:py-24">
            <div className="rounded-[2rem] bg-stone-100 p-3 shadow-sm">
              <div className="flex h-[420px] items-end rounded-[1.5rem] bg-gradient-to-br from-stone-300 via-stone-200 to-stone-100 p-5 text-sm text-stone-600">
                Фото студии / пространства
              </div>
            </div>

            <div className="flex flex-col justify-center">
              <div className="text-sm uppercase tracking-[0.24em] text-stone-500">Дополнительное направление</div>
              <h2 className="mt-3 text-3xl font-semibold md:text-4xl">Художественная студия</h2>
              <div className="mt-6 space-y-4 text-base leading-7 text-stone-700">
                <p>
                  У художника есть собственная студия — живое пространство, где рождаются работы,
                  проходят занятия и личные встречи с живописью.
                </p>
                <p>
                  Это место, где можно не только увидеть картины автора в реальной среде,
                  но и самим работать с цветом, композицией и материалом.
                </p>
                <p>
                  Такой блок делает сайт теплее и глубже: он показывает, что за картинами стоит не только автор,
                  но и пространство, открытое для диалога и творческой практики.
                </p>
              </div>
              <div className="mt-8 flex flex-wrap gap-4">
                <a
                  href="#contacts"
                  className="rounded-2xl bg-stone-900 px-6 py-3 text-sm font-medium text-white shadow-sm transition hover:opacity-90"
                >
                  Записаться / связаться
                </a>
                <a
                  href="#works"
                  className="rounded-2xl border border-stone-300 px-6 py-3 text-sm font-medium text-stone-800 transition hover:bg-stone-100"
                >
                  Посмотреть работы
                </a>
              </div>
            </div>
          </div>
        </section>

        <section id="contacts" className="border-t border-stone-200/80 bg-stone-50">
          <div className="mx-auto grid max-w-7xl gap-10 px-6 py-16 md:grid-cols-[0.9fr_1.1fr] md:px-10 md:py-24">
            <div>
              <div className="text-sm uppercase tracking-[0.24em] text-stone-500">Контакты</div>
              <h2 className="mt-3 text-3xl font-semibold md:text-4xl">Связаться с художником</h2>
              <p className="mt-6 max-w-md text-base leading-7 text-stone-700">
                Здесь можно оставить контакты для покупки работ, индивидуальных заказов,
                визита в студию, участия в занятиях или сотрудничества.
              </p>
            </div>

            <div className="rounded-[2rem] border border-stone-200 bg-white p-6 shadow-sm md:p-8">
              <div className="grid gap-5 md:grid-cols-2">
                <div>
                  <label className="mb-2 block text-sm text-stone-600">Имя</label>
                  <div className="rounded-xl border border-stone-200 px-4 py-3 text-sm text-stone-400">
                    Ваше имя
                  </div>
                </div>
                <div>
                  <label className="mb-2 block text-sm text-stone-600">Контакт</label>
                  <div className="rounded-xl border border-stone-200 px-4 py-3 text-sm text-stone-400">
                    Email или телефон
                  </div>
                </div>
              </div>
              <div className="mt-5">
                <label className="mb-2 block text-sm text-stone-600">Сообщение</label>
                <div className="flex h-36 rounded-xl border border-stone-200 px-4 py-3 text-sm text-stone-400">
                  Напишите, что вас интересует: работа, посещение студии, заказ или занятие.
                </div>
              </div>
              <button className="mt-6 rounded-2xl bg-stone-900 px-6 py-3 text-sm font-medium text-white shadow-sm transition hover:opacity-90">
                Отправить заявку
              </button>
            </div>
          </div>
        </section>
      </main>
    </div>
  );
}