// Main page sections — Hero, About + Now, Experience, Skills, Contact

const Hero = () => (
  <header className="hero" id="top">
    <div className="hero-greet">
      <span className="status-dot"></span>
      <span>Available for interesting opportunities</span>
    </div>
    <h1>
      Hey, I'm <span className="accent">{NOAH.name}</span> <span className="wave" role="img" aria-label="waving hand">👋</span>
    </h1>
    <p className="hero-lede">
      I'm a <strong>senior software engineer</strong> in Portland, OR with a decade of shipping
      production web apps — from <strong>Rails monoliths</strong> to <strong>Vue micro-frontends</strong>.
      I most recently worked at <strong>Williams-Sonoma</strong>, shipping production e-commerce features.
    </p>
    <div className="hero-actions">
      <a className="btn btn-primary" href="#experience">
        See the work
        <Icon name="arrow-down" size={14} />
      </a>
      <a className="btn btn-ghost" href={NOAH.github} target="_blank" rel="noreferrer">
        <Icon name="github" size={14} />
        GitHub
      </a>
      <a className="btn btn-ghost" href={NOAH.linkedin} target="_blank" rel="noreferrer">
        <Icon name="linkedin" size={14} />
        LinkedIn
      </a>
    </div>
    <div className="hint">
      Tip: press <span className="kbd">/</span> to search anywhere, or try <span className="kbd">↑↑↓↓←→←→BA</span>
    </div>
  </header>
);

const About = () => (
  <section className="block" id="about">
    <div className="section-eyebrow">About</div>
    <div className="about-grid">
      <div className="about-text">
        <h2 className="section-title">A pragmatic generalist who likes shipping things.</h2>
        <p>
          I started out on a Ruby on Rails team at <strong>Copious</strong> in 2017 and have spent the
          decade since bouncing between Rails, Vue, React, Node, and Go — usually wherever the
          interesting problems are.
        </p>
        <p>
          I care about <strong>code that people can read in six months</strong>, accessible UI,
          and the kind of small product details that make folks smile. I've architected pre-upload
          moderation services, migrated stacks from Rails to Node/Java, and co-founded a startup
          from zero.
        </p>
        <p>
          Off the clock, I'm usually spending time with my wife and son, eating good food, and tinkering on side projects.
        </p>
      </div>
      <aside className="now-card">
        <h3>Formerly</h3>
        {NOW.map((n, i) => (
          <div className="now-row" key={i}>
            <div className="ico"><Icon name={n.icon} size={14} /></div>
            <div>
              <div className="label">{n.label}</div>
              <div className="value">{n.value}</div>
            </div>
          </div>
        ))}
      </aside>
    </div>
  </section>
);

const ExperienceItem = ({ job, isOpen, onToggle, index }) => (
  <article
    className={`exp ${isOpen ? "is-open" : ""}`}
    onClick={onToggle}
    style={{ cursor: "pointer", transitionDelay: `${index * 30}ms` }}
  >
    <div className="exp-logo" aria-hidden="true">
      <span>{job.initials}</span>
    </div>
    <div className="exp-main">
      <h3>{job.role}</h3>
      <div className="exp-meta">
        <span style={{ color: "var(--text)", fontWeight: 600 }}>{job.company}</span>
        <span className="dot">•</span>
        <span>{job.location}</span>
      </div>
      <p style={{
        fontSize: 14.5,
        lineHeight: 1.55,
        color: "var(--text-soft)",
        margin: 0
      }}>{job.blurb}</p>
      <div className="exp-desc">
        <ul style={{ margin: "8px 0 0", paddingLeft: 18, color: "var(--text-soft)" }}>
          {job.bullets.map((b, i) => (
            <li key={i} style={{ marginBottom: 6, lineHeight: 1.55, fontSize: 14.5 }}>{b}</li>
          ))}
        </ul>
        <div className="exp-tags">
          {job.tags.map((t, i) => <span key={i} className="tag">{t}</span>)}
        </div>
      </div>
    </div>
    <div className="exp-date">
      <div>{job.start}</div>
      <div style={{ opacity: 0.6 }}>↓</div>
      <div>{job.end}</div>
    </div>
  </article>
);

const Experience = () => {
  const [open, setOpen] = React.useState(new Set([0]));
  const toggle = (i) => {
    setOpen(prev => {
      const next = new Set(prev);
      if (next.has(i)) next.delete(i); else next.add(i);
      return next;
    });
  };
  return (
    <section className="block" id="experience">
      <div className="section-eyebrow">Experience</div>
      <h2 className="section-title">Where I've shipped things.</h2>
      <p style={{ color: "var(--text-soft)", maxWidth: 580, marginTop: -10, marginBottom: 28 }}>
        Click any role to see the details.
      </p>
      <div className="timeline">
        {EXPERIENCE.map((job, i) => (
          <ExperienceItem
            key={i}
            job={job}
            index={i}
            isOpen={open.has(i)}
            onToggle={() => toggle(i)}
          />
        ))}
      </div>
    </section>
  );
};

const Skills = () => {
  const ref = React.useRef(null);
  const [animate, setAnimate] = React.useState(false);
  React.useEffect(() => {
    const obs = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) { setAnimate(true); obs.disconnect(); } },
      { threshold: 0.2 }
    );
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  const maxYears = 10;
  return (
    <section className="block" id="skills" ref={ref}>
      <div className="section-eyebrow">Skills</div>
      <h2 className="section-title">Stack &amp; strengths.</h2>
      <div className="skills-grid">
        <div>
          {SKILLS.map((s, i) => (
            <div className="skill" key={i}>
              <div className="skill-head">
                <span className="skill-name">{s.name}</span>
                <span className="skill-years">{s.years} {s.years === 1 ? "yr" : "yrs"}</span>
              </div>
              <div className="skill-bar">
                <div
                  className="skill-fill"
                  style={{
                    width: animate ? `${(s.years / maxYears) * 100}%` : "0%",
                    transitionDelay: `${i * 80}ms`
                  }}
                />
              </div>
            </div>
          ))}
        </div>
        <div className="chip-cloud">
          <h4>Also good at</h4>
          {STRENGTHS.map((s, i) => <span className="chip" key={i}>{s}</span>)}
        </div>
      </div>
    </section>
  );
};

const Contact = () => (
  <section className="block" id="contact" style={{ paddingBottom: 24 }}>
    <div className="contact-card">
      <h2>Let's build something together.</h2>
      <p>
        Open to senior engineering roles, contract work, and the occasional weird-idea
        collab. The fastest way to reach me is email.
      </p>
      <div className="contact-actions">
        <a className="btn btn-primary" href={`mailto:${NOAH.email}`}>
          <Icon name="mail" size={14} />
          {NOAH.email}
        </a>
        <a className="btn btn-ghost" href={NOAH.github} target="_blank" rel="noreferrer">
          <Icon name="github" size={14} />
          github.com/noahramey
        </a>
        <a className="btn btn-ghost" href={NOAH.linkedin} target="_blank" rel="noreferrer">
          <Icon name="linkedin" size={14} />
          linkedin.com/in/noahramey
        </a>
      </div>
    </div>
    <footer className="foot">
      <div>© {new Date().getFullYear()} Noah Ramey — Portland, OR</div>
      <div>
        built with React · press <span className="kbd">/</span>
      </div>
    </footer>
  </section>
);

Object.assign(window, { Hero, About, Experience, Skills, Contact });