/* CTA + Footer */

function Closer() {
  return (
    <section className="section cta" id="contact">
      <div aria-hidden="true" className="mesh cta__mesh">
        <span className="mesh__blob mesh__blob--1"></span>
        <span className="mesh__blob mesh__blob--2"></span>
        <span className="mesh__blob mesh__blob--3"></span>
      </div>
      <div className="container">
        <Reveal>
          <h2 className="display cta__title" style={{ lineHeight: 0.96 }}>
            Let's build <em>something</em><br />worth shipping.
          </h2>
          <p className="lede cta__lede">
            Tell us about your product. We respond within one business day.
          </p>
          <div className="cta__ctas">
            <a href="mailto:info@innoveev.com" className="btn btn--primary">Start a project <Arrow /></a>
            <a href="#work" className="btn btn--secondary">Browse work</a>
          </div>
          <p className="mono-meta" style={{ marginTop: 56 }}>
            info@innoveev.com  ·  Dubai · Damascus · Istanbul · Tallinn
          </p>
        </Reveal>
      </div>
    </section>
  );
}

/* Root-relative link helper — pages living in subfolders (services/, legal/)
   need "../" in front of shared nav/footer links. */
const LINK_PREFIX = /\/(services|legal|technologies|blog|apps)\/[^/]*$/.test(window.location.pathname) ? "../" : "";
const rootHref = (href) => (/^(https?:|mailto:|#)/.test(href) ? href : LINK_PREFIX + href);

const FOOTER_COLS = [
  {
    title: "Services",
    items: [
      ["Mobile apps",        "services/mobile.html"],
      ["Web apps",           "services/web.html"],
      ["AI integrations",    "services/ai.html"],
      ["Product design",     "services/design.html"],
      ["Backend & cloud",    "services/backend.html"],
    ],
  },
  {
    title: "Technologies",
    items: [
      ["Figma",          "technology.html?slug=figma"],
      ["Flutter",        "technology.html?slug=flutter"],
      ["React Native",   "technology.html?slug=react-native"],
      ["Swift",          "technology.html?slug=swift"],
      ["Kotlin",         "technology.html?slug=kotlin"],
      ["Next.js",        "technology.html?slug=nextjs"],
      ["React",          "technology.html?slug=react"],
      ["Node.js",        "technology.html?slug=nodejs"],
      ["All technologies →", "technologies.html"],
    ],
  },
  {
    title: "Company",
    items: [
      ["About", "about.html"],
      ["Pricing", "pricing.html"],
      ["Process", "process.html"],
      ["Careers", "careers.html"],
      ["Press", "press.html"],
      ["Investors", "investors.html"],
    ],
  },
  {
    title: "Explore",
    items: [
      ["Apps", "apps.html"],
      ["Services", "index.html#services"],
      ["Technologies", "technologies.html"],
      ["How we design", "how-we-design.html"],
      ["Where we work", "countries.html"],
      ["Work", "index.html#work"],
      ["Studio", "index.html#global"],
    ],
  },
  {
    title: "Resources",
    items: [
      ["News Hub", "blog.html"],
      ["FAQ", "faq.html"],
      ["Glossary", "glossary.html"],
      ["Privacy", "privacy.html"],
      ["Terms", "terms.html"],
      ["Accessibility", "accessibility.html"],
    ],
  },
  {
    title: "Countries",
    items: [
      ["Syria", "country.html?slug=syria"],
      ["United Arab Emirates", "country.html?slug=uae"],
      ["Estonia", "country.html?slug=estonia"],
      ["Türkiye", "country.html?slug=turkey"],
      ["Where we work →", "countries.html"],
    ],
  },
  {
    title: "Contact",
    items: [
      ["Get in touch", "contact.html"],
      ["hello@innoveev.com", "mailto:hello@innoveev.com"],
      ["careers@innoveev.com", "mailto:careers@innoveev.com"],
      ["press@innoveev.com",   "mailto:press@innoveev.com"],
    ],
  },
];

const FOOTER_SOCIALS = [
  {
    key: "instagram", name: "Instagram", href: "https://instagram.com/innoveev",
    icon: (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <rect x="3" y="3" width="18" height="18" rx="5"/>
        <circle cx="12" cy="12" r="4"/>
        <circle cx="17.5" cy="6.5" r="0.6" fill="currentColor" stroke="none"/>
      </svg>
    ),
  },
  {
    key: "tiktok", name: "TikTok", href: "https://tiktok.com/@innoveev",
    icon: (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M19.5 7.4a6.6 6.6 0 0 1-3.9-1.27V15.6a5.5 5.5 0 1 1-5.5-5.5c.3 0 .6.03.9.08v2.84a2.7 2.7 0 1 0 1.9 2.58V2h2.7a3.9 3.9 0 0 0 3.9 3.9v1.5z"/>
      </svg>
    ),
  },
  {
    key: "linkedin", name: "LinkedIn", href: "https://linkedin.com/company/innoveev",
    icon: (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9h4v12H3V9zm7 0h3.8v1.7h.05c.53-.95 1.83-1.95 3.77-1.95 4.04 0 4.78 2.66 4.78 6.12V21h-4v-5.36c0-1.28-.02-2.93-1.78-2.93-1.78 0-2.05 1.39-2.05 2.83V21h-4V9z"/>
      </svg>
    ),
  },
  {
    key: "x", name: "X · Twitter", href: "https://x.com/innoveev",
    icon: (
      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77z"/>
      </svg>
    ),
  },
];

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__grid">
          <div className="footer__brand">
            <Brand size={40} />
            <p className="footer__tagline">
              Software that ships at the speed of ambition. Building since 2018, from the UAE.
            </p>
            <ul className="footer__socials" aria-label="Innoveev on social">
              {FOOTER_SOCIALS.map((s) => (
                <li key={s.key}>
                  <a
                    href={s.href}
                    target="_blank"
                    rel="noreferrer noopener"
                    aria-label={s.name}
                    className="footer__social"
                    data-cursor={s.name}
                  >
                    {s.icon}
                  </a>
                </li>
              ))}
            </ul>
          </div>
          {FOOTER_COLS.map((col) => (
            <div key={col.title} className="footer__col">
              <h4>{col.title}</h4>
              <ul>
                {col.items.map(([label, href]) => (
                  <li key={label}><a href={rootHref(href)}>{label}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="footer__bottom">
          <span>© 2026 Innoveev FZ-LLC · All rights reserved.</span>
          <span className="footer__bottom-right">
            <ThemeTogglerButton size="sm" />
            <span>v 2026.05 · innoveev.com</span>
          </span>
        </div>
      </div>
    </footer>
  );
}

window.Closer = Closer;
window.Footer = Footer;