// Footer — site index, includes the full product family + Executive Signal sub-product.

function Footer() {
  const cols = [
    {
      title: "ProFamily",
      links: [
        { label: "ProFamily Life" },
        { label: "ProFamily Kids" },
        { label: "ProFamily Career" },
        { label: "ProFamily Money" },
        { label: "ProFamily Memory" },
      ],
    },
    {
      title: "Sub-products",
      links: [
        { label: "LetsPlay", url: "https://lets-play-nine.vercel.app/", external: true, pillar: "PFK" },
        { label: "Executive Signal", url: "https://www.mycareersignal.com/", external: true, pillar: "PFC" },
      ],
    },
    {
      title: "Company",
      links: [
        { label: "About" },
        { label: "Roadmap" },
        { label: "Education" },
        { label: "Contact" },
        { label: "ProFamily Telegram bot", url: "../profamily-telegram/index.html" },
      ],
    },
    {
      title: "Legal",
      links: [
        { label: "Privacy" }, { label: "Terms" }, { label: "Family data policy" }, { label: "Memory controls" },
      ],
    },
  ];

  return (
    <footer className="vh-footer">
      <div className="vh-footer-inner">
        <div className="vh-footer-brand">
          <a href="#top" className="vh-brand">
            <img src="../../assets/valuehuman-logo.jpg" alt="ValueHuman" className="vh-brand-img" />
            <div className="vh-brand-text">
              <div className="vh-brand-name">
                <span style={{ color: "var(--vh-orange-500)" }}>Value</span>
                <span style={{ color: "var(--vh-blue-500)" }}>Human</span>
                <span style={{ background: "var(--gradient-ai)", WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent" }}> AI</span>
              </div>
              <div className="vh-brand-tag">Bridging Human &amp; AI</div>
            </div>
          </a>
          <p className="vh-footer-tagline">
            Plan daily life. Guide your kids. Grow your career. Manage family money. Remember everything.
          </p>
        </div>

        <div className="vh-footer-cols">
          {cols.map((c) => (
            <div key={c.title} className="vh-footer-col">
              <div className="vh-footer-col-title">{c.title}</div>
              <ul>
                {c.links.map((l) => (
                  <li key={l.label}>
                    {l.external ? (
                      <a href={l.url} target="_blank" rel="noopener noreferrer">
                        {l.label}
                        {l.pillar && <span className="vh-footer-pillar-tag">{l.pillar}</span>}
                        <Icon name="arrow-up-right" size={12} style={{ marginLeft: 4, opacity: 0.6 }} />
                      </a>
                    ) : l.url ? (
                      <a href={l.url}>{l.label}</a>
                    ) : (
                      <a href="#">{l.label}</a>
                    )}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>

      <div className="vh-footer-bridge" />

      <div className="vh-footer-bottom">
        <div>© 2025 ValueHuman AI. All rights reserved.</div>
        <div className="vh-footer-bottom-right">
          <a href="#">@valuehumanai</a>
          <a href="#">@profamily_ai_bot</a>
          <a href="mailto:sales@valuehuman.ai">sales@valuehuman.ai</a>
          <a href="mailto:admin@valuehuman.ai">admin@valuehuman.ai</a>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;