/* global React, Spider, C, SectionLabel */
const { useState } = React;

// ─────────────────────────────────────────────────────────────
// Shared helper: SectionLabel is exported from showcase.jsx
// ─────────────────────────────────────────────────────────────

// ─────────────────────────────────────────────────────────────
// The Broken Internet
// ─────────────────────────────────────────────────────────────
const VIBES = [
  { key: "silenced", emoji: "🔇", label: "Websites disable comments",       color: C.hot,    blurb: "Platforms decide when and where you're allowed to speak. Your opinion? Only welcome on their terms." },
  { key: "filtered", emoji: "🚫", label: "Shops only show filtered reviews", color: C.active, blurb: "Critical voices disappear. You only see what the algorithm wants you to see." },
  { key: "alone",    emoji: "👤", label: "You browse alone",                 color: C.quiet,  blurb: "No place to discuss any website with others. Until now." },
];

function Vibes() {
  return (
    <section className="mobile-section" style={vibeStyles.wrap}>
      <SectionLabel kicker="The Broken Internet" title={<>Platforms decide who gets to <em style={{ color: C.brandHi, fontStyle: "italic" }}>speak</em>.</>} />
      <div className="three-col" style={vibeStyles.grid}>
        {VIBES.map((v) => (
          <div key={v.key} style={{ ...vibeStyles.card, borderColor: `${v.color}55` }}>
            <div style={{ ...vibeStyles.glow, background: `radial-gradient(circle, ${v.color}44, transparent 70%)` }} />
            <div style={vibeStyles.emoji}>{v.emoji}</div>
            <div style={{ color: C.text, fontSize: 18, fontWeight: 600, marginTop: 16, lineHeight: 1.3, position: "relative" }}>{v.label}</div>
            <p style={vibeStyles.blurb}>{v.blurb}</p>
          </div>
        ))}
      </div>
      <p style={{ color: C.text, fontSize: 20, fontWeight: 500, lineHeight: 1.5, maxWidth: 560, marginTop: 48 }}>
        <em style={{ color: C.brandHi, fontStyle: "italic" }}>AmbiWebZ gives you your voice back.</em>
      </p>
    </section>
  );
}

const vibeStyles = {
  wrap: { padding: "40px 36px 100px", maxWidth: 1280, margin: "0 auto" },
  grid: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 },
  card: { position: "relative", overflow: "hidden", padding: "32px 28px 28px", background: C.panel, border: `1px solid ${C.border}`, borderRadius: 16 },
  glow: { position: "absolute", top: -50, right: -50, width: 200, height: 200, opacity: 0.6 },
  emoji: { fontSize: 36, position: "relative", zIndex: 1 },
  blurb: { fontSize: 14.5, color: C.textDim, lineHeight: 1.55, marginTop: 10, position: "relative" },
};

// ─────────────────────────────────────────────────────────────
// How it works — 3 Steps
// ─────────────────────────────────────────────────────────────
const HOW_STEPS = [
  { n: "01", icon: "⬇️",  title: "Join the beta",             body: "The Chrome Web Store listing is coming soon. Join the waitlist to get access when review clears." },
  { n: "02", icon: "🌐",  title: "Go to any website",          body: "Video platforms, news sites, shops — no matter where you browse." },
  { n: "03", icon: "💬",  title: "Click Webzi & start talking", body: "The Webzi button floats on every page. One click opens the sidebar — and you're in." },
];

