'use client';
import React, { useEffect, useRef, useState } from 'react';
import Link from 'next/link';
import { useLanguage } from '@client/contexts/LanguageContext';

function useInView(threshold = 0.15) {
  const ref = useRef<HTMLDivElement>(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    const el = ref?.current;
    if (!el) return;
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setInView(true); obs.disconnect(); } }, { threshold });
    obs?.observe(el);
    return () => obs?.disconnect();
  }, [threshold]);
  return { ref, inView };
}

export default function AboutPage() {
  const { t } = useLanguage();
  const missionRef = useInView();
  const timelineRef = useInView(0.1);
  const valuesRef = useInView(0.1);

  const timeline = [
    { year: '2021', title: t('landing.about.timeline.2021.title', 'The problem'), desc: t('landing.about.timeline.2021.desc', 'Arjun and Lena watch a family-run restaurant lose 40% of phone orders during Friday dinner rush. The idea is born.') },
    { year: '2022', title: t('landing.about.timeline.2022.title', 'First prototype'), desc: t('landing.about.timeline.2022.desc', 'Built a voice AI that could take pizza orders. Tested with 3 local restaurants in Berlin. 94% order accuracy from day one.') },
    { year: '2023', title: t('landing.about.timeline.2023.title', 'Seed funding'), desc: t('landing.about.timeline.2023.desc', 'Raised $4.2M seed round. Expanded to 200 restaurants across Europe. Launched WhatsApp and SMS chat agents.') },
    { year: '2024', title: t('landing.about.timeline.2024.title', 'Global expansion'), desc: t('landing.about.timeline.2024.desc', 'Crossed 1,000 restaurant milestone. Launched in North America and Southeast Asia. Added 15 language support.') },
    { year: '2025', title: t('landing.about.timeline.2025.title', 'Series A'), desc: t('landing.about.timeline.2025.desc', 'Raised $18M Series A. Launched multi-branch management, advanced analytics, and enterprise tier.') },
    { year: '2026', title: t('landing.about.timeline.2026.title', 'Today'), desc: t('landing.about.timeline.2026.desc', '2,400+ restaurants. 18M+ orders processed. Building the future of restaurant-customer communication.') },
  ];

  const values = [
    { icon: '🎯', title: t('landing.about.values.0.title', 'Accuracy over speed'), desc: t('landing.about.values.0.desc', "We'd rather take an extra second to get the order right than rush and get it wrong. Every missed item costs a restaurant real money.") },
    { icon: '🤝', title: t('landing.about.values.1.title', 'Restaurants first'), desc: t('landing.about.values.1.desc', 'Every feature we build starts with a real restaurant problem. We talk to operators weekly, not quarterly.') },
    { icon: '🌍', title: t('landing.about.values.2.title', 'Language is not a barrier'), desc: t('landing.about.values.2.desc', 'A restaurant in Tokyo and one in São Paulo deserve the same quality AI. We invest heavily in multilingual accuracy.') },
    { icon: '🔒', title: t('landing.about.values.3.title', 'Privacy by design'), desc: t('landing.about.values.3.desc', 'Customer data belongs to the restaurant, not us. We never sell data, never train on customer conversations without consent.') },
  ];

  return (
    <>
      {/* Hero */}
      <section className="relative py-20 sm:py-24 overflow-hidden">
        <div className="absolute inset-0 -z-10">
          <div className="absolute top-0 right-0 w-64 sm:w-96 h-64 sm:h-96 bg-orange-400/15 dark:bg-orange-500/8 rounded-full blur-3xl" />
          <div className="absolute bottom-0 left-0 w-48 sm:w-64 h-48 sm:h-64 bg-teal-400/10 dark:bg-teal-500/6 rounded-full blur-3xl" />
        </div>
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <p className="text-xs font-semibold text-orange-500 uppercase tracking-widest mb-4">{t('landing.about.hero.badge', 'Our story')}</p>
          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-white mb-6 leading-tight">
            {t('landing.about.hero.title_p1', 'We built the AI we wished')}<br />
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-500 to-teal-500">{t('landing.about.hero.title_p2', 'restaurants had.')}</span>
          </h1>
          <p className="text-lg sm:text-xl text-gray-500 dark:text-gray-400 leading-relaxed max-w-2xl mx-auto">
            {t('landing.about.hero.subtitle', "RestroAgent started when two engineers watched a great restaurant lose customers because no one could answer the phone. That shouldn't happen in 2026.")}
          </p>
        </div>
      </section>

      {/* Mission & Vision */}
      <section className="py-16 sm:py-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div ref={missionRef?.ref} className={`grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8 transition-all duration-700 ${missionRef?.inView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
          <div className="p-6 sm:p-8 rounded-2xl bg-gradient-to-br from-orange-50 to-amber-50 dark:from-orange-950/30 dark:to-amber-950/20 border border-orange-100 dark:border-orange-900/30 hover:shadow-xl hover:shadow-orange-100/50 dark:hover:shadow-orange-900/20 hover:-translate-y-1 transition-all duration-300">
            <div className="text-3xl mb-4">🎯</div>
            <h2 className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-3">{t('landing.about.mission.title', 'Our Mission')}</h2>
            <p className="text-gray-600 dark:text-gray-400 leading-relaxed text-sm sm:text-base">
              {t('landing.about.mission.desc', 'To make every restaurant — from a 10-seat family bistro to a 200-location chain — capable of delivering perfect customer communication at any scale, without hiring more staff.')}
            </p>
          </div>
          <div className="p-6 sm:p-8 rounded-2xl bg-gradient-to-br from-teal-50 to-blue-50 dark:from-teal-950/30 dark:to-blue-950/20 border border-teal-100 dark:border-teal-900/30 hover:shadow-xl hover:shadow-teal-100/50 dark:hover:shadow-teal-900/20 hover:-translate-y-1 transition-all duration-300">
            <div className="text-3xl mb-4">🔭</div>
            <h2 className="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-3">{t('landing.about.vision.title', 'Our Vision')}</h2>
            <p className="text-gray-600 dark:text-gray-400 leading-relaxed text-sm sm:text-base">
              {t('landing.about.vision.desc', 'A world where no restaurant ever misses an order, a booking, or a customer question — because intelligent AI handles every interaction with the warmth and accuracy of your best employee.')}
            </p>
          </div>
        </div>
      </section>

      {/* Timeline */}
      <section className="py-16 sm:py-20 bg-gray-50 dark:bg-[#0d0f14]">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div ref={timelineRef?.ref} className={`transition-all duration-700 ${timelineRef?.inView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
            <div className="text-center mb-12 sm:mb-16">
              <p className="text-xs font-semibold text-orange-500 uppercase tracking-widest mb-3">{t('landing.about.journey.badge', 'Our journey')}</p>
              <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white">{t('landing.about.journey.title', 'From idea to industry')}</h2>
            </div>
            <div className="space-y-0">
              {timeline?.map((item, i) => (
                <div key={i} className="flex gap-4 sm:gap-6 group" style={{ transitionDelay: `${i * 80}ms` }}>
                  <div className="flex flex-col items-center">
                    <div className="w-10 sm:w-12 h-10 sm:h-12 rounded-xl bg-white dark:bg-gray-800 border-2 border-orange-200 dark:border-orange-800 flex items-center justify-center text-[10px] sm:text-xs font-bold text-orange-500 shadow-sm group-hover:border-orange-400 group-hover:shadow-orange-100 dark:group-hover:shadow-orange-900/20 group-hover:scale-105 transition-all duration-300 flex-shrink-0">
                      {item?.year}
                    </div>
                    {i < timeline?.length - 1 && <div className="w-0.5 h-10 sm:h-12 bg-gradient-to-b from-orange-200 to-orange-100 dark:from-orange-800 dark:to-orange-900 mt-1" />}
                  </div>
                  <div className="pb-10 sm:pb-12 pt-2">
                    <h3 className="font-bold text-gray-900 dark:text-white mb-1 text-sm sm:text-base">{item.title}</h3>
                    <p className="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">{item.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Values */}
      <section className="py-20 sm:py-24 bg-gray-50 dark:bg-[#0d0f14]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div ref={valuesRef?.ref} className={`transition-all duration-700 ${valuesRef?.inView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
            <div className="text-center mb-12 sm:mb-16">
              <p className="text-xs font-semibold text-orange-500 uppercase tracking-widest mb-3">{t('landing.about.values.badge', 'What we believe')}</p>
              <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white">{t('landing.about.values.title', 'Our values')}</h2>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-5 sm:gap-6">
              {values?.map((v, i) => (
                <div key={i} className="flex gap-4 sm:gap-5 p-5 sm:p-6 rounded-2xl bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 hover:shadow-lg hover:shadow-black/5 dark:hover:shadow-black/20 hover:-translate-y-1 transition-all duration-300" style={{ transitionDelay: `${i * 80}ms` }}>
                  <div className="text-2xl sm:text-3xl flex-shrink-0">{v?.icon}</div>
                  <div>
                    <h3 className="font-bold text-gray-900 dark:text-white mb-2 text-sm sm:text-base">{v.title}</h3>
                    <p className="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">{v.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-20 sm:py-24 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 className="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-4">{t('landing.about.cta.title', 'Join us in reshaping restaurant communication')}</h2>
        <p className="text-gray-500 dark:text-gray-400 mb-8">{t('landing.about.cta.subtitle', "Whether you're a restaurant owner or a talented engineer — we'd love to hear from you.")}</p>
        <div className="flex flex-col sm:flex-row flex-wrap justify-center gap-4">
          <Link href="/register" className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-xl bg-orange-500 hover:bg-orange-600 text-white font-semibold text-sm shadow-lg shadow-orange-500/25 hover:shadow-orange-500/40 hover:-translate-y-0.5 transition-all duration-200 active:scale-95">
            {t('landing.about.cta.start_trial', 'Start Free Trial')}
          </Link>
          <Link href="/contact" className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-xl border border-gray-200 dark:border-gray-700 text-gray-700 dark:text-gray-300 font-semibold text-sm hover:border-teal-300 dark:hover:border-teal-700 hover:text-teal-600 dark:hover:text-teal-400 hover:-translate-y-0.5 transition-all duration-200">
            {t('landing.about.cta.contact_us', 'Contact Us')}
          </Link>
        </div>
      </section>
    </>
  );
}