'use client'

import { useLanguage } from '@/lib/LanguageContext'
import { WebsiteContent } from '@/lib/content-types'
import PricingSection from './PricingSection'

interface LandingContentProps {
  content: WebsiteContent
}

export default function LandingContent({ content }: LandingContentProps) {
  const { t, isRTL } = useLanguage()

  return (
    <>
      {/* Hero Section */}
      <section className="pt-28 pb-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-primary-50 to-white">
        <div className={`max-w-5xl mx-auto text-center ${isRTL ? 'rtl' : ''}`}>
          <div className="inline-flex items-center px-4 py-2 rounded-full bg-primary-100 text-primary-700 text-sm font-medium mb-8">
            {t('hero_badge')}
          </div>
          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-slate-900 tracking-tight leading-tight">
            {t('hero_title')}{' '}
            <span className="gradient-text">{t('hero_highlight1')}</span>,<br />
            <span className="gradient-text">{t('hero_highlight2')}</span>
          </h1>
          <p className="mt-8 text-xl text-slate-600 max-w-3xl mx-auto leading-relaxed">
            {t('hero_subtitle')}
          </p>
          <div className={`mt-10 flex flex-col sm:flex-row gap-4 justify-center ${isRTL ? 'sm:flex-row-reverse' : ''}`}>
            <a
              href="#pricing"
              className={`inline-flex items-center justify-center px-8 py-4 rounded-xl bg-primary-600 text-white font-medium hover:bg-primary-700 transition-all btn-press shadow-lg shadow-primary-500/30 ${isRTL ? 'flex-row-reverse' : ''}`}
            >
              {t('hero_cta_primary')}
              <svg className={`w-5 h-5 ${isRTL ? 'mr-2 rotate-180' : 'ml-2'}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
              </svg>
            </a>
            <a
              href="#features"
              className="inline-flex items-center justify-center px-8 py-4 rounded-xl bg-white text-slate-700 font-medium hover:bg-slate-50 transition-all border border-slate-200"
            >
              {t('hero_cta_secondary')}
            </a>
          </div>
          <p className="mt-6 text-sm text-slate-500">
            {t('hero_cta_hint')}
          </p>
        </div>
      </section>

      {/* Social Proof */}
      <section className="py-12 px-4 sm:px-6 lg:px-8 border-y border-slate-100">
        <div className="max-w-5xl mx-auto">
          <p className="text-center text-slate-500 text-sm mb-8">
            Vertraut von Lehrkraeften an ueber 50 Schulen
          </p>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 items-center opacity-60 grayscale">
            <div className="text-center text-xl font-semibold text-slate-400">Gymnasium A</div>
            <div className="text-center text-xl font-semibold text-slate-400">Realschule B</div>
            <div className="text-center text-xl font-semibold text-slate-400">Gesamtschule C</div>
            <div className="text-center text-xl font-semibold text-slate-400">Berufsschule D</div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section id="features" className="py-20 px-4 sm:px-6 lg:px-8">
        <div className="max-w-6xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-3xl sm:text-4xl font-bold text-slate-900">
              {t('features_title')}
            </h2>
            <p className="mt-4 text-lg text-slate-600 max-w-2xl mx-auto">
              {t('features_subtitle')}
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {/* AI Feature */}
            <div className="bg-white rounded-2xl p-8 border border-slate-100 hover:border-primary-200 hover:shadow-lg transition-all">
              <div className="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center text-2xl mb-6">
                ✏️
              </div>
              <h3 className="text-xl font-semibold text-slate-900 mb-3">
                {t('feature_ai_title')}
              </h3>
              <p className="text-slate-600">
                {t('feature_ai_desc')}
              </p>
            </div>

            {/* Templates Feature */}
            <div className="bg-white rounded-2xl p-8 border border-slate-100 hover:border-primary-200 hover:shadow-lg transition-all">
              <div className="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center text-2xl mb-6">
                📄
              </div>
              <h3 className="text-xl font-semibold text-slate-900 mb-3">
                {t('feature_templates_title')}
              </h3>
              <p className="text-slate-600">
                {t('feature_templates_desc')}
              </p>
            </div>

            {/* Analytics Feature */}
            <div className="bg-white rounded-2xl p-8 border border-slate-100 hover:border-primary-200 hover:shadow-lg transition-all">
              <div className="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center text-2xl mb-6">
                📊
              </div>
              <h3 className="text-xl font-semibold text-slate-900 mb-3">
                {t('feature_analytics_title')}
              </h3>
              <p className="text-slate-600">
                {t('feature_analytics_desc')}
              </p>
            </div>

            {/* GDPR Feature */}
            <div className="bg-white rounded-2xl p-8 border border-slate-100 hover:border-primary-200 hover:shadow-lg transition-all">
              <div className="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center text-2xl mb-6">
                🔒
              </div>
              <h3 className="text-xl font-semibold text-slate-900 mb-3">
                {t('feature_gdpr_title')}
              </h3>
              <p className="text-slate-600">
                {t('feature_gdpr_desc')}
              </p>
            </div>

            {/* Team Feature */}
            <div className="bg-white rounded-2xl p-8 border border-slate-100 hover:border-primary-200 hover:shadow-lg transition-all">
              <div className="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center text-2xl mb-6">
                👥
              </div>
              <h3 className="text-xl font-semibold text-slate-900 mb-3">
                {t('feature_team_title')}
              </h3>
              <p className="text-slate-600">
                {t('feature_team_desc')}
              </p>
            </div>

            {/* Mobile Feature */}
            <div className="bg-white rounded-2xl p-8 border border-slate-100 hover:border-primary-200 hover:shadow-lg transition-all">
              <div className="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center text-2xl mb-6">
                📱
              </div>
              <h3 className="text-xl font-semibold text-slate-900 mb-3">
                {t('feature_mobile_title')}
              </h3>
              <p className="text-slate-600">
                {t('feature_mobile_desc')}
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* How it Works */}
      <section className="py-20 px-4 sm:px-6 lg:px-8 bg-slate-50">
        <div className="max-w-5xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-3xl sm:text-4xl font-bold text-slate-900">
              {t('how_title')}
            </h2>
            <p className="mt-4 text-lg text-slate-600">
              {t('how_subtitle')}
            </p>
          </div>

          <div className={`grid grid-cols-1 md:grid-cols-3 gap-8 ${isRTL ? 'direction-rtl' : ''}`}>
            {/* Step 1 */}
            <div className="text-center">
              <div className="w-16 h-16 bg-primary-600 text-white rounded-2xl flex items-center justify-center text-2xl font-bold mx-auto mb-6">
                1
              </div>
              <h3 className="text-xl font-semibold text-slate-900 mb-3">
                {t('how_step1_title')}
              </h3>
              <p className="text-slate-600">
                {t('how_step1_desc')}
              </p>
            </div>

            {/* Step 2 */}
            <div className="text-center">
              <div className="w-16 h-16 bg-primary-600 text-white rounded-2xl flex items-center justify-center text-2xl font-bold mx-auto mb-6">
                2
              </div>
              <h3 className="text-xl font-semibold text-slate-900 mb-3">
                {t('how_step2_title')}
              </h3>
              <p className="text-slate-600">
                {t('how_step2_desc')}
              </p>
            </div>

            {/* Step 3 */}
            <div className="text-center">
              <div className="w-16 h-16 bg-primary-600 text-white rounded-2xl flex items-center justify-center text-2xl font-bold mx-auto mb-6">
                3
              </div>
              <h3 className="text-xl font-semibold text-slate-900 mb-3">
                {t('how_step3_title')}
              </h3>
              <p className="text-slate-600">
                {t('how_step3_desc')}
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Testimonial */}
      <section className="py-20 px-4 sm:px-6 lg:px-8">
        <div className="max-w-4xl mx-auto">
          <div className="bg-gradient-to-br from-primary-600 to-primary-700 rounded-3xl p-12 text-white text-center">
            <svg className="w-12 h-12 mx-auto mb-6 opacity-50" fill="currentColor" viewBox="0 0 24 24">
              <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" />
            </svg>
            <blockquote className="text-2xl font-medium leading-relaxed mb-8">
              {content.testimonial.quote}
            </blockquote>
            <div className={`flex items-center justify-center ${isRTL ? 'flex-row-reverse' : ''}`}>
              <div className={`w-12 h-12 bg-white/20 rounded-full flex items-center justify-center text-xl ${isRTL ? 'ml-4' : 'mr-4'}`}>
                👩‍🏫
              </div>
              <div className={isRTL ? 'text-right' : 'text-left'}>
                <div className="font-semibold">{content.testimonial.author}</div>
                <div className="text-primary-200 text-sm">{content.testimonial.role}</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Pricing Section */}
      <PricingSection />

      {/* Trust Section */}
      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-slate-50">
        <div className="max-w-4xl mx-auto text-center">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div>
              <div className="text-3xl font-bold text-primary-600">{t('trust_gdpr')}</div>
              <div className="mt-2 text-slate-600">{t('trust_gdpr_label')}</div>
            </div>
            <div>
              <div className="text-3xl font-bold text-primary-600">{t('trust_trial')}</div>
              <div className="mt-2 text-slate-600">{t('trust_trial_label')}</div>
            </div>
            <div>
              <div className="text-3xl font-bold text-primary-600">{t('trust_made')}</div>
              <div className="mt-2 text-slate-600">{t('trust_made_label')}</div>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ Section */}
      <section className="py-20 px-4 sm:px-6 lg:px-8">
        <div className="max-w-3xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl sm:text-4xl font-bold text-slate-900">
              {t('faq_title')}
            </h2>
          </div>

          <div className="space-y-6">
            {content.faq.slice(0, 4).map((item, index) => (
              <div key={index} className={`bg-white rounded-xl p-6 border border-slate-200 ${isRTL ? 'text-right' : ''}`}>
                <h3 className="text-lg font-semibold text-slate-900 mb-2">
                  {item.question}
                </h3>
                <div className="text-slate-600 space-y-2">
                  {item.answer.map((paragraph, pIndex) => (
                    <p key={pIndex}>{paragraph}</p>
                  ))}
                </div>
              </div>
            ))}
          </div>

          <div className="text-center mt-8">
            <a
              href="/faq"
              className={`text-primary-600 hover:text-primary-700 font-medium inline-flex items-center ${isRTL ? 'flex-row-reverse' : ''}`}
            >
              {t('faq_show_all')}
              <span className={isRTL ? 'mr-1' : 'ml-1'}>{isRTL ? '←' : '→'}</span>
            </a>
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="py-20 px-4 sm:px-6 lg:px-8 bg-slate-900">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-3xl sm:text-4xl font-bold text-white mb-6">
            {t('cta_title')}
          </h2>
          <p className="text-xl text-slate-300 mb-10">
            {t('cta_subtitle')}
          </p>
          <a
            href="#pricing"
            className={`inline-flex items-center justify-center px-10 py-4 rounded-xl bg-white text-slate-900 font-semibold hover:bg-slate-100 transition-all btn-press shadow-lg ${isRTL ? 'flex-row-reverse' : ''}`}
          >
            {t('cta_button')}
            <svg className={`w-5 h-5 ${isRTL ? 'mr-2 rotate-180' : 'ml-2'}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
            </svg>
          </a>
        </div>
      </section>
    </>
  )
}