'use client';
import React from 'react';
import { Check } from 'lucide-react';
import Link from 'next/link';
import { useLanguage } from '@client/contexts/LanguageContext';

interface Props {
  supportEmail: string;
}

export default function RefundPageContent({ supportEmail }: Props) {
  const { t } = useLanguage();
  const fillSupport = (s: string) => s.replace(/\{support_email\}/g, supportEmail);

  const sections = [
    { title: t('landing.refund.section.1.title', '1. Money-Back Guarantee'), content: t('landing.refund.section.1.content', 'RestroAgent offers a 30-day money-back guarantee on all paid subscription plans. If you are not satisfied with the Service for any reason within the first 30 days of your paid subscription, contact us and we will issue a full refund — no questions asked. This guarantee applies to your first payment on a new paid plan.') },
    { title: t('landing.refund.section.2.title', '2. Eligibility'), content: fillSupport(t('landing.refund.section.2.content', 'To be eligible for a refund under our money-back guarantee, you must: (a) be within 30 days of your first payment on the plan; (b) contact us at {support_email} with your account email and reason for the refund request; and (c) have complied with our Terms of Service during your subscription period.')) },
    { title: t('landing.refund.section.3.title', '3. Subscription Cancellations'), content: t('landing.refund.section.3.content', 'You may cancel your subscription at any time from your account settings under Billing. When you cancel: your subscription remains active until the end of the current billing period; you will not be charged again after the current period ends; you will not receive a prorated refund for the unused portion of the current billing period (except as covered by the 30-day guarantee).') },
    { title: t('landing.refund.section.4.title', '4. Annual Plans'), content: t('landing.refund.section.4.content', 'If you subscribed to an annual plan and cancel within the first 30 days, you are eligible for a full refund of your annual payment under our money-back guarantee. After 30 days, annual subscriptions are non-refundable, but you may continue using the Service until the end of the annual period.') },
    { title: t('landing.refund.section.5.title', '5. Plan Downgrades'), content: t('landing.refund.section.5.content', 'If you downgrade from a higher-tier plan to a lower-tier plan, the change will take effect at the start of your next billing cycle. There are no refunds or credits for the difference in price during the current billing period. Feature access will change at the start of the new billing cycle.') },
    { title: t('landing.refund.section.6.title', '6. Non-Refundable Items'), content: t('landing.refund.section.6.content', 'The following are not eligible for refunds: setup fees (if applicable for custom enterprise plans); usage-based overage charges; add-on purchases beyond the standard subscription; payments made more than 30 days prior (except for documented service failures); and accounts suspended for Terms of Service violations.') },
    { title: t('landing.refund.section.7.title', '7. Service Credits'), content: t('landing.refund.section.7.content', 'In cases of documented service outages or failures that exceed our published SLA thresholds, eligible customers may receive service credits applied to future billing cycles. Credits are calculated based on the duration and severity of the outage and are subject to our SLA terms. Service credits are not cash refunds.') },
    { title: t('landing.refund.section.8.title', '8. How to Request a Refund'), content: fillSupport(t('landing.refund.section.8.content', 'To request a refund, email {support_email} with: your account email address, the date of the charge you wish to refund, and a brief reason for your request. We will process eligible refunds within 5-10 business days. Refunds are returned to the original payment method.')) },
    { title: t('landing.refund.section.9.title', '9. Changes to This Policy'), content: t('landing.refund.section.9.content', 'We reserve the right to modify this Refund Policy at any time. Changes will be posted on this page with an updated "last updated" date. For existing subscribers, the policy in effect at the time of your most recent payment will apply to that payment.') },
    { title: t('landing.refund.section.10.title', '10. Contact'), content: fillSupport(t('landing.refund.section.10.content', 'For refund requests and billing questions, contact us at {support_email}. Our billing team responds within one business day.')) },
  ];

  return (
    <>
      <section className="py-16 sm:py-20 relative overflow-hidden">
        <div className="absolute inset-0 -z-10">
          <div className="absolute top-0 left-1/3 w-64 h-64 bg-teal-400/10 dark:bg-teal-500/6 rounded-full blur-3xl" />
        </div>
        <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
          <p className="text-xs font-semibold text-orange-500 uppercase tracking-widest mb-3">{t('landing.legal.badge', 'Legal')}</p>
          <h1 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mb-4">{t('landing.refund.hero.title', 'Refund Policy')}</h1>
          <p className="text-gray-500 dark:text-gray-400 text-sm">{t('landing.legal.last_updated', 'Last updated')}: {t('landing.refund.hero.date', 'April 1, 2026')}</p>
          <p className="mt-4 text-gray-600 dark:text-gray-400 leading-relaxed">
            {t('landing.refund.hero.desc', "We stand behind RestroAgent. If you're not happy in your first 30 days, we'll give you a full refund — no questions asked.")}
          </p>
        </div>
      </section>

      <section className="pb-20 sm:pb-24 max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="mb-8 p-5 rounded-2xl bg-teal-50 dark:bg-teal-950/20 border border-teal-100 dark:border-teal-900/30 flex items-start gap-4">
          <div className="w-10 h-10 rounded-xl bg-teal-100 dark:bg-teal-900/40 flex items-center justify-center flex-shrink-0 mt-0.5">
            <Check size={18} strokeWidth={2} className="text-teal-600 dark:text-teal-400" />
          </div>
          <div>
            <p className="font-bold text-teal-700 dark:text-teal-400 text-sm mb-1">{t('landing.refund.guarantee.title', '30-Day Money-Back Guarantee')}</p>
            <p className="text-sm text-gray-600 dark:text-gray-400">{t('landing.refund.guarantee.desc', 'Not satisfied? Email us within 30 days of your first payment for a full refund. No contracts, no hassle.')}</p>
          </div>
        </div>

        <div className="space-y-6">
          {sections.map((section, i) => (
            <div key={i} className="p-6 rounded-2xl bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800">
              <h2 className="text-base font-bold text-gray-900 dark:text-white mb-3">{section.title}</h2>
              <p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed">{section.content}</p>
            </div>
          ))}
        </div>

        <div className="mt-12 p-6 rounded-2xl bg-orange-50 dark:bg-orange-950/20 border border-orange-100 dark:border-orange-900/30 text-center">
          <p className="text-sm text-gray-600 dark:text-gray-400 mb-1 font-semibold">{t('landing.refund.footer.questions', 'Need a refund or have billing questions?')}</p>
          <p className="text-xs text-gray-500 dark:text-gray-500 mb-4">{t('landing.refund.footer.response_time', 'Our team responds within one business day.')}</p>
          <Link href="/contact" className="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-orange-500 hover:bg-orange-600 text-white font-semibold text-sm transition-all duration-200 hover:-translate-y-0.5 shadow-lg shadow-orange-500/25">
            {t('landing.refund.footer.contact_support', 'Contact Billing Support')}
          </Link>
        </div>

        <div className="mt-8 flex flex-wrap gap-4 text-sm text-gray-500 dark:text-gray-400">
          <Link href="/terms" className="hover:text-orange-500 transition-colors">{t('landing.legal.terms', 'Terms of Service')}</Link>
          <Link href="/privacy" className="hover:text-orange-500 transition-colors">{t('landing.legal.privacy', 'Privacy Policy')}</Link>
          <Link href="/cookie" className="hover:text-orange-500 transition-colors">{t('landing.legal.cookie', 'Cookie Policy')}</Link>
        </div>
      </section>
    </>
  );
}