// Final CTA section + Footer for WuClock site.

const { motion: ftMotion } = window.Motion;

function FinalCTA() {
  const [ref, shown] = useInViewOnce(0.2);
  return (
    <section
      id="descargar"
      ref={ref}
      className="relative w-full overflow-hidden bg-black"
    >
      {/* Glow */}
      <div className="absolute inset-0 z-0 pointer-events-none" style={{
        background:
          'radial-gradient(60% 60% at 50% 50%, rgba(212,168,82,0.18) 0%, rgba(212,168,82,0.04) 40%, transparent 70%),' +
          'radial-gradient(80% 60% at 50% 100%, rgba(45,27,78,0.55) 0%, transparent 60%)',
      }} />
      <Starfield />

      <div className="relative z-10 px-6 md:px-16 lg:px-20 py-28 md:py-36 flex flex-col items-center text-center">
        <ftMotion.p
          {...fadeUp(0, shown)}
          className="text-sm font-body text-white/80 mb-6"
        >
          // Descargar
        </ftMotion.p>

        <ftMotion.h2
          {...fadeUp(0.1, shown)}
          className="font-heading italic text-white"
          style={{
            fontSize: 'clamp(56px, 8vw, 120px)',
            lineHeight: 0.9,
            letterSpacing: '-3px',
            maxWidth: '14ch',
          }}
        >
          Tu cuerpo te está hablando.
        </ftMotion.h2>

        <ftMotion.p
          {...fadeUp(0.2, shown)}
          className="mt-6 text-base md:text-lg text-white/85 font-body font-light max-w-xl leading-snug"
        >
          Más energía, mejor sueño y rituales de 8 minutos — personalizados para tu cuerpo.
        </ftMotion.p>

        <ftMotion.div
          {...fadeUp(0.3, shown)}
          className="mt-10 flex flex-col sm:flex-row gap-4 w-full max-w-xl justify-center"
        >
          <StoreButton kind="ios"     href={STORE_LINKS.ios} />
          <StoreButton kind="android" href={STORE_LINKS.android} />
        </ftMotion.div>

        <ftMotion.p
          {...fadeUp(0.4, shown)}
          className="mt-8 text-xs text-white/55 font-body"
        >
          Compatible con iOS 16+ · Android 10+ · Funciona sin wearable
        </ftMotion.p>
      </div>
    </section>
  );
}

// ────────────── Footer ──────────────

