"use client";


import Link from "next/link";
import type { Locale } from "@/lib/i18n";

// Iconos SVG simples inline para no depender de librerías externas
const Icons = {
  X: () => <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" />,
  IG: () => <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" />,
  YT: () => <path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />,
  Arrow: () => <path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" />
};

export default function Footer({ locale }: { locale: Locale }) {
  const year = new Date().getFullYear();

  // Traducciones
  const T = locale === "zh" ? {
    newsletter: "订阅我们的时事通讯",
    newsletter_ph: "输入您的电子邮件",
    subscribe: "订阅",
    sections: "栏目",
    company: "公司",
    support: "支持",
    more: "更多",
    about: "关于",
    service: "服务",
    follow: "关注我们",
    links: {
      about: "关于我们", privacy: "隐私", contact: "联系", terms: "条款", help: "帮助", advertise: "广告",
    },
    blurb: "独立新闻，由现代技术驱动。我们致力于在瞬息万变的世界中提供清晰、客观的报道。",
    rights: "版权所有，保留所有权利。",
  } : locale === "en" ? {
    newsletter: "Subscribe to our newsletter",
    newsletter_ph: "Enter your email",
    subscribe: "Join",
    sections: "Sections",
    company: "Company",
    support: "Support",
    more: "More",
    about: "About",
    service: "Service",
    follow: "Follow us",
    links: {
      about: "About Us", privacy: "Privacy Policy", contact: "Contact", terms: "Terms of Service", help: "Help Center", advertise: "Advertising",
    },
    blurb: "Independent journalism powered by modern tech. Dedicated to delivering clarity in a changing world.",
    rights: "All rights reserved.",
  } : {
    newsletter: "Suscríbete a nuestro boletín",
    newsletter_ph: "Tu correo electrónico",
    subscribe: "Unirse",
    sections: "Secciones",
    company: "Compañía",
    support: "Soporte",
    more: "Más",
    about: "Acerca de",
    service: "Servicio",
    follow: "Síguenos",
    links: {
      about: "Nosotros", privacy: "Privacidad", contact: "Contacto", terms: "Términos", help: "Ayuda", advertise: "Publicidad",
    },
    blurb: "Periodismo independiente impulsado por tecnología moderna. Dedicados a brindar claridad en un mundo cambiante.",
    rights: "Todos los derechos reservados.",
  };

  return (
    <footer style={{
      marginTop: 80,
      borderTop: "1px solid rgba(255,255,255,0.08)",
      background: "var(--header-bg)", // Conservando tu background
      color: "#f3f6ff",
      fontFamily: "var(--font-ui, sans-serif)"
    }}>
      <div className="container" style={{ padding: "60px 24px 30px" }}>
        
        {/* TOP SECTION: BRAND + NEWSLETTER */}
        <div style={{ 
          display: "grid", 
          gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", 
          gap: 40, 
          marginBottom: 60 
        }}>
          {/* Brand Column */}
          <div style={{ maxWidth: 450 }}>
            <div style={{ 
              fontFamily: "var(--font-heading, serif)", 
              fontWeight: 800, 
              fontSize: "1.75rem", 
              letterSpacing: "-0.03em",
              marginBottom: 16,
              background: "linear-gradient(90deg, #fff, #a5b4fc)",
              WebkitBackgroundClip: "text",
              WebkitTextFillColor: "transparent"
            }}>
              Newsoras.
            </div>
            <p style={{ 
              color: "rgba(243,246,255,0.6)", 
              lineHeight: 1.7, 
              fontSize: "0.95rem",
              margin: 0
            }}>
              {T.blurb}
            </p>
          </div>

          {/* Newsletter Box */}
          <div style={{ 
            background: "rgba(255,255,255,0.03)", 
            padding: 24, 
            borderRadius: 12, 
            border: "1px solid rgba(255,255,255,0.08)"
          }}>
            <label style={{ 
              display: "block", 
              fontSize: "0.85rem", 
              fontWeight: 600, 
              marginBottom: 12,
              color: "#e0e7ff"
            }}>
              {T.newsletter}
            </label>
            <form style={{ display: "flex", gap: 10 }} onSubmit={(e) => e.preventDefault()}>
              <input 
                type="email" 
                placeholder={T.newsletter_ph} 
                style={{
                  flex: 1,
                  background: "rgba(0,0,0,0.2)",
                  border: "1px solid rgba(255,255,255,0.15)",
                  borderRadius: 8,
                  padding: "10px 14px",
                  color: "white",
                  fontSize: "0.9rem",
                  outline: "none"
                }}
              />
<button
  type="submit"
  style={{
    background: "#f3f6ff",
    color: "#081a2c", // ✅ antes: "var(--header-bg)" (INVALID)
    border: "none",
    borderRadius: 8,
    padding: "0 20px",
    fontWeight: 800,
    fontSize: "0.9rem",
    cursor: "pointer",
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    gap: 6,
    height: 40,          // ✅ alinea con input
    whiteSpace: "nowrap" // ✅ evita corte
  }}
>
  {T.subscribe}
</button>
            </form>
          </div>
        </div>

        {/* MIDDLE SECTION: LINKS GRID */}
        <div style={{ 
          display: "grid", 
          gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))", 
          gap: 32,
          paddingBottom: 50,
          borderBottom: "1px solid rgba(255,255,255,0.08)"
        }}>
          <FooterColumn title={T.company}>
            <FooterLink href={`/${locale}/about`}>{T.links.about}</FooterLink>
            <FooterLink href={`/${locale}/contact`}>{T.links.contact}</FooterLink>
            <FooterLink href={`/${locale}/careers`}>Careers</FooterLink>
          </FooterColumn>

          <FooterColumn title={T.support}>
            <FooterLink href={`/${locale}/help`}>{T.links.help}</FooterLink>
            <FooterLink href={`/${locale}/privacy`}>{T.links.privacy}</FooterLink>
            <FooterLink href={`/${locale}/terms`}>{T.links.terms}</FooterLink>
          </FooterColumn>
          
          <FooterColumn title="Business">
            <FooterLink href={`/${locale}/advertising`}>{T.links.advertise}</FooterLink>
            <FooterLink href={`/${locale}/partners`}>Partners</FooterLink>
            <FooterLink href={`/${locale}/press`}>Press</FooterLink>
          </FooterColumn>

          <FooterColumn title={T.follow}>
             <div style={{ display: "flex", gap: 12, marginTop: 4 }}>
                <SocialIcon href="https://x.com" label="X (Twitter)">
                  <Icons.X />
                </SocialIcon>
                <SocialIcon href="https://instagram.com" label="Instagram">
                  <Icons.IG />
                </SocialIcon>
                <SocialIcon href="https://youtube.com" label="YouTube">
                  <Icons.YT />
                </SocialIcon>
             </div>
          </FooterColumn>
        </div>

        {/* BOTTOM SECTION: COPYRIGHT */}
        <div style={{ 
          paddingTop: 30, 
          display: "flex", 
          justifyContent: "space-between", 
          alignItems: "center",
          flexWrap: "wrap",
          gap: 20,
          fontSize: "0.8rem",
          color: "rgba(243,246,255,0.4)"
        }}>
          <div>
            © {year} Newsoras Media Group. {T.rights}
          </div>
          <div style={{ display: "flex", gap: 20 }}>
            <span>Sitemap</span>
            <span>Accessibility</span>
            <span>Cookies</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ------------------------------------
