/* global React */
const { useState: useState1, useEffect: useEffect1, useRef: useRef1 } = React;

/* ============================================
   HERO
   ============================================ */

function Hero() {
  const titleRef = useRef1(null);
  useEffect1(() => {
    // Stagger letter reveal
    const lines = titleRef.current?.querySelectorAll('.word');
    if (!lines) return;
    lines.forEach((w, i) => {
      w.style.opacity = '0';
      w.style.transform = 'translateY(120%)';
      requestAnimationFrame(() => {
        w.style.transition = `transform 1.1s cubic-bezier(0.16,1,0.3,1) ${0.6 + i * 0.12}s, opacity 1s ${0.6 + i * 0.12}s`;
        w.style.opacity = '1';
        w.style.transform = 'translateY(0)';
      });
    });
  }, []);

  const ctaRef = useMagnetic(0.25);
  const ctaRef2 = useMagnetic(0.2);

  const scrollNext = (e) => {
    e.preventDefault();
    const el = document.getElementById('about');
    if (!el) return;
    const top = el.getBoundingClientRect().top + window.scrollY - 12;
    if (window.__lenis) window.__lenis.scrollTo(top, { duration: 1.4 });
    else window.scrollTo({ top, behavior: 'smooth' });
  };

  return (
    <section id="home" className="hero" data-screen-label="01 Hero">
      <div className="hero-corner tl">
        Location
        <span className="v">27.7172° N</span>
        <span className="v">85.3240° E</span>
      </div>
      <div className="hero-corner tr">
        Currently
        <span className="v">Available for opportunities</span>
      </div>
      <div className="hero-corner bl">
        Discipline
        <span className="v">Frontend · Full-Stack · Web</span>
      </div>
      <div className="hero-corner br">
        Based in
        <span className="v">Kathmandu, Nepal</span>
      </div>

      <div className="hero-content">
        <div className="hero-meta">
          <span className="dot"></span>
          <span>Ashma Maharjan · Portfolio 2026</span>
        </div>

        <h1 className="hero-title" ref={titleRef}>
          <span className="line"><span className="word">Crafting</span> <span className="word alt">dynamic</span></span>
          <span className="line"><span className="word">web experiences</span> <span className="word">with</span></span>
          <span className="line"><span className="word alt">modern</span> <span className="word">code.</span></span>
        </h1>

        <p className="hero-tagline">
          Hi — I'm <span className="serif-italic" style={{color: 'var(--cyan)'}}>Ashma Maharjan</span>, a software
          developer passionate about building responsive, user-friendly interfaces
          with React, Vue.js, and modern web technologies.
        </p>

        <div className="hero-actions">
          <a ref={ctaRef} href="#projects" className="btn btn-primary" onClick={(e) => {
            e.preventDefault();
            const el = document.getElementById('projects');
            const top = el.getBoundingClientRect().top + window.scrollY - 12;
            (window.__lenis ? window.__lenis.scrollTo(top, { duration: 1.4 }) : window.scrollTo({ top, behavior: 'smooth' }));
          }}>
            View selected work <Arrow />
          </a>
          <a ref={ctaRef2} href="#contact" className="btn" onClick={(e) => {
            e.preventDefault();
            const el = document.getElementById('contact');
            const top = el.getBoundingClientRect().top + window.scrollY - 12;
            (window.__lenis ? window.__lenis.scrollTo(top, { duration: 1.4 }) : window.scrollTo({ top, behavior: 'smooth' }));
          }}>
            Start a project <Arrow />
          </a>
        </div>
      </div>

      <a href="#about" className="hero-scroll" onClick={scrollNext}>
        <span>Scroll · Explore</span>
        <span className="line"></span>
      </a>
    </section>
  );
}

/* ============================================
   ABOUT
   ============================================ */

function StatItem({ value, suffix = '', label }) {
  const [v, ref] = useCountUp(value, { duration: 1600 });
  return (
    <div className="stat reveal" ref={ref}>
      <div className="stat-value">{v}<span className="stat-suffix">{suffix}</span></div>
      <div className="stat-label">{label}</div>
    </div>
  );
}

function About() {
  return (
    <section id="about" data-screen-label="02 About">
      <div className="container">
        <div className="reveal">
          <span className="eyebrow eyebrow-dot">/ 01 — Index</span>
        </div>
        <div className="about-grid">
          <div className="reveal">
            <div className="about-portrait cursor-target">
              <span className="corner-mark">Mvmt · 0421</span>
              <span className="corner-mark r">Set · Aurora</span>
              <span className="corner-mark bl">37mm · f/1.4</span>
              <span className="corner-mark br">ISO 800</span>
              <div className="ring"></div>
              <div className="ring-2"></div>
              <div className="placeholder-figure"></div>
              <div className="core"></div>
            </div>
          </div>

          <div className="about-copy">
            <h3 className="reveal">
              A <span className="serif-italic" style={{color: 'var(--cyan)'}}>motivated</span> software
              developer with a strong foundation in frontend engineering based in Kathmandu, Nepal.
            </h3>
            <p className="reveal reveal-delay-1">
              I hold an MSc in Advanced Computer Science from Keele University (First Class)
              and a BSc (Hons) in Computing from London Metropolitan University (First Class).
              I'm passionate about solving complex problems through technology and
              continuously strive to enhance my skills.
            </p>
            <p className="reveal reveal-delay-2">
              Currently working as a Software Engineer at Beam Lab Pvt. Ltd., building
              dynamic web applications with Vue.js, React.js, and backend services
              using Express and Prisma. I thrive in Agile environments, collaborating
              with cross-functional teams to deliver end-to-end software solutions.
            </p>

            <div className="about-stats">
              <StatItem value={4} suffix="+" label="Years of Experience" />
              <StatItem value={150} suffix="+" label="Features Delivered" />
              <StatItem value={10} suffix="+" label="Completed Projects" />
            </div>

            <div className="about-timeline">
              <div className="about-timeline-item reveal reveal-delay-3">
                <span className="y">2025</span> MSc Advanced Computer Science · Keele University
              </div>
              <div className="about-timeline-item reveal reveal-delay-4">
                <span className="y">2023</span> Software Engineer · Beam Lab Pvt. Ltd.
              </div>
              <div className="about-timeline-item reveal reveal-delay-5">
                <span className="y">2023</span> BSc (Hons) Computing · London Metropolitan University
              </div>
              <div className="about-timeline-item reveal reveal-delay-5">
                <span className="y">2022</span> Teaching Assistant · Islington College
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

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