function HowItWorks() {
  return (
    <section id="how-it-works" className="mobile-section" style={howStyles.wrap}>
      <SectionLabel kicker="3 Simple Steps" title={<>How it <em style={{ color: C.brandHi, fontStyle: "italic" }}>works</em>.</>} />
      <div className="three-col" style={howStyles.grid}>
        {HOW_STEPS.map((s) => (
          <div key={s.n} style={howStyles.card}>
            <div style={howStyles.num}>{s.n}</div>
            <div style={howStyles.icon}>{s.icon}</div>
            <div style={howStyles.title}>{s.title}</div>
            <p style={howStyles.body}>{s.body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

const howStyles = {
  wrap: { padding: "40px 36px 100px", maxWidth: 1280, margin: "0 auto" },
  grid: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 },
  card: { padding: "32px 28px", border: `1px solid ${C.border}`, borderRadius: 16, background: C.panel },
  num: { fontFamily: "'Instrument Serif', serif", fontSize: 52, color: C.brandHi, lineHeight: 1, fontStyle: "italic", opacity: 0.55 },
  icon: { fontSize: 32, margin: "16px 0 12px" },
  title: { color: C.text, fontSize: 19, fontWeight: 600, letterSpacing: -0.3, marginBottom: 8 },
  body: { color: C.textDim, fontSize: 14.5, lineHeight: 1.55, margin: 0, textWrap: "pretty" },
};

// ─────────────────────────────────────────────────────────────
// Feature grid
// ─────────────────────────────────────────────────────────────
const FEATURES = [
  { t: "Real-Time Chat",       b: "See messages the moment they're posted — no page reload needed.", i: "💬" },
  { t: "Every URL",            b: "Works on every website in the world. No exceptions.",             i: "🌐" },
  { t: "Trending",             b: "See which pages are being hotly discussed right now and jump in.", i: "🔥" },
  { t: "AmbiScore",            b: "Get rewarded for quality contributions. Your reputation grows with every post.", i: "⭐" },
  { t: "Polls",                b: "Start polls on any page and see what the community thinks.",       i: "🗳️" },
  { t: "Community Moderation", b: "The community keeps itself in check. Fair and transparent.",       i: "🛡️" },
];

function Features() {
  return (
    <section id="features" className="mobile-section" style={featStyles.wrap}>
      <SectionLabel kicker="Features" title={<>More than comments. A complete <em style={{ color: C.brandHi, fontStyle: "italic" }}>social layer</em> for the entire internet.</>} />
      <div className="three-col" style={featStyles.grid}>
        {FEATURES.map((f) => (
          <div key={f.t} style={featStyles.card}>
            <div style={featStyles.icon}>{f.i}</div>
            <div style={featStyles.t}>{f.t}</div>
            <div style={featStyles.b}>{f.b}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

const featStyles = {
  wrap: { padding: "40px 36px 100px", maxWidth: 1280, margin: "0 auto" },
  grid: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14 },
  card: { padding: 28, border: `1px solid ${C.border}`, borderRadius: 16, background: C.panel },
  icon: { fontSize: 28, marginBottom: 24, display: "inline-flex", padding: 10, background: C.panelHi, borderRadius: 12, border: `1px solid ${C.border}` },
  t: { color: C.text, fontSize: 19, fontWeight: 600, letterSpacing: -0.3, marginBottom: 8 },
  b: { color: C.textDim, fontSize: 14.5, lineHeight: 1.55, textWrap: "pretty" },
};

// ─────────────────────────────────────────────────────────────
// Ranks
// ─────────────────────────────────────────────────────────────
const RANKS = [
  { name: "Hatchling",  score: "0",    color: "#6E6A8A", glow: "transparent" },
  { name: "Weaver",     score: "100",  color: "#F5C26B", glow: "rgba(245,194,107,0.4)" },
  { name: "Orb-Weaver", score: "1k",   color: "#ECA72C", glow: "rgba(236,167,44,0.5)" },
  { name: "Goliath",    score: "10k",  color: "#34D399", glow: "rgba(52,211,153,0.5)" },
  { name: "Legend",     score: "100k", color: "#E4D5A6", glow: "rgba(228,213,166,0.6)" },
];

function Ranks() {
  return (
    <section id="ranks" className="mobile-section" style={rankStyles.wrap}>
      <SectionLabel
        kicker="AmbiScore"
        title={<>Earn <em style={{ color: C.silk, fontStyle: "italic", fontFamily: "'Instrument Serif', serif" }}>reputation</em>. Climb the ranks.</>}
      />
      <p style={{ color: C.textDim, fontSize: 17, lineHeight: 1.55, maxWidth: 560, marginBottom: 56 }}>
        Your AmbiScore goes up when people upvote your posts. As you grow, you unlock ranks and earn
        badges for milestones — a way to reward people who contribute meaningful discussions rather than noise.
      </p>
      <div className="ranks" style={rankStyles.row}>
        {RANKS.map((r, i) => (
          <div key={r.name} style={rankStyles.rank}>
            <div style={rankStyles.orb}>
              <Spider size={64} color={r.color} glow={true} />
              {i === RANKS.length - 1 && <span style={rankStyles.crown}>♛</span>}
            </div>
            <div style={{ color: C.text, fontFamily: "'Instrument Serif', serif", fontSize: 20, marginTop: 14, whiteSpace: "nowrap" }}>{r.name}</div>
            <div style={{ color: C.textMuted, fontSize: 11.5, marginTop: 6, fontFamily: "'JetBrains Mono', monospace", whiteSpace: "nowrap" }}>{r.score} score</div>
          </div>
        ))}
      </div>
      <div className="badge-box" style={rankStyles.badgeBox}>
        <div style={{ flex: 1 }}>
          <div style={{ color: C.brandHi, fontSize: 11, fontWeight: 700, letterSpacing: 2, textTransform: "uppercase" }}>+ 15 Badges</div>
          <h3 style={{ fontFamily: "'Instrument Serif', serif", fontSize: 36, color: C.text, lineHeight: 1.05, margin: "10px 0 8px", letterSpacing: -0.5 }}>
            The Spinner. The Wildfire. The Legend.
          </h3>
          <p style={{ color: C.textDim, fontSize: 15, lineHeight: 1.55, margin: 0, maxWidth: 460 }}>
            RPG-rarity badges with their own glow. Common, Rare, Epic, Legendary. Drop them in your profile, drop them in conversations.
          </p>
        </div>
        <div className="badge-row" style={rankStyles.badges}>
          {[
            "I_pioneer_The Spinner_Common.png",
            "VIII_convo_starter_The_Thread_Rare.png",
            "XIII_viral_The_Wildfire_Legendary.png",
            "XV_legend_The_Legend_Legendary.png",
          ].map((src, i) => (
            <img
              key={src}
              src={`BADGES_ORIGINALS/${src}`}
              alt=""
              style={{ ...rankStyles.badgeImg, transform: `rotate(${(i - 1.5) * 4}deg) translateY(${i % 2 ? 8 : 0}px)`, zIndex: i === 3 ? 5 : i }}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

const rankStyles = {
  wrap: { padding: "40px 36px 100px", maxWidth: 1280, margin: "0 auto" },
  row: { display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 12, alignItems: "end" },
  rank: { display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center" },
  orb: { width: 64, height: 64, position: "relative", display: "flex", alignItems: "center", justifyContent: "center" },
  crown: { fontSize: 18, color: "#c8980a", position: "absolute", top: -10, left: "50%", transform: "translateX(-50%)" },
  badgeBox: {
    marginTop: 80, padding: "44px 48px",
    border: `1px solid ${C.border}`, borderRadius: 24,
    background: `linear-gradient(135deg, ${C.panel}, ${C.bgDeep})`,
    display: "flex", alignItems: "center", gap: 40,
    position: "relative", overflow: "hidden",
  },
  badges: { display: "flex", position: "relative" },
  badgeImg: { width: 116, height: 116, objectFit: "contain", filter: "drop-shadow(0 12px 24px rgba(0,0,0,0.6))", marginLeft: -22 },
};

// ─────────────────────────────────────────────────────────────
// Testimonials
// ─────────────────────────────────────────────────────────────
const TESTIMONIALS = [
  { initials: "MK", name: "Marco K.",   handle: "marco_k",    score: "847",   text: "I can finally comment on news articles without needing an account on their site. Absolute game changer." },
  { initials: "SL", name: "Surf Lisa",  handle: "surf_lisa",  score: "1.203", text: "A site I visit daily removed their comment section. AmbiWebZ brought the conversation back in 30 seconds." },
  { initials: "TF", name: "Techfreund", handle: "techfreund", score: "2.891", text: "The Webzi button floats on every page and instantly shows me if something is being discussed. I open it automatically now." },
];

function Testimonials() {
  return (
    <section className="mobile-section" style={testStyles.wrap}>
      <SectionLabel kicker="Community" title={<>What the community <em style={{ color: C.brandHi, fontStyle: "italic" }}>says</em>.</>} />
      <div className="three-col" style={testStyles.grid}>
        {TESTIMONIALS.map((t) => (
          <div key={t.handle} style={testStyles.card}>
            <div style={testStyles.head}>
              <div style={testStyles.avatar}>{t.initials}</div>
              <div>
                <div style={{ color: C.text, fontWeight: 600, fontSize: 14 }}>{t.name}</div>
                <div style={{ color: C.textMuted, fontSize: 12 }}>@{t.handle} · ⭐ {t.score}</div>
              </div>
            </div>
            <p style={testStyles.text}>"{t.text}"</p>
          </div>
        ))}
      </div>
      <div style={testStyles.stars}><span style={{ color: C.brandHi, fontSize: 14 }}>★ Beta — be one of our first reviewers</span></div>
    </section>
  );
}

const testStyles = {
  wrap: { padding: "40px 36px 100px", maxWidth: 1280, margin: "0 auto" },
  grid: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 },
  card: { padding: "28px", border: `1px solid ${C.border}`, borderRadius: 16, background: C.panel },
  head: { display: "flex", alignItems: "center", gap: 12, marginBottom: 16 },
  avatar: {
    width: 44, height: 44, borderRadius: "50%",
    background: `linear-gradient(135deg, ${C.brandHi}, ${C.brand})`,
    color: "#fff", fontWeight: 700, fontSize: 14,
    display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
  },
  text: { color: C.textDim, fontSize: 15, lineHeight: 1.65, margin: 0, fontStyle: "italic" },
  stars: { marginTop: 36, fontSize: 22, color: C.silk, textAlign: "center" },
};

// ─────────────────────────────────────────────────────────────
// Premium / Plans
// ─────────────────────────────────────────────────────────────
function Li({ children, muted, gold }) {
  return (
    <li style={{ display: "flex", gap: 10, alignItems: "flex-start", padding: "7px 0", color: muted ? C.textMuted : C.text, fontSize: 14.5 }}>
      <span style={{ color: gold ? C.silk : muted ? C.textMuted : C.brandHi, fontSize: 12, marginTop: 4 }}>{muted ? "✕" : "✓"}</span>
      <span style={{ textDecoration: muted ? "line-through" : "none" }}>{children}</span>
    </li>
  );
}

function Premium() {
  return (
    <section id="premium" className="mobile-section" style={premStyles.wrap}>
      <SectionLabel kicker="Plans" title={<>Start for free. Go Premium when you <em style={{ color: C.silk, fontStyle: "italic" }}>want more</em>.</>} />
      <div className="two-col" style={premStyles.grid}>

        <div style={premStyles.free}>
          <div style={premStyles.tag}>🆓 FREE</div>
          <div style={premStyles.price}>€0<span style={{ fontSize: 14, color: C.textMuted }}> / forever</span></div>
          <ul style={premStyles.list}>
            <Li>Write AmbiCasts on any URL, instantly</Li>
            <Li>Read all comments · emoji reactions 👍 🔥 ❤️ 😂 😮</Li>
            <Li>Threaded replies</Li>
            <Li>Global Feed — see what's discussed across the internet</Li>
            <Li>AmbiScore & level system</Li>
            <Li>Basic badges & achievements</Li>
            <Li>Up to 1,000 characters · 20 posts per day</Li>
            <Li>Community reports, moderation, and account controls</Li>
          </ul>
          <a href="#how" style={premStyles.freeBtn}>Chrome Store listing coming soon</a>
        </div>

        <div style={premStyles.lounge}>
          <div style={{ ...premStyles.tag, color: C.silk, borderColor: `${C.silk}55` }}>⭐ PREMIUM</div>
          <div style={premStyles.price}>€4,99<span style={{ fontSize: 14, color: C.textMuted }}> / month · €39,99 / year</span></div>
          <ul style={premStyles.list}>
            <Li gold>Everything in Free, plus:</Li>
          </ul>
          <div style={{ color: C.silk, fontSize: 11, letterSpacing: 1.5, fontWeight: 700, textTransform: "uppercase", margin: "4px 0 6px" }}>✍️ Writing</div>
          <ul style={premStyles.list}>
            <Li gold>Up to 5,000 characters per post</Li>
            <Li gold>Unlimited posts per day</Li>
            <Li gold>Edit posts within 1-hour window (up to 3×)</Li>
          </ul>
          <div style={{ color: C.silk, fontSize: 11, letterSpacing: 1.5, fontWeight: 700, textTransform: "uppercase", margin: "4px 0 6px" }}>🎨 Personalization</div>
          <ul style={premStyles.list}>
            <Li gold>Avatar styles, accessories & custom upload</Li>
            <Li gold>Premium icons for the Webzi button</Li>
            <Li gold>Custom theme & brand color</Li>
          </ul>
          <div style={{ color: C.silk, fontSize: 11, letterSpacing: 1.5, fontWeight: 700, textTransform: "uppercase", margin: "4px 0 6px" }}>🔔 Productivity</div>
          <ul style={premStyles.list}>
            <Li gold>New comment highlighting</Li>
            <Li gold>Keyword alerts on any URL</Li>
            <Li gold>AI Summary (AmbiSummary) · Performance Analytics</Li>
          </ul>
          <div style={{ color: C.silk, fontSize: 11, letterSpacing: 1.5, fontWeight: 700, textTransform: "uppercase", margin: "4px 0 6px" }}>👑 Exclusive Access</div>
          <ul style={premStyles.list}>
            <Li gold>Premium Lounge — exclusive channel</Li>
            <Li gold>Anonymous mode · Claim & brand your AmbiSphere</Li>
            <Li gold>Early access · Gift Premium to a friend</Li>
          </ul>
          <a href="pricing.html" style={premStyles.loungeBtn}>View full pricing →</a>
          <div style={premStyles.shimmer} />
        </div>

      </div>
    </section>
  );
}

const premStyles = {
  wrap: { padding: "40px 36px 120px", maxWidth: 1100, margin: "0 auto" },
  grid: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 },
  free: { padding: 36, border: `1px solid ${C.border}`, borderRadius: 20, background: C.panel },
  lounge: {
    position: "relative", overflow: "hidden",
    padding: 36, borderRadius: 20,
    background: "linear-gradient(160deg, #2E2440, #221E22)",
    border: `1px solid ${C.silk}30`,
    boxShadow: `0 30px 80px -30px ${C.silk}30, inset 0 1px 0 ${C.silk}20`,
  },
  shimmer: { position: "absolute", inset: 0, background: `radial-gradient(circle at 100% 0%, ${C.silk}15, transparent 50%)`, pointerEvents: "none" },
  tag: { fontSize: 11, letterSpacing: 2, fontWeight: 700, color: C.textDim, padding: "4px 10px", border: `1px solid ${C.border}`, borderRadius: 999, display: "inline-block" },
  price: { fontFamily: "'Instrument Serif', serif", fontSize: 56, color: C.text, marginTop: 14, lineHeight: 1, fontWeight: 400 },
  list: { listStyle: "none", padding: 0, margin: "0 0 4px" },
  freeBtn: { display: "block", textAlign: "center", padding: "14px", borderRadius: 12, background: C.panelHi, color: C.text, textDecoration: "none", fontWeight: 600, fontSize: 14.5, border: `1px solid ${C.border}` },
  loungeBtn: { display: "block", textAlign: "center", padding: "14px", borderRadius: 12, background: C.silk, color: "#2E2440", textDecoration: "none", fontWeight: 700, fontSize: 14.5, position: "relative", zIndex: 2, marginTop: 16 },
};

// ─────────────────────────────────────────────────────────────
// Final CTA + Ko-fi + Footer
// ─────────────────────────────────────────────────────────────
function WebBackdropBig() {
  return (
    <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none", opacity: 0.22 }} viewBox="0 0 1200 600" preserveAspectRatio="xMidYMid slice">
      <defs>
        <radialGradient id="webfade2" cx="50%" cy="100%" r="80%">
          <stop offset="0%" stopColor={C.brandHi} stopOpacity="0.6" />
          <stop offset="100%" stopColor={C.brandHi} stopOpacity="0" />
        </radialGradient>
      </defs>
      {Array.from({ length: 28 }).map((_, i) => {
        const a = (i / 28) * Math.PI * 2;
        return <line key={i} x1="600" y1="650" x2={600 + Math.cos(a) * 1200} y2={650 + Math.sin(a) * 1200} stroke="url(#webfade2)" strokeWidth="0.6" />;
      })}
      {[120, 240, 360, 480, 600, 720].map((r, i) => (
        <circle key={i} cx="600" cy="650" r={r} stroke="url(#webfade2)" strokeWidth="0.6" fill="none" />
      ))}
    </svg>
  );
}

function FinalCTA() {
  return (
    <>
      <section style={ctaStyles.wrap}>
        <WebBackdropBig />
        <div style={ctaStyles.spider}>
          <div style={{ width: 1, height: 50, background: "rgba(236,167,44,0.35)", margin: "0 auto" }} />
          <img src="ambiwebzspidi.png" alt="Webzi" width="180" style={{ display: "block", filter: "drop-shadow(0 14px 30px rgba(236,167,44,0.35))" }} />
        </div>
        <h2 style={ctaStyles.h}>
          The internet won't wait.<br />
          <em style={{ color: C.brandHi, fontStyle: "italic" }}>Start discussing now.</em>
        </h2>
        <p style={ctaStyles.p}>Free to start · Account required · Quick setup</p>
        <a href="#how" style={ctaStyles.btn}>Chrome Store listing coming soon →</a>
        <div style={ctaStyles.meta}>Chrome Web Store listing coming soon</div>
      </section>

      <section style={ctaStyles.kofiWrap}>
        <div style={{ fontSize: 28, marginBottom: 12 }}>❤️</div>
        <h3 style={{ fontFamily: "'Instrument Serif', serif", fontWeight: 400, fontSize: 34, color: C.text, margin: "0 0 16px", letterSpacing: -0.5 }}>
          Help us keep the conversation free
        </h3>
        <p style={{ color: C.textDim, fontSize: 16, lineHeight: 1.65, maxWidth: 560, margin: "0 auto 28px" }}>
          AmbiWebZ was built on a simple belief:{" "}
          <strong style={{ color: C.text }}>every voice deserves to be heard</strong> — regardless of what
          any platform decides. No censorship. No gatekeeping. No algorithms silencing your opinion.<br /><br />
          But servers cost money, and we refuse to sell your data. If you believe in an open web where{" "}
          <em style={{ color: C.text }}>you</em> control the conversation — support us with a coffee.
          Every bit helps keep AmbiWebZ free and independent.
        </p>
        <a href="https://ko-fi.com/ambiwebz" target="_blank" rel="noopener noreferrer" style={ctaStyles.kofiBtn}>
          Donate
        </a>
        <div style={{ color: C.textMuted, fontSize: 12.5, marginTop: 14 }}>100% voluntary — AmbiWebZ will always be free to use.</div>
      </section>
    </>
  );
}

const ctaStyles = {
  wrap: { position: "relative", padding: "140px 36px 100px", textAlign: "center", overflow: "hidden", borderTop: `1px solid ${C.border}` },
  spider: { position: "absolute", left: "50%", top: -10, transform: "translateX(-50%)", animation: "swing 5s ease-in-out infinite", transformOrigin: "50% 0%" },
  h: { fontFamily: "'Instrument Serif', serif", fontSize: "clamp(56px, 8vw, 112px)", lineHeight: 0.95, color: C.text, margin: "100px 0 24px", letterSpacing: -2, fontWeight: 400, position: "relative", zIndex: 2 },
  p: { color: C.textDim, fontSize: 18, marginBottom: 36, position: "relative", zIndex: 2 },
  btn: {
    display: "inline-block", padding: "18px 30px", borderRadius: 999,
    background: C.text, color: C.bg, textDecoration: "none",
    fontSize: 15.5, fontWeight: 600,
    boxShadow: "0 18px 50px -10px rgba(236,167,44,0.55), 0 0 0 1px rgba(255,255,255,0.1)",
    position: "relative", zIndex: 2,
  },
  meta: { color: C.textMuted, fontSize: 12.5, marginTop: 22, position: "relative", zIndex: 2 },
  kofiWrap: { padding: "80px 36px", textAlign: "center", borderTop: `1px solid ${C.border}`, background: C.panel },
  kofiBtn: { display: "inline-block", padding: "13px 28px", borderRadius: 999, background: "#FF5E5B", color: "#fff", textDecoration: "none", fontWeight: 700, fontSize: 15, boxShadow: "0 8px 24px -8px rgba(255,94,91,0.5)" },
};

function Footer() {
  return (
    <footer style={footStyles.wrap}>
      <div style={footStyles.top}>
        <div style={footStyles.brand}>
          <img src="logo-gold.png" alt="" width="24" height="24" style={{ display: "block", filter: "drop-shadow(0 0 8px rgba(236,167,44,0.35))" }} />
          <span style={{ fontFamily: "'Instrument Serif', serif", fontSize: 20, color: C.text }}>AmbiWeb<em style={{ color: C.silk, fontStyle: "normal", marginLeft: -1 }}>Z</em></span>
        </div>
        <div style={footStyles.links}>
          <a href="legal-notice.html" style={footStyles.link}>Legal Notice / Impressum</a>
          <a href="privacy.html" style={footStyles.link}>Privacy Policy</a>
          <a href="community-guidelines.html" style={footStyles.link}>Community Guidelines</a>
          <a href="https://ko-fi.com/ambiwebz" target="_blank" rel="noopener noreferrer" style={footStyles.link}>Donate</a>
        </div>
      </div>
      <div style={footStyles.bottom}>
        <div style={{ display: "flex", gap: 20, flexWrap: "wrap" }}>
          <a href="mailto:hello@ambiwebz.com" style={footStyles.link}>📬 hello@ambiwebz.com</a>
          <a href="mailto:support@ambiwebz.com" style={footStyles.link}>🛟 support@ambiwebz.com</a>
          <a href="mailto:legal@ambiwebz.com" style={footStyles.link}>⚖️ legal@ambiwebz.com</a>
        </div>
        <span style={{ color: C.textMuted }}>© 2026 AmbiWebZ</span>
      </div>
    </footer>
  );
}

const footStyles = {
  wrap: { padding: "40px 36px", borderTop: `1px solid ${C.border}`, background: C.bgDeep },
  top: { display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16, marginBottom: 24, paddingBottom: 24, borderBottom: `1px solid ${C.border}` },
  bottom: { display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 12, fontSize: 12 },
  brand: { display: "flex", alignItems: "center", gap: 8, color: C.text },
  links: { display: "flex", gap: 22, flexWrap: "wrap" },
  link: { color: C.textDim, textDecoration: "none", fontSize: 13 },
};

Object.assign(window, { Vibes, HowItWorks, Features, Ranks, Testimonials, Premium, FinalCTA, Footer });