'use client';

import { useT } from '@/lib/i18n/react';
import { Container } from '@/components/ui/layout/Container';
import { Button } from '@/components/ui/primitives/Button';
import { Icon } from '@/components/ui/icons/Icon';

const STEPS = [
  { icon: 'ShoppingCart', labelKey: 'guest_step1_label', descKey: 'guest_step1_desc' },
  { icon: 'Star', labelKey: 'guest_step2_label', descKey: 'guest_step2_desc' },
  { icon: 'Heart', labelKey: 'guest_step3_label', descKey: 'guest_step3_desc' },
] as const;

export function ClubGuestView() {
  const t = useT('club');

  return (
    <Container maxWidth="2xl" px="4" className="py-10">
      <section aria-labelledby="club-how-heading" className="flex flex-col gap-10">
        {/* How it works */}
        <div className="flex flex-col gap-6">
          <h2
            id="club-how-heading"
            className="text-center text-xl font-bold text-[var(--color-text-primary)] lg:text-2xl"
          >
            {t('guest_how_title')}
          </h2>

          <ol className="flex flex-col gap-6 lg:flex-row lg:gap-8">
            {STEPS.map(({ icon, labelKey, descKey }, i) => (
              <li
                key={labelKey}
                className="flex flex-1 flex-col items-center gap-3 rounded-2xl bg-[var(--color-brand-primary-50)] p-6 text-center"
              >
                <div className="flex size-12 items-center justify-center rounded-full bg-[var(--color-brand-primary-100)]">
                  <Icon name={icon} size="md" color="primary" aria-hidden />
                </div>
                <span className="text-xs font-bold uppercase tracking-wide text-[var(--color-brand-primary-700)]">
                  {i + 1}
                </span>
                <p className="font-semibold text-[var(--color-text-primary)]">{t(labelKey)}</p>
                <p className="text-sm text-[var(--color-text-secondary)]">{t(descKey)}</p>
              </li>
            ))}
          </ol>
        </div>

        {/* CTA block */}
        <div className="flex flex-col items-center gap-4 rounded-2xl border border-[var(--color-brand-primary-200)] bg-[var(--color-brand-primary-50)] px-6 py-8">
          <div className="flex flex-col gap-3 sm:flex-row">
            <Button variant="primary" asChild size="lg">
              <a href="/login?redirect=/club">{t('guest_cta')}</a>
            </Button>
            <Button variant="secondary" asChild size="lg">
              <a href="/register">{t('guest_register')}</a>
            </Button>
          </div>
          <p className="text-sm text-[var(--color-text-secondary)]">{t('guest_login_hint')}</p>
        </div>
      </section>
    </Container>
  );
}