'use client';

import Link from 'next/link';
import { useI18n } from '../components/I18nProvider';

const pricing = [
  {
    keyTitle: 'pricingMonthly',
    price: '10€',
    interval: 'pricingPerMonth',
    keyBody: 'pricingMonthlyBody',
  },
  {
    keyTitle: 'pricingAnnual',
    price: '100€',
    interval: 'pricingPerYear',
    keyBody: 'pricingAnnualBody',
  },
];

export default function PricingPage() {
  const { t } = useI18n();

  return (
    <main>
      <section className="panel">
        <div className="breadcrumb">
          <Link href="/">{t('homeCrumb')}</Link> / <span>{t('pricingTitle')}</span>
        </div>
        <h1>{t('pricingTitle')}</h1>
        <p style={{ marginTop: 8 }}>{t('pricingLead')}</p>
      </section>

      <div className="cards" style={{ marginTop: 18 }}>
        {pricing.map((item) => (
          <div key={item.keyTitle} className="panel">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <h3 className="card-title" style={{ margin: 0 }}>
                {t(item.keyTitle as any)}
              </h3>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontSize: 26, fontWeight: 700 }}>{item.price}</div>
                <div style={{ color: '#cbd5e1' }}>{t(item.interval as any)}</div>
              </div>
            </div>
            <p style={{ marginTop: 10 }}>{t(item.keyBody as any)}</p>
            <p style={{ color: '#cbd5e1', marginTop: 6 }}>{t('pricingPerListing')}</p>
          </div>
        ))}
      </div>

      <section className="panel" style={{ marginTop: 18 }}>
        <h2 className="card-title">{t('pricingNotesTitle')}</h2>
        <p style={{ marginTop: 8 }}>{t('pricingNotesBody')}</p>
      </section>
    </main>
  );
}