import { buildUrl } from '../utils/api';
import SEO from '../components/common/SEO';
import { useSettings } from '../hooks/useSettings';
import DotGridBackground from '../components/layout/DotGridBackground';
import HeroSection from '../components/hero/HeroSection';
import AudiencePathways from '../components/home/AudiencePathways';
import IntroVideoSection from '../components/home/IntroVideoSection';
import ExecutiveSummary from '../components/executive/ExecutiveSummary';
import FeaturedHubSection from '../components/home/FeaturedHubSection';
import CollapsibleHomeSection from '../components/home/CollapsibleHomeSection';
import { Suspense, lazy } from 'react';
import { motion, useReducedMotion } from 'framer-motion';
import SkeletonCard from '../components/common/SkeletonCard';
import AgentFeedSidebar from '../components/agent/AgentFeedSidebar';
import ContactForm from '../components/contact/ContactForm';
import CTASection from '../components/cta/CTASection';
import SystemIdentityPanel from '../components/layout/SystemIdentityPanel';

const FractalBlueprint = lazy(() => import('../components/fractal/FractalBlueprint'));
const SkillsSection = lazy(() => import('../components/skills/SkillsSection'));
const ExperienceSection = lazy(() => import('../components/experience/ExperienceSection'));
const LeadershipSection = lazy(() => import('../components/leadership/LeadershipSection'));
const LinksSection = lazy(() => import('../components/links/LinksSection'));
const RealEstateSection = lazy(() => import('../components/realestate/RealEstateSection'));
const AboutProfileDetails = lazy(() => import('../components/about/AboutProfileDetails'));

