// ─── Navigation ───

function Navigation() {
  const scrolled = useScrolled();
  const [open, setOpen] = useState(false);

  const handleNav = (e) => {
    const href = e.currentTarget.getAttribute('href');
    if (href && href.startsWith('#')) {
      e.preventDefault();
      const target = document.querySelector(href);
      if (target) {
        const y = target.getBoundingClientRect().top + window.scrollY - 80;
        window.scrollTo({ top: y, behavior: 'smooth' });
      }
      setOpen(false);
    }
  };

  return (
    <nav className={`nav ${scrolled ? 'nav--scrolled' : ''}`}>
      <div className="container nav-inner">
        <a className="nav-logo" href="#">DK<span className="nav-logo-dot">.</span></a>
        <div className="nav-links">
          {NAV_LINKS.map(l => (
            <a key={l.href} className="nav-link" href={l.href} onClick={handleNav}>{l.label}</a>
          ))}
          <a className="nav-resume" href={LINKS.resume} target="_blank" rel="noopener">
            <IconDownload /> Resume
          </a>
        </div>
        <button className="nav-mobile-btn" onClick={() => setOpen(!open)} aria-label="Menu">
          {open ? <IconX /> : <IconMenu />}
        </button>
      </div>
      {open && (
        <div className="nav-mobile-menu">
          {NAV_LINKS.map(l => (
            <a key={l.href} className="nav-mobile-link" href={l.href} onClick={handleNav}>{l.label}</a>
          ))}
          <a className="nav-mobile-resume" href={LINKS.resume} target="_blank" rel="noopener">
            <IconDownload /> Download Resume
          </a>
        </div>
      )}
    </nav>
  );
}

// ─── Hero ───

function Hero() {
  const [loaded, setLoaded] = useState(false);
  useEffect(() => { const t = setTimeout(() => setLoaded(true), 100); return () => clearTimeout(t); }, []);

  return (
    <section className="hero">
      <div className={`hero-content ${loaded ? 'hero-content--visible' : ''}`}>
        <p className="hero-label anim-child" style={{ animationDelay: '0.15s' }}>Hello, I'm</p>
        <h1 className="hero-name anim-child" style={{ animationDelay: '0.3s' }}>
          Darshan Kachhiya
        </h1>
        <p className="hero-title anim-child" style={{ animationDelay: '0.5s' }}>
          Full-Stack Developer <span className="hero-dot">·</span> AI/ML Researcher <span className="hero-dot">·</span> IoT Builder
        </p>
        <p className="hero-bio anim-child" style={{ animationDelay: '0.65s' }}>
          B.Tech Computer Engineering @ CHARUSAT — Building production SaaS,
          IoT systems, and research-grade ML pipelines. ICCBI 2026 accepted researcher.
        </p>
        <div className="hero-ctas anim-child" style={{ animationDelay: '0.8s' }}>
          <a className="btn btn--primary" href="#projects">View Projects</a>
          <a className="btn btn--outline" href="#contact">Get in Touch</a>
        </div>
        <div className="hero-socials anim-child" style={{ animationDelay: '0.95s' }}>
          <a href={LINKS.github} target="_blank" rel="noopener" className="hero-social" title="GitHub">
            <IconGitHub />
          </a>
          <a href={LINKS.linkedin} target="_blank" rel="noopener" className="hero-social" title="LinkedIn">
            <IconLinkedIn />
          </a>
          <a href={`mailto:${LINKS.email}`} className="hero-social" title="Email">
            <IconMail />
          </a>
        </div>
      </div>
      <a className="hero-scroll" href="#about" aria-label="Scroll down"><IconArrowDown /></a>
    </section>
  );
}

// ─── About ───

function About() {
  const [ref, visible] = useScrollReveal();

  return (
    <section id="about" className="section" ref={ref}>
      <div className="container">
        <RevealWrap visible={visible}>
          <SectionHeader number="01" title="About Me" />
        </RevealWrap>
        <div className="about-grid">
          <RevealWrap visible={visible} delay={0.12}>
            <div className="about-avatar">
              <img src={PROFILE_PHOTO} alt="Darshan Kachhiya" className="about-avatar-img" />
            </div>
          </RevealWrap>
          <RevealWrap visible={visible} delay={0.24} className="about-text">
            <p className="about-lead">
              Computer Engineering undergraduate at <strong>CHARUSAT University</strong>, Gujarat — currently in Semester 6.
              Passionate about building scalable full-stack applications, IoT hardware systems, and AI/ML research pipelines.
            </p>
            <p>
              Published researcher with an accepted paper at ICCBI 2026 on multimodal emotion recognition.
              National Top 10 hackathon achiever. Also has a creative side in photography and videography.
            </p>
          </RevealWrap>
        </div>
        <div className="stats-grid">
          {STATS.map((s, i) => (
            <StatItem key={i} stat={s} visible={visible} delay={0.35 + i * 0.08} />
          ))}
        </div>
      </div>
    </section>
  );
}

function StatItem({ stat, visible, delay }) {
  const count = useCounter(stat.value, 1500, visible);
  return (
    <RevealWrap visible={visible} delay={delay} className="stat-item">
      <span className="stat-number">
        {stat.prefix || ''}{count}{stat.suffix || ''}
      </span>
      <span className="stat-label">{stat.label}</span>
    </RevealWrap>
  );
}

// ─── Projects ───

function Projects() {
  const [ref, visible] = useScrollReveal();

  return (
    <section id="projects" className="section section--alt" ref={ref}>
      <div className="container">
        <RevealWrap visible={visible}>
          <SectionHeader number="02" title="Projects" subtitle="A selection of things I've built" />
        </RevealWrap>
        <div className="projects-grid">
          {PROJECTS.map((p, i) => (
            <ProjectCard key={i} project={p} visible={visible} index={i} />
          ))}
        </div>
      </div>
    </section>
  );
}

function ProjectCard({ project, visible, index }) {
  const [hovered, setHovered] = useState(false);

  return (
    <RevealWrap visible={visible} delay={0.1 + index * 0.07} className="project-card-wrap">
      <div
        className={`project-card ${hovered ? 'project-card--hover' : ''}`}
        onMouseEnter={() => setHovered(true)}
        onMouseLeave={() => setHovered(false)}
      >
        <div className="project-visual">
          {project.img ? (
            <img src={project.img} alt={project.name} className="project-img" />
          ) : (
            <div style={{ background: `linear-gradient(135deg, ${project.color}12, ${project.color}28)`, width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <span className="project-initial" style={{ color: project.color }}>{project.name.charAt(0)}</span>
            </div>
          )}
          <div className="project-visual-accent" style={{ background: project.color }}></div>
        </div>
        <div className="project-body">
          <div className="project-top">
            <span className="project-tag">{project.tag}</span>
            <div className="project-actions">
              <a href={project.github} target="_blank" rel="noopener" className="project-link-btn" title="Source Code">
                <IconGitHub />
              </a>
              {project.live && (
                <a href={project.live} target="_blank" rel="noopener" className="project-link-btn" title="Live Demo">
                  <IconExternal />
                </a>
              )}
            </div>
          </div>
          <h3 className="project-name">{project.name}</h3>
          <p className="project-subtitle">{project.subtitle}</p>
          <p className="project-desc">{project.desc}</p>
          <div className="project-stack">
            {project.stack.map(t => (
              <span key={t} className="project-pill">{t}</span>
            ))}
          </div>
        </div>
      </div>
    </RevealWrap>
  );
}

Object.assign(window, { Navigation, Hero, About, Projects });