// app/(home)/page.tsx
'use client';

import * as React from 'react';

// Import layout components from our new shared `ui` library
import { Navbar } from '@workspace/ui/components/layout';
import { Footer } from '@workspace/ui/components/layout';
import { Container } from '@workspace/ui/components/layout';
import { AnimatedSection } from '@workspace/ui/components/animate-ui/section';
// import { ScrollProgressBar } from '@workspace/ui/components/animate-ui/scroll-progress';
// import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@workspace/ui/components/animate-ui/collapsible';
import { motion, useScroll, useTransform } from 'motion/react';
// import { ParallaxLayers } from '@workspace/ui/components/animate-ui/parallax-layers';

// Import the useTone hook to access the global tone setting
import { useTone } from '@workspace/ui/hooks/use-tone';

// Import Lucide icons for the value proposition section
import { WrenchIcon, LockIcon, CloudOffIcon, ZapIcon } from 'lucide-react';

// Import UI components from our shared library
import { Button } from '@workspace/ui/components/ui';
import Image from 'next/image';

// Import new content components
import { MetricsKPI } from '@workspace/ui/components/content';
// import { Steps } from '@workspace/ui/components/content';
import { TrustSection } from '@workspace/ui/components/content';
// import { FAQAccordion } from '@workspace/ui/components/interactive';
import { FinalCTASection } from '@workspace/ui/components/content';
import { CostReductionChart } from '@workspace/ui/components/content/cost-reduction-chart';