const PortfolioPage = ({ onVelocityChange }) => {
  const { settings } = useSettings();
  const shouldReduceMotion = useReducedMotion();

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1,
        delayChildren: 0.3
      }
    }
  };

  const itemVariants = {
    hidden: { opacity: 0, y: shouldReduceMotion ? 0 : 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.4,
        ease: [0.4, 0, 0.2, 1]
      }
    }
  };

  return (
    <div className="min-h-screen bg-cyber-black text-white font-mono selection:bg-cyber-emerald/30">
      <SEO path="/" />
      <DotGridBackground />

      <div className="relative z-10">
        <div className="flex flex-col lg:flex-row max-w-[100rem] mx-auto">
          {/* Main content scrollable area */}
          <div className="flex-1 overflow-hidden">
            <HeroSection onVelocityChange={onVelocityChange} />
            <AudiencePathways />
            <IntroVideoSection />
            <ExecutiveSummary />
            <FeaturedHubSection />

            <motion.div
              variants={containerVariants}
              initial="hidden"
              whileInView="visible"
              viewport={{ once: true, margin: '-50px' }}
            >
              <CollapsibleHomeSection
                eyebrow="Proof of work"
                title="Project Graph"
                description="Explore the interactive map of projects, systems, and relationships when you want a deeper technical scan."
                viewPath="/software/fractal-blueprint"
                defaultOpen={false}
                variants={itemVariants}
              >
                <Suspense fallback={<div className="p-8 h-96"><SkeletonCard variant="graph" /></div>}>
                  <FractalBlueprint />
                </Suspense>
              </CollapsibleHomeSection>
              <CollapsibleHomeSection
                eyebrow="Capability map"
                title="Technical Matrix"
                description="Review the skills and technical areas that support the advisory, product, and engineering work."
                viewPath="/software/technical-matrix"
                defaultOpen={false}
                variants={itemVariants}
              >
                <Suspense fallback={<div className="p-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"><SkeletonCard /><SkeletonCard /><SkeletonCard /></div>}>
                  <SkillsSection />
                </Suspense>
              </CollapsibleHomeSection>
              <CollapsibleHomeSection
                eyebrow="Career proof"
                title="Professional Trajectory"
                description="Open the role timeline and operating history."
                viewPath="/software/professional-trajectory"
                defaultOpen={false}
                variants={itemVariants}
              >
                <Suspense fallback={<div className="p-8 space-y-4"><SkeletonCard /><SkeletonCard /></div>}>
                  <ExperienceSection />
                </Suspense>
              </CollapsibleHomeSection>
              <CollapsibleHomeSection
                eyebrow="Leadership"
                title="Leadership Library"
                description="Browse the leadership reading list and operating ideas that inform the management philosophy."
                viewPath="/leadership/books"
                defaultOpen={false}
                variants={itemVariants}
              >
                <Suspense fallback={<div className="p-8 grid grid-cols-1 md:grid-cols-2 gap-6"><SkeletonCard /><SkeletonCard /></div>}>
                  <LeadershipSection />
                </Suspense>
              </CollapsibleHomeSection>

              {/* Injected Mobile/Tablet Feed */}
              <motion.div variants={itemVariants} className="xl:hidden px-6 py-12 border-t border-cyber-indigo/10">
                <h3 className="font-mono text-xs text-cyber-emerald font-bold uppercase tracking-widest mb-6 flex items-center gap-2">
                  <span className="w-2 h-2 rounded-full bg-cyber-emerald motion-safe:animate-pulse"></span> Agent Observation Feed
                </h3>
                <AgentFeedSidebar height="300px" />
              </motion.div>

              <CollapsibleHomeSection
                eyebrow="Resources"
                title="External Resources"
                description="Open the curated resource and link collection when you need a broader index."
                viewPath="/links"
                defaultOpen={false}
                variants={itemVariants}
              >
                <Suspense fallback={<div className="p-8 grid grid-cols-2 md:grid-cols-4 gap-4"><SkeletonCard /><SkeletonCard /></div>}>
                  <LinksSection />
                </Suspense>
              </CollapsibleHomeSection>
              <CollapsibleHomeSection
                eyebrow="Real estate"
                title="Real Estate"
                description="Preview the real estate tools, listing context, and property-focused workflows."
                viewPath="/real-estate"
                defaultOpen={false}
                variants={itemVariants}
              >
                <Suspense fallback={<div className="p-8 grid grid-cols-1 md:grid-cols-2 gap-6"><SkeletonCard /><SkeletonCard /></div>}>
                  <RealEstateSection />
                </Suspense>
              </CollapsibleHomeSection>
              <CollapsibleHomeSection
                eyebrow="Personal context"
                title="Interests"
                description="Open a lighter section with personal interests and context."
                viewPath="/about"
                defaultOpen={false}
                variants={itemVariants}
              >
                <Suspense fallback={<div className="p-8 h-48"><SkeletonCard /></div>}>
                  <AboutProfileDetails />
                </Suspense>
              </CollapsibleHomeSection>
            </motion.div>
            { (settings.resume_primary || settings.resume_secondary) && (
              <motion.div
                initial={{ opacity: 0, y: shouldReduceMotion ? 0 : 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true, margin: '-50px' }}
                transition={{ duration: 0.4, ease: [0.4, 0, 0.2, 1] }}
                className="px-6 py-8 border-t border-cyber-indigo/10"
              >
                <h3 className="font-mono text-xs text-cyber-indigo font-bold uppercase tracking-widest mb-6 flex items-center gap-2">
                  <span className="w-2 h-2 rounded-full bg-cyber-indigo motion-safe:animate-pulse"></span> Documents
                </h3>
                <div className="flex flex-wrap gap-4">
                  {settings.resume_primary && (
                    <motion.a
                      whileTap={shouldReduceMotion ? {} : { scale: 0.98 }}
                      className="inline-flex items-center justify-center min-h-[2.75rem] px-6 py-2 bg-cyber-indigo/20 border border-cyber-indigo/30 rounded font-mono text-[0.625rem] uppercase tracking-wider text-cyber-indigo hover:bg-cyber-indigo/30 hover:border-cyber-indigo/50 transition-all"
                      href={buildUrl(settings.resume_primary)}
                      target="_blank"
                      rel="noreferrer"
                    >
                      Download Resume (Primary)
                    </motion.a>
                  )}
                  {settings.resume_secondary && (
                    <motion.a
                      whileTap={shouldReduceMotion ? {} : { scale: 0.98 }}
                      className="inline-flex items-center justify-center min-h-[2.75rem] px-6 py-2 bg-cyber-emerald/10 border border-cyber-emerald/20 rounded font-mono text-[0.625rem] uppercase tracking-wider text-cyber-emerald hover:bg-cyber-emerald/20 hover:border-cyber-emerald/30 transition-all"
                      href={buildUrl(settings.resume_secondary)}
                      target="_blank"
                      rel="noreferrer"
                    >
                      Download Resume (Secondary)
                    </motion.a>
                  )}
                </div>
              </motion.div>
            )}
            <ContactForm />
            <CTASection />
          </div>

          {/* Right Sidebar - hidden on mobile/tablet */}
          <aside className="hidden xl:block w-96 sticky top-11 h-[calc(100vh-2rem)] p-6 pt-12">
            <AgentFeedSidebar />
            <SystemIdentityPanel />
          </aside>
        </div>
      </div>
    </div>
  );
};

export default PortfolioPage;