import React, { useEffect, useState } from 'react';
import { motion } from 'framer-motion';
import { SkipNav, PageTransitionWrapper } from '@/components/common';
import { SEO } from '@/components/seo';
import { SCHEMA_ORG } from '@/constants/seo';
import { Footer } from '@/components/layout/Footer';
import { Button } from '@/components/ui/button';
import { getPageTransitions } from '@/constants';
import { useNavigationDirection } from '@/contexts/NavigationDirectionContext';
import { PREMIUM_EASE, STAGGER_CONTAINER_PREMIUM, STAGGER_ITEM_PREMIUM } from '@/constants/animations';
import { useAnimationSession } from '@/contexts/AnimationSessionContext';
import { useBriefModal } from '@/contexts/BriefModalContext';
import { useIsMobile } from '@/hooks/use-mobile';

// Original high-quality square portrait (1200x1200, ~36KB).
// Preloaded in index.html so the browser starts fetching during HTML parse.
const PORTRAIT_IMAGE = '/assets/portrait-laurynas.webp';

/**
 * About Page - Personal story and vision behind Dainn Editions
 * Optimized for mobile with better spacing and typography
 */
const AboutPage: React.FC = () => {
  const direction = useNavigationDirection();
  const { skipAnimation, markAnimated } = useAnimationSession();
  const { openBriefModal } = useBriefModal();
  const shouldAnimate = !skipAnimation('about-page');
  const isMobile = useIsMobile();
  // Crossfade state — image is invisible until decoded, then fades in
  // over 400ms on top of the warm paper-tone placeholder. No blur, no
  // pixelation — just paper that develops into a portrait.
  const [portraitLoaded, setPortraitLoaded] = useState(false);

  // Mark page as animated after animations complete
  useEffect(() => {
    if (shouldAnimate) {
      const timer = setTimeout(() => {
        markAnimated('about-page');
      }, 1500);
      return () => clearTimeout(timer);
    }
  }, [shouldAnimate, markAnimated]);

  const transitions = getPageTransitions(direction, isMobile);

  // Conditional stagger container variants
  const staggerContainerVariants = shouldAnimate ? STAGGER_CONTAINER_PREMIUM : {
    hidden: { opacity: 1 },
    visible: { opacity: 1 }
  };

  // Conditional stagger item variants
  const staggerItemVariants = shouldAnimate ? STAGGER_ITEM_PREMIUM : {
    hidden: { opacity: 1, y: 0 },
    visible: { opacity: 1, y: 0 }
  };

  return (
    <>
      {/* Advanced SEO with Organization + Person structured data
          Person schema is critical for LLM entity resolution
          ("Who is Dainius Diponas?" / "Who runs Dainn Editions?") */}
      <SEO
        page="about"
        structuredData={[
          SCHEMA_ORG.organization,
          SCHEMA_ORG.founder,
          SCHEMA_ORG.breadcrumbs.about,
        ]}
      />

      <PageTransitionWrapper
        className="page-about"
        transitions={transitions}
      >
        {/* Skip Navigation Link for Accessibility */}
        <SkipNav />

        {/* Main Content */}
        <main role="main" id="main-content" className="min-h-screen bg-background">

          {/* Hero / About Section */}
          <section className="pt-44 sm:pt-28 md:pt-36 lg:pt-44 xl:pt-52 2xl:pt-56 3xl:pt-64 4xl:pt-72 5xl:pt-80 pb-16 md:pb-24 lg:pb-32 xl:pb-40 3xl:pb-48 4xl:pb-56">
            <div className="container mx-auto px-4 sm:px-5 md:px-8 lg:px-12 3xl:px-16 4xl:px-20">

              {/* Editorial Grid: 4:8 Split with sticky anchoring */}
              <div className="grid grid-cols-1 lg:grid-cols-12 gap-y-12 lg:gap-x-16 xl:gap-x-24 3xl:gap-x-32 items-start relative">

                {/* Left Column: Portrait (Anchored & Sticky) */}
                <div className="lg:col-span-4 order-2 lg:order-1 relative">
                  <motion.div
                    initial={shouldAnimate ? { scale: 1.05 } : { scale: 1 }}
                    animate={{ scale: 1 }}
                    transition={{ duration: 1.2, ease: PREMIUM_EASE }}
                    className="relative max-w-xs mx-auto md:max-w-sm lg:max-w-full md:sticky md:top-32 lg:top-32 xl:top-36 3xl:top-40 transition-all duration-500"
                    style={{ willChange: shouldAnimate ? 'transform' : 'auto' }}
                  >
                    {/* Glass Container - Consistent with site aesthetics */}
                    <div
                      className="relative bg-white/10 backdrop-blur-md overflow-hidden shadow-xl"
                      style={{
                        padding: 'var(--glass-stroke)',
                        borderRadius: 'var(--radius-glass-outer)',
                        border: '1px solid rgba(255, 255, 255, 0.2)',
                      }}
                    >
                      {/* Solid paper-tone placeholder — clean square that fills
                          the frame for the 100-300ms before the original
                          high-res 1200×1200 WebP arrives. Same warm tone as the
                          rest of the site, so it reads as intentional, not
                          "loading". The image then crossfades in on top. */}
                      <div
                        className="relative w-full aspect-square overflow-hidden"
                        style={{
                          backgroundColor: 'hsl(var(--surface-alt))',
                          borderRadius: 'var(--radius-glass-inner)',
                        }}
                      >
                        <img
                          src={PORTRAIT_IMAGE}
                          alt="Dainius D. - Founder of Dainn Editions"
                          width={1200}
                          height={1200}
                          decoding="async"
                          loading="eager"
                          fetchPriority="high"
                          onLoad={() => setPortraitLoaded(true)}
                          className="absolute inset-0 w-full h-full object-cover"
                          style={{
                            opacity: portraitLoaded ? 1 : 0,
                            transition: 'opacity 400ms cubic-bezier(0.16, 1, 0.3, 1)',
                          }}
                        />
                      </div>

                      {/* Glass Badge: Dainius D. (Bottom Right) */}
                      <div className="absolute bottom-6 right-6 z-20">
                        <span className="bg-white/10 backdrop-blur-md border border-white/20 px-3 py-1.5 rounded-full text-[11px] font-mono uppercase tracking-wider text-white shadow-[0_4px_12px_rgba(0,0,0,0.1)]">
                          Dainius D.
                        </span>
                      </div>
                    </div>
                  </motion.div>
                </div>

                {/* Right Column: Editorial Text */}
                <div className="lg:col-span-8 order-1 lg:order-2 space-y-8 sm:space-y-10 lg:space-y-12">

                  {/* Headline Group - Cap-height aligned with image top */}
                  <div className="pt-2 lg:pt-0"> {/* Slight mobile adjustment, reset on desktop for alignments */}
                    <motion.div
                      initial={shouldAnimate ? { opacity: 0, y: 20 } : { opacity: 1, y: 0 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ duration: shouldAnimate ? 0.8 : 0, ease: PREMIUM_EASE }}
                      className="space-y-4 sm:space-y-5"
                    >
                      {/* Rubric / Superhead */}
                      <span className="font-mono text-xs tracking-[0.2em] text-text-secondary uppercase block pl-1">
                        About
                      </span>

                      {/* Editorial Headline */}
                      <h1 className="font-headline text-[clamp(2.5rem,5vw,4.5rem)] lg:text-[clamp(3rem,6vw,5.5rem)] xl:text-6xl 3xl:text-7xl text-text-primary leading-[0.9] -ml-[0.05em] tracking-tight">
                        The story behind the thinking
                      </h1>
                    </motion.div>

                    <motion.div
                      className="space-y-8 sm:space-y-10 lg:space-y-12 3xl:space-y-14 mt-8 sm:mt-10 lg:mt-12"
                      initial="hidden"
                      animate="visible"
                      variants={staggerContainerVariants}
                    >
                      {/* Body Text - Unified styling */}
                      <div className="space-y-6 sm:space-y-7 font-mono text-sm sm:text-[15px] lg:text-base 3xl:text-lg text-text-secondary leading-relaxed max-w-prose">
                        <motion.p variants={staggerItemVariants}>
                          I'm obsessed with how human craft and taste can use AI to create something genuinely new. I spent more than a decade in design and advertising, learning how the right visual story can shift how people feel about a brand.
                        </motion.p>
                        <motion.p variants={staggerItemVariants}>
                          But when AI arrived, something clicked.
                        </motion.p>

                        <motion.p variants={staggerItemVariants}>
                          It felt like a reset: a moment where imagination could move further than the tools that came before. I rushed in, poured time and money into models and workflows that became irrelevant within a month. This taught me something important.
                        </motion.p>

                        {/* Pull Quote */}
                        <motion.div
                          variants={staggerItemVariants}
                          className="py-6 lg:py-8 my-8 lg:my-10 relative pl-6 lg:pl-8 border-l-2 border-primary/30"
                        >
                          <blockquote className="font-headline text-2xl sm:text-3xl lg:text-4xl 3xl:text-5xl text-accent-primary leading-tight italic">
                            "Tools are temporary. <br className="hidden lg:block" />Principles are permanent."
                          </blockquote>
                        </motion.div>

                        <motion.p variants={staggerItemVariants}>
                          Technology changes fast, but the fundamentals of human behavior, storytelling, and design stay steady. They are the only solid ground in a world moving this quickly.
                        </motion.p>

                        <motion.p variants={staggerItemVariants}>
                          This is a new age of discovery for creativity. Brands can now explore creative expressions once out of reach and connect through taste, emotion, and story in ways that weren't possible before.
                        </motion.p>

                        <motion.p variants={staggerItemVariants}>
                          This is where I work. At the intersection of human craft and creative technology, helping brands turn new creative possibility into distinctive advantage.
                        </motion.p>
                      </div>
                    </motion.div>
                  </div>

                </div>

              </div>
            </div>
          </section>

          {/* New CTA Section */}
          <section className="py-32 md:py-40 lg:py-48 xl:py-56 2xl:py-60 3xl:py-64 4xl:py-72 5xl:py-80 bg-background">
            <div className="container mx-auto px-4 sm:px-5 md:px-8 lg:px-12 3xl:px-16 4xl:px-20">
              <motion.div
                initial={{ opacity: 0, y: 24 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.7, delay: 0.15, ease: PREMIUM_EASE }}
              >
                {/* Black Brief Card Container - Matching GoodFitCard */}
                <a
                  href="mailto:Dainius@dainn.design?subject=Let's%20talk"
                  data-nav-dark
                  className="group block bg-surface-dark rounded-xl sm:rounded-2xl 3xl:rounded-3xl p-8 sm:p-12 md:p-16 lg:p-24 xl:p-28 3xl:p-36 4xl:p-44 5xl:p-52 text-center relative overflow-hidden cursor-pointer"
                  style={{
                    boxShadow: 'inset 0 2px 4px rgba(255,255,255,0.05), inset 0 -1px 0 rgba(255,255,255,0.02), 0 25px 50px rgba(0,0,0,0.2)',
                  }}
                >
                  {/* Subtle gradient overlay */}
                  <div className="absolute inset-0 bg-gradient-to-br from-white/[0.03] via-transparent to-black/10 pointer-events-none" />

                  {/* Top edge highlight */}
                  <div className="absolute top-0 left-[10%] right-[10%] h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />

                  {/* Content */}
                  <div className="relative z-10 space-y-5 sm:space-y-6 md:space-y-8 3xl:space-y-10 4xl:space-y-12 max-w-xl sm:max-w-2xl 3xl:max-w-3xl 4xl:max-w-4xl mx-auto">
                    {/* Headline */}
                    <h2 className="font-headline text-[clamp(2rem,5vw,3.5rem)] sm:text-[clamp(2.25rem,5.5vw,4rem)] md:text-[clamp(2.5rem,6vw,4.5rem)] 3xl:text-section-3xl 4xl:text-section-4xl 5xl:text-section-5xl text-text-on-dark leading-[1.05]">
                      Have an interesting project in mind?
                    </h2>

                    {/* CTA - changes to accent on card hover */}
                    <div className="pt-4 sm:pt-5 md:pt-6 3xl:pt-8 4xl:pt-10">
                      <Button
                        variant="white-floating"
                        size="default"
                        className="px-6 sm:px-7 md:px-8 3xl:px-10 4xl:px-12 text-sm sm:text-base md:text-lg transition-all duration-500 group-hover:bg-accent-signal group-hover:text-white"
                      >
                        Let's talk
                      </Button>
                    </div>
                  </div>
                </a>
              </motion.div>
            </div>
          </section>

        </main>

        <Footer />
      </PageTransitionWrapper>
    </>
  );
};

export default AboutPage;