// v5 — Practice teaser (homepage).
// A one-screen introduction to the material that now lives in full on /about and /contact:
// the method (flywheel + disciplines + AI fluency), the person, and the ways in.
// Deliberately short — every row deep-links into the page that now owns it.

const V5_PRACTICE_TEASE = [
  {
    id: "about",
    href: "/about",
    name: "About",
    line: "Who I am, what I do, how the work works.",
    cursor: "The long version"
  },
  {
    id: "contact",
    href: "/contact",
    name: "Contact",
    line: "The ways we can work together.",
    cursor: "Engagement modes"
  }
];

const V5PracticeTeaser = () => {
  return (
    <section id="practice" className="v5-teaser" data-screen-label="The practice">
      <div className="v4-container">
        <div className="v5-teaser-head">
          <div className="v5-teaser-head-row">
            <h2 className="v5-teaser-title" data-cursor="The practice, in brief">
              <WordReveal text="Up next." stagger={55} />
            </h2>
          </div>
        </div>

        <div className="v5-teaser-rows">
          {V5_PRACTICE_TEASE.map((t) =>
          <a key={t.id} href={t.href} className="v5-teaser-row" data-cursor={t.cursor} data-cursor-style="cta">
              <span className="v5-teaser-row-main">
                <span className="v5-teaser-row-name">{t.name}</span>
                <span className="v5-teaser-row-line">{t.line}</span>
              </span>
              <span className="v5-teaser-row-arr" aria-hidden="true">→</span>
            </a>
          )}
        </div>
      </div>
    </section>);

};

Object.assign(window, { V5PracticeTeaser, V5_PRACTICE_TEASE });