import { Hero } from './Hero';
import { TrustStrip } from './TrustStrip';
import { Benefits } from './Benefits';
import { HowItWorks } from './HowItWorks';
import { TierTable } from './TierTable';
import { PayoutOptions } from './PayoutOptions';
import { FaqSection } from './FaqSection';
import { useT } from '@/lib/i18n/react';
import { HydratedIsland } from '@/components/HydratedIsland';
import type { Locale } from '@/lib/i18n';
import type { AffiliateConfig } from '../types';

type Props = {
  locale: Locale;
  isLoggedIn: boolean;
  isAlreadyAffiliate: boolean;
  config: AffiliateConfig;
};

function AffiliateLandingContent({
  isLoggedIn,
  isAlreadyAffiliate,
  config,
}: Omit<Props, 'locale'>) {
  const t = useT('affiliate_landing');

  return (
    <div>
      <Hero isLoggedIn={isLoggedIn} isAlreadyAffiliate={isAlreadyAffiliate} />
      <TrustStrip tier1Pct={config.tier1Pct} cookieDays={config.cookieDays} />
      <Benefits />
      <TierTable config={config} />
      <HowItWorks cookieDays={config.cookieDays} />
      <PayoutOptions />
      <FaqSection config={config} />
      <div className="space-y-2 px-4 py-8 text-center text-sm text-(--color-text-muted)">
        <p>
          <a href="/refer" className="text-(--color-primary) hover:underline">
            {t('crosslink_referral')}
          </a>
        </p>
        <p className="mx-auto max-w-xl text-xs">{t('crosslink_referral_body')}</p>
      </div>
    </div>
  );
}

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