import { useNavigate } from 'react-router-dom'
import { ROUTE_PATHS } from '../app/route-paths'
import { playSound, SFX_BUTTON_DEFAULT } from '../lib/sounds'
import { HackerText } from '../components/HackerText'
import styles from './CreditsPage.module.css'

const SPONSORS = [
  { name: 'Bently Nevada', src: '/sponsors/bently.png', dark: false, url: 'https://www.bakerhughes.com/bently-nevada' },
  { name: 'Microsoft', src: '/sponsors/microsoft.png', dark: false, url: 'https://www.microsoft.com' },
  { name: 'Ridgeline', src: '/sponsors/ridgeline.png', dark: false, url: 'https://www.ridgelineapps.com' },
  { name: 'AVA Logistics', src: '/sponsors/ava.svg', dark: false, url: 'https://avalogistics.com/' },
  { name: 'Coffee n Comics', src: '/sponsors/cnc.png', dark: false, url: 'https://www.coffeencomics.com' },
  { name: 'Type III', src: '/sponsors/typethree.png', dark: true, url: 'https://typeiii.com' },
]

const TEAM = ['Claude Code', 'Ethan Anderson', 'Justin Juera', 'Max Gonz\u00e1lez', 'Vitalii']
const TECH = [
  { name: 'React + TypeScript + Vite', desc: 'React and TypeScript reduce bugs and simplify coding. Vite provides instant dev builds.' },
  { name: 'MediaPipe', desc: "Google's ML model for real-time body pose detection via webcam, running entirely in-browser" },
  { name: 'Zustand', desc: 'Lightweight state management for game scores, combos, and settings' },
  { name: 'Supabase', desc: 'Cloud database powering the global leaderboard' },
  { name: 'Vercel', desc: 'Hosting and deployment for hackhackrevolution.xyz' },
]
const DEVPOST_URL = 'https://devpost.com/software/hack-hack-revolution-8aw6qz'

export function CreditsPage() {
  const navigate = useNavigate()

  return (
    <div className={styles.root}>
      <div className={styles.inner}>
        <div>
          <h1 className={`${styles.title} font-display`}>
            <HackerText text="CREDITS" />
          </h1>
          <p className={`${styles.event} font-caption`}>
            <HackerText text="BIGGEST LITTLE HACKATHON 2026" delay={300} />
          </p>
        </div>

        <div className={styles.columns}>
          <section className={styles.section}>
            <h2 className={`${styles.sectionTitle} font-title`}>
              <HackerText text="TEAM AVENGERS" delay={600} />
            </h2>
            <ul className={styles.list}>
              {TEAM.map((name, i) => (
                <li key={name}><HackerText text={name} delay={800 + i * 200} /></li>
              ))}
            </ul>
          </section>

          <section className={styles.section}>
            <h2 className={`${styles.sectionTitle} font-title`}>
              <HackerText text="BUILT WITH" delay={600} />
            </h2>
            <ul className={styles.list}>
              {TECH.map((t, i) => (
                <li key={t.name} className={styles.techItem}>
                  <HackerText text={t.name} delay={800 + i * 200} />
                  <span className={styles.tooltip}>{t.desc}</span>
                </li>
              ))}
            </ul>
          </section>
        </div>

        <section className={styles.section}>
          <h2 className={`${styles.sectionTitle} font-title`}>
            <HackerText text="SPONSORS" delay={1800} />
          </h2>
          <div className={styles.sponsorLogos}>
            <a href="https://www.unr.edu" target="_blank" rel="noopener noreferrer">
              <img className={styles.logo} src="/sponsors/unr.svg" alt="University of Nevada, Reno" />
            </a>
            {SPONSORS.map((s) => (
              <a key={s.name} href={s.url} target="_blank" rel="noopener noreferrer">
                <img className={`${styles.logo}${s.dark ? ` ${styles.logoDark}` : ''}`} src={s.src} alt={s.name} />
              </a>
            ))}
          </div>
        </section>

        <section className={styles.ctaSection}>
          <p className={`${styles.ctaText} font-caption`}>
            <HackerText text="ENJOYED THE PROJECT? SUPPORT US ON DEVPOST." delay={2100} />
          </p>
          <a
            className={`${styles.devpostCta} font-title`}
            href={DEVPOST_URL}
            target="_blank"
            rel="noopener noreferrer"
          >
            LIKE HACK HACK REVOLUTION
            <span className={styles.ctaEmoji} aria-hidden="true"> ❤️</span>
          </a>
        </section>

        <button
          type="button"
          className={`${styles.backBtn} font-title`}
          onClick={() => {
            playSound(SFX_BUTTON_DEFAULT)
            navigate(ROUTE_PATHS.home)
          }}
        >
          BACK TO HOME
        </button>
      </div>
    </div>
  )
}
