'use client';

import Link from 'next/link';
import { useT } from '@/i18n';
import { Button } from '@/components/ui/button';
import { Shield, Users, BarChart3, Cloud, ClipboardCheck, Target } from 'lucide-react';

const features = [
  { icon: Shield, key: 'featureIsolation' },
  { icon: Users, key: 'featureManage' },
  { icon: BarChart3, key: 'featureAnalytics' },
  { icon: Cloud, key: 'featureSandbox' },
  { icon: ClipboardCheck, key: 'featureReport' },
  { icon: Target, key: 'featureCustom' },
];

const faqs = ['faq1', 'faq2', 'faq3', 'faq4', 'faq5'];

export default function EnterprisePage() {
  const t = useT();

  return (
    <div>
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-28">
        <div className="text-center max-w-3xl mx-auto">
          <div className="inline-flex items-center gap-2 px-3 py-1 bg-brand-600/10 border border-brand-200 dark:border-brand-800 rounded-full text-sm text-brand-600 mb-6">
            <Shield className="h-4 w-4" />
            {t.enterprise.title}
          </div>
          <h1 className="text-4xl md:text-5xl font-bold text-foreground leading-tight mb-6">
            {t.enterprise.heroTitle}
          </h1>
          <p className="text-lg text-muted-foreground mb-8 leading-relaxed">
            {t.enterprise.heroDesc}
          </p>
          <div className="flex items-center justify-center gap-4">
            <Button size="lg" asChild>
              <Link href="/enterprise/dashboard">{t.enterprise.heroCta}</Link>
            </Button>
            <Button variant="outline" size="lg" asChild>
              <Link href="/practices">{t.enterprise.learnMore}</Link>
            </Button>
          </div>
          <p className="text-xs text-muted-foreground mt-3">{t.enterprise.heroCtaSub}</p>
        </div>
      </section>

      <section className="bg-muted/30 border-y border-border py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-2xl font-bold text-foreground mb-3">{t.enterprise.problemTitle}</h2>
            <p className="text-muted-foreground max-w-2xl mx-auto">{t.enterprise.problemDesc}</p>
          </div>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            {[
              { stat: 'statShadowAi', desc: 'statShadowAiDesc' },
              { stat: 'statDataLeak', desc: 'statDataLeakDesc' },
              { stat: 'statIpLeak', desc: 'statIpLeakDesc' },
              { stat: 'statTrainingGap', desc: 'statTrainingGapDesc' },
            ].map((s, i) => (
              <div key={i} className="bg-card rounded-2xl border border-border p-6 text-center">
                <div className="text-3xl font-bold text-brand-600 mb-1">{t.enterprise[s.stat as keyof typeof t.enterprise] as string}</div>
                <div className="text-xs text-muted-foreground">{t.enterprise[s.desc as keyof typeof t.enterprise] as string}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-2xl font-bold text-foreground mb-3">{t.enterprise.solutionTitle}</h2>
            <p className="text-muted-foreground">{t.enterprise.solutionDesc}</p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {features.map((feat, i) => {
              const Icon = feat.icon;
              return (
                <div key={i} className="bg-card rounded-2xl border border-border p-6 hover:shadow-md transition-all">
                  <div className="w-10 h-10 bg-brand-600/10 rounded-xl flex items-center justify-center mb-4">
                    <Icon className="h-5 w-5 text-brand-600" />
                  </div>
                  <h3 className="font-semibold text-foreground mb-2">{t.enterprise[feat.key as keyof typeof t.enterprise]}</h3>
                  <p className="text-sm text-muted-foreground">{t.enterprise[(feat.key + 'Desc') as keyof typeof t.enterprise] as string}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      <section className="bg-muted/30 border-y border-border py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-2xl font-bold text-foreground mb-3">{t.enterprise.pricingTitle}</h2>
            <p className="text-muted-foreground">{t.enterprise.pricingDesc}</p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-3xl mx-auto">
            <div className="bg-card rounded-2xl border border-border p-8">
              <h3 className="text-lg font-semibold text-foreground mb-1">{t.enterprise.pricingFree}</h3>
              <div className="text-3xl font-bold text-foreground mb-1">{t.enterprise.pricingFreePrice}</div>
              <p className="text-sm text-muted-foreground mb-6">{t.enterprise.pricingFreeDesc}</p>
              <ul className="space-y-2 mb-8">
                <li className="text-sm text-muted-foreground flex items-center gap-2"><span className="text-green-500">✓</span> {t.enterprise.pricingFreeFeature1}</li>
                <li className="text-sm text-muted-foreground flex items-center gap-2"><span className="text-green-500">✓</span> {t.enterprise.pricingFreeFeature2}</li>
                <li className="text-sm text-muted-foreground flex items-center gap-2"><span className="text-green-500">✓</span> {t.enterprise.pricingFreeFeature3}</li>
              </ul>
              <Button variant="outline" className="w-full" asChild>
                <Link href="/practices">{t.enterprise.pricingCtaFree}</Link>
              </Button>
            </div>
            <div className="bg-card rounded-2xl border-2 border-brand-600 p-8 relative">
              <span className="absolute -top-3 left-1/2 -translate-x-1/2 bg-brand-600 text-white text-xs font-medium px-3 py-0.5 rounded-full">{t.packages.popular}</span>
              <h3 className="text-lg font-semibold text-foreground mb-1">{t.enterprise.pricingBiz}</h3>
              <div className="flex items-baseline gap-1 mb-1">
                <span className="text-3xl font-bold text-foreground">{t.enterprise.pricingBizPrice}</span>
                <span className="text-sm text-muted-foreground">{t.enterprise.pricingBizPerUser}</span>
              </div>
              <p className="text-sm text-muted-foreground mb-6">{t.enterprise.pricingBizDesc}</p>
              <ul className="space-y-2 mb-8">
                <li className="text-sm text-foreground flex items-center gap-2"><span className="text-green-500">✓</span> {t.enterprise.pricingBizFeature1}</li>
                <li className="text-sm text-foreground flex items-center gap-2"><span className="text-green-500">✓</span> {t.enterprise.pricingBizFeature2}</li>
                <li className="text-sm text-foreground flex items-center gap-2"><span className="text-green-500">✓</span> {t.enterprise.pricingBizFeature3}</li>
                <li className="text-sm text-foreground flex items-center gap-2"><span className="text-green-500">✓</span> {t.enterprise.pricingBizFeature4}</li>
                <li className="text-sm text-foreground flex items-center gap-2"><span className="text-green-500">✓</span> {t.enterprise.pricingBizFeature5}</li>
                <li className="text-sm text-foreground flex items-center gap-2"><span className="text-green-500">✓</span> {t.enterprise.pricingBizFeature6}</li>
              </ul>
              <Button className="w-full" asChild>
                <Link href="/enterprise/dashboard">{t.enterprise.pricingCta}</Link>
              </Button>
            </div>
          </div>
        </div>
      </section>

      <section className="py-16">
        <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-2xl font-bold text-foreground text-center mb-12">{t.enterprise.faqTitle}</h2>
          <div className="space-y-4">
            {faqs.map((faq, i) => (
              <details key={i} className="bg-card rounded-2xl border border-border p-4 group">
                <summary className="text-sm font-medium text-foreground cursor-pointer list-none flex items-center justify-between">
                  {t.enterprise[(faq + 'q') as keyof typeof t.enterprise]}
                  <span className="text-muted-foreground group-open:rotate-180 transition-transform">▾</span>
                </summary>
                <p className="text-sm text-muted-foreground mt-3 pt-3 border-t border-border">{t.enterprise[(faq + 'a') as keyof typeof t.enterprise]}</p>
              </details>
            ))}
          </div>
        </div>
      </section>

      <section className="bg-brand-600 py-16">
        <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-2xl font-bold text-white mb-4">{t.enterprise.heroTitle}</h2>
          <p className="text-brand-100 mb-8">{t.enterprise.heroDesc}</p>
          <Button size="lg" variant="secondary" asChild>
            <Link href="/enterprise/dashboard">{t.enterprise.heroCta}</Link>
          </Button>
        </div>
      </section>
    </div>
  );
}
