/* global React, PORTFOLIO, ImgFrame, Tags, Marquee */
// Home page — hero, asymmetric project grid, marquee, experience,
// stats, about, contact.

const { useEffect, useRef, useState } = React;

function Home({ onOpenProject, scrollAnchor, mobile = false }) {
  // smooth scroll to anchor when arriving from another route
  useEffect(() => {
    if (!scrollAnchor) return;
    const el = document.getElementById(scrollAnchor);
    if (el) requestAnimationFrame(() => el.scrollIntoView({ behavior: "smooth", block: "start" }));
  }, [scrollAnchor]);

  return (
    <main>
      <Hero />
      <Marquee items={["Mechanical Design", "Prototyping", "CAD", "Robotics", "Hardware", "Iteration"]} />
      <ProjectsSection onOpenProject={onOpenProject} mobile={mobile} />
      <ExperienceSection />
      <StatsSection />
      <AboutSection />
      <ContactSection />
    </main>
  );
}

// ── Hero ────────────────────────────────────────────────────
function Hero() {
  const h = PORTFOLIO.hero;
  return (
    <section className="hero" id="top">
      <div className="container">
        <div className="hero-eyebrow reveal" data-d="1">
          <span className="pulse" />
          {h.eyebrow}
          <span style={{ opacity: 0.5 }}>·</span>
          {PORTFOLIO.meta.school}
          <span style={{ opacity: 0.5 }}>/</span>
          {PORTFOLIO.meta.classOf}
        </div>

        <h1 className="hero-title reveal" data-d="2">
          {h.title[0]}{" "}
          <span className="accent">{h.title[1]}</span>
        </h1>

        <div className="hero-actions reveal" data-d="3">
          <a className="btn btn-primary" href="#projects">
            View Selected Work <span className="arrow" aria-hidden="true">→</span>
          </a>
          <a className="btn" href="#contact">
            Start a Conversation <span className="arrow" aria-hidden="true">↗</span>
          </a>
        </div>

        <div className="hero-meta reveal" data-d="4">
          {h.facets.map((f, i) => (
            <div className="hero-meta-cell" key={i}>
              <span className="t-eyebrow">{f.label}</span>
              <h4>{f.title}</h4>
              <p>{f.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Projects Section (asymmetric grid) ──────────────────────
function ProjectsSection({ onOpenProject, mobile }) {
  const projects = PORTFOLIO.projects;
  return (
    <section id="projects" style={{ padding: "96px 0" }}>
      <div className="container">
        <div className="section-head">
          <div>
            <span className="t-eyebrow">Selected Work · {String(projects.length).padStart(2, "0")}</span>
            <h2>Projects rooted in building, not just planning.</h2>
          </div>
          <p className="lede">
            The portfolio centers on mechanical engineering work where fit, fabrication, iteration, and physical usability matter as much as the concept. Each project is most valuable when it reveals how design decisions actually behave once they are built, tested, and improved.
          </p>
        </div>

        <div className="proj-grid">
          {projects.map((p, i) => (
            <ProjectCard
              key={p.id}
              project={p}
              index={i}
              onOpen={() => onOpenProject?.(p.id)}
            />
          ))}

          {/* Currently building card */}
          <div className={`proj-card ${mobile ? "" : "is-side"}`} style={{ cursor: "default" }}>
            <div className="head">
              <span><b>Coming Soon</b></span>
              <span>—</span>
            </div>
            <div className="img-frame" style={{ aspectRatio: "1 / 1" }}>
              <div className="placeholder">
                <span className="placeholder-label">Currently building · new project</span>
              </div>
            </div>
            <h3>Currently Building</h3>
            <p>New project updates will be added soon. Wearables, sensor systems, and hardware integration in active development.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function ProjectCard({ project, index, onOpen }) {
  const num = String(index + 1).padStart(2, "0");
  return (
    <article
      className={`proj-card ${project.placement}`}
      onClick={onOpen}
      role={onOpen ? "button" : undefined}
      tabIndex={onOpen ? 0 : undefined}
      onKeyDown={(e) => { if (onOpen && (e.key === "Enter" || e.key === " ")) { e.preventDefault(); onOpen(); } }}
    >
      <div className="head">
        <span>{project.kind}</span>
        <span><b>{project.year}</b> · {num}</span>
      </div>
      <ImgFrame
        src={project.img}
        alt={project.imgAlt}
        label={project.imgAlt}
        caption={project.role}
      />
      <h3>{project.title}</h3>
      <p>{project.summary}</p>
      <Tags items={project.tags} />
    </article>
  );
}

// ── Experience timeline ─────────────────────────────────────
function ExperienceSection() {
  return (
    <section id="experience" style={{ padding: "96px 0", borderTop: "1px solid var(--line-2)" }}>
      <div className="container">
        <div className="section-head">
          <div>
            <span className="t-eyebrow">Experience</span>
            <h2>Training shaped by robotics, coursework, and physical builds.</h2>
          </div>
          <p className="lede">
            My path so far has combined formal engineering education with collaborative design environments where prototypes and systems have to work beyond the screen — building both analytical foundations and a stronger instinct for what makes a design feasible in practice.
          </p>
        </div>

        <div className="timeline">
          {PORTFOLIO.experience.map((row, i) => (
            <div className="timeline-row" key={i}>
              <span className="when">{row.when}</span>
              <div>
                <h4>{row.title}</h4>
                <p>{row.desc}</p>
              </div>
              <span className="arrow">→</span>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 56 }}>
          <span className="t-eyebrow" style={{ display: "block", marginBottom: 16 }}>Core Tools</span>
          <div className="skills">
            {PORTFOLIO.skills.map((s, i) => (
              <span className="skill" key={s}>
                <span className="num tabular">{String(i + 1).padStart(2, "0")}</span>
                {s}
              </span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Stats ───────────────────────────────────────────────────
function StatsSection() {
  return (
    <section style={{ padding: "0 0 96px" }}>
      <div className="container">
        <div className="stats">
          {PORTFOLIO.stats.map((s) => (
            <div className="stat" key={s.label} style={{ paddingLeft: 16 }}>
              <span className="num tabular">{s.num}</span>
              <span className="label">{s.label}</span>
              <span className="desc">{s.desc}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── About ───────────────────────────────────────────────────
function AboutSection() {
  return (
    <section id="about" style={{ padding: "96px 0", borderTop: "1px solid var(--line-2)" }}>
      <div className="container">
        <div className="section-head">
          <div>
            <span className="t-eyebrow">About</span>
            <h2>Mechanical engineering major shaped by robotics and prototyping.</h2>
          </div>
        </div>

        <div className="about">
          <div className="img-frame portrait">
            <img src="assets/images/portrait.jpg" alt="Portrait of Benjamin Dison" />
            <div className="img-meta">Boulder · 2026</div>
          </div>
          <div className="about-body">
            <p>{PORTFOLIO.about.lede}</p>
            <div className="about-cells">
              {PORTFOLIO.about.cells.map((c, i) => (
                <div key={i}>
                  <span className="t-eyebrow">{c.label}</span>
                  <h5>{c.title}</h5>
                  <p>{c.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Contact ─────────────────────────────────────────────────
function ContactSection() {
  return (
    <footer id="contact" className="contact">
      <div className="container">
        <span className="t-eyebrow" style={{ display: "block", marginBottom: 24 }}>Contact · Available Now</span>
        <h2 className="contact-title">
          Available for engineering conversations & opportunities.
        </h2>

        <div className="contact-grid">
          <div className="cell">
            <span className="t-eyebrow">Direct</span>
            <a href={`mailto:${PORTFOLIO.meta.email}`}>{PORTFOLIO.meta.email}</a>
          </div>
          <div className="cell">
            <span className="t-eyebrow">Network</span>
            <a href={PORTFOLIO.meta.linkedin} target="_blank" rel="noreferrer">LinkedIn ↗</a>
          </div>
          <div className="cell">
            <span className="t-eyebrow">Based</span>
            <b>{PORTFOLIO.meta.location}</b>
          </div>
          <div className="cell">
            <span className="t-eyebrow">Open To</span>
            <b>Internships · Collaboration</b>
          </div>
        </div>

        <div className="footer">
          <span>© {new Date().getFullYear()} Benjamin Dison · Engineering Portfolio v2.0</span>
          <span className="tabular">{PORTFOLIO.meta.coords}</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Home });