// Footer + final CTA band.
function Footer({ onStart }) {
  const { Container, Logo, Icon } = window;
  const { Button } = window.ZentroDesignSystem_967cea;

  const socials = [
    { label: "Facebook",  href: "https://www.facebook.com/zentrovisuals",                          icon: "Facebook" },
    { label: "Instagram", href: "https://www.instagram.com/_zentrovisuals/",                       icon: "Instagram" },
    { label: "TikTok",    href: "https://www.tiktok.com/@_zentrovisuals",                          icon: "TikTok" },
    { label: "LinkedIn",  href: "https://www.linkedin.com/in/zentro-visuals-4ba56a419",            icon: "Linkedin" },
  ];

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  const studioLinks = [
    { label: "Work",       action: () => scrollTo("work") },
    { label: "Services",   action: () => scrollTo("services") },
    { label: "Process",    action: () => scrollTo("process") },
    { label: "Why Zentro", action: () => scrollTo("pricing") },
    { label: "Portal",     action: () => scrollTo("portal") },
  ];

  const companyLinks = [
    { label: "About",          action: () => scrollTo("top") },
    { label: "Contact",        action: onStart },
    { label: "Book a call",    action: () => window.open("https://calendly.com/ph-zentro/30min", "_blank") },
    { label: "Join as Editor", action: () => window.location.href = "apply.html" },
  ];

  return (
    <footer style={{ borderTop: "1px solid var(--border-subtle)" }}>
      {/* CTA band */}
      <section style={{ position: "relative", overflow: "hidden", padding: "110px 0" }}>
        <div style={{ position: "absolute", bottom: -240, left: "50%", transform: "translateX(-50%)", width: 1000, height: 600, background: "radial-gradient(circle, rgba(251,208,40,0.25), transparent 65%)", pointerEvents: "none" }} />
        <Container max={820} style={{ position: "relative", textAlign: "center" }}>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: "clamp(2.5rem, 6vw, 4.5rem)", lineHeight: 0.98, letterSpacing: "-0.04em", color: "var(--text-primary)", textWrap: "balance" }}>
            Focus on creating.<br /><span style={{ color: "var(--gold-500)", fontStyle: "italic" }}>We'll handle everything after you hit record.</span>
          </h2>
          <p style={{ marginTop: 28, maxWidth: 560, margin: "28px auto 0", fontFamily: "var(--font-sans)", fontSize: 17, lineHeight: 1.7, color: "var(--text-secondary)" }}>
            One dedicated editor. Backed by a creative team. A workflow that runs every month without you having to manage it.
          </p>
          <div style={{ display: "flex", gap: 14, justifyContent: "center", marginTop: 36, flexWrap: "wrap" }}>
            <Button variant="primary" size="lg" onClick={onStart} iconRight={<Icon name="ArrowRight" size={18} />}>Start a project</Button>
            <Button variant="secondary" size="lg" onClick={() => window.open("https://calendly.com/ph-zentro/30min", "_blank")} iconLeft={<Icon name="Calendar" size={16} />}>Book a call</Button>
          </div>
        </Container>
      </section>

      {/* footer grid */}
      <div style={{ borderTop: "1px solid var(--border-subtle)", padding: "56px 0 40px" }}>
        <Container>
          <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr 1fr", gap: 32 }} className="z-footer-grid">

            {/* Brand */}
            <div>
              <Logo height={40} />
              <p style={{ marginTop: 18, maxWidth: 240, fontFamily: "var(--font-sans)", fontSize: 14, lineHeight: 1.6, color: "var(--text-tertiary)" }}>
                Your outsourced editing department. One dedicated editor, backed by a creative team.
              </p>
              {/* Socials */}
              <div style={{ display: "flex", gap: 10, marginTop: 22, flexWrap: "wrap" }}>
                {socials.map((s) => (
                  <a key={s.label} href={s.href} target="_blank" rel="noopener noreferrer" aria-label={s.label}
                    style={{ width: 36, height: 36, borderRadius: 8, border: "1px solid var(--border-default)", background: "transparent", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--text-tertiary)", textDecoration: "none", transition: "border-color 0.15s, color 0.15s" }}
                    onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--gold-500)"; e.currentTarget.style.color = "var(--gold-400)"; }}
                    onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--border-default)"; e.currentTarget.style.color = "var(--text-tertiary)"; }}>
                    {s.icon === "TikTok"
                      ? <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>
                      : <Icon name={s.icon} size={15} />
                    }
                  </a>
                ))}
              </div>
            </div>

            {/* Studio */}
            <div>
              <div style={{ fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-tertiary)" }}>Studio</div>
              <ul style={{ listStyle: "none", padding: 0, margin: "16px 0 0", display: "flex", flexDirection: "column", gap: 12 }}>
                {studioLinks.map((l) => (
                  <li key={l.label} onClick={l.action} style={{ fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--text-secondary)", cursor: "pointer", transition: "color 0.15s" }}
                    onMouseEnter={(e) => e.currentTarget.style.color = "var(--text-primary)"}
                    onMouseLeave={(e) => e.currentTarget.style.color = "var(--text-secondary)"}>
                    {l.label}
                  </li>
                ))}
              </ul>
            </div>

            {/* Company */}
            <div>
              <div style={{ fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-tertiary)" }}>Company</div>
              <ul style={{ listStyle: "none", padding: 0, margin: "16px 0 0", display: "flex", flexDirection: "column", gap: 12 }}>
                {companyLinks.map((l) => (
                  <li key={l.label} onClick={l.action} style={{ fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--text-secondary)", cursor: "pointer", transition: "color 0.15s" }}
                    onMouseEnter={(e) => e.currentTarget.style.color = "var(--text-primary)"}
                    onMouseLeave={(e) => e.currentTarget.style.color = "var(--text-secondary)"}>
                    {l.label}
                  </li>
                ))}
              </ul>
            </div>

            {/* Connect */}
            <div>
              <div style={{ fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-tertiary)" }}>Connect</div>
              <ul style={{ listStyle: "none", padding: 0, margin: "16px 0 0", display: "flex", flexDirection: "column", gap: 12 }}>
                {socials.map((s) => (
                  <li key={s.label}>
                    <a href={s.href} target="_blank" rel="noopener noreferrer"
                      style={{ fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--text-secondary)", textDecoration: "none", cursor: "pointer", transition: "color 0.15s" }}
                      onMouseEnter={(e) => e.currentTarget.style.color = "var(--text-primary)"}
                      onMouseLeave={(e) => e.currentTarget.style.color = "var(--text-secondary)"}>
                      {s.label}
                    </a>
                  </li>
                ))}
              </ul>
            </div>

          </div>

          <div style={{ marginTop: 48, paddingTop: 24, borderTop: "1px solid var(--border-subtle)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
            <span style={{ fontFamily: "var(--font-sans)", fontSize: 13, color: "var(--text-tertiary)" }}>© 2026 Zentro Visuals. All rights reserved.</span>
            <span style={{ fontFamily: "var(--font-sans)", fontSize: 13, color: "var(--text-tertiary)" }}>Privacy · Terms</span>
          </div>
        </Container>
      </div>
    </footer>
  );
}
window.Footer = Footer;