import type { NextPage } from 'next';
import Link from 'next/link';
import Seo from '../components/Seo';
import Breadcrumbs, { breadcrumbsJsonLd } from '../components/Breadcrumbs';
import { SITE_URL } from '../lib/seo';

const principles = [
  {
    number: '01',
    title: 'Originální parfémy',
    description: 'Vybíráme pouze produkty od ověřených dodavatelů.',
  },
  {
    number: '02',
    title: 'Celé flakony',
    description: 'Vyberte si svou oblíbenou vůni v celém flakonu.',
  },
  {
    number: '03',
    title: 'Pečlivá příprava',
    description: 'Každou objednávku pečlivě kontrolujeme a bezpečně balíme.',
  },
  {
    number: '04',
    title: 'Osobní přístup',
    description: 'S výběrem vám rádi poradíme před nákupem i po něm.',
  },
];

const About: NextPage = () => {
  return (
    <>
      <Seo
        title="O nás | Celé originální parfémy | Vystříkejto.cz"
        description="Vystříkejto.cz vzniklo z vášně k parfémům. Nabízíme celé originální parfémy od ověřených dodavatelů."
        canonical={`${SITE_URL}/about`}
        jsonLd={breadcrumbsJsonLd([
          { name: 'Domů', href: '/' },
          { name: 'O nás' },
        ])}
      />

      <main className="min-h-screen bg-luxury-dark text-luxury-light">
        <section className="px-4 pb-20 pt-28 sm:px-6 sm:pb-24 sm:pt-32 lg:px-[5vw] lg:pb-32 lg:pt-40">
          <div className="mx-auto max-w-[1400px]">
            <Breadcrumbs items={[{ name: 'Domů', href: '/' }, { name: 'O nás' }]} />

            <div className="mt-14 max-w-5xl sm:mt-20 lg:mt-24">
              <p className="text-xs font-bold uppercase tracking-[0.2em] text-luxury-gold">O nás</p>
              <h1 className="mt-5 text-5xl font-black leading-[0.98] tracking-[-0.045em] text-luxury-light sm:text-6xl lg:text-8xl">
                Vůně si zaslouží čas.
              </h1>
              <p className="mt-7 max-w-2xl text-base leading-relaxed text-luxury-light/65 sm:text-lg lg:text-xl">
                Nabízíme celé originální parfémy pro každodenní nošení i výjimečné chvíle. Vyberte si vůni, ke které se budete rádi vracet.
              </p>
            </div>
          </div>
        </section>

        <section className="px-4 sm:px-6 lg:px-[5vw]">
          <div className="mx-auto grid max-w-[1400px] gap-10 border-t border-luxury-gold/20 py-16 sm:py-20 lg:grid-cols-[0.7fr_1.3fr] lg:gap-24 lg:py-28">
            <div>
              <p className="text-xs font-bold uppercase tracking-[0.2em] text-luxury-gold">Náš příběh</p>
              <h2 className="mt-4 max-w-md text-3xl font-black leading-tight tracking-[-0.03em] text-luxury-light sm:text-4xl">
                Začalo to obyčejnou zvědavostí.
              </h2>
            </div>

            <div className="max-w-3xl space-y-6 text-base leading-[1.8] text-luxury-light/65 sm:text-lg">
              <p>
                Z malé soukromé sbírky parfémů postupně vznikly celé zaplněné poličky. Chtěli jsme poznat každou zajímavou vůni, ale ne vždy dávalo smysl kupovat celý flakon.
              </p>
              <p>
                Tak vzniklo <strong className="font-bold text-luxury-light">VYSTŘÍKEJ TO</strong> — místo, kde si můžete vybrat celý flakon vůně, ke které se budete chtít vracet.
              </p>
              <p className="pt-2 font-bold text-luxury-gold">
                Vyberte si svou vůni. My vám ji pečlivě zabalíme.
              </p>
            </div>
          </div>
        </section>

        <section className="px-4 sm:px-6 lg:px-[5vw]">
          <div className="mx-auto max-w-[1400px] border-t border-luxury-gold/20 py-16 sm:py-20 lg:py-28">
            <div className="mb-12 flex flex-col justify-between gap-4 sm:flex-row sm:items-end lg:mb-16">
              <div>
                <p className="text-xs font-bold uppercase tracking-[0.2em] text-luxury-gold">Jak pracujeme</p>
                <h2 className="mt-4 text-3xl font-black tracking-[-0.03em] text-luxury-light sm:text-4xl">
                  Jednoduše a poctivě.
                </h2>
              </div>
              <p className="max-w-md text-sm leading-relaxed text-luxury-light/50 sm:text-base">
                Od výběru parfému až po zabalení objednávky.
              </p>
            </div>

            <div className="grid border-t border-luxury-gold/20 sm:grid-cols-2">
              {principles.map((principle, index) => (
                <article
                  key={principle.number}
                  className={`border-b border-luxury-gold/20 py-8 sm:px-8 sm:py-10 ${
                    index % 2 === 0 ? 'sm:border-r' : ''
                  }`}
                >
                  <span className="text-xs font-bold tracking-[0.18em] text-luxury-gold/60">{principle.number}</span>
                  <h3 className="mt-5 text-xl font-black text-luxury-light sm:text-2xl">{principle.title}</h3>
                  <p className="mt-3 max-w-md text-sm leading-relaxed text-luxury-light/55 sm:text-base">
                    {principle.description}
                  </p>
                </article>
              ))}
            </div>
          </div>
        </section>

        <section className="px-4 pb-20 sm:px-6 sm:pb-24 lg:px-[5vw] lg:pb-32">
          <div className="mx-auto flex max-w-[1400px] flex-col gap-8 border-t border-luxury-gold/20 pt-12 sm:flex-row sm:items-center sm:justify-between sm:pt-16">
            <div>
              <p className="text-xs font-bold uppercase tracking-[0.2em] text-luxury-gold">Najděte tu svou</p>
              <h2 className="mt-3 text-3xl font-black tracking-[-0.03em] text-luxury-light sm:text-4xl">
                Najděte svůj parfém.
              </h2>
            </div>
            <Link
              href="/#vune"
              className="inline-flex min-h-12 items-center justify-center self-start border border-luxury-gold px-7 py-3 text-sm font-black uppercase tracking-[0.08em] text-luxury-gold transition-colors hover:bg-luxury-gold hover:text-luxury-dark sm:self-auto"
            >
              Vybrat parfém&nbsp;&nbsp;→
            </Link>
          </div>
        </section>
      </main>
    </>
  );
};

export default About;