/* Sections part 2: Experience, Skills, Education, Contact, Footer */
const { useState: uS2, useEffect: uE2, useRef: uR2 } = React;

/* ---------------- EXPERIENCE ---------------- */
function ExpItem({ item }) {
  const [ref, shown] = useReveal({ threshold: 0.2 });
  return (
    <div ref={ref} className={`exp ${item.current ? "is-current" : ""} ${shown ? "in" : ""}`}>
      <span className="exp-node"></span>
      <div className={`exp-card reveal ${shown ? "in" : ""}`}>
        <div className="exp-head">
          <div>
            <div className="exp-company">
              {item.company}
              {item.current && <span className="badge-now"><span className="status-dot" style={{ width: 7, height: 7 }}></span>Now</span>}
            </div>
            <div className="exp-role">{item.role}</div>
            <div className="exp-sub">{item.sub}</div>
          </div>
          <div>
            <div className="exp-period">{item.period}</div>
            <div className="exp-loc">{item.location}</div>
          </div>
        </div>
        <ul className="exp-points">
          {item.points.map((p, i) => <li key={i}>{p}</li>)}
        </ul>
        <div className="chips">
          {item.tech.map((t, i) => <span className="chip" key={i}>{t}</span>)}
        </div>
      </div>
    </div>
  );
}

function Experience() {
  const S = window.SITE;
  const trackRef = uR2(null);
  const progRef = uR2(null);

  uE2(() => {
    const track = trackRef.current;
    const prog = progRef.current;
    if (!track || !prog) return;
    let raf = 0;
    const update = () => {
      raf = 0;
      const rect = track.getBoundingClientRect();
      const vh = window.innerHeight;
      const start = vh * 0.5;
      const total = rect.height + vh * 0.0;
      const scrolled = start - rect.top;
      const ratio = Math.max(0, Math.min(1, scrolled / Math.max(total - vh * 0.5, 1)));
      prog.style.height = `${ratio * (rect.height - 16)}px`;
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
    update();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); };
  }, []);

  return (
    <section className="section" id="experience">
      <div className="wrap">
        <SectionHeading
          eyebrow="Experience"
          title='A decade of shipping, <span class="grad-text">role by role.</span>'
          lead="From multi-tenant SaaS on Next.js to terabyte-scale search — here's the work that built my range."
        />
        <div className="timeline" ref={trackRef}>
          <div className="tl-line"></div>
          <div className="tl-progress" ref={progRef}></div>
          {S.experience.map((item, i) => <ExpItem key={i} item={item} />)}
        </div>
      </div>
    </section>
  );
}

/* ---------------- SKILLS ---------------- */
function SkillCard({ group, items, delay }) {
  const IconComp = skillIconFor(group);
  return (
    <Reveal className="skill-card" delay={delay}>
      <div className="skill-head">
        <span className="skill-ico"><IconComp /></span>
        <span className="skill-title">{group}</span>
      </div>
      <div className="skill-items">
        {items.map((s, i) => <span className="skill-pill" key={i}>{s}</span>)}
      </div>
    </Reveal>
  );
}

function Skills() {
  const S = window.SITE;
  return (
    <section className="section" id="skills">
      <div className="wrap">
        <SectionHeading
          eyebrow="Tech stack"
          title='Tools I reach for to <span class="grad-text">ship fast.</span>'
          lead="Frontend is home base, but I'm comfortable owning the API, the database, and the cloud that runs it all."
        />
        <div className="skills-grid">
          {S.skills.map((s, i) => <SkillCard key={i} {...s} delay={i * 80} />)}
        </div>
      </div>
    </section>
  );
}

/* ---------------- EDUCATION ---------------- */
function Education() {
  const S = window.SITE;
  return (
    <section className="section" id="education">
      <div className="wrap">
        <SectionHeading
          eyebrow="Education & certifications"
          title='Foundations &amp; <span class="grad-text">continuous learning.</span>'
        />
        <div className="edu-grid">
          {S.education.map((e, i) => {
            const IconComp = e.type === "cert" ? Icon.award : Icon.cap;
            return (
              <Reveal className="edu-card" key={i} delay={i * 70}>
                <span className={`edu-ico ${e.type === "cert" ? "cert" : ""}`}><IconComp /></span>
                <div>
                  <div className="edu-title">{e.title}</div>
                  <div className="edu-org">{e.org}</div>
                  <div className="edu-period">{e.period}</div>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ---------------- CONTACT ---------------- */
function Contact() {
  const S = window.SITE;
  return (
    <section className="section contact" id="contact">
      <div className="wrap">
        <Reveal className="contact-card">
          <span className="c-orb c-orb-1"></span>
          <span className="c-orb c-orb-2"></span>
          <div className="contact-inner">
            <span className="status-pill"><span className="status-dot"></span>{S.availability}</span>
            <h2 style={{ marginTop: 22 }}>Let's build something<br/><span className="grad-text">people love to use.</span></h2>
            <p className="contact-lead">
              I'm looking for my next Frontend Engineering role — ideally React-based, though I'm open to the right team. If that sounds like you, let's talk.
            </p>
            <div className="contact-actions">
              <a className="btn btn-primary" href={`mailto:${S.email}`}><Icon.mail />{S.email}</a>
              <a className="btn btn-ghost" href={S.github} target="_blank" rel="noopener"><Icon.github />GitHub</a>
            </div>
            <div className="contact-links">
              <a className="contact-link" href={S.linkedin} target="_blank" rel="noopener"><Icon.linkedin />{S.linkedinLabel}</a>
              <a className="contact-link" href={S.github} target="_blank" rel="noopener"><Icon.github />{S.githubLabel}</a>
              <a className="contact-link" href={`mailto:${S.email}`}><Icon.mail />{S.email}</a>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------------- FOOTER ---------------- */
function Footer() {
  const S = window.SITE;
  return (
    <footer className="footer">
      <div className="wrap footer-inner">
        <div className="footer-brand">
          <span className="brand-mark">
            <img src="uploads/avatar.png" alt="Fhillip Castillo" loading="lazy" />
          </span>
          <div>
            <div style={{ fontSize: 15 }}>{S.name}</div>
            <small>Frontend Engineer · Full-Stack · {new Date().getFullYear()}</small>
          </div>
        </div>
        <div className="footer-socials">
          <a href={S.github} target="_blank" rel="noopener" aria-label="GitHub"><Icon.github /></a>
          <a href={S.linkedin} target="_blank" rel="noopener" aria-label="LinkedIn"><Icon.linkedin /></a>
          <a href={`mailto:${S.email}`} aria-label="Email"><Icon.mail /></a>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Experience, Skills, Education, Contact, Footer });