import {useIntersectionObserver} from '../hooks/useIntersectionObserver';
import HeroAnimation from './HeroAnimation';
import styles from './Hero.module.css';

export default function Hero(): JSX.Element {
  const [ref, isVisible] = useIntersectionObserver(0.1);

  return (
    <section className={styles.hero}>
      <div
        className={`${styles.header} ${isVisible ? styles.visible : ''}`}
        ref={ref as React.RefObject<HTMLDivElement>}
      >
        <h1 className={styles.title}>beachcomber</h1>
        <p className={styles.tagline}>
          A single daemon that caches your shell environment. Every prompt, status bar, and editor
          reads from one shared cache instead of recomputing everything independently.
        </p>

        <div className={styles.metrics}>
          <a className={styles.metric} href="https://github.com/NavistAu/beachcomber" target="_blank" rel="noopener noreferrer">
            <img src="https://img.shields.io/github/stars/NavistAu/beachcomber?style=flat&label=GitHub%20Stars&color=0891b2" alt="GitHub Stars" className={styles.shieldBadge} />
          </a>
          <a className={styles.metric} href="https://crates.io/crates/beachcomber" target="_blank" rel="noopener noreferrer">
            <img src="https://img.shields.io/crates/d/beachcomber?style=flat&label=crates.io&color=0891b2" alt="crates.io downloads" className={styles.shieldBadge} />
          </a>
          <a className={styles.metric} href="https://www.npmjs.com/package/libbeachcomber" target="_blank" rel="noopener noreferrer">
            <img src="https://img.shields.io/npm/dt/libbeachcomber?style=flat&label=npm&color=0891b2" alt="npm downloads" className={styles.shieldBadge} />
          </a>
          <a className={styles.metric} href="https://pypi.org/project/libbeachcomber/" target="_blank" rel="noopener noreferrer">
            <img src="https://img.shields.io/pypi/dm/libbeachcomber?style=flat&label=PyPI&color=0891b2" alt="PyPI downloads" className={styles.shieldBadge} />
          </a>
        </div>

        <div className={styles.ctas}>
          <a className={styles.ctaPrimary} href="/docs/getting-started/installation">
            Read the Docs
          </a>
          <a
            className={styles.ctaSecondary}
            href="#problem"
            onClick={(e) => {
              e.preventDefault();
              document.getElementById('problem')?.scrollIntoView({behavior: 'smooth'});
            }}
          >
            Learn More &darr;
          </a>
        </div>

        <div className={styles.registryLinks}>
          <a className={styles.registryLink} href="https://crates.io/crates/beachcomber" target="_blank" rel="noopener noreferrer">crates.io</a>
          <span className={styles.registrySep} aria-hidden="true">·</span>
          <a className={styles.registryLink} href="https://pypi.org/project/libbeachcomber/" target="_blank" rel="noopener noreferrer">PyPI</a>
          <span className={styles.registrySep} aria-hidden="true">·</span>
          <a className={styles.registryLink} href="https://www.npmjs.com/package/libbeachcomber" target="_blank" rel="noopener noreferrer">npm</a>
          <span className={styles.registrySep} aria-hidden="true">·</span>
          <a className={styles.registryLink} href="https://rubygems.org/gems/libbeachcomber" target="_blank" rel="noopener noreferrer">RubyGems</a>
          <span className={styles.registrySep} aria-hidden="true">·</span>
          <a className={styles.registryLink} href="https://luarocks.org/modules/navist/libbeachcomber" target="_blank" rel="noopener noreferrer">LuaRocks</a>
        </div>
      </div>

      {/* Gradient fade from header into animation */}
      <div className={styles.headerFade} aria-hidden="true" />

      <HeroAnimation />
    </section>
  );
}
