// v5 — Earlier Signals (legacy clients, text-forward)

const SIGNALS = [
  {
    n: "01",
    name: "Apple",
    years: "2015",
    role: "Apple Music · product & experience design",
    taught: "Taste at launch speed.",
    body: "Rapid prototyping for Apple Music creative and product exploration during the platform's early development.",
  },
  {
    n: "02",
    name: "Adobe",
    years: "2012–14",
    role: "Marketing Cloud · campaign analytics & data visualization",
    taught: "Patented workflow design for data-heavy products.",
    body: "Product design across campaign analytics and marketing intelligence. The work resulted in three granted invention patents in reporting, visualization, and workflow systems.",
  },
  {
    n: "03",
    name: "Airbnb",
    years: "2016",
    role: "Airbnb Trips · discovery + experiences",
    taught: "Turning travel into service discovery.",
    body: "Design sprints supporting the launch of Airbnb Trips, helping shape new ways for travelers to discover local experiences beyond lodging.",
  },
  {
    n: "04",
    name: "Logitech",
    years: "2017–19",
    role: "Hardware + services ecosystem",
    taught: "Where hardware and software have to behave like one product.",
    body: "Cross-device experience work where physical products, software services, and ecosystem behavior had to feel coherent.",
  },
  {
    n: "05",
    name: "Target",
    years: "2017",
    role: "In-store baby registry · service design",
    taught: "Decision architecture in retail.",
    body: "Reframed baby registry bundles around the real moments parents navigate, turning a SKU list into a guide for a life stage.",
  },
  {
    n: "06",
    name: "Disney",
    years: "2009–11",
    role: "Social game + platform systems",
    taught: "Designing behavior before the patterns were obvious.",
    body: "Product design for NBA Dynasty, a social gaming platform that connected sports fandom, gameplay systems, visual identity, and online community behavior.",
  },
];

const V5Signals = () => {
  return (
    <section className="v5-signals" data-screen-label="Earlier Signals">
      <div className="v4-container">
        <header className="v5-signals-head v5-signals-head-2col">
          <div>
            <span className="v5-signals-eyebrow">
              <span className="v5-signals-eyebrow-rule"></span>
              <span className="v5-signals-eyebrow-num">01B</span>
              <span>Earlier signals · where the range came from</span>
            </span>
            <h2 className="v5-signals-title" data-cursor="Six places · 20+ yrs">
              <WordReveal text="Six places the practice learned" stagger={50}/>
              <br/>
              <span className="emph"><WordReveal text="how to work." stagger={60} startDelay={500}/></span>
            </h2>
          </div>
          <p className="v5-signals-lede">
            <FadeIn delay={300}>
              The work is old enough that the interfaces are less important than the instincts they produced: rapid prototyping, patented workflow design, service discovery, physical/digital systems, retail decision architecture, and early social platforms.
            </FadeIn>
          </p>
        </header>

        <div className="v5-signals-table">
          {SIGNALS.map((s, i) => (
            <FadeIn as="div" key={s.name} delay={i * 80} className="v5-signals-row" data-cursor={`${s.name} · ${s.years}`}>
              <span className="v5-signals-n">{s.n}</span>
              <div className="v5-signals-cell v5-signals-cell-name">
                <span className="v5-signals-name">{s.name}</span>
                <span className="v5-signals-years">{s.years}</span>
              </div>
              <div className="v5-signals-cell v5-signals-cell-role">{s.role}</div>
              <div className="v5-signals-cell v5-signals-cell-body">
                <p className="v5-signals-taught"><span className="emph">{s.taught}</span></p>
                <p className="v5-signals-body">{s.body}</p>
              </div>
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { V5Signals });