/* global React, ReactDOM */
const { useEffect, useRef, useState } = React;

/* ============ Reveal on scroll ============ */
function Reveal({ children, delay = 0, as: Tag = "div", className = "", style = {}, ...rest }) {
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        for (const e of entries) {
          if (e.isIntersecting) { setSeen(true); io.disconnect(); }
        }
      },
      { threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <Tag
      ref={ref}
      className={`reveal ${seen ? "in" : ""} ${className}`}
      style={{ ...style, "--d": `${delay}ms` }}
      {...rest}
    >
      {children}
    </Tag>
  );
}

/* ============ Nav ============ */
function Nav({ data }) {
  return (
    <nav className="nav" aria-label="Primary">
      <div className="nav-inner">
        <a href="#top" className="nav-mark" style={{ color: "var(--accent)" }}>
          Justin Lee
        </a>
        <div className="nav-links">
          <a href="#about">About</a>
          <a href="#experience">Experience</a>
          <a href="#projects">Projects</a>
        </div>
        <a href="#contact" className="nav-cta">Contact</a>
      </div>
    </nav>
  );
}

/* ============ Hero ============ */
function Hero({ data }) {
  return (
    <header className="hero" id="top">
      <div className="aurora" aria-hidden="true"><div className="a3" /></div>
      <div className="hero-grid" aria-hidden="true" />
      <div className="hero-noise" aria-hidden="true" />

      <div className="container hero-inner">
        <Reveal>
          <span className="hero-status">
            <span className="pulse" />
            Open to SWE / PM / APM roles · New Grad 2027
          </span>
        </Reveal>

        <Reveal delay={120}>
          <h1>
            <span className="ink">Justin </span>
            <span className="accent" style={{ fontStyle: "normal" }}>Lee</span>
          </h1>
        </Reveal>

        <Reveal delay={260}>
          <p className="hero-sub">{data.positioning}</p>
        </Reveal>

        <Reveal delay={400}>
          <div className="hero-ctas">
            <a className="btn btn-primary" href="#contact">
              Get in touch <span className="arrow">↗</span>
            </a>
            <a className="btn" href="https://www.linkedin.com/in/justin-lee680" target="_blank" rel="noopener">
              LinkedIn <span className="arrow">↗</span>
            </a>
            <a className="btn" href="#experience">
              View work <span className="arrow">↓</span>
            </a>
          </div>
        </Reveal>

        {/* <Reveal delay={560}>
          <dl className="hero-meta">
            <div>
              <dt>Studying</dt>
              <dd>CS + Psychology, Georgetown</dd>
            </div>
            <div>
              <dt>Focused on</dt>
              <dd>AI interfaces · product systems</dd>
            </div>
            <div>
              <dt>Based in</dt>
              <dd>NYC ↔ DC</dd>
            </div>
          </dl>
        </Reveal> */}
      </div>

      <div className="scroll-cue" aria-hidden="true">
        <span>Scroll</span>
        <span className="line" />
      </div>
    </header>
  );
}

