import { useState, useEffect } from 'react'
import { ArrowRightIcon } from '@heroicons/react/24/outline'
import { currentRelease, siteMetadata, trustPillars } from '../../../content/site-content'
import { Container } from '../../../shared/ui/Container'
export function HeroSection() {
const [isReady, setIsReady] = useState(false)
useEffect(() => {
// Short delay lets the page paint before the sweep animation starts
const timer = setTimeout(() => setIsReady(true), 300)
return () => clearTimeout(timer)
}, [])
return (
<section id="top" className="section-anchor relative pt-24 pb-24 sm:pt-32 sm:pb-32 lg:pt-40 lg:pb-40">
<Container className="max-w-5xl mx-auto text-center">
<span className="eyebrow mx-auto mb-8">Static analysis Human insight</span>
<div className="flex flex-col items-center justify-center text-center w-full">
<h1 className="mt-6 text-[clamp(2.5rem,7vw,5rem)] leading-[0.95] font-medium tracking-[-0.03em] text-[var(--text-strong)] flex flex-col items-center justify-center w-full relative">
{/* Line 1 */}
<div className="relative inline-flex items-center justify-center px-2 mb-2 h-[1.3em]">
<div className={`absolute inset-x-0 inset-y-0 z-10 pointer-events-none ${isReady ? 'animate-sweep-box' : ''}`} />
<div className="overflow-hidden h-full">
<div className={`flex flex-col ${isReady ? 'animate-sweep-text-col' : ''}`}>
<span className="h-[1.3em] flex items-center justify-center whitespace-nowrap px-1">Modern problems</span>
<span className="h-[1.3em] flex items-center justify-center whitespace-nowrap px-1">Built by the machine</span>
<span className="h-[1.3em] flex items-center justify-center whitespace-nowrap px-1">Works alongside your linters</span>
<span className="h-[1.3em] flex items-center justify-center whitespace-nowrap px-1">Machine-generated</span>
</div>
</div>
</div>
{/* Line 2 */}
<div className="relative inline-flex items-center justify-center px-2 italic text-[var(--muted)] h-[1.3em]">
<div
className={`absolute inset-x-0 inset-y-0 z-10 pointer-events-none ${isReady ? 'animate-sweep-box' : ''}`}
style={{ animationDelay: isReady ? '150ms' : '0ms' }}
/>
<div className="overflow-hidden h-full">
<div
className={`flex flex-col ${isReady ? 'animate-sweep-text-col' : ''}`}
style={{ animationDelay: isReady ? '150ms' : '0ms' }}
>
<span className="h-[1.3em] flex items-center justify-center whitespace-nowrap px-1">Requires modern solutions.</span>
<span className="h-[1.3em] flex items-center justify-center whitespace-nowrap px-1">Reviewed by the human.</span>
<span className="h-[1.3em] flex items-center justify-center whitespace-nowrap px-1">Flagging the context they miss.</span>
<span className="h-[1.3em] flex items-center justify-center whitespace-nowrap px-1">Human-validated.</span>
</div>
</div>
</div>
</h1>
<br/>
<p className="mt-10 mx-auto w-full max-w-2xl text-[1.15rem] leading-[1.8] text-[var(--muted)] sm:text-[1.35rem] text-center">
A fast static analyzer that surfaces AI-generated code smells across Go, Python, and Rust—with explainable findings, not opaque scores.
</p>
</div>
<div className="mt-14 flex flex-col items-center justify-center gap-5 sm:flex-row">
<a href="#install-run" className="button-primary px-8">
Install and run
<ArrowRightIcon className="h-4 w-4" aria-hidden="true" />
</a>
<a
href={siteMetadata.github.releaseUrl}
target="_blank"
rel="noreferrer"
className="button-secondary px-8"
>
Get {currentRelease.version} binaries
</a>
</div>
<div className="mt-20 pt-16 border-t border-[var(--border)] max-w-4xl mx-auto grid gap-10 sm:grid-cols-3 text-left">
{trustPillars.map((pillar) => (
<div key={pillar} className="text-base leading-relaxed text-[var(--muted)] border-l border-[var(--border-strong)] pl-5">
{pillar}
</div>
))}
</div>
</Container>
</section>
)
}