/**
 * ReferralLandingPage — public marketing page for the referral program.
 *
 * - Any registered user can get a referral link (no enrollment required).
 * - Earns store credit (not bank transfer).
 * - Separate from /affiliate-program which targets content creators.
 *
 * @design-system: features/referrals/landing/ReferralLandingPage
 */

'use client';

import { useT } from '@/lib/i18n/react';
import { HydratedIsland } from '@/components/HydratedIsland';
import type { Locale } from '@/lib/i18n';
import { interpolate } from '@/lib/i18n/interpolate';
import { formatAgorotWhole } from '@/lib/money';
import { ShareInvite } from '@/features/referrals/ShareInvite';

type Props = {
  locale: Locale;
  referralPct: number;
  holdDays: number;
  isLoggedIn: boolean;
  refereeDiscountAgorot: number;
};

function ReferralLandingContent({
  referralPct,
  holdDays,
  isLoggedIn,
  refereeDiscountAgorot,
}: Omit<Props, 'locale'>) {
  const t = useT('referral_landing');

  const examplePurchaseAgorot = 10_000;
  const exampleCreditAgorot = Math.round((examplePurchaseAgorot * referralPct) / 100);

  return (
    <div>
      {/* Hero */}
      <section
        aria-labelledby="referral-hero-heading"
        className="bg-(--color-primary) py-20 text-center text-white"
      >
        <h1 id="referral-hero-heading" className="mb-4 text-4xl font-extrabold">
          {t('hero_heading')}
        </h1>
        <p className="mx-auto mb-8 max-w-xl text-lg text-white/80">{t('hero_sub')}</p>
        {isLoggedIn ? (
          <div className="mx-auto max-w-md px-4">
            <ShareInvite referralPct={referralPct} refereeDiscountAgorot={refereeDiscountAgorot} />
          </div>
        ) : (
          <a
            href="/login?next=/refer"
            className="inline-block rounded-full bg-white px-8 py-3 font-bold text-(--color-primary) hover:bg-white/90"
          >
            {t('widget_login_prompt')}
          </a>
        )}
      </section>

      {/* Rate callout */}
      <section aria-labelledby="rate-heading" className="py-16 text-center">
        <h2 id="rate-heading" className="mb-2 text-3xl font-bold text-(--color-text)">
          {t('rate_heading')}
        </h2>
        <p className="mb-2 text-5xl font-extrabold text-(--color-primary)">{referralPct}%</p>
        <p className="text-sm text-(--color-text-muted)">
          {interpolate(t('rate_desc'), { referralPct })}
        </p>
        <p className="mt-2 text-sm text-(--color-text-secondary)">
          {interpolate(t('rate_example'), {
            purchaseAmount: formatAgorotWhole(examplePurchaseAgorot),
            creditAmount: formatAgorotWhole(exampleCreditAgorot),
          })}
        </p>
        <p className="mt-2 text-xs text-(--color-text-muted)">
          {t('hold_note').replace('{{holdDays}}', String(holdDays))}
        </p>
      </section>

      {/* How it works — 3 steps */}
      <section aria-labelledby="how-heading" className="bg-(--color-surface-raised) py-16">
        <h2 id="how-heading" className="mb-10 text-center text-3xl font-bold text-(--color-text)">
          {t('how_heading')}
        </h2>
        <ol className="mx-auto grid max-w-3xl list-none grid-cols-1 gap-8 px-4 sm:grid-cols-3">
          {(
            [
              { title: t('step1_title'), body: t('step1_body'), n: 1 },
              { title: t('step2_title'), body: t('step2_body'), n: 2 },
              { title: t('step3_title'), body: t('step3_body'), n: 3 },
            ] as const
          ).map(({ title, body, n }) => (
            <li key={n} className="flex flex-col items-center text-center">
              <span className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-(--color-primary) text-xl font-extrabold text-white">
                {n}
              </span>
              <h3 className="mb-2 text-lg font-bold text-(--color-text)">{title}</h3>
              <p className="text-sm text-(--color-text-secondary)">{body}</p>
            </li>
          ))}
        </ol>
      </section>

      {/* FAQ */}
      <section aria-labelledby="faq-heading" className="px-4 py-16">
        <h2 id="faq-heading" className="mb-8 text-center text-3xl font-bold text-(--color-text)">
          {t('faq_heading')}
        </h2>
        <dl className="mx-auto max-w-2xl divide-y divide-(--color-border)">
          {[
            { q: t('faq1_q'), a: t('faq1_a') },
            { q: t('faq2_q'), a: t('faq2_a') },
            { q: t('faq3_q'), a: t('faq3_a').replace('{{holdDays}}', String(holdDays)) },
          ].map(({ q, a }) => (
            <div key={q} className="py-5">
              <dt className="font-semibold text-(--color-text)">{q}</dt>
              <dd className="mt-2 text-sm text-(--color-text-secondary)">{a}</dd>
            </div>
          ))}
        </dl>
      </section>

      {/* Cross-link to affiliate program */}
      <div className="space-y-2 px-4 py-8 text-center text-sm text-(--color-text-muted)">
        <p>
          <a href="/affiliate-program" className="text-(--color-primary) hover:underline">
            {t('crosslink_affiliate')}
          </a>
        </p>
        <p className="mx-auto max-w-xl text-xs">{t('crosslink_affiliate_body')}</p>
      </div>
    </div>
  );
}

export function ReferralLandingPage({ locale, ...props }: Props) {
  return (
    <HydratedIsland locale={locale}>
      <ReferralLandingContent {...props} />
    </HydratedIsland>
  );
}