/* global React, Common */
const { Button, OSLogo, detectOS, BrandMark, useLatestRelease } = Common;

function FooterCTA() {
  const os = detectOS();
  return (
    <section id="download" style={{
      padding: "120px 32px 96px", textAlign: "center",
      borderTop: "1px solid var(--line)",
      position: "relative", overflow: "hidden",
    }}>
      <div style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(ellipse 60% 60% at 50% 30%, rgba(56,189,248,0.10), transparent 70%)",
        pointerEvents: "none",
      }}/>
      <div className="container-narrow" style={{ position: "relative" }}>
        <h2 style={{
          fontFamily: "var(--font-display)", fontSize: "clamp(56px, 10vw, 120px)",
          fontWeight: 700, letterSpacing: "-0.04em", lineHeight: 1,
          margin: 0,
        }} className="grad-text">Dimmy.</h2>
        <p style={{
          fontSize: 18, color: "var(--fg-faint)", marginTop: 12,
          fontStyle: "italic",
        }}>Italian for "tell me."</p>

        <div style={{
          marginTop: 36, display: "flex", justifyContent: "center", alignItems: "center", gap: 12,
          flexWrap: "wrap",
        }}>
          <Button primary href="#" icon={<OSLogo os={os} size={16}/>} sub={
            os === "mac" ? "apple silicon · intel · macos 12+" :
            os === "win" ? "windows 10 · 11 · arm64" :
            "gtk4 · libadwaita · x86_64 + arm"
          }>
            Download for {os === "mac" ? "macOS" : os === "win" ? "Windows" : "Linux"}
          </Button>
          <div style={{ display: "flex", gap: 8 }}>
            {["mac", "win", "linux"].filter((p) => p !== os).map((p) => (
              <a key={p} href="#" style={{
                display: "inline-flex", alignItems: "center", gap: 8,
                padding: "10px 14px", borderRadius: 10,
                border: "1px solid var(--line-strong)",
                color: "var(--fg-muted)", textDecoration: "none",
                fontSize: 13, fontFamily: "var(--font-sans)",
              }}>
                <OSLogo os={p} size={14}/>
                {p === "mac" ? "macOS" : p === "win" ? "Windows" : "Linux"}
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const release = useLatestRelease("KonradDallaOrg/dimmy");
  return (
    <footer style={{
      padding: "32px", borderTop: "1px solid var(--line)",
      background: "rgba(0,0,0,0.4)",
    }}>
      <div className="container" style={{
        display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr", gap: 32,
      }} className="footer-grid">
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <BrandMark size={26}/>
            <strong style={{ fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 700 }}>Dimmy</strong>
          </div>
          <p style={{ fontSize: 13, color: "var(--fg-faint)", marginTop: 12, lineHeight: 1.5, maxWidth: 320, textWrap: "pretty" }}>
            Native voice dictation for desktop. Made with espresso and Claude Code in Milano.
          </p>
          <div style={{
            marginTop: 16, fontFamily: "var(--font-mono)", fontSize: 11,
            color: "var(--fg-faint)",
          }}>
            {release || "v1.4.0"} · 2024–2026
          </div>
        </div>
        {[
          ["Product", [
            ["Download", "#download"],
            ["Pricing", "#pricing"],
            ["Changelog", "https://github.com/KonradDallaOrg/dimmy/releases"],
            ["Status", "#"],
          ]],
          ["Resources", [
            ["GitHub", "https://github.com/KonradDallaOrg/dimmy"],
            ["Docs", "#"],
            ["Architecture", "#"],
            ["Contributing", "#"],
          ]],
          ["Connect", [
            ["Twitter", "#"],
            ["Mastodon", "#"],
            ["Email", "mailto:hi@dimmy.app"],
            ["Sponsor ♥", "https://github.com/sponsors/KonradDallaOrg"],
          ]],
        ].map(([title, links]) => (
          <div key={title}>
            <div style={{
              fontFamily: "var(--font-mono)", fontSize: 11,
              color: "var(--fg-faint)", letterSpacing: "0.08em",
              textTransform: "uppercase", marginBottom: 14,
            }}>{title}</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {links.map(([l, h]) => (
                <a key={l} href={h} style={{
                  color: "var(--fg-muted)", textDecoration: "none",
                  fontSize: 13, fontFamily: "var(--font-sans)",
                }}>{l}</a>
              ))}
            </div>
          </div>
        ))}
      </div>
      <div className="container" style={{
        marginTop: 40, paddingTop: 20,
        borderTop: "1px solid var(--line)",
        display: "flex", justifyContent: "space-between", gap: 16, flexWrap: "wrap",
        fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--fg-faint)",
      }}>
        <span>made in 🇮🇹 milano · no cookies · no tracking · no investors</span>
        <span style={{ display: "inline-flex", gap: 14 }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
            <span style={{ width: 6, height: 6, borderRadius: 99, background: "#4ADE80", boxShadow: "0 0 6px #4ADE80" }}/>
            all systems operational
          </span>
        </span>
      </div>
      <style>{`
        @media (max-width: 760px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 480px) {
          .footer-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
}

window.FooterCTA = FooterCTA;
window.Footer = Footer;