// Navbar + Footer — marketing site chrome.
const Navbar = ({ logoVariant = "red" }) => {
  return (
    <nav className="page-nav" style={{
      background: "#fff", borderBottom: "1px solid rgba(34,6,19,0.06)",
    }}>
      <div style={{
        maxWidth: 1440, margin: "0 auto", padding: "30px 40px",
        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 40,
      }}>
        <Logo variant={logoVariant} height={32} />
        <Button variant="red" size="md" onClick={() => window.askableOpenBooking && window.askableOpenBooking()}>Book a switch call</Button>
      </div>
    </nav>
  );
};

// CTA card (dark maroon) with warm terracotta wave layers — sits on a pink-wash wrapper
// that continues into the footer so both read as one continuous surface.
const FooterCTA = ({ onGo }) => (
  <div style={{ padding: "80px 40px 0", background: "rgb(255,239,241)" }}>
    <div style={{
      maxWidth: 1440, margin: "0 auto", minHeight: 520,
      borderRadius: 36, background: "rgb(34,6,19)", overflow: "hidden", position: "relative",
      padding: "100px 60px 0", textAlign: "center",
    }}>
      <div style={{ position: "relative", zIndex: 2, maxWidth: 1000, margin: "0 auto", paddingBottom: 64 }}>
        <h2 style={{
          font: "700 82px/0.92 Bricolage Grotesque, sans-serif",
          color: "#fff", margin: 0, letterSpacing: "-0.02em",
        }}>Your customer isn't waiting.<br/>Neither are your competitors.</h2>
        <p style={{
          font: "400 19px/1.5 Instrument Sans, sans-serif",
          color: "#fff", margin: "28px auto 36px", maxWidth: 640, opacity: 0.85,
        }}>Get in, and surface insights early. Your competitor might already be using it.</p>
        <Button variant="white" size="lg" icon="arrowRight" onClick={onGo}>Get early access</Button>
      </div>
      {/* stacked terracotta waves rising from the bottom */}
      <svg viewBox="0 0 1440 260" preserveAspectRatio="none" style={{
        position: "absolute", left: 0, right: 0, bottom: 0, width: "100%", height: 260, zIndex: 1, display: "block",
      }}>
        <path fill="rgb(161,53,45)" d="M0 140 C 240 70, 520 180, 760 130 C 1000 80, 1220 180, 1440 120 L1440 260 L0 260 Z"/>
        <path fill="rgb(195,75,45)" d="M0 180 C 260 120, 540 220, 800 180 C 1060 140, 1240 230, 1440 190 L1440 260 L0 260 Z"/>
        <path fill="rgb(214,100,50)" d="M0 220 C 300 180, 560 250, 880 220 C 1140 195, 1300 245, 1440 230 L1440 260 L0 260 Z" opacity="0.85"/>
      </svg>
    </div>
  </div>
);