function Footer() {
  const year = new Date().getFullYear();
  const cols = [
    {
      title: 'Producto',
      links: [
        { label: 'La App',          href: 'app.html' },
        { label: 'Wearable',        href: 'wuclock-band.html' },
        { label: 'Método',          href: '#metodo' },
        { label: 'Blog',            href: 'blog/index.html' },
        { label: 'Descargar gratis',href: '#descargar' },
      ],
    },
    {
      title: 'Compañía',
      links: [
        { label: 'Sobre WuClock',   href: 'sobre.html' },
        { label: 'Contacto',        href: 'contacto.html' },
        { label: 'Prensa',          href: 'contacto.html#prensa' },
      ],
    },
    {
      title: 'Legal',
      links: [
        { label: 'Política de privacidad', href: 'politica-de-privacidad.html', external: true },
        { label: 'Términos y condiciones', href: 'terminos-y-condiciones.html', external: true },
      ],
    },
  ];

  const socials = [
    { name: 'Instagram', href: 'https://www.instagram.com/wuclockapp/',                                 icon: <IgIcon /> },
    { name: 'TikTok',    href: 'https://www.tiktok.com/@wuclock?is_from_webapp=1&sender_device=pc',     icon: <TkIcon /> },
    { name: 'Email',     href: 'mailto:hola@wuclock.com',                                                icon: <MailIcon /> },
  ];

  return (
    <footer className="relative bg-black border-t border-white/10">
      <div className="relative z-10 px-6 md:px-16 lg:px-20 pt-20 pb-10">
        {/* Top grid */}
        <div className="grid grid-cols-2 md:grid-cols-5 gap-10 md:gap-12">
          {/* Brand block */}
          <div className="col-span-2">
            <div className="flex items-center gap-3">
              <img
                src="assets/wuclock-logo.png"
                alt="WuClock"
                className="h-20 w-auto select-none pointer-events-none"
                draggable="false"
              />
            </div>
            <p className="mt-5 text-sm text-white/70 font-body font-light leading-relaxed max-w-xs">
              Resincronizá tu cuerpo para vivir alineado a tu ritmo natural.
              Hecho en Argentina.
            </p>

            <div className="mt-6 flex items-center gap-2">
              {socials.map((s) => (
                <a
                  key={s.name}
                  href={s.href}
                  target={s.href.startsWith('http') ? '_blank' : undefined}
                  rel="noopener noreferrer"
                  aria-label={s.name}
                  className="w-10 h-10 rounded-full inline-flex items-center justify-center text-white/80 hover:text-white"
                  style={{
                    background: 'rgba(255,255,255,0.04)',
                    border: '1px solid rgba(255,255,255,0.10)',
                  }}
                >
                  {s.icon}
                </a>
              ))}
            </div>
          </div>

          {/* Link columns */}
          {cols.map((c) => (
            <div key={c.title}>
              <h4 className="text-[11px] font-body uppercase text-[#D4A852]" style={{ letterSpacing: '0.22em' }}>
                {c.title}
              </h4>
              <ul className="mt-5 flex flex-col gap-3">
                {c.links.map((l) => (
                  <li key={l.label}>
                    <a
                      href={l.href}
                      target={l.external ? '_blank' : undefined}
                      rel={l.external ? 'noopener noreferrer' : undefined}
                      className="text-sm text-white/80 hover:text-white font-body"
                    >
                      {l.label}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Divider */}
        <div className="mt-16 pt-8 border-t border-white/10 flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
          <p className="text-xs text-white/55 font-body">
            © {year} WuClock. Todos los derechos reservados.
          </p>
          <p className="text-xs text-white/45 font-body">
            <a href="mailto:hola@wuclock.com" className="hover:text-white/80">hola@wuclock.com</a>
            <span className="mx-2 text-white/20">·</span>
            Buenos Aires, Argentina
          </p>
          <div className="flex items-center gap-4 text-xs text-white/55 font-body">
            <a href="politica-de-privacidad.html" target="_blank" rel="noopener noreferrer" className="hover:text-white/80">Privacidad</a>
            <span className="text-white/20">·</span>
            <a href="terminos-y-condiciones.html"   target="_blank" rel="noopener noreferrer" className="hover:text-white/80">Términos</a>
          </div>
        </div>

        {/* Disclaimer */}
        <p className="mt-8 text-[11px] text-white/35 font-body leading-relaxed max-w-3xl">
          WuClock es una herramienta de bienestar. No reemplaza consulta médica.
          La información que brinda la app es educativa y se basa en principios
          de Medicina Tradicional China + datos de tu wearable; ante cualquier
          síntoma persistente, consultá con un profesional de la salud.
        </p>
      </div>

    </footer>
  );
}

// ────────────── Tiny SVG icons ──────────────

function IgIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <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"/>
    </svg>
  );
}
function TkIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
      <path d="M19.5 8.6a6.6 6.6 0 0 1-4-1.36V15a5.5 5.5 0 1 1-5.5-5.5c.34 0 .67.03 1 .1v2.85a2.65 2.65 0 1 0 1.85 2.55V2h2.7a4 4 0 0 0 4 4v2.6Z"/>
    </svg>
  );
}
function XIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
      <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.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
    </svg>
  );
}
function MailIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="5" width="18" height="14" rx="2"/>
      <path d="M3 7l9 6 9-6"/>
    </svg>
  );
}
function ArFlagSmall() {
  return (
    <span style={{
      display: 'inline-block', verticalAlign: '-0.15em',
      width: '1.3em', height: '0.85em', borderRadius: 2,
      overflow: 'hidden', marginLeft: 4, marginRight: 2,
      boxShadow: '0 0 0 1px rgba(255,255,255,0.15)',
    }}>
      <svg viewBox="0 0 9 6" width="100%" height="100%" preserveAspectRatio="none">
        <rect width="9" height="6" fill="#74ACDF"/>
        <rect y="2" width="9" height="2" fill="#FFFFFF"/>
        <circle cx="4.5" cy="3" r="0.55" fill="#F6B40E"/>
      </svg>
    </span>
  );
}

Object.assign(window, { FinalCTA, Footer });