// 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, Section, Grid } from '@workspace/ui/components/layout';

// 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 { DollarSignIcon, WrenchIcon, MapIcon, LockIcon, CloudOffIcon, ZapIcon } from 'lucide-react';
import { PlaceholderIcon } from '@workspace/ui/components/icons';

// Import UI components from our shared library
import { Button } from '@workspace/ui/components/ui';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@workspace/ui/components/ui';

// Import new content components
import { MetricsKPI } from '@workspace/ui/components/content';
import { LogosMarquee } from '@workspace/ui/components/content';
import { Steps } from '@workspace/ui/components/content';
import { FeatureCard, CaseStudyCard } from '@workspace/ui/components/content/cards';
import { TrustSection } from '@workspace/ui/components/content';
import { FAQAccordion } from '@workspace/ui/components/interactive';
import { FinalCTASection } from '@workspace/ui/components/content';

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.";

  const valuePropositions = tone === 'direct' ? [
    {
      icon: <DollarSignIcon className="size-6" />,
      title: "Stop getting scammed.",
      description: "Cloud rent bleeds $25k–$500k/mo. Own the hardware. Keep the performance. Kill the waste."
    },
    {
      icon: <WrenchIcon className="size-6" />,
      title: "Build on what works.",
      description: "Keep your stack. We wire it together and automate the boring."
    },
    {
      icon: <MapIcon className="size-6" />,
      title: "Pave desire paths.",
      description: "We embed with your team, shape the system to how they actually work."
    }
  ] : [
    {
      icon: <DollarSignIcon className="size-6" />,
      title: "Cut waste, keep performance.",
      description: "Move from renting to owning. Dramatically reduce monthly costs without sacrificing speed or reliability."
    },
    {
      icon: <WrenchIcon className="size-6" />,
      title: "Integrate, don't replace.",
      description: "We work with your existing tools and workflows. No disruptive rip-and-replace projects."
    },
    {
      icon: <MapIcon className="size-6" />,
      title: "Build around real workflows.",
      description: "We map your actual processes, then build automation that fits like a glove."
    }
  ];

  // Mock data for LogosMarquee
  const logos = Array(6).fill(null).map((_, i) => ({
    name: `Client ${i + 1}`,
    icon: <PlaceholderIcon className="size-8 md:size-10" />
  }));

  // Mock data for Process Steps
  const processSteps = [
    {
      title: "Discovery",
      description: "We deep-dive into your current infrastructure, workloads, and pain points.",
      youDo: "Share access to cloud billing, architecture docs, and team interviews.",
      weDo: "Analyze costs, identify waste, and map technical dependencies."
    },
    {
      title: "Shadow & Map",
      description: "We observe how your teams actually work and map desire paths.",
      youDo: "Participate in workflow observations and workshops.",
      weDo: "Document real workflows, identify automation opportunities, and draft the future state."
    },
    {
      title: "Architect",
      description: "We design a tailored, owned infrastructure solution.",
      youDo: "Review and approve the proposed architecture and migration plan.",
      weDo: "Specify hardware, select software stack, and design for performance and cost."
    },
    {
      title: "Pilot",
      description: "We build and test a critical component in the new environment.",
      youDo: "Provide feedback on performance, usability, and integration.",
      weDo: "Deploy, test, and iterate on the pilot component with your team."
    },
    {
      title: "Migrate",
      description: "We execute the planned migration with zero downtime.",
      youDo: "Validate functionality and performance post-migration.",
      weDo: "Cutover workloads, decommission old systems, and optimize the new stack."
    },
    {
      title: "Operate",
      description: "We manage the infrastructure, you focus on your core business.",
      youDo: "Use the system and provide ongoing feedback for improvements.",
      weDo: "Monitor, maintain, upgrade, and support the infrastructure 24/7."
    }
  ];

  // Mock data for Case Studies
  const caseStudies = [
    {
      title: "VFX Studio Migration",
      description: "Migrated a major VFX studio from cloud rendering to a colocated HPC cluster, reducing costs by 65%.",
      kpi1: { value: "65%", label: "Cost ↓" },
      kpi2: { value: "2x", label: "Performance ↑" },
      ctaText: "See build",
      ctaHref: "/case-studies/vfx-studio"
    },
    {
      title: "Legal Document Management",
      description: "Consolidated scattered legal tech stack into a secure, private Nextcloud instance with AI search.",
      kpi1: { value: "$120k/mo", label: "Saved" },
      kpi2: { value: "0", label: "Egress Fees" },
      ctaText: "See build",
      ctaHref: "/case-studies/legal-firm"
    },
    {
      title: "Research Data Pipeline",
      description: "Built a local ML training environment for a research institute, eliminating data transfer bottlenecks.",
      kpi1: { value: "90%", label: "Time-to-Train ↓" },
      kpi2: { value: "Break-even: 8mo", label: "" },
      ctaText: "See build",
      ctaHref: "/case-studies/research-institute"
    }
  ];

  // Mock data for Trust Section
  const trustItems = [
    {
      icon: <LockIcon className="size-5" />,
      text: "Your data. Your hardware. Your rules."
    },
    {
      icon: <CloudOffIcon className="size-5" />,
      text: "Colocated. Monitored. Upgradable without downtime."
    },
    {
      icon: <ZapIcon className="size-5" />,
      text: "AI-native, privacy-first. No third-party model training."
    }
  ];

  // Mock data for FAQ
  // (This is just for homepage preview; full FAQ is on /faq page)
  const faqItems = [
    {
      question: "What uptime can I expect?",
      answer: "We design for 99.9%+ uptime through redundant hardware, proactive monitoring, and colocation in Tier III+ facilities."
    },
    {
      question: "How is support handled?",
      answer: "You get direct access to our engineering team via Slack, email, or phone. We provide 24/7 monitoring and alerting."
    }
  ];

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

      {/* Hero Section */}
      <Section className="flex flex-col items-center text-center py-20 md:py-32">
        <Container maxWidth="3xl">
          <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight">
            {heroHeadline}
          </h1>
          <p className="mt-6 text-lg md:text-xl text-muted-foreground max-w-2xl">
            {heroSubcopyLine1}
          </p>
          <p className="mt-2 text-lg md:text-xl text-muted-foreground max-w-2xl">
            {heroSubcopyLine2}
          </p>
          <div className="mt-10 flex flex-col sm:flex-row gap-4 justify-center">
            <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-16 grid grid-cols-1 sm:grid-cols-3 gap-8 max-w-2xl mx-auto">
            <MetricsKPI value="$350/mo" label="after year 1" />
            <MetricsKPI value="65%" label="avg. cost ↓" />
            <MetricsKPI value="12mo" label="typical break-even" />
          </div>
        </Container>
      </Section>

      {/* Value Proposition Section */}
      <Section background="muted">
        <Container>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {valuePropositions.map((item, index) => (
              <Card key={index} className="flex flex-col">
                <CardHeader>
                  <div className="mb-2 text-primary">
                    {item.icon}
                  </div>
                  <CardTitle>{item.title}</CardTitle>
                </CardHeader>
                <CardContent className="flex-grow">
                  <CardDescription>{item.description}</CardDescription>
                </CardContent>
              </Card>
            ))}
          </div>
        </Container>
      </Section>

      {/* Proof Strip / Logos Marquee */}
      <Section>
        <Container>
          <h2 className="text-2xl font-bold text-center mb-12">Trusted by forward-thinking teams</h2>
          <LogosMarquee logos={logos} />
        </Container>
      </Section>

      {/* Process Snapshot */}
      <Section background="muted">
        <Container>
          <Steps
            steps={processSteps.slice(0, 3)} // Show only first 3 steps on homepage
            title="Our 6-Step Process"
            ctaText="See Full Process"
            ctaHref="/process"
          />
        </Container>
      </Section>

      {/* Case Study Rail */}
      <Section>
        <Container>
          <div className="text-center mb-12">
            <h2 className="text-2xl font-bold">Proven Results</h2>
            <p className="mt-2 text-muted-foreground">
              Real outcomes from real migrations.
            </p>
          </div>
          <Grid columns={{ initial: 1, md: 3 }} gap="6">
            {caseStudies.map((study, index) => (
              <CaseStudyCard
                key={index}
                title={study.title}
                description={study.description}
                kpi1={study.kpi1}
                kpi2={study.kpi2}
                ctaText={study.ctaText}
                ctaHref={study.ctaHref}
              />
            ))}
          </Grid>
        </Container>
      </Section>

      {/* Pricing Preview / Own vs Rent */}
      <Section background="muted">
        <Container>
          <div className="text-center mb-12">
            <h2 className="text-2xl font-bold">Own vs Rent</h2>
            <p className="mt-2 text-muted-foreground max-w-2xl mx-auto">
              Cloud is a rental agreement with infinite term. Owned hardware + colocation breaks even in under 12 months.
            </p>
          </div>
          <div className="max-w-4xl mx-auto bg-card border rounded-xl p-6 md:p-8">
            <h3 className="text-xl font-semibold mb-4">Why Owned Infrastructure Wins</h3>
            <ul className="space-y-2 text-muted-foreground">
              <li className="flex items-start">
                <span className="mr-2 text-primary">•</span>
                <span><span className="font-medium">Capex:</span> You buy the hardware once. Depreciate over 3-5 years.</span>
              </li>
              <li className="flex items-start">
                <span className="mr-2 text-primary">•</span>
                <span><span className="font-medium">Low Opex:</span> Colocation is ~$200/server/mo. Managed ops is ~$500/server/mo.</span>
              </li>
              <li className="flex items-start">
                <span className="mr-2 text-primary">•</span>
                <span><span className="font-medium">No Egress Fees:</span> Move data freely within your network.</span>
              </li>
              <li className="flex items-start">
                <span className="mr-2 text-primary">•</span>
                <span><span className="font-medium">Performance:</span> Direct-attached storage and local networks are faster than VPCs.</span>
              </li>
              <li className="flex items-start">
                <span className="mr-2 text-primary">•</span>
                <span><span className="font-medium">No Vendor Lock-in:</span> Standard hardware and open-source software.</span>
              </li>
            </ul>
            <div className="mt-6 p-4 bg-muted rounded-lg">
              <p className="text-center font-medium">
                Break-even is typically &lt; 12 months. After that, it's pure savings.
              </p>
            </div>
          </div>
        </Container>
      </Section>

      {/* Trust Section */}
      <Section>
        <Container>
          <TrustSection items={trustItems} title="Your Data, Your Rules" />
        </Container>
      </Section>

      {/* FAQ Accordion Preview */}
      <Section background="muted">
        <Container>
          <div className="text-center mb-12">
            <h2 className="text-2xl font-bold">Common Questions</h2>
            <p className="mt-2 text-muted-foreground">
              Answers to key concerns about migrating and self-hosting.
            </p>
          </div>
          <FAQAccordion />
          <div className="mt-8 text-center">
            <Button variant="link" asChild>
              <a href="/faq">See All FAQs</a>
            </Button>
          </div>
        </Container>
      </Section>

      {/* Final CTA */}
      <Section>
        <Container>
          <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>
      </Section>

      <Footer />
    </div>
  );
}