import { useEffect } from 'react'
import { ArrowRightIcon } from '@heroicons/react/24/outline'
import { Link, useLocation } from 'react-router-dom'

import { sitePath } from '../../shared/lib/sitePath'
import { Container } from '../../shared/ui/Container'
import { SectionIntro } from '../../shared/ui/SectionIntro'
import { FeatureGrid } from './components/FeatureGrid'
import { Footer } from './components/Footer'
import { HeroSection } from './components/HeroSection'
import { MetricsBar } from './components/MetricsBar'
import { PipelineTabs } from './components/PipelineTabs'
import { QuickStart } from './components/QuickStart'

export function HomePage() {
  const location = useLocation()

  useEffect(() => {
    if (location.hash) {
      const id = location.hash.substring(1)
      // Small timeout ensures the DOM has completed its layout rendering before scrolling
      setTimeout(() => {
        document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' })
      }, 100)
    }
  }, [location])

  return (
    <div className="relative">
      <main id="main-content">
        {/* 1. Hero */}
        <HeroSection />

        {/* 2. Metrics — quick credibility numbers */}
        <MetricsBar />

        {/* 3. What it finds — detection families */}
        <section className="py-24 sm:py-32 lg:py-40">
          <Container>
            <SectionIntro
              eyebrow="Detection families"
              title="Six rule families covering the patterns that matter."
              description="Reliability, security, performance, clarity, coordination, and test quality—each finding is explainable, not a score."
            />
            <FeatureGrid />
          </Container>
        </section>

        {/* 4. How it works — pipeline stages */}
        <section className="border-t border-[var(--border)] py-24 sm:py-32 lg:py-40">
          <Container>
            <SectionIntro
              eyebrow="How it works"
              title="A four-stage local pipeline built for speed."
              description="Discover, parse, index, and run heuristics—each stage is independently composable and designed to stay fast on real repositories."
            />
            <PipelineTabs />
          </Container>
        </section>

        {/* 5. Install and run — conversion */}
        <section id="install-run" className="section-anchor border-t border-[var(--border)] py-24 sm:py-32 lg:py-40">
          <Container>
            <SectionIntro
              eyebrow="Install and run"
              title="Install deslop with Cargo, release binaries, or GitHub Actions."
              description="Wire deslop into GitHub Actions, install from crates.io, grab a prebuilt binary, or run a scan directly from your repository root."
            />
            <QuickStart />
          </Container>
        </section>

        {/* 6. Closing CTA */}
        <section className="border-t border-[var(--border)] py-24 sm:py-32 lg:py-40">
          <Container>
            <div className="max-w-4xl">
              <span className="eyebrow">Open source from day one</span>
              <h2 className="mt-6 max-w-4xl text-4xl leading-tight font-bold sm:text-6xl">
                Install it fast. Keep the workflow local. Keep the findings readable.
              </h2>
              <p className="mt-5 max-w-3xl text-base leading-8 text-[var(--muted)] sm:text-lg">
                Install from crates.io, grab a prebuilt binary, or drop it into a GitHub Actions workflow. Findings include a rule ID, severity, and the evidence you need to act.
              </p>

              <div className="mt-8 flex flex-col gap-3 sm:flex-row">
                <a
                  href={sitePath('#install-run')}
                  className="button-primary"
                  onClick={(e) => {
                    const el = document.getElementById('install-run')
                    if (el) {
                      e.preventDefault()
                      el.scrollIntoView({ behavior: 'smooth' })
                      window.history.pushState(null, '', sitePath('#install-run'))
                    }
                  }}
                >
                  Install and run
                  <ArrowRightIcon className="h-4 w-4" aria-hidden="true" />
                </a>
                <Link to="/docs" className="button-secondary">
                  Browse the categories
                </Link>
              </div>
            </div>
          </Container>
        </section>
      </main>

      <Footer />
    </div>
  )
}