// app/solutions/page.tsx

'use client';

import * as React from 'react';

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 { Button } from '@workspace/ui/components/ui';
import { FinalCTASection } from '@workspace/ui/components/content';
import { PlaceholderIcon } from '@workspace/ui/components/icons'; // Using placeholder for now
import Image from 'next/image';

// Mock data for Industries
const INDUSTRIES = [
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: 'Technology',
    description:
      'From SaaS startups to enterprise software, we help you scale efficiently without the cloud tax.',
  },
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: 'Legal',
    description:
      'Secure, private document management and collaboration environments with strict access controls.',
  },
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: 'Medical',
    description:
      'HIPAA-compliant infrastructure for storing, processing, and analyzing sensitive patient data.',
  },
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: 'Media',
    description:
      'High-bandwidth, low-latency solutions for content creation, storage, and distribution.',
  },
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: 'Research',
    description:
      'Powerful compute and storage for data-intensive scientific research and simulations.',
  },
];

export default function SolutionsPage() {
  return (
    <div className="flex flex-col min-h-screen">
      <Navbar />

      {/* Hero Section: banded with grid background to mirror homepage */}
      <AnimatedSection className="bg-grid-dark border-b border-muted">
        <Container maxWidth="10xl">
          <div 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">
                Solutions by Industry
              </h1>
              <p className="mt-6 text-lg md:text-xl text-muted-foreground max-w-xl">
                Practical, high-impact stacks mapped to the realities of your
                sector.
              </p>
              <div className="mt-10 flex flex-col sm:flex-row gap-4">
                <Button size="lg" variant="default" asChild>
                  <a href="#industries">Explore Industries</a>
                </Button>
                <Button size="lg" variant="outline" asChild>
                  <a href="/contact">Talk To Us</a>
                </Button>
              </div>
            </div>
            {/* Right visual panel for rhythm with homepage hero */}
            <div className="relative h-[220px] md:h-[300px] lg:h-[360px]">
              <div className="absolute inset-0 rounded-sm border bg-card/60 backdrop-blur-sm" />
              {/* Optional decorative solutions art (drop /hero/solutions-hero-art.webp in public) */}
              <Image
                src="/hero/solutions-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-50" />
            </div>
          </div>
        </Container>
      </AnimatedSection>

      {/* Industries */}
      <AnimatedSection id="industries" className="py-20 border-b border-muted">
        <Container maxWidth="10xl">
          <div className="space-y-10 max-w-5xl">
            {INDUSTRIES.map((item, index) => {
              const href = `/solutions/${item.title.toLowerCase()}`;
              return (
                <a
                  key={item.title}
                  href={href}
                  className="group flex items-start gap-8 border-b border-muted pb-10 transition-all duration-300 hover:border-foreground/70 last:border-0"
                >
                  <div className="text-4xl font-light text-muted-foreground mt-1">
                    {index < 9 ? `0${index + 1}` : index + 1}
                  </div>
                  <div className="flex-1">
                    <div className="flex items-baseline gap-4">
                      <h2 className="text-4xl md:text-5xl font-bold transition-colors duration-300 group-hover:text-foreground/90">
                        {item.title}
                      </h2>
                      <span className="text-primary text-sm tracking-wide opacity-80 group-hover:opacity-100">
                        Explore →
                      </span>
                    </div>
                    <p className="text-lg md:text-xl text-muted-foreground mt-4 max-w-3xl transition-colors duration-300 group-hover:text-foreground/80">
                      {item.description}
                    </p>
                  </div>
                </a>
              );
            })}
          </div>
        </Container>
      </AnimatedSection>

      {/* CTA Section: reuse shared FinalCTASection for consistency */}
      <AnimatedSection className="py-20 border-b border-muted">
        <Container maxWidth="10xl">
          <FinalCTASection
            title="Don't see your industry?"
            description="Same principles apply broadly. We’ll map your stack to your operations and constraints."
            primaryCtaText="Talk To Us"
            primaryCtaHref="/contact"
            secondaryCtaText="Download Blueprint"
            secondaryCtaHref="/download-blueprint"
          />
        </Container>
      </AnimatedSection>

      <Footer />
    </div>
  );
}