// UI Subcomponents para limpieza visual
// ------------------------------------

function FooterColumn({ title, children }: { title: string, children: React.ReactNode }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
      <h4 style={{ 
        margin: 0, 
        fontSize: "0.75rem", 
        textTransform: "uppercase", 
        letterSpacing: "0.1em", 
        color: "rgba(243,246,255,0.5)",
        fontWeight: 700
      }}>
        {title}
      </h4>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {children}
      </div>
    </div>
  );
}

function FooterLink({ href, children }: { href: string, children: React.ReactNode }) {
  return (
    <Link href={href} style={{ 
      color: "rgba(243,246,255,0.8)", 
      fontSize: "0.9rem",
      textDecoration: "none",
      transition: "color 0.2s"
    }}
    onMouseEnter={(e) => e.currentTarget.style.color = "#ffffff"}
    onMouseLeave={(e) => e.currentTarget.style.color = "rgba(243,246,255,0.8)"}
    >
      {children}
    </Link>
  );
}

function SocialIcon({ href, label, children }: { href: string, label: string, children: React.ReactNode }) {
  return (
    <a 
      href={href} 
      aria-label={label}
      target="_blank"
      rel="noopener noreferrer"
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        width: 36,
        height: 36,
        borderRadius: "50%",
        background: "rgba(255,255,255,0.06)",
        border: "1px solid rgba(255,255,255,0.1)",
        color: "#f3f6ff",
        transition: "all 0.2s"
      }}
      onMouseEnter={(e) => {
        e.currentTarget.style.background = "#f3f6ff";
        e.currentTarget.style.color = "var(--header-bg)";
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.background = "rgba(255,255,255,0.06)";
        e.currentTarget.style.color = "#f3f6ff";
      }}
    >
      <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24">
        {children}
      </svg>
    </a>
  );
}