// Ecosystem — the five-pillar diagram. Memory layer sits underneath
// the other four to reflect "shared intelligence layer".

function Ecosystem() {
  const top = PILLARS.filter((p) => p.code !== "PFMem");
  const mem = PILLARS.find((p) => p.code === "PFMem");

  return (
    <section className="vh-section" id="ecosystem">
      <div className="vh-section-head">
        <div className="eyebrow">The ecosystem</div>
        <h2>
          One family operating system,<br />
          <span style={{ color: "var(--fg-muted)" }}>built from five pillars.</span>
        </h2>
        <p className="vh-section-lede">
          ProFamily is organized into four product pillars families interact with daily, plus a
          shared <em>Memory layer</em> that quietly carries context across everything else.
        </p>
      </div>

      <div className="vh-ecosystem">
        <div className="vh-ecosystem-row">
          {top.map((p) => (
            <article key={p.code} className="vh-pillar" style={{ ["--accent"]: p.color, ["--tint"]: p.tint }}>
              <div className="vh-pillar-emoji">{p.emoji}</div>
              <div className="vh-pillar-code">{p.code}</div>
              <h3 className="vh-pillar-name">{p.short}</h3>
              <p className="vh-pillar-blurb">{p.blurb}</p>
              {p.sub && (
                <div className="vh-pillar-sub">
                  {p.sub.map((s) => (
                    <a
                      key={s.name}
                      href={s.url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="vh-pillar-sub-chip vh-pillar-sub-chip-link"
                      title={`Open ${s.name} ↗`}
                    >
                      {s.launched && <span className="vh-pillar-sub-dot" />}
                      {s.name}
                      <Icon name="arrow-up-right" size={11} />
                    </a>
                  ))}
                </div>
              )}
            </article>
          ))}
        </div>

        {/* The bridge arch — visual connector between the four pillars and the memory layer */}
        <div className="vh-ecosystem-bridge">
          <svg viewBox="0 0 800 80" preserveAspectRatio="none" aria-hidden="true">
            <defs>
              <linearGradient id="bridgeGrad" x1="0" y1="0" x2="1" y2="0">
                <stop offset="0%" stopColor="#1F70C1" />
                <stop offset="45%" stopColor="#7929B6" />
                <stop offset="72%" stopColor="#E0337F" />
                <stop offset="100%" stopColor="#F26B3A" />
              </linearGradient>
            </defs>
            <path d="M0,60 C200,10 600,10 800,60" fill="none" stroke="url(#bridgeGrad)" strokeWidth="3" strokeLinecap="round" />
          </svg>
        </div>

        <article className="vh-pillar vh-pillar-mem" style={{ ["--accent"]: mem.color, ["--tint"]: mem.tint }}>
          <div className="vh-pillar-mem-grid">
            <div>
              <div className="vh-pillar-emoji" style={{ fontSize: 32 }}>{mem.emoji}</div>
              <div className="vh-pillar-code">{mem.code}</div>
              <h3 className="vh-pillar-name" style={{ fontSize: 28 }}>{mem.short}</h3>
              <p className="vh-pillar-blurb" style={{ fontSize: 15 }}>
                The intelligence layer used by every product pillar. Stores preferences, profiles, milestones —
                permission-gated and family-scoped.
              </p>
            </div>
            <div className="vh-mem-examples">
              {[
                "Friday is usually movie night.",
                "Aarav is showing interest in robotics.",
                "Avoid spicy food on school nights.",
                "Annual checkup is usually in January.",
              ].map((q) => (
                <div className="vh-mem-quote" key={q}>
                  <Icon name="quote" size={14} color="var(--pfmem-color)" />
                  <span>{q}</span>
                </div>
              ))}
            </div>
          </div>
        </article>
      </div>
    </section>
  );
}

window.Ecosystem = Ecosystem;