"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>
  );
}