export default function HomePage() {
  const { tone } = useTone(); // Access the current tone

  // Content definitions based on tone
  const heroHeadline =
    tone === 'direct'
      ? 'Own your infrastructure. Slash your bill.'
      : 'Cut waste, keep performance.';
  const heroSubcopyLine1 =
    tone === 'direct'
      ? 'Your hosting provider is fucking you. Cloud rent bleeds $25k–$500k/mo.'
      : 'Cloud rent is bleeding your budget dry.';
  const heroSubcopyLine2 =
    tone === 'direct'
      ? 'Own the hardware. Keep the performance. Kill the waste.'
      : 'Own your stack. Colocate it. Keep the performance, ditch the waste.';

  // Core value propositions based on core selling points
  const coreValuePropositions = [
    {
      title: 'Stop getting scammed',
      description:
        'Cloud providers are bleeding you dry. We help you cut costs by up to 65% by moving away from endless rental fees to a one-time hardware purchase plus low colocation costs.',
    },
    {
      title: 'Keep your existing stack',
      description:
        "We don't force you to replace your tools. Instead, we integrate what works and automate the boring parts, so your team can focus on what they do best.",
    },
    {
      title: 'Work with your actual workflows',
      description:
        'We embed with your team, map your real processes, and build automation around how you actually work—not how consultants think you should work.',
    },
  ];

  // Benefits of owned infrastructure
  const benefits = [
    {
      title: 'Ownership',
      description:
        'Own your hardware and data. No more vendor lock-in or unpredictable pricing.',
    },
    {
      title: 'Performance',
      description:
        'Direct-attached storage and local networks outperform virtualized cloud infrastructure.',
    },
    {
      title: 'Privacy',
      description:
        'Your data never leaves your control. AI models run locally with zero data leakage.',
    },
    {
      title: 'Cost Savings',
      description:
        "Break-even in under 12 months. After that, it's all savings.",
    },
  ];

  // Trust factors
  const trustItems = [
    {
      icon: <LockIcon className="size-5" />,
      text: 'Your data. Your hardware. Your rules.',
    },
    {
      icon: <ZapIcon className="size-5" />,
      text: 'AI-native, privacy-first. No third-party AI.',
    },
    {
      icon: <CloudOffIcon className="size-5" />,
      text: 'No license fees. You own it, forever.',
    },
    {
      icon: <WrenchIcon className="size-5" />,
      text: 'Ultimate freedom. Any tool, any stack, reshaped to work together for your unique use-case.',
    },
  ];

  // Hero right panel scroll-linked fade
  const heroRef = React.useRef<HTMLDivElement | null>(null);
  const { scrollYProgress: heroProgress } = useScroll({
    target: heroRef,
    offset: ['start end', 'end start'],
  });
  const heroPanelOpacity = useTransform(heroProgress, [0, 1], [1, 0.96]);
  const heroPanelY = useTransform(heroProgress, [0, 1], [0, 8]);

  return (
    <div className="flex flex-col min-h-screen">
      <Navbar />

      {/* Hero Section (banded, two-column, grid background) */}
      <AnimatedSection className="bg-grid-dark border-b border-muted">
        <Container maxWidth="10xl">
          <div
            ref={heroRef}
            className="grid grid-cols-1 md:grid-cols-2 gap-16 items-center py-20 md:py-28"
          >
            <div className="text-left">
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight tracking-tight text-balance">
                {heroHeadline}
              </h1>
              <p className="mt-6 text-lg md:text-xl text-muted-foreground max-w-xl">
                {heroSubcopyLine1}
              </p>
              <p className="mt-3 text-lg md:text-xl text-muted-foreground max-w-xl">
                {heroSubcopyLine2}
              </p>
              <div className="mt-10 flex flex-col sm:flex-row gap-4">
                <Button size="lg" variant="default" asChild>
                  <a href="/contact">Book Architecture Call</a>
                </Button>
                <Button size="lg" variant="outline" asChild>
                  <a href="/pricing">Run My Numbers</a>
                </Button>
              </div>
              {/* KPI Metrics */}
              <div className="mt-14 grid grid-cols-3 gap-6 max-w-xl">
                <MetricsKPI value="$350/mo" label="after year 1" />
                <MetricsKPI value="65%" label="avg. cost ↓" />
                <MetricsKPI value="12mo" label="break-even" />
              </div>
            </div>
            <motion.div
              className="relative h-[260px] md:h-[360px] lg:h-[420px] ring-1 ring-border/50"
              style={{ opacity: heroPanelOpacity, y: heroPanelY }}
            >
              <div className="absolute inset-0 rounded-sm border bg-card/50 backdrop-blur-sm" />
              {/* Optional decorative hero art (drop /hero/home-hero-art.webp in public) */}
              <Image
                src="/hero/home-hero-art.webp"
                alt=""
                aria-hidden
                fill
                sizes="(max-width: 768px) 100vw, 50vw"
                className="object-cover rounded-sm opacity-35"
                priority={false}
              />
              <div className="absolute inset-0 bg-stripes-dark rounded-sm opacity-40" />
            </motion.div>
          </div>
        </Container>
      </AnimatedSection>

      {/* Core Value Propositions - Vertical List */}
      <AnimatedSection className="py-20 border-b border-muted/80">
        <Container maxWidth="10xl">
          <div className="space-y-16">
            <h2 className="text-4xl font-bold">Our Approach</h2>
            {coreValuePropositions.map((item, index) => (
              <a
                key={index}
                href="#"
                className="group block border-b border-muted/80 pb-8 transition-all duration-300 hover:border-foreground/70 last:border-0"
              >
                <div className="flex justify-between items-start">
                  <div>
                    <div className="text-4xl font-light text-muted-foreground mb-4">
                      {index < 9 ? `0${index + 1}` : index + 1}
                    </div>
                    <h3 className="text-4xl md:text-5xl font-bold transition-colors duration-300 group-hover:text-foreground/90">
                      {item.title}
                      <span className="ml-3 inline-block opacity-0 -translate-x-1 group-hover:opacity-100 group-hover:translate-x-0 transition">
                        →
                      </span>
                    </h3>
                    <p className="mt-6 text-xl text-muted-foreground max-w-3xl transition-colors duration-300 group-hover:text-foreground/80">
                      {item.description}
                    </p>
                  </div>
                </div>
              </a>
            ))}
          </div>
        </Container>
      </AnimatedSection>

      {/* Cost Reduction Chart */}
      <AnimatedSection className="py-20 bg-muted/30 border-b border-muted/80">
        <Container maxWidth="10xl">
          <CostReductionChart />
        </Container>
      </AnimatedSection>

      {/* Benefits Section */}
      <AnimatedSection className="py-20 border-b border-muted">
        <Container maxWidth="10xl">
          <div className="text-center mb-20">
            <h2 className="text-4xl font-bold">Why Owned Infrastructure?</h2>
            <p className="mt-6 text-xl text-muted-foreground max-w-3xl mx-auto">
              The benefits of moving from cloud rental to hardware ownership
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-16">
            {benefits.map((benefit, index) => (
              <div key={index} className="space-y-6">
                <div className="text-5xl font-light text-muted-foreground">
                  {index < 9 ? `0${index + 1}` : index + 1}
                </div>
                <h3 className="text-3xl font-bold">{benefit.title}</h3>
                <p className="text-xl text-muted-foreground">
                  {benefit.description}
                </p>
              </div>
            ))}
          </div>
        </Container>
      </AnimatedSection>

      {/* Trust Section */}
      <AnimatedSection className="py-20 border-b border-muted">
        <Container maxWidth="10xl">
          <TrustSection
            items={trustItems}
            title="Your Data, Your Rules"
            description="We move your business off the cloud to custom servers you own and control. No more paying rent forever—colocate your hardware in vetted, local data centers for low ongoing costs with full ownership."
          />
        </Container>
      </AnimatedSection>

      {/* Final CTA */}
      <AnimatedSection className="py-20 border-t border-muted">
        <Container maxWidth="10xl">
          <FinalCTASection
            title="Ready to cut your cloud bill?"
            description="Book a free architecture call to see how much you can save."
            primaryCtaText="Book Architecture Call"
            primaryCtaHref="/contact"
            secondaryCtaText="Download Blueprint"
            secondaryCtaHref="/download-blueprint" // Placeholder
          />
        </Container>
      </AnimatedSection>

      <Footer />
    </div>
  );
}