// PerspectiveSection.jsx — Section 07. Notes from the work, hairline-divided list.
// Latest 3 articles surface here; full archive at perspective.html.

const PERSPECTIVE_NOTES = [
  {
    num: "No. 05",
    date: "April 2026",
    title: "Packaging changes how the product feels emotionally.",
    summary:
      "Packaging is rarely the final step. In eyewear, it shapes how the product feels long before the customer ever puts the frame on.",
    href: "perspective/05-packaging.html",
  },
  {
    num: "No. 04",
    date: "February 2026",
    title: "Eyewear becomes operational surprisingly quickly.",
    summary:
      "Frame, case, packaging — and then the timelines fragment, the suppliers multiply, and the project quietly stops being about design.",
    href: "perspective/04-operational.html",
  },
  {
    num: "No. 03",
    date: "November 2025",
    title: "Founder-led brands don\u2019t want creative control taken away.",
    summary:
      "Most founder-led brands aren\u2019t looking for someone to take the wheel. They\u2019re looking for translation \u2014 emotional instincts into operational reality.",
    href: "perspective/03-creative-control.html",
  },
];

const PerspectiveSection = () => (
  <section className="section" id="perspective">
    <span className="edge-label">EM · 07 — PERSPECTIVE</span>
    <span className="gutter-mark" data-num="07"></span>
    <div className="shell">
      <header className="perspective__header">
        <div className="eyebrow eyebrow-rule">Section · 07 — Perspective</div>
        <div>
          <h2 className="perspective__title">
            Observations from doing this repeatedly.
          </h2>
          <p className="perspective__sublede">
            Short pieces on what actually happens when a brand enters eyewear — the moments most factories and agencies don&rsquo;t document.
          </p>
        </div>
      </header>

      <ol className="perspective__list" role="list">
        {PERSPECTIVE_NOTES.map((n) => (
          <li className="perspective__item" key={n.num}>
            <a className="perspective__link" href={n.href}>
              <span className="perspective__num">{n.num}</span>
              <h3 className="perspective__h3">{n.title}</h3>
              <p className="perspective__summary">{n.summary}</p>
              <span className="perspective__date">{n.date}</span>
            </a>
          </li>
        ))}
      </ol>

      <div className="perspective__more">
        <a className="link-arrow" href="perspective.html">All notes</a>
      </div>
    </div>
  </section>
);

window.PerspectiveSection = PerspectiveSection;