/* ============ Personal Projects  ============ */
function Projects({ data }) {
  return (
    <section id="projects" className="section-pad">
      <div className="container">
        <div className="section-head">
          <Reveal>
            <span className="eyebrow">03 — Personal projects</span>
            <h2 className="section-title">
              Things I'm <em>currently building.</em>
            </h2>
          </Reveal>
          <Reveal delay={120}>
            <span className="section-meta">{data.projects.length} active</span>
          </Reveal>
        </div>

        <div className="proj-list">
          {data.projects.map((p, i) => (
            <Reveal key={i} delay={i * 90}>
              <article className={`proj-card ${p.placeholder ? "placeholder" : ""}`}>
                <div className="top-row">
                  <span className="proj-tag">{p.tag || "In progress"}</span>
                  {/* <span className="corner">// wip</span> */}
                </div>
                <div className="title-block">
                  <h3>{p.title}</h3>
                  <span className="kind">{p.kind}</span>
                </div>
                <p className="summary">{p.summary}</p>
                <div className="stack-wrap">
                  {p.stack && (
                    <>
                      <span className="stack-label">Stack</span>
                      <div className="stack">
                        {p.stack.map((s) => <span key={s} className="chip">{s}</span>)}
                      </div>
                    </>
                  )}
                </div>
              </article>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ Experience ============ */
const FEATURED_ORGS = ["Avis Budget Group", "Google", "viax.io"];

function Experience({ data }) {
  const featured = FEATURED_ORGS.map((org) => data.experience.find((x) => x.org === org)).filter(Boolean);
  const remaining = data.experience.filter((x) => !FEATURED_ORGS.includes(x.org));

  return (
    <section id="experience" className="section-pad">
      <div className="container">
        <div className="section-head">
          <Reveal>
            <span className="eyebrow">02 — Work & experience</span>
            <h2 className="section-title">
              Where I've worked, and what I worked on.
            </h2>
          </Reveal>
          <Reveal delay={120}>
            <span className="section-meta">{data.experience.length} roles</span>
          </Reveal>
        </div>

        <div className="exp-featured">
          {featured.map((x, i) => (
            <Reveal key={x.org + x.role} delay={i * 60}>
              <article className="exp-card exp-card-featured">
                <div className="meta">
                  <span className="dates">{x.dates}</span>
                  <span className="org">{x.org}</span>
                  <span className="loc">{x.location}</span>
                </div>
                <div>
                  <h3 className="role">{x.role}</h3>
                  {x.product && <span className="product-badge">{x.product}</span>}
                  <p className="blurb">{x.blurb}</p>
                  <div className="stack">
                    {x.stack.map((s) => <span key={s} className="chip">{s}</span>)}
                  </div>
                </div>
              </article>
            </Reveal>
          ))}
        </div>

        <Reveal delay={180}>
          <div className="exp-more-label">+ {remaining.length} more roles</div>
        </Reveal>

        <Reveal delay={220}>
          <div className="exp-rows">
            {remaining.map((x) => (
              <div key={x.org + x.role} className="exp-row">
                <div className="exp-row-top">
                  <div className="exp-row-id">
                    <span className="exp-row-org">{x.org}</span>
                    <span className="exp-row-role">{x.role}</span>
                  </div>
                  <span className="exp-row-dates">{x.dates}</span>
                </div>
                <p className="blurb exp-row-blurb">{x.blurb}</p>
                <div className="stack exp-row-stack">
                  {x.stack.map((s) => <span key={s} className="chip">{s}</span>)}
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ============ Skills ============ */
function Skills({ data }) {
  return (
    <section id="skills" className="section-pad">
      <div className="container">
        <div className="section-head">
          <Reveal>
            <span className="eyebrow">04 — Skills</span>
            <h2 className="section-title">
              What I use to build products.
            </h2>
          </Reveal>
          <Reveal delay={120}>
            <span className="section-meta">Four lenses</span>
          </Reveal>
        </div>

        <Reveal>
          <div className="skills-grid">
            {data.skills.map((g, i) => (
              <div key={g.label} className="skill-cell">
                <h4>
                  <span className="num">{String(i + 1).padStart(2, "0")}</span>
                  {g.label}
                </h4>
                <div className="skill-list">
                  {g.items.map((s) => <span key={s} className="chip">{s}</span>)}
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ============ About ============ */
function About({ data }) {
  return (
    <section id="about" className="section-pad">
      <div className="container">
        <div className="section-head">
          <Reveal>
            <span className="eyebrow">01 — About</span>
            <h2 className="section-title">
              A short note about myself.
            </h2>
          </Reveal>
        </div>

        <div className="about-wrap">
          <Reveal className="about-text">
            {data.about.map((p, i) => <p key={i}>{p}</p>)}
          </Reveal>
          <Reveal delay={140} className="about-side">
            <div className="about-card">
              <div className="label">Education</div>
              <div className="val">{data.education.school}</div>
              <div className="sub">{data.education.degree}<br />{data.education.dates}</div>
            </div>
            <div className="about-card">
              <div className="label">Currently exploring</div>
              <div className="val">Recommendation systems & AI interfaces</div>
              <div className="sub">How retrieval, ranking, and conversation reshape the product surface.</div>
            </div>
            <div className="about-card">
              <div className="label">Product Philosophy</div>
              <div className="val">Technology should feel intuitive</div>
              <div className="sub">I’m interested in products that reduce friction, reward curiosity, and make complex systems feel natural to use.</div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ============ Contact ============ */
function Contact({ data }) {
  return (
    <section id="contact" className="contact section-pad">
      <div className="contact-aurora" aria-hidden="true" />
      <div className="container contact-inner">
        <Reveal>
          <span className="eyebrow">05 — Contact</span>
        </Reveal>
        <Reveal delay={100}>
          <h2>
            Let's talk.
          </h2>
        </Reveal>
        <Reveal delay={200}>
          <p className="hero-sub" style={{ marginTop: 18 }}>
            I'm always up for a conversation about product, AI interfaces, or anything someone's quietly building. The fastest way to reach me is email.
          </p>
        </Reveal>

        <div className="contact-rows">
          <div className="contact-row">
            <span className="k">Email</span>
            <span className="v">{data.email}</span>
            <span className="arrow">↗</span>
          </div>
          <a className="contact-row" href={data.linkedin} target="_blank" rel="noopener">
            <span className="k">LinkedIn</span>
            <span className="v">in / justin-lee680</span>
            <span className="arrow">↗</span>
          </a>
          <a className="contact-row" href="#top">
            <span className="k">Back to top</span>
            <span className="v">Return to the start</span>
            <span className="arrow">↑</span>
          </a>
        </div>

        <div className="foot">
          <span>© 2026 Justin Lee</span>
          <span>Built with intention · New York City Metropolitan Area</span>
        </div>
      </div>
    </section>
  );
}

/* ============ App ============ */
function App() {
  const data = window.JUSTIN_DATA;
  return (
    <>
      <Nav data={data} />
      <Hero data={data} />
      <About data={data} />
      <Experience data={data} />
      <Projects data={data} />
      <Skills data={data} />
      <Contact data={data} />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);