// Products section — status cards with Launched / In progress / Planned.

function StatusBadge({ status }) {
  const s = STATUS_STYLES[status];
  return (
    <span className="status-badge" style={{ color: s.fg, background: s.bg }}>
      <span className="status-dot" style={{ background: s.fg }} />
      {status}
    </span>
  );
}

function ProductCard({ p, featured = false }) {
  return (
    <article className={`vh-product-card${featured ? " featured" : ""}`} style={{ ["--accent"]: p.color, ["--tint"]: p.tint }}>
      <div className="vh-product-top">
        <div className="vh-product-emoji">{p.emoji}</div>
        <StatusBadge status={p.status} />
      </div>
      <div className="vh-product-code">{p.code}</div>
      <h3 className="vh-product-name">{p.name}</h3>
      <p className="vh-product-blurb">{p.blurb}</p>

      {p.features && (
        <ul className="vh-product-features">
          {p.features.map((f) => (
            <li key={f}>
              <Icon name="check" size={14} color={p.color} />
              <span>{f}</span>
            </li>
          ))}
        </ul>
      )}

      {p.sub && (
        <div className="vh-product-sub">
          <div className="vh-product-sub-label">Sub-products</div>
          <div className="vh-product-sub-chips">
            {p.sub.map((s) => (
              <a
                key={s.name}
                href={s.url}
                target="_blank"
                rel="noopener noreferrer"
                className="vh-product-sub-chip vh-product-sub-chip-link"
                title={`Open ${s.name} ↗`}
              >
                {s.launched && <span className="vh-product-sub-dot" />}
                {s.name}
                <Icon name="arrow-up-right" size={12} />
              </a>
            ))}
          </div>
        </div>
      )}

      <a href="#" className="vh-product-link">
        Explore {p.short}
        <Icon name="arrow-right" size={14} />
      </a>
    </article>
  );
}

function Products() {
  // Hydrate pillars with a small features list per scope doc
  const enriched = PILLARS.map((p) => {
    const features = {
      PFL:   ["Family schedule", "Meals & grocery", "Reminders", "Health & home"],
      PFK:   ["School & exams", "Activities & growth", "College planning", "Child portfolio"],
      PFC:   ["Career goals", "Learning plans", "Certifications", "Job search"],
      PFM:   ["Budget & bills", "Subscriptions", "Savings goals", "Wealth review"],
      PFMem: ["Family preferences", "Child profiles", "Career profiles", "Permission controls"],
    }[p.code];
    return { ...p, features };
  });

  return (
    <section className="vh-section" id="products">
      <div className="vh-section-head">
        <div className="eyebrow">Products</div>
        <h2>The ProFamily product family</h2>
        <p className="vh-section-lede">
          Five products. One memory. Build them up as your family grows.
        </p>
      </div>

      <div className="vh-products-grid">
        {enriched.map((p) => (
          <ProductCard key={p.code} p={p} />
        ))}
      </div>
    </section>
  );
}

window.Products = Products;
window.ProductCard = ProductCard;
window.StatusBadge = StatusBadge;