"use client";

import React, { useRef, useEffect } from "react";
import Link from "next/link";
import { useI18n } from "@/lib/i18n/context";
import {
  ArrowRight,
  Smartphone,
  ArrowUpRight,
} from "lucide-react";
import gsap from "gsap";
import { HeroScannerShowcase } from "./HeroScannerShowcase";

export function HeroSection() {
  const { language } = useI18n();
  const isDe = language === "de";

  // GSAP animation refs
  const heroRef = useRef<HTMLDivElement>(null);
  const headlineRef = useRef<HTMLHeadingElement>(null);
  const subtextRef = useRef<HTMLParagraphElement>(null);
  const ctaGroupRef = useRef<HTMLDivElement>(null);
  const statsStripRef = useRef<HTMLDivElement>(null);
  const dropzoneCardRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const ctx = gsap.context(() => {
      const tl = gsap.timeline({ defaults: { ease: "power3.out" } });

      tl.from(headlineRef.current, {
        y: 30,
        opacity: 0,
        duration: 0.8,
        delay: 0.1,
      })
        .from(
          subtextRef.current,
          {
            y: 20,
            opacity: 0,
            duration: 0.6,
          },
          "-=0.4"
        )
        .from(
          ctaGroupRef.current,
          {
            y: 15,
            opacity: 0,
            duration: 0.5,
          },
          "-=0.3"
        )
        .from(
          statsStripRef.current,
          {
            y: 15,
            opacity: 0,
            duration: 0.5,
          },
          "-=0.3"
        )
        .from(
          dropzoneCardRef.current,
          {
            scale: 0.96,
            opacity: 0,
            duration: 0.8,
          },
          "-=0.6"
        );
    }, heroRef);

    return () => ctx.revert();
  }, []);

  return (
    <section
      ref={heroRef}
      className="w-full bg-white relative pt-6 pb-14 sm:pt-10 md:pb-20 overflow-hidden"
    >
      <div className="max-w-[1440px] mx-auto px-4 sm:px-8 border-x border-[#E2E8F0] relative">
        {/* 2-Column Grid: Headline & Interactive Scanner Showcase */}
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-12 items-center">
          
          {/* Left Column: Architectural Value Proposition */}
          <div className="lg:col-span-5 space-y-6">
            <h1
              ref={headlineRef}
              className="font-display text-[2.7rem] sm:text-5xl lg:text-[4rem] font-bold tracking-tightest text-black leading-[1.02]"
            >
              {isDe ? (
                <>
                  Nie wieder Belege abtippen. <br />
                  <span className="text-[#475569]">Ein Foto. Fertige Excel</span> in Sekunden.
                </>
              ) : (
                <>
                  Stop typing receipts by hand. <br />
                  <span className="text-[#475569]">One photo. Finished Excel</span> in seconds.
                </>
              )}
            </h1>

            <p
              ref={subtextRef}
              className="font-sans text-base sm:text-lg text-[#444749] max-w-xl leading-relaxed"
            >
              {isDe
                ? "Ein Foto deines Belegs genügt – die KI liest Händler, Datum, Artikel und Steuern und rechnet jede Summe nach. Was früher stundenlanges Abtippen war, ist jetzt in Sekunden erledigt: eine fehlerfreie, fertige Excel-Tabelle."
                : "One photo of your receipt is enough – the AI reads merchant, date, line items and taxes, and double-checks every total. What used to mean hours of manual typing is now a finished, error-free Excel spreadsheet in seconds."}
            </p>

            {/* Quick Action Buttons */}
            <div ref={ctaGroupRef} className="flex flex-wrap items-center gap-3.5 pt-1">
              <Link
                href="/dashboard"
                className="flex items-center gap-2 px-6 py-3.5 bg-black text-white font-mono text-xs uppercase tracking-caps hover:bg-[#334155] transition-colors font-medium shadow-sm"
              >
                <span>{isDe ? "Zum Live Dashboard" : "Open Live Dashboard"}</span>
                <ArrowRight className="w-4 h-4" />
              </Link>
            </div>

            <a
              href="#app"
              className="flex items-center justify-between gap-4 border-2 border-black bg-[#EEF4FC] px-4 py-3 text-black hover:bg-black hover:text-white transition-colors group"
            >
              <span className="flex items-center gap-2.5 font-mono text-xs uppercase tracking-caps font-bold">
                <Smartphone className="w-4 h-4" />
                {isDe ? "Mobile App Warteliste" : "Mobile App Waitlist"}
              </span>
              <span className="flex items-center gap-1.5 font-mono text-[10px] uppercase tracking-wider">
                {isDe ? "Frühzeitiger Zugang" : "Get Early Access"}
                <ArrowUpRight className="w-3.5 h-3.5 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
              </span>
            </a>

            {/* Trust Badges Strip */}
            <div
              ref={statsStripRef}
              className="pt-3 border-t border-[#E2E8F0] flex flex-wrap gap-x-5 gap-y-2 font-mono text-[11px] uppercase tracking-wider text-[#475569]"
            >
              <span className="text-black font-semibold">
                {isDe ? "✓ Jede Summe nachgerechnet" : "✓ Every math total verified"}
              </span>
              <span>
                {isDe ? "• 15 Belege gratis ohne Login" : "• 15 receipts free without sign-up"}
              </span>
              <span>
                {isDe ? "• Export als Excel oder CSV" : "• Export as Excel or CSV"}
              </span>
            </div>
          </div>

          {/* Right Column: Interactive AI Scanner & Dual-Sheet Excel Showcase */}
          <div ref={dropzoneCardRef} className="lg:col-span-7 w-full">
            <HeroScannerShowcase />
          </div>

        </div>
      </div>
    </section>
  );
}
