import '../../variants.css';
import '../../home.css';
import '../../service.css';
import '../../flower.css';
import { Flower } from '@barev/ui';
import type { Metadata, Viewport } from 'next';
import { notFound } from 'next/navigation';
import { BotLink, BotLinkProvider } from '../../../components/client';
import { FlowerPlans, NextDelivery } from '../../../components/flowers';
import { HomeFooter } from '../../../components/home';
import { VariantHeader } from '../../../components/variant';
import { getCatalog } from '../../../lib/data';

export const revalidate = 300;
export const dynamicParams = false;
/** Пока только русская версия — как /apartments */
export function generateStaticParams() {
  return [{ locale: 'ru' }];
}

export const metadata: Metadata = {
  title: 'Цветы по подписке в Ереване — свежий букет каждую неделю | Barev Club',
  description: 'Сезонные букеты S, M и L по подписке: раз в неделю, раз в 2 недели или раз в месяц. Цветы из армянских теплиц, доставка по Еревану бесплатно, пауза в один клик.',
  alternates: { canonical: '/ru/flower' },
  openGraph: { title: 'Цветы по подписке в Ереване', locale: 'ru', type: 'website', siteName: 'Barev Club' },
};
export const viewport: Viewport = { themeColor: '#4A1028' };

const STEPS = [
  { when: 'Сегодня', title: 'Выберите размер и частоту', text: 'S, M или L — раз в неделю, раз в 2 недели или раз в месяц. Пожелания вроде «без лилий» или «светлые тона» напишите в чат.' },
  { when: 'За день', title: 'Флорист соберёт букет', text: 'Из того, что сейчас самое свежее: цветы приезжают с теплиц Гохта и Армавира за 1–2 дня до вас. Каждый раз новый букет.' },
  { when: 'В ваш день', title: 'Привезём домой или в офис', text: 'Утром, 9–13, или вечером, 17–21. Курьер позвонит за 30 минут. Доставка по Еревану бесплатно.' },
  { when: 'Когда угодно', title: 'Пауза или отмена в один клик', text: 'Уезжаете — поставьте подписку на паузу в Telegram за 48 часов до доставки. Без звонков и штрафов.' },
];

const SEASONS = [
  { tone: 'learn', name: 'Весна', text: 'Тюльпаны, ранункулюсы, мимоза и гиацинты. К 8 марта и 7 апреля — особые букеты.' },
  { tone: 'pink', name: 'Начало лета', text: 'Пионы, пионовидные розы, альстромерия и полевые цветы.' },
  { tone: 'perks', name: 'Лето', text: 'Подсолнухи, эустома, гортензия и розы на пике сезона.' },
  { tone: 'docs', name: 'Осень и зима', text: 'Георгины, хризантемы, гиперикум, эвкалипт и тепличные розы.' },
] as const;

const FAQ = [
  ['Можно выбрать цветы самому?', 'Состав подбирает флорист из того, что сейчас в сезоне, — поэтому букеты свежее и каждый раз разные. Пожелания и аллергии учтём.'],
  ['Когда списываются деньги?', 'За 2 дня до каждой доставки. Предоплаты за месяц нет. Пакеты на 3, 6 и 12 месяцев оплачиваются сразу.'],
  ['Как поставить на паузу или отменить?', 'В Telegram, не позже чем за 48 часов до доставки. Пауза — на любой срок, отмена — без штрафов.'],
  ['Куда вы доставляете?', 'По всему Еревану бесплатно. В Абовян, Эчмиадзин и Масис — за 2 000 ֏.'],
  ['Что, если меня не будет дома?', 'Курьер позвонит за 30 минут. Оставим букет консьержу или соседу либо перенесём доставку на следующий день.'],
  ['Зимой букеты будут такими же?', 'Размер и количество стеблей не меняются. Зимой в букетах больше тепличных роз, хризантем и эвкалипта.'],
] as const;