const FooterBottom = () => {
  const cols = [
    { title: "Platform", items: ["Research Suite Overview", "Participant Panel", "Askable AI", "Insight Streams", { label: "Industry Streams", tag: "NEW" }, "Project Delivery"] },
    { title: "Research Methods", items: ["AI Moderated Interviews", "Prototype testing", "Live website testing", "Remote interviews", "Surveys", "Card sorting", "First click testing", "Five second test", "Stack ranking"] },
    { title: "Company", items: ["Customer stories", "About", "Careers"] },
    { title: "Support", items: ["Help & Support", "Trust Centre", "Status"], heading2: "Support" },
    { title: "Resources", items: ["Blog", "Events & Webinars", "eBooks"] },
  ];
  return (
    <footer style={{
      background: "rgb(255,239,241)",
      padding: "96px 40px 48px",
      position: "relative",
      overflow: "hidden",
    }}>
      {/* soft pink wave sweep bottom right */}
      <svg viewBox="0 0 900 500" preserveAspectRatio="none" style={{
        position: "absolute", right: -80, bottom: -40, width: 900, height: 500, opacity: 0.55, pointerEvents: "none",
      }}>
        <path fill="rgb(255,219,223)" d="M900 80 C 720 140, 600 260, 520 360 C 440 460, 360 500, 220 500 L900 500 Z"/>
        <path fill="rgb(255,228,232)" d="M900 180 C 760 230, 680 320, 600 400 C 540 460, 480 500, 380 500 L900 500 Z" opacity="0.7"/>
      </svg>

      <div style={{
        maxWidth: 1440, margin: "0 auto", position: "relative", zIndex: 1,
        display: "grid", gridTemplateColumns: "1.1fr repeat(5, 1fr)", gap: 40,
      }}>
        {/* Brand column */}
        <div>
          <Logo variant="red" height={34} />
          <p style={{
            font: "italic 400 20px/1.35 'Instrument Serif', Georgia, serif",
            color: "rgb(34,6,19)", marginTop: 22, maxWidth: 260,
          }}>Accelerating user-centric product design</p>
          <div style={{ display: "flex", gap: 10, marginTop: 32 }}>
            {["linkedin", "youtube", "slack"].map((n) => (
              <a key={n} href="#" aria-label={n} style={{
                width: 36, height: 36, borderRadius: 999, background: "rgb(34,6,19)",
                display: "flex", alignItems: "center", justifyContent: "center", color: "#fff",
                textDecoration: "none", font: "700 14px/1 Instrument Sans",
              }}>
                {n === "linkedin" && <span style={{fontSize:13, letterSpacing:-0.5}}>in</span>}
                {n === "youtube" && <span style={{fontSize:12}}>▶</span>}
                {n === "slack" && <span style={{fontSize:13}}>#</span>}
              </a>
            ))}
          </div>
        </div>
        {/* Link columns */}
        {cols.map((c, idx) => (
          <div key={idx}>
            <div style={{
              font: "700 15px/1 Instrument Sans, sans-serif",
              color: "rgb(34,6,19)", marginBottom: 22,
            }}>{c.title}</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              {c.items.map((i, k) => {
                const label = typeof i === "string" ? i : i.label;
                const tag = typeof i === "string" ? null : i.tag;
                return (
                  <a key={k} href="#" style={{
                    font: "400 14px/1.4 Instrument Sans, sans-serif",
                    color: "rgb(34,6,19)", textDecoration: "none",
                    display: "inline-flex", alignItems: "center", gap: 6,
                  }}>
                    {label}
                    {tag && <span style={{
                      background: "rgb(34,6,19)", color: "#fff",
                      font: "700 9px/1 Instrument Sans", letterSpacing: "0.08em",
                      padding: "3px 6px", borderRadius: 4,
                    }}>{tag}</span>}
                  </a>
                );
              })}
            </div>
          </div>
        ))}
      </div>

      {/* bottom legal row */}
      <div style={{
        maxWidth: 1440, margin: "80px auto 0", position: "relative", zIndex: 1,
        display: "flex", justifyContent: "space-between", alignItems: "flex-end",
        font: "400 12px/1.5 Instrument Sans, sans-serif", color: "rgb(34,6,19)",
        letterSpacing: "0.04em",
      }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 4, textTransform: "uppercase" }}>
          <span>© Askable 2025</span>
          <a href="#" style={{ color: "inherit", textDecoration: "none" }}>Terms and Conditions</a>
          <a href="#" style={{ color: "inherit", textDecoration: "none" }}>Privacy Notice</a>
          <a href="#" style={{ color: "inherit", textDecoration: "none" }}>Cookie Preference</a>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 8, textTransform: "uppercase" }}>
          <span style={{ width: 14, height: 14, borderRadius: 999, border: "1.5px solid currentColor", display: "inline-block" }} />
          <span>BNE · CHI · LON</span>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, { Navbar, FooterCTA, FooterBottom });
