/* Values marquee + Products specimen grid */

function Marquee() {
  const items = ["Think different", "Challenge convention", "Ask what if", "Ship fast", "AI first"];
  const seq = [...items, ...items];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {seq.map((it, idx) => (
          <span className={"marquee-item" + (idx % 2 ? " dim" : "")} key={idx}>
            {it}<span className="star">✳</span>
          </span>
        ))}
      </div>
    </div>
  );
}

const PRODUCTS = [
  {
    code: "SL—001",
    name: "reeli",
    ext: ".shop",
    status: "Live",
    statusClass: "live",
    color: "var(--lime)",
    desc: "Turns social selling chaos into a structured sales operation, without forcing sellers to learn ecommerce software.",
    tags: ["Commerce", "Live"],
    link: "Visit reeli.shop",
    href: "https://reeli.shop",
    watermark: "01",
    size: "specimen-feature",
  },
  {
    code: "SL—002",
    name: "ADHD",
    ext: "\u00A0To-Do",
    status: "In development",
    statusClass: "",
    color: "var(--cobalt)",
    desc: "Designed to turn boring-sounding tasks into challenges that excite and motivate the ADHD brain.",
    tags: ["Productivity", "WIP"],
    link: "Coming soon",
    href: "#contact",
    watermark: "02",
    size: "specimen-half",
  },
  {
    code: "SL—003",
    name: "StarPractice",
    ext: ".io",
    status: "In development",
    statusClass: "",
    color: "var(--coral)",
    desc: "FTC- and Google-compliant client reviews for orthodontist practices.",
    tags: ["Reviews", "SaaS"],
    link: "Coming soon",
    href: "#contact",
    watermark: "03",
    size: "specimen-third",
  },
  {
    code: "SL—004",
    name: "Your idea",
    ext: "\u00A0here",
    status: "Open slot",
    statusClass: "",
    color: "var(--violet)",
    desc: "There's always room for the next one. New products enter development regularly.",
    tags: ["Placeholder"],
    link: "Get in touch",
    href: "#contact",
    watermark: "04",
    size: "specimen-third",
  },
];

function Specimen({ p }) {
  const ref = React.useRef(null);
  const onMove = (e) => {
    const el = ref.current;
    if (!el || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    const r = el.getBoundingClientRect();
    const mx = (e.clientX - r.left) / r.width;
    const my = (e.clientY - r.top) / r.height;
    el.style.setProperty('--mx', (mx * 100) + '%');
    el.style.setProperty('--my', (my * 100) + '%');
    const rx = (my - 0.5) * -6;
    const ry = (mx - 0.5) * 6;
    el.style.transform = `perspective(900px) rotateX(${rx}deg) rotateY(${ry}deg) translateY(-4px)`;
  };
  const onLeave = () => {
    const el = ref.current;
    if (el) el.style.transform = '';
  };
  return (
    <a
      ref={ref}
      href={p.href}
      target={p.href.startsWith('http') ? '_blank' : undefined}
      rel={p.href.startsWith('http') ? 'noreferrer' : undefined}
      className={"specimen reveal " + p.size}
      style={{ '--c': p.color }}
      onMouseMove={onMove}
      onMouseLeave={onLeave}
    >
      <span className="glow"></span>
      <span className="spec-watermark">{p.watermark}</span>
      <div className="spec-top">
        <span className="spec-code">{p.code}</span>
        <span className={"spec-status " + p.statusClass}><span className="d"></span>{p.status}</span>
      </div>
      <div className="spec-body">
        <div className="spec-name">{p.name}<span className="ext">{p.ext}</span></div>
        <p className="spec-desc">{p.desc}</p>
        <div className="spec-foot">
          <span className="spec-link">{p.link} <span aria-hidden="true">→</span></span>
        </div>
      </div>
      <div className="spec-tags">
        {p.tags.map((t) => <span className="spec-tag" key={t}>{t}</span>)}
      </div>
    </a>
  );
}

function Products() {
  return (
    <section className="section" id="products">
      <div className="wrap">
        <div className="section-head">
          <div className="lead">
            <span className="section-num">02 — PORTFOLIO</span>
            <h2 className="h-big reveal">The<br />products.</h2>
          </div>
          <p className="aside reveal" data-delay="100">
            Every product Swift Labs launches lives under its own brand and domain.
            If you found us on a billing statement, the product you signed up for is one of these.
          </p>
        </div>
        <div className="products-grid">
          {PRODUCTS.map((p) => <Specimen p={p} key={p.code} />)}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Marquee, Products });