/** /ru/flower — цветы по подписке: тарифы S/M/L, оформление в Telegram */
export default async function FlowerPage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params;
  if (locale !== 'ru') notFound();
  const catalog = await getCatalog();

  return (
    <BotLinkProvider locale="ru" bot={catalog.botUsername}>
      <div className="v2">
        <div className="v-wrap">
          <VariantHeader locale="ru" path="" className="vh--dark" logoColor="#F6C3D3" />

          <nav className="s-crumbs" aria-label="Навигация">
            <a href="/ru">Главная</a>
            <span aria-hidden="true">/</span>
            <span aria-current="page">Цветы</span>
          </nav>

          <section className="v2-hero fw-hero">
            <div className="v2-word fw-word" aria-hidden="true">
              Цветы
              <span className="fw-word__sticker">
                <Flower size={112} color="#F7DA6E" textColor="#4A1028" rotate={-12} fontSize={17}>
                  {'от\n8 900 ֏'}
                </Flower>
              </span>
            </div>
            <ul className="v2-hello" aria-hidden="true">
              <li>каждую неделю</li>
              <li>раз в 2 недели</li>
              <li>раз в месяц</li>
            </ul>
            <div className="v2-hero__text">
              <h1 className="v2-title">Свежие цветы дома — по подписке</h1>
              <div className="h-hero__side">
                <p className="v2-sub">Флорист соберёт сезонный букет, а мы привезём его в удобный день. Вам останется поставить цветы в вазу.</p>
                <div className="h-actions">
                  <a href="#plans" className="bc-btn h-cta">
                    Выбрать букет
                  </a>
                  <BotLink className="bc-btn h-cta-ghost">Написать в Telegram</BotLink>
                </div>
                <NextDelivery />
              </div>
            </div>
          </section>

          <ol className="v2-line" aria-label="Как это работает">
            {STEPS.map((s, i) => (
              <li key={s.when} className="v2-step" data-live={i === 0}>
                <div className="v2-step__when">{s.when}</div>
                <div className="v2-step__body">
                  <h2>{s.title}</h2>
                  <p>{s.text}</p>
                </div>
                <div className="v2-step__meta">{i === 2 && <span className="v2-chip">0 ֏ доставка</span>}</div>
              </li>
            ))}
          </ol>

          <FlowerPlans />

          <section className="fw-section" aria-labelledby="season-title">
            <div className="h-section-head">
              <h2 id="season-title">Что будет в букетах</h2>
              <p>Берём то, что сейчас в сезоне в армянских теплицах, поэтому цветы свежее и стоят дольше.</p>
            </div>
            <div className="fw-seasons">
              {SEASONS.map((s) => (
                <div key={s.name} className={`fw-season bc-tone-${s.tone}`}>
                  <h3>{s.name}</h3>
                  <p>{s.text}</p>
                </div>
              ))}
            </div>
          </section>

          <section className="fw-duo">
            <div className="fw-gift">
              <span className="fw-kicker">Для тех, кто далеко</span>
              <h2>Цветы маме в Ереван — каждый месяц</h2>
              <p>Оплачиваете из любой страны, мы вручаем букет с вашей открыткой и присылаем фото в WhatsApp или Telegram. Пакеты на 3, 6 и 12 месяцев.</p>
              <div className="fw-gift__prices">
                <div>
                  <b>$39</b>
                  <span>букет M</span>
                </div>
                <div>
                  <b>$59</b>
                  <span>букет L</span>
                </div>
                <div>
                  <b>$89</b>
                  <span>L + ваза и сладости</span>
                </div>
              </div>
              <BotLink className="bc-btn fw-gift__cta">Подарить подписку</BotLink>
            </div>
            <div className="fw-guarantee">
              <Flower size={84} color="#1F3311" textColor="#A8C38A" rotate={8} fontSize={15}>
                100%
              </Flower>
              <h2>Первый букет без риска</h2>
              <p>Не понравится — пришлите фото в течение суток, и мы вернём деньги полностью. Если букет простоял меньше 5 дней, заменим его бесплатно.</p>
            </div>
          </section>

          <section className="fw-faq-wrap" aria-labelledby="faq-title">
            <div className="h-section-head">
              <h2 id="faq-title">Частые вопросы</h2>
            </div>
            <div className="faq fw-faq">
              {FAQ.map(([q, a]) => (
                <details key={q}>
                  <summary>{q}</summary>
                  <p>{a}</p>
                </details>
              ))}
            </div>
          </section>

          <section className="v2-final">
            <div>
              <h2>Первый букет — уже на этой неделе</h2>
              <p>Напишите в Telegram размер и частоту — подтвердим день доставки и пришлём ссылку на оплату. Цена для первых 100 подписчиков сохранится, даже когда вырастет.</p>
            </div>
            <BotLink className="bc-btn v2-final__cta">Оформить подписку</BotLink>
          </section>

          <HomeFooter locale="ru" />
        </div>
      </div>
    </BotLinkProvider>
  );
}