"use client";

import { ThemeColor, DesignConfig, DAISY_THEMES, HEROUI_MARKETING_THEMES, ACETERNITY_THEMES } from "./types";

function fontStack(font?: string) {
  if (font === "plus-jakarta") return '"Plus Jakarta Sans", system-ui, sans-serif';
  if (font === "dm-sans")      return '"DM Sans", system-ui, sans-serif';
  if (font === "geist")        return '"Geist", system-ui, sans-serif';
  if (font === "inter")        return '"Inter", system-ui, sans-serif';
  if (font === "nunito")       return '"Nunito", system-ui, sans-serif';
  return "system-ui, sans-serif";
}

// CSS keyframes injected once per component render (scoped names prevent conflicts)
const ACE_KEYFRAMES = `
  @keyframes ace-blob1 {
    0%,100% { transform: translate(0%,0%) scale(1); }
    33%  { transform: translate(28%,-22%) scale(1.12); }
    66%  { transform: translate(-18%,18%) scale(0.9); }
  }
  @keyframes ace-blob2 {
    0%,100% { transform: translate(0%,0%) scale(1); }
    33%  { transform: translate(-24%,14%) scale(0.95); }
    66%  { transform: translate(20%,-24%) scale(1.08); }
  }
  @keyframes ace-blob3 {
    0%,100% { transform: translate(0%,0%) rotate(0deg); }
    50%  { transform: translate(12%,-14%) rotate(180deg); }
  }
  @keyframes ace-blob4 {
    0%,100% { transform: translate(0%,0%) scale(1); }
    50%  { transform: translate(-16%,20%) scale(1.1); }
  }
  @keyframes ace-meteor {
    0%   { transform: translateX(0) translateY(0) rotate(-35deg); opacity: 1; }
    70%  { opacity: 0.6; }
    100% { transform: translateX(160px) translateY(160px) rotate(-35deg); opacity: 0; }
  }
  @keyframes ace-sparkle {
    0%,100% { opacity:0; transform:scale(0.4); }
    40%,60% { opacity:1; transform:scale(1); }
  }
  @keyframes ace-cursor {
    0%,100% { opacity:1; } 50% { opacity:0; }
  }
  @keyframes ace-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  @keyframes ace-beam-pulse {
    0%,100% { opacity:0.08; } 50% { opacity:0.22; }
  }
  @keyframes ace-lamp {
    0%,100% { opacity:0.6; transform:scaleX(1); }
    50%  { opacity:1; transform:scaleX(1.15); }
  }
`;

// ---------------------------------------------------------------------------
// Aceternity UI
// ---------------------------------------------------------------------------

export function MarketingAceternity({ themeColor, config }: { themeColor?: ThemeColor; config?: DesignConfig }) {
  const accent    = themeColor ?? ACETERNITY_THEMES[0];
  const p         = accent.primary;
  const p2        = accent.ring.replace("0.4)", "1)").replace("rgba(", "rgb("); // second accent
  const isDark    = config?.mode !== "light";
  const bgStyle   = config?.background ?? "beams";
  const navStyle  = config?.nav        ?? "minimal";
  const hdrStyle  = config?.header     ?? "gradient-text";
  const comps     = config?.components ?? ["features", "moving-cards"];
  const ff        = fontStack(config?.font);

  // sparkles forces black; aurora forces light; shader always dark-text-over-vibrant
  const forcedDark  = bgStyle === "sparkles" || bgStyle === "shader";
  const forcedLight = bgStyle === "aurora";
  const effectiveDark = forcedDark ? true : forcedLight ? false : isDark;

  const bg    = forcedDark ? "#000" : forcedLight ? "#f8f9ff" : isDark ? "#050010" : "#fafafa";
  const text  = effectiveDark ? "#fff"     : "#0f172a";
  const muted = effectiveDark ? "rgba(255,255,255,0.38)" : "#64748b";
  const card  = effectiveDark ? "rgba(255,255,255,0.035)" : "rgba(0,0,0,0.03)";
  const border= effectiveDark ? "rgba(255,255,255,0.07)"  : "rgba(0,0,0,0.08)";

  // ── Background layers ──────────────────────────────────────────────────────
  const BgLayer = () => {
    // Animated gradient blobs — mirrors Aceternity's Background Gradient Animation
    if (bgStyle === "gradient") return (
      <div style={{ position: "absolute", inset: 0, overflow: "hidden", zIndex: 0, background: isDark ? "rgb(8,0,20)" : "rgb(240,235,255)" }}>
        <div style={{ position: "absolute", inset: 0, filter: "blur(50px)", mixBlendMode: isDark ? "hard-light" : "multiply" }}>
          <div style={{ position: "absolute", width: "70%", height: "70%", top: "5%", left: "10%", borderRadius: "50%", background: `radial-gradient(circle, rgba(18,113,255,0.85) 0%, transparent 65%)`, animation: "ace-blob1 22s ease infinite" }} />
          <div style={{ position: "absolute", width: "65%", height: "65%", top: "-10%", left: "-5%", borderRadius: "50%", background: `radial-gradient(circle, ${p}cc 0%, transparent 65%)`, animation: "ace-blob2 18s reverse infinite" }} />
          <div style={{ position: "absolute", width: "55%", height: "55%", bottom: "10%", right: "10%", borderRadius: "50%", background: `radial-gradient(circle, rgba(100,220,255,0.7) 0%, transparent 65%)`, animation: "ace-blob3 28s linear infinite" }} />
          <div style={{ position: "absolute", width: "50%", height: "50%", bottom: "-10%", left: "30%", borderRadius: "50%", background: `radial-gradient(circle, rgba(200,50,50,0.65) 0%, transparent 65%)`, animation: "ace-blob4 24s ease infinite" }} />
        </div>
      </div>
    );

    // Lines Gradient Shader — bold diagonal rainbow band: purple→pink→orange→yellow
    if (bgStyle === "shader") return (
      <div style={{ position: "absolute", inset: 0, overflow: "hidden", zIndex: 0, background: isDark ? "#09090b" : "#fafafa" }}>
        {/* Diagonal gradient band */}
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(135deg, #7c3aed 0%, #db2777 35%, #ea580c 65%, #ca8a04 100%)", opacity: isDark ? 0.9 : 0.85 }} />
        {/* Subtle line overlay */}
        <div style={{ position: "absolute", inset: 0, backgroundImage: "repeating-linear-gradient(135deg, transparent 0px, transparent 12px, rgba(255,255,255,0.04) 12px, rgba(255,255,255,0.04) 13px)", pointerEvents: "none" }} />
        {/* Soft vignette */}
        <div style={{ position: "absolute", inset: 0, background: "radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, rgba(0,0,0,0.35) 100%)", pointerEvents: "none" }} />
      </div>
    );

    // Background Beams — SVG-style radial beams on dark bg
    if (bgStyle === "beams") return (
      <div style={{ position: "absolute", inset: 0, overflow: "hidden", zIndex: 0 }}>
        <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }} viewBox="0 0 400 600" preserveAspectRatio="xMidYMid slice">
          <defs>
            <radialGradient id="beam-glow" cx="50%" cy="0%" r="70%">
              <stop offset="0%" stopColor={p} stopOpacity="0.18" />
              <stop offset="100%" stopColor={p} stopOpacity="0" />
            </radialGradient>
          </defs>
          <rect width="400" height="600" fill="url(#beam-glow)" />
          {Array.from({ length: 12 }).map((_, i) => {
            const x = 200 + (i - 6) * 34;
            return (
              <line key={i} x1={200} y1={0} x2={x} y2={600}
                stroke={i % 3 === 0 ? p : i % 3 === 1 ? "#3b82f6" : "#06b6d4"}
                strokeWidth={i % 4 === 0 ? 0.6 : 0.3}
                strokeOpacity={0.12 + (i % 3) * 0.04}
                style={{ animation: `ace-beam-pulse ${3 + i * 0.5}s ease-in-out ${i * 0.25}s infinite` }}
              />
            );
          })}
        </svg>
      </div>
    );

    // Meteors — diagonal shooting-star streaks with glow tails
    if (bgStyle === "meteors") return (
      <div style={{ position: "absolute", inset: 0, overflow: "hidden", zIndex: 0 }}>
        <div style={{ position: "absolute", inset: 0, background: `radial-gradient(ellipse 60% 40% at 50% 0%, ${p}15, transparent)` }} />
        {Array.from({ length: 12 }).map((_, i) => (
          <div key={i} style={{
            position: "absolute",
            top: `${(i * 31 + 5) % 65}%`,
            right: `${(i * 47) % 90}%`,
            width: `${36 + i * 8}px`, height: "1px",
            background: `linear-gradient(90deg, ${p}ee, rgba(255,255,255,0.7), transparent)`,
            transform: "rotate(-35deg)",
            animation: `ace-meteor ${1.2 + (i % 5) * 0.5}s linear ${i * 0.55}s infinite`,
            borderRadius: "50%",
            boxShadow: `0 0 4px ${p}80`,
          }} />
        ))}
      </div>
    );

    // Sparkles — true black bg with small twinkling star particles
    if (bgStyle === "sparkles") return (
      <div style={{ position: "absolute", inset: 0, overflow: "hidden", zIndex: 0, background: "#000" }}>
        {Array.from({ length: 40 }).map((_, i) => {
          const size = i % 6 === 0 ? 3 : i % 3 === 0 ? 2 : 1.5;
          return (
            <div key={i} style={{
              position: "absolute",
              width: size, height: size,
              borderRadius: "50%",
              background: "#fff",
              boxShadow: `0 0 ${size * 2}px ${i % 4 === 0 ? p : "rgba(255,255,255,0.8)"}`,
              top: `${(i * 37 + 5) % 92}%`,
              left: `${(i * 53 + 3) % 94}%`,
              animation: `ace-sparkle ${1.4 + (i % 7) * 0.3}s ease-in-out ${(i * 0.18) % 2.2}s infinite`,
            }} />
          );
        })}
      </div>
    );

    // Aurora — soft lavender/blue glow on a LIGHT background (matches Aceternity's Aurora)
    if (bgStyle === "aurora") return (
      <div style={{ position: "absolute", inset: 0, overflow: "hidden", zIndex: 0, background: "#f8f9ff" }}>
        <div style={{ position: "absolute", top: "-30%", left: "-10%", width: "70%", height: "70%", borderRadius: "50%", background: "radial-gradient(circle, rgba(196,181,253,0.55) 0%, transparent 65%)", filter: "blur(40px)", animation: "ace-blob1 18s ease infinite" }} />
        <div style={{ position: "absolute", top: "-20%", right: "-5%", width: "60%", height: "60%", borderRadius: "50%", background: "radial-gradient(circle, rgba(147,197,253,0.45) 0%, transparent 65%)", filter: "blur(40px)", animation: "ace-blob2 22s reverse infinite" }} />
        <div style={{ position: "absolute", top: "20%", left: "30%", width: "50%", height: "50%", borderRadius: "50%", background: "radial-gradient(circle, rgba(216,180,254,0.35) 0%, transparent 65%)", filter: "blur(40px)", animation: "ace-blob3 26s linear infinite" }} />
      </div>
    );

    if (bgStyle === "wavy") return (
      <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: "55%", zIndex: 0, overflow: "hidden" }}>
        <svg viewBox="0 0 400 120" preserveAspectRatio="none" style={{ width: "100%", height: "100%" }}>
          <defs>
            <linearGradient id="wg1" x1="0%" y1="0%" x2="100%" y2="0%">
              <stop offset="0%" stopColor={p} stopOpacity="0.12" />
              <stop offset="100%" stopColor="#3b82f6" stopOpacity="0.08" />
            </linearGradient>
          </defs>
          <path d="M0,40 Q50,10 100,40 T200,40 T300,40 T400,40 L400,120 L0,120 Z" fill="url(#wg1)" />
          <path d="M0,60 Q60,28 120,60 T240,60 T360,60 T400,60 L400,120 L0,120 Z" fill={`${p}08`} />
          <path d="M0,80 Q80,55 160,80 T320,80 T400,80 L400,120 L0,120 Z" fill={`${p}06`} />
        </svg>
      </div>
    );
    if (bgStyle === "dot-grid") return (
      <div style={{ position: "absolute", inset: 0, zIndex: 0, backgroundImage: `radial-gradient(${p}28 1px, transparent 1px)`, backgroundSize: "20px 20px" }} />
    );
    return <div style={{ position: "absolute", inset: 0, background: `radial-gradient(ellipse 70% 50% at 50% 0%, ${p}18, transparent)`, zIndex: 0 }} />;
  };

  const floatingNav = navStyle === "floating";

  return (
    <div style={{ height: "100%", fontFamily: ff, background: bg, overflow: "auto", position: "relative", color: text }}>
      <style>{ACE_KEYFRAMES}</style>
      <BgLayer />

      {/* Nav */}
      {floatingNav ? (
        <div style={{ display: "flex", justifyContent: "center", padding: "12px", position: "relative", zIndex: 10 }}>
          <nav style={{ display: "flex", alignItems: "center", gap: 20, padding: "8px 20px", borderRadius: 40, background: isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)", border: `1px solid ${p}40`, backdropFilter: "blur(12px)" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
              <div style={{ width: 16, height: 16, borderRadius: 4, background: `linear-gradient(135deg,${p},#3b82f6)` }} />
              <span style={{ fontWeight: 800, fontSize: 11, color: text }}>Acme</span>
            </div>
            {["Features","Pricing","Docs"].map(i => <span key={i} style={{ fontSize: 9.5, color: muted }}>{i}</span>)}
            <button style={{ height: 22, padding: "0 10px", borderRadius: 12, fontSize: 9, fontWeight: 600, color: "#fff", background: `${p}55`, border: `1px solid ${p}60`, cursor: "pointer" }}>Get started</button>
          </nav>
        </div>
      ) : (
        <nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 22px", borderBottom: `1px solid ${border}`, position: "relative", zIndex: 10, backdropFilter: "blur(8px)", background: isDark ? "rgba(5,0,16,0.6)" : "rgba(255,255,255,0.6)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
            <div style={{ width: 18, height: 18, borderRadius: 4, background: `linear-gradient(135deg,${p},#3b82f6)` }} />
            <span style={{ fontWeight: 800, fontSize: 11, color: text }}>Acme</span>
          </div>
          <div style={{ display: "flex", gap: 16, fontSize: 9.5, color: muted }}>
            {["Features","Pricing","Docs","Blog"].map(i => <span key={i}>{i}</span>)}
          </div>
          <button style={{ height: 24, padding: "0 12px", borderRadius: 6, fontSize: 9, fontWeight: 600, color: "#fff", background: `linear-gradient(135deg,${p},#3b82f6)`, border: "none", cursor: "pointer" }}>Get started</button>
        </nav>
      )}

      {/* Hero */}
      {hdrStyle === "gradient-text" && (
        <div style={{ padding: "28px 22px 18px", textAlign: "center", position: "relative", zIndex: 1 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 5, padding: "3px 12px", borderRadius: 20, fontSize: 8.5, fontWeight: 500, marginBottom: 14, border: `1px solid ${p}40`, color: `${p}cc`, background: `${p}10` }}>
            ✦ Open source · 12k GitHub stars
          </div>
          <h1 style={{ fontSize: 24, fontWeight: 900, marginBottom: 10, lineHeight: 1.1, background: isDark ? `linear-gradient(180deg, #fff 30%, rgba(255,255,255,0.35) 100%)` : `linear-gradient(180deg, #0f172a 30%, rgba(15,23,42,0.4) 100%)`, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>
            Build the future<br />of the web
          </h1>
          <p style={{ fontSize: 10, color: muted, maxWidth: 230, margin: "0 auto 18px", lineHeight: 1.65 }}>
            Beautifully crafted components built with Tailwind CSS and Framer Motion.
          </p>
          <div style={{ display: "flex", gap: 8, justifyContent: "center" }}>
            <button style={{ height: 30, padding: "0 18px", borderRadius: 6, fontSize: 9.5, fontWeight: 600, color: "#fff", background: `linear-gradient(135deg,${p},#3b82f6)`, border: "none", cursor: "pointer", boxShadow: `0 4px 16px ${p}40` }}>Get started →</button>
            <button style={{ height: 30, padding: "0 14px", borderRadius: 6, fontSize: 9.5, color: muted, border: `1px solid ${border}`, background: "none", cursor: "pointer" }}>View components</button>
          </div>
        </div>
      )}

      {hdrStyle === "lamp" && (
        <div style={{ padding: "20px 22px 16px", textAlign: "center", position: "relative", zIndex: 1 }}>
          {/* Lamp cone */}
          <div style={{ position: "absolute", top: 0, left: "50%", transform: "translateX(-50%)", width: "60%", height: 80, background: `conic-gradient(from 265deg at 50% 0%, transparent 0deg, ${p}30 20deg, ${p}18 40deg, transparent 60deg)`, pointerEvents: "none" }} />
          <div style={{ width: 90, height: 1.5, background: `linear-gradient(90deg, transparent, ${p}, transparent)`, margin: "0 auto 18px", animation: "ace-lamp 3s ease-in-out infinite" }} />
          <h1 style={{ fontSize: 22, fontWeight: 900, color: text, marginBottom: 8, lineHeight: 1.15 }}>Build the future<br />of the web</h1>
          <p style={{ fontSize: 10, color: muted, maxWidth: 220, margin: "0 auto 16px", lineHeight: 1.65 }}>Powered by Framer Motion and Tailwind CSS.</p>
          <button style={{ height: 30, padding: "0 16px", borderRadius: 6, fontSize: 9.5, fontWeight: 600, color: "#fff", background: `linear-gradient(135deg,${p},#3b82f6)`, border: "none", cursor: "pointer", boxShadow: `0 4px 16px ${p}35` }}>Get started →</button>
        </div>
      )}

      {hdrStyle === "typewriter" && (
        <div style={{ padding: "26px 22px 16px", textAlign: "center", position: "relative", zIndex: 1 }}>
          <div style={{ fontSize: 8.5, letterSpacing: "0.22em", color: `${p}90`, marginBottom: 12, textTransform: "uppercase" }}>The future is here</div>
          <h1 style={{ fontSize: 22, fontWeight: 900, color: text, marginBottom: 8, lineHeight: 1.2 }}>
            Build the future<br />
            <span style={{ background: `linear-gradient(90deg,${p},#3b82f6)`, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>of the web</span>
            <span style={{ display: "inline-block", width: 2, height: "1em", background: p, verticalAlign: "text-bottom", marginLeft: 2, animation: "ace-cursor 0.9s step-end infinite" }} />
          </h1>
          <p style={{ fontSize: 10, color: muted, maxWidth: 220, margin: "0 auto 16px", lineHeight: 1.65 }}>Components that bring ideas to life.</p>
          <button style={{ height: 30, padding: "0 16px", borderRadius: 6, fontSize: 9.5, fontWeight: 600, color: "#fff", background: `linear-gradient(135deg,${p},#3b82f6)`, border: "none", cursor: "pointer" }}>Get started →</button>
        </div>
      )}

      {/* Sections */}
      {comps.includes("badge") && (
        <div style={{ padding: "4px 22px 10px", textAlign: "center", position: "relative", zIndex: 1 }}>
          <span style={{ display: "inline-block", padding: "4px 14px", borderRadius: 20, fontSize: 8.5, border: `1px solid ${p}45`, color: `${p}dd`, background: `${p}0e` }}>✦ v2.0 just shipped — see what&apos;s new →</span>
        </div>
      )}

      {comps.includes("features") && (
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8, padding: "10px 22px", position: "relative", zIndex: 1 }}>
          {[{ label: "Animated", icon: "✦", c: p }, { label: "Accessible", icon: "◎", c: "#3b82f6" }, { label: "Open source", icon: "⬡", c: "#22c55e" }].map(f => (
            <div key={f.label} style={{ padding: "12px", borderRadius: 10, background: card, border: `1px solid ${border}`, backdropFilter: "blur(4px)" }}>
              <div style={{ width: 22, height: 22, borderRadius: 6, marginBottom: 8, background: `${f.c}18`, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 10, color: f.c }}>{f.icon}</div>
              <p style={{ fontSize: 9.5, fontWeight: 700, color: text, marginBottom: 3 }}>{f.label}</p>
              <p style={{ fontSize: 8.5, color: muted }}>Built for production</p>
            </div>
          ))}
        </div>
      )}

      {comps.includes("moving-cards") && (
        <div style={{ padding: "10px 0", position: "relative", zIndex: 1, overflow: "hidden" }}>
          <p style={{ fontSize: 9, color: muted, marginBottom: 8, textAlign: "center" }}>Trusted by developers worldwide</p>
          <div style={{ display: "flex", width: "200%", animation: "ace-marquee 18s linear infinite" }}>
            {[...Array(2)].map((_, pass) => (
              <div key={pass} style={{ display: "flex", gap: 10, paddingRight: 10, width: "50%", flexShrink: 0 }}>
                {[
                  { text: "\"Game changer for our team.\"", name: "Sarah K.", role: "CTO" },
                  { text: "\"Ships 3× faster than before.\"", name: "James R.", role: "Eng Lead" },
                  { text: "\"Zero-config deploys.\"", name: "Mia L.", role: "Founder" },
                  { text: "\"Best DX I've ever had.\"", name: "Tom W.", role: "Developer" },
                ].map(t => (
                  <div key={t.name + pass} style={{ minWidth: 140, flexShrink: 0, padding: "10px 12px", borderRadius: 10, background: card, border: `1px solid ${p}20`, backdropFilter: "blur(4px)" }}>
                    <p style={{ fontSize: 8.5, color: muted, marginBottom: 6, lineHeight: 1.55 }}>{t.text}</p>
                    <p style={{ fontSize: 8, fontWeight: 700, color: text }}>— {t.name} <span style={{ fontWeight: 400 }}>· {t.role}</span></p>
                  </div>
                ))}
              </div>
            ))}
          </div>
        </div>
      )}

      {comps.includes("bento") && (
        <div style={{ padding: "10px 22px", position: "relative", zIndex: 1 }}>
          <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gridTemplateRows: "auto auto", gap: 8 }}>
            <div style={{ padding: "14px", borderRadius: 12, background: card, border: `1px solid ${p}18`, gridRow: "1 / 3", backdropFilter: "blur(4px)" }}>
              <p style={{ fontSize: 9, color: muted, marginBottom: 4, textTransform: "uppercase", letterSpacing: "0.1em" }}>Analytics</p>
              <p style={{ fontSize: 13, fontWeight: 800, color: text, marginBottom: 10 }}>$128k MRR</p>
              <div style={{ height: 44, position: "relative" }}>
                <svg viewBox="0 0 100 44" style={{ width: "100%", height: "100%", overflow: "visible" }}>
                  <defs>
                    <linearGradient id="chartg" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0%" stopColor={p} stopOpacity="0.5" />
                      <stop offset="100%" stopColor={p} stopOpacity="0" />
                    </linearGradient>
                  </defs>
                  <path d="M0,40 L12,32 L24,28 L36,22 L48,15 L60,10 L72,6 L84,4 L100,2" stroke={p} strokeWidth="1.5" fill="none" />
                  <path d="M0,40 L12,32 L24,28 L36,22 L48,15 L60,10 L72,6 L84,4 L100,2 L100,44 L0,44 Z" fill="url(#chartg)" />
                </svg>
              </div>
            </div>
            <div style={{ padding: "12px", borderRadius: 12, background: card, border: `1px solid ${border}`, backdropFilter: "blur(4px)" }}>
              <p style={{ fontSize: 8.5, color: muted }}>Deploys</p>
              <p style={{ fontSize: 18, fontWeight: 900, color: p }}>∞</p>
            </div>
            <div style={{ padding: "12px", borderRadius: 12, background: `${p}12`, border: `1px solid ${p}28`, backdropFilter: "blur(4px)" }}>
              <p style={{ fontSize: 8.5, color: muted }}>Uptime</p>
              <p style={{ fontSize: 16, fontWeight: 800, color: text }}>99.9%</p>
            </div>
          </div>
        </div>
      )}

      {comps.includes("pricing") && (
        <div style={{ padding: "10px 22px", position: "relative", zIndex: 1 }}>
          <div style={{ display: "flex", gap: 8 }}>
            {[{ plan: "Starter", price: "Free", hi: false }, { plan: "Pro", price: "$29/mo", hi: true }, { plan: "Enterprise", price: "Custom", hi: false }].map(pl => (
              <div key={pl.plan} style={{ flex: 1, padding: "12px 10px", borderRadius: 10, background: pl.hi ? `linear-gradient(160deg, ${p}30, #3b82f620)` : card, border: `1px solid ${pl.hi ? `${p}50` : border}`, textAlign: "center", backdropFilter: "blur(4px)" }}>
                <p style={{ fontSize: 8.5, color: pl.hi ? `${p}dd` : muted, marginBottom: 3 }}>{pl.plan}</p>
                <p style={{ fontSize: 15, fontWeight: 800, color: text }}>{pl.price}</p>
                {pl.hi && <div style={{ marginTop: 4, fontSize: 7.5, color: `${p}aa` }}>Most popular</div>}
              </div>
            ))}
          </div>
        </div>
      )}

      {comps.includes("cta") && (
        <div style={{ margin: "12px 22px 18px", padding: "16px 18px", borderRadius: 14, background: `linear-gradient(135deg, ${p}15, #3b82f610)`, border: `1px solid ${p}25`, textAlign: "center", position: "relative", zIndex: 1, backdropFilter: "blur(4px)" }}>
          <p style={{ fontSize: 13, fontWeight: 800, color: text, marginBottom: 4 }}>Start building today</p>
          <p style={{ fontSize: 9, color: muted, marginBottom: 12 }}>Join thousands of developers worldwide.</p>
          <button style={{ height: 28, padding: "0 18px", borderRadius: 6, fontSize: 9.5, fontWeight: 600, color: "#fff", background: `linear-gradient(135deg,${p},#3b82f6)`, border: "none", cursor: "pointer", boxShadow: `0 4px 14px ${p}35` }}>Get started free →</button>
        </div>
      )}

      <div style={{ height: 20 }} />
    </div>
  );
}

// ---------------------------------------------------------------------------
// DaisyUI
// ---------------------------------------------------------------------------

export function MarketingDaisy({ themeColor, config }: { themeColor?: ThemeColor; config?: DesignConfig }) {
  const theme  = themeColor ?? DAISY_THEMES[0];
  const isDark = config ? config.mode === "dark" : (theme.bg ?? "#fff").match(/^#[012]/i) !== null;

  const bg     = isDark ? (theme.bg     ?? "#1d232a") : (theme.bg?.match(/^#[012]/) ? "#fff" : (theme.bg ?? "#fff"));
  const text   = isDark ? (theme.textColor  ?? "#a6adba") : (theme.textColor  ?? "#1f2937");
  const muted  = isDark ? (theme.mutedText  ?? "rgba(255,255,255,0.4)") : (theme.mutedText  ?? "#6b7280");
  const card   = isDark ? (theme.cardBg    ?? "rgba(255,255,255,0.04)") : (theme.cardBg    ?? "#f9fafb");
  const border = isDark ? (theme.borderColor ?? "rgba(255,255,255,0.09)") : (theme.borderColor ?? "#e5e7eb");

  const bgStyle  = config?.background ?? "solid";
  const navStyle = config?.nav        ?? "standard";
  const hdrStyle = config?.header     ?? "centered";
  const comps    = config?.components ?? ["features", "pricing"];
  const ff       = fontStack(config?.font);

  const heroBgLayer =
    bgStyle === "gradient" ? `radial-gradient(ellipse 80% 55% at 50% -5%, ${theme.primary}45, transparent)` :
    bgStyle === "noise"    ? "none" : "none";

  return (
    <div style={{ height: "100%", fontFamily: ff, background: bg, color: text, overflow: "auto", position: "relative" }}>
      {bgStyle === "pattern" && <div style={{ position: "absolute", inset: 0, backgroundImage: `radial-gradient(${theme.primary}20 1px, transparent 1px)`, backgroundSize: "18px 18px", pointerEvents: "none" }} />}

      {/* Nav */}
      {navStyle === "pill" ? (
        <div style={{ display: "flex", justifyContent: "center", padding: "10px", position: "relative", zIndex: 2 }}>
          <nav style={{ display: "flex", alignItems: "center", gap: 20, padding: "7px 18px", borderRadius: 30, background: isDark ? "rgba(255,255,255,0.07)" : "rgba(0,0,0,0.04)", border: `1px solid ${border}` }}>
            <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
              <div style={{ width: 18, height: 18, borderRadius: 4, background: theme.primary }} />
              <span style={{ fontWeight: 800, fontSize: 11, color: text }}>Acme</span>
            </div>
            {["Features","Pricing","Docs","Blog"].map(i => <span key={i} style={{ fontSize: 9.5, color: muted }}>{i}</span>)}
            <button style={{ height: 24, padding: "0 12px", borderRadius: 16, fontSize: 9, fontWeight: 700, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer" }}>Get started</button>
          </nav>
        </div>
      ) : (
        <nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 22px", background: navStyle === "transparent" ? "transparent" : bg, borderBottom: navStyle === "transparent" ? "none" : `1px solid ${border}`, position: "relative", zIndex: 2 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
            <div style={{ width: 18, height: 18, borderRadius: 4, background: theme.primary }} />
            <span style={{ fontWeight: 800, fontSize: 11, color: text }}>Acme</span>
          </div>
          <div style={{ display: "flex", gap: 16, fontSize: 9.5, color: muted }}>
            {["Features","Pricing","Docs","Blog"].map(i => <span key={i}>{i}</span>)}
          </div>
          <div style={{ display: "flex", gap: 6 }}>
            <button style={{ height: 24, padding: "0 10px", borderRadius: 16, fontSize: 9.5, fontWeight: 600, background: `${border}`, color: text, border: "none", cursor: "pointer" }}>Login</button>
            <button style={{ height: 24, padding: "0 12px", borderRadius: 16, fontSize: 9.5, fontWeight: 700, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer" }}>Get started</button>
          </div>
        </nav>
      )}

      {/* Hero — centered */}
      {hdrStyle === "centered" && (
        <div style={{ padding: "26px 22px 16px", textAlign: "center", position: "relative", zIndex: 1 }}>
          {heroBgLayer && <div style={{ position: "absolute", inset: 0, background: heroBgLayer, pointerEvents: "none" }} />}
          <div style={{ display: "inline-flex", alignItems: "center", gap: 5, padding: "3px 12px", borderRadius: 20, fontSize: 8.5, fontWeight: 700, marginBottom: 14, background: `${theme.primary}22`, color: theme.primary, border: `1px solid ${theme.primary}44` }}>
            ✦ {theme.label} theme · just shipped
          </div>
          <h1 style={{ fontSize: 24, fontWeight: 900, marginBottom: 8, color: text, lineHeight: 1.1 }}>Build faster,<br />ship smarter</h1>
          <p style={{ fontSize: 10, color: muted, maxWidth: 240, margin: "0 auto 18px", lineHeight: 1.65 }}>The all-in-one platform that helps teams build, launch, and scale.</p>
          <div style={{ display: "flex", gap: 8, justifyContent: "center" }}>
            <button style={{ height: 32, padding: "0 20px", borderRadius: 20, fontSize: 10, fontWeight: 700, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer" }}>Start for free</button>
            <button style={{ height: 32, padding: "0 16px", borderRadius: 20, fontSize: 10, border: `1px solid ${border}`, color: text, background: "none", cursor: "pointer" }}>See demo →</button>
          </div>
        </div>
      )}

      {hdrStyle === "split" && (
        <div style={{ display: "flex", gap: 14, padding: "22px 22px 14px", alignItems: "center", position: "relative", zIndex: 1 }}>
          {heroBgLayer && <div style={{ position: "absolute", inset: 0, background: heroBgLayer, pointerEvents: "none" }} />}
          <div style={{ flex: 1 }}>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 4, padding: "2px 8px", borderRadius: 16, fontSize: 8.5, fontWeight: 700, marginBottom: 10, background: `${theme.primary}22`, color: theme.primary, border: `1px solid ${theme.primary}44` }}>✦ {theme.label}</div>
            <h1 style={{ fontSize: 20, fontWeight: 900, marginBottom: 8, color: text, lineHeight: 1.2 }}>Build faster,<br />ship smarter</h1>
            <p style={{ fontSize: 9.5, color: muted, marginBottom: 14, lineHeight: 1.65 }}>The platform teams trust to ship faster.</p>
            <div style={{ display: "flex", gap: 6 }}>
              <button style={{ height: 28, padding: "0 14px", borderRadius: 18, fontSize: 9.5, fontWeight: 700, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer" }}>Start free</button>
              <button style={{ height: 28, padding: "0 12px", borderRadius: 18, fontSize: 9.5, border: `1px solid ${border}`, color: text, background: "none", cursor: "pointer" }}>Demo →</button>
            </div>
          </div>
          <div style={{ width: 130, flexShrink: 0, borderRadius: 10, overflow: "hidden", border: `1px solid ${border}`, background: card, boxShadow: "0 4px 20px rgba(0,0,0,0.15)" }}>
            <div style={{ height: 18, display: "flex", alignItems: "center", gap: 4, padding: "0 8px", background: isDark ? "rgba(255,255,255,0.04)" : "#f5f5f5", borderBottom: `1px solid ${border}` }}>
              {["#ff5f56","#ffbd2e","#27c93f"].map(c => <div key={c} style={{ width: 5, height: 5, borderRadius: "50%", background: c }} />)}
            </div>
            <div style={{ padding: 8 }}>
              {[["Revenue","$12k"],["Users","2.8k"],["Growth","+24%"]].map(([k,v]) => (
                <div key={k} style={{ marginBottom: 5, padding: "5px 7px", borderRadius: 6, background: `${theme.primary}10`, border: `1px solid ${theme.primary}22` }}>
                  <p style={{ fontSize: 7.5, color: muted }}>{k}</p>
                  <p style={{ fontSize: 11, fontWeight: 700, color: text }}>{v}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {hdrStyle === "stats" && (
        <div style={{ padding: "22px 22px 12px", textAlign: "center", position: "relative", zIndex: 1 }}>
          {heroBgLayer && <div style={{ position: "absolute", inset: 0, background: heroBgLayer, pointerEvents: "none" }} />}
          <h1 style={{ fontSize: 22, fontWeight: 900, marginBottom: 8, color: text, lineHeight: 1.15 }}>Build faster,<br />ship smarter</h1>
          <p style={{ fontSize: 9.5, color: muted, maxWidth: 220, margin: "0 auto 14px", lineHeight: 1.65 }}>Trusted by thousands of teams worldwide.</p>
          <div style={{ display: "flex", gap: 8, justifyContent: "center", marginBottom: 18 }}>
            <button style={{ height: 28, padding: "0 14px", borderRadius: 20, fontSize: 9.5, fontWeight: 700, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer" }}>Start free</button>
            <button style={{ height: 28, padding: "0 12px", borderRadius: 20, fontSize: 9.5, border: `1px solid ${border}`, color: text, background: "none", cursor: "pointer" }}>Demo →</button>
          </div>
          <div style={{ display: "flex", justifyContent: "center", gap: 24 }}>
            {[["50k+","Teams"],["99.9%","Uptime"],["10ms","Latency"]].map(([v, l]) => (
              <div key={l}>
                <p style={{ fontSize: 18, fontWeight: 900, color: theme.primary }}>{v}</p>
                <p style={{ fontSize: 8.5, color: muted }}>{l}</p>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Sections */}
      {comps.includes("logos") && (
        <div style={{ padding: "8px 22px", display: "flex", alignItems: "center", gap: 12, overflow: "hidden", position: "relative", zIndex: 1 }}>
          <span style={{ fontSize: 8, color: muted, whiteSpace: "nowrap" }}>Trusted by</span>
          {["Vercel","Stripe","Linear","Notion","Supabase"].map(b => <span key={b} style={{ fontSize: 9, fontWeight: 700, color: muted, opacity: 0.5 }}>{b}</span>)}
        </div>
      )}

      {comps.includes("features") && (
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8, padding: "12px 22px", position: "relative", zIndex: 1 }}>
          {[{ icon: "⚡", title: "Lightning fast", desc: "Deploy in seconds" }, { icon: "🔒", title: "Secure by default", desc: "Enterprise-grade" }, { icon: "📈", title: "Scales with you", desc: "0 to millions" }].map(f => (
            <div key={f.title} style={{ padding: "12px", borderRadius: 12, textAlign: "center", background: card, border: `1px solid ${border}` }}>
              <div style={{ fontSize: 18, marginBottom: 6 }}>{f.icon}</div>
              <p style={{ fontSize: 9.5, fontWeight: 700, color: text, marginBottom: 3 }}>{f.title}</p>
              <p style={{ fontSize: 8.5, color: muted }}>{f.desc}</p>
            </div>
          ))}
        </div>
      )}

      {comps.includes("steps") && (
        <div style={{ padding: "10px 22px", position: "relative", zIndex: 1 }}>
          <p style={{ fontSize: 10, fontWeight: 700, color: text, marginBottom: 10 }}>How it works</p>
          <div style={{ display: "flex" }}>
            {["Connect your repo","Configure stack","Deploy in seconds"].map((s, i) => (
              <div key={s} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", gap: 6 }}>
                <div style={{ width: 24, height: 24, borderRadius: "50%", background: theme.primary, color: theme.primaryFg, fontSize: 10, fontWeight: 800, display: "flex", alignItems: "center", justifyContent: "center" }}>{i + 1}</div>
                <p style={{ fontSize: 8.5, color: muted, lineHeight: 1.45 }}>{s}</p>
              </div>
            ))}
          </div>
        </div>
      )}

      {comps.includes("testimonials") && (
        <div style={{ padding: "10px 22px", position: "relative", zIndex: 1 }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
            {[{ q: "\"Deployed in 5 minutes.\"", name: "Sarah K.", role: "CTO" }, { q: "\"Cut infra costs 40%.\"", name: "James R.", role: "Eng Lead" }].map(t => (
              <div key={t.name} style={{ padding: "10px 12px", borderRadius: 10, background: card, border: `1px solid ${border}` }}>
                <p style={{ fontSize: 8.5, color: muted, marginBottom: 8, lineHeight: 1.55 }}>{t.q}</p>
                <p style={{ fontSize: 8.5, fontWeight: 700, color: text }}>{t.name} <span style={{ fontWeight: 400 }}>· {t.role}</span></p>
              </div>
            ))}
          </div>
        </div>
      )}

      {comps.includes("pricing") && (
        <div style={{ padding: "10px 22px", position: "relative", zIndex: 1 }}>
          <p style={{ fontSize: 10, fontWeight: 700, color: text, marginBottom: 8 }}>Simple pricing</p>
          <div style={{ display: "flex", gap: 8 }}>
            {[{ plan: "Starter", price: "Free", hi: false }, { plan: "Pro", price: "$29/mo", hi: true }, { plan: "Enterprise", price: "Custom", hi: false }].map(p => (
              <div key={p.plan} style={{ flex: 1, padding: "10px", borderRadius: 10, background: p.hi ? theme.primary : "transparent", border: `1px solid ${p.hi ? "transparent" : border}`, textAlign: "center" }}>
                <p style={{ fontSize: 8.5, fontWeight: 600, color: p.hi ? theme.primaryFg : muted, marginBottom: 2 }}>{p.plan}</p>
                <p style={{ fontSize: 15, fontWeight: 800, color: p.hi ? theme.primaryFg : text }}>{p.price}</p>
              </div>
            ))}
          </div>
        </div>
      )}

      {comps.includes("faq") && (
        <div style={{ padding: "10px 22px", position: "relative", zIndex: 1 }}>
          <p style={{ fontSize: 10, fontWeight: 700, color: text, marginBottom: 8 }}>FAQ</p>
          {["What's included in free?","Can I upgrade anytime?","Team billing?"].map((q, i) => (
            <div key={q} style={{ padding: "7px 0", borderBottom: `1px solid ${border}`, display: "flex", justifyContent: "space-between" }}>
              <span style={{ fontSize: 9, color: i === 0 ? text : muted }}>{q}</span>
              <span style={{ fontSize: 9, color: muted }}>{i === 0 ? "−" : "+"}</span>
            </div>
          ))}
        </div>
      )}

      {comps.includes("cta") && (
        <div style={{ margin: "12px 22px 18px", padding: "16px 18px", borderRadius: 12, background: `${theme.primary}15`, border: `1px solid ${theme.primary}30`, textAlign: "center", position: "relative", zIndex: 1 }}>
          <p style={{ fontSize: 13, fontWeight: 800, color: text, marginBottom: 4 }}>Ready to ship faster?</p>
          <p style={{ fontSize: 9, color: muted, marginBottom: 12 }}>Join 50,000+ teams already on Acme.</p>
          <button style={{ height: 28, padding: "0 18px", borderRadius: 20, fontSize: 9.5, fontWeight: 700, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer" }}>Get started free →</button>
        </div>
      )}

      <div style={{ height: 20 }} />
    </div>
  );
}

// ---------------------------------------------------------------------------
// HeroUI
// ---------------------------------------------------------------------------

export function MarketingHeroUI({ themeColor, config }: { themeColor?: ThemeColor; config?: DesignConfig }) {
  const theme  = themeColor ?? HEROUI_MARKETING_THEMES[0];
  const isDark = config ? config.mode === "dark" : (theme.bg ?? "#fff") === "#09090b";

  const bg     = isDark ? (theme.bg ?? "#09090b")      : (theme.bg ?? "#fff");
  const text   = isDark ? (theme.textColor ?? "#f4f4f5") : (theme.textColor ?? "#18181b");
  const muted  = isDark ? (theme.mutedText ?? "#71717a") : (theme.mutedText ?? "#71717a");
  const card   = isDark ? (theme.cardBg   ?? "#18181b") : (theme.cardBg   ?? "#fafafa");
  const border = isDark ? (theme.borderColor ?? "#27272a") : (theme.borderColor ?? "#f4f4f5");

  const bgStyle  = config?.background ?? "clean";
  const navStyle = config?.nav        ?? "blur";
  const hdrStyle = config?.header     ?? "animated-badge";
  const comps    = config?.components ?? ["features", "metrics"];
  const ff       = fontStack(config?.font);

  const navBlur = navStyle === "blur";
  const navBg   = navBlur ? (isDark ? "rgba(9,9,11,0.65)" : "rgba(255,255,255,0.65)") : navStyle === "minimal" ? "transparent" : bg;

  const heroBgOverlay =
    bgStyle === "gradient-mesh" ? `radial-gradient(ellipse 65% 55% at 25% 40%, ${theme.primary}22, transparent 55%), radial-gradient(ellipse 55% 50% at 78% 62%, #06b6d420, transparent 55%)` :
    bgStyle === "glass"         ? `linear-gradient(130deg, ${theme.primary}12, ${isDark ? "#18181b" : "#fff"} 55%)` :
    bgStyle === "aurora"        ? `radial-gradient(ellipse 80% 60% at 50% -10%, ${theme.primary}38, transparent 70%)` :
    undefined;

  return (
    <div style={{ height: "100%", fontFamily: ff, background: bg, overflow: "auto", position: "relative" }}>
      {heroBgOverlay && <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 280, background: heroBgOverlay, pointerEvents: "none", zIndex: 0 }} />}

      {/* Nav */}
      <nav style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "10px 22px", borderBottom: navStyle === "minimal" ? "none" : `1px solid ${border}`,
        position: "sticky", top: 0, zIndex: 10,
        background: navBg,
        backdropFilter: navBlur ? "blur(14px)" : undefined,
        WebkitBackdropFilter: navBlur ? "blur(14px)" : undefined,
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
          <div style={{ width: 20, height: 20, borderRadius: "50%", background: theme.primary }} />
          <span style={{ fontWeight: 800, fontSize: 11, color: text }}>Acme</span>
        </div>
        <div style={{ display: "flex", gap: 14, fontSize: 9.5, color: muted }}>
          {["Features","Pricing","Docs","Blog"].map(i => <span key={i}>{i}</span>)}
        </div>
        <div style={{ display: "flex", gap: 6 }}>
          <button style={{ height: 26, padding: "0 12px", borderRadius: 16, border: `1px solid ${border}`, fontSize: 9.5, background: "none", color: muted, cursor: "pointer" }}>Login</button>
          <button style={{ height: 26, padding: "0 12px", borderRadius: 16, fontSize: 9.5, fontWeight: 600, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer", boxShadow: `0 2px 12px ${theme.ring}` }}>Get started</button>
        </div>
      </nav>

      {hdrStyle === "animated-badge" && (
        <div style={{ padding: "26px 22px 18px", textAlign: "center", position: "relative", zIndex: 1 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "4px 12px", borderRadius: 20, fontSize: 9, fontWeight: 600, marginBottom: 14, background: theme.activeBg, color: theme.activeFg, border: `1px solid ${theme.ring}`, boxShadow: `0 0 0 3px ${theme.ring}44` }}>
            🚀 Now in public beta · &nbsp;<span style={{ fontWeight: 700 }}>Join 12k users</span>
          </div>
          <h1 style={{ fontSize: 26, fontWeight: 900, color: theme.primary, marginBottom: 10, lineHeight: 1.05, letterSpacing: "-0.02em" }}>Build faster,<br />ship smarter</h1>
          <p style={{ fontSize: 10, color: muted, maxWidth: 250, margin: "0 auto 18px", lineHeight: 1.65 }}>The all-in-one platform for teams that move fast.</p>
          <div style={{ display: "flex", gap: 8, justifyContent: "center" }}>
            <button style={{ height: 32, padding: "0 20px", borderRadius: 20, fontSize: 10, fontWeight: 600, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer", boxShadow: `0 4px 18px ${theme.ring}` }}>Start for free</button>
            <button style={{ height: 32, padding: "0 16px", borderRadius: 20, fontSize: 10, background: "none", border: `1px solid ${border}`, color: muted, cursor: "pointer" }}>Live demo →</button>
          </div>
        </div>
      )}

      {hdrStyle === "split" && (
        <div style={{ display: "flex", gap: 14, padding: "20px 22px 14px", alignItems: "center", position: "relative", zIndex: 1 }}>
          <div style={{ flex: 1 }}>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 4, padding: "2px 8px", borderRadius: 12, fontSize: 8.5, fontWeight: 600, marginBottom: 10, background: theme.activeBg, color: theme.activeFg, border: `1px solid ${theme.ring}` }}>🚀 Beta</div>
            <h1 style={{ fontSize: 22, fontWeight: 900, color: theme.primary, marginBottom: 8, lineHeight: 1.15, letterSpacing: "-0.01em" }}>Build faster,<br />ship smarter</h1>
            <p style={{ fontSize: 9.5, color: muted, marginBottom: 14, lineHeight: 1.65 }}>The platform for fast-moving teams.</p>
            <div style={{ display: "flex", gap: 6 }}>
              <button style={{ height: 28, padding: "0 14px", borderRadius: 18, fontSize: 9.5, fontWeight: 600, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer", boxShadow: `0 2px 10px ${theme.ring}` }}>Start free</button>
              <button style={{ height: 28, padding: "0 12px", borderRadius: 18, fontSize: 9.5, border: `1px solid ${border}`, color: muted, background: "none", cursor: "pointer" }}>Demo →</button>
            </div>
          </div>
          <div style={{ width: 132, flexShrink: 0, borderRadius: 14, overflow: "hidden", border: `1px solid ${border}`, boxShadow: `0 12px 30px rgba(0,0,0,0.14)`, background: card }}>
            <div style={{ height: 18, display: "flex", alignItems: "center", gap: 4, padding: "0 8px", background: isDark ? "#27272a" : "#fafafa", borderBottom: `1px solid ${border}` }}>
              {["#ff5f56","#ffbd2e","#27c93f"].map(c => <div key={c} style={{ width: 5, height: 5, borderRadius: "50%", background: c }} />)}
            </div>
            <div style={{ padding: 8 }}>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 5 }}>
                {["Revenue $12k","Users 2.8k","Growth +24%","Churn 2.1%"].map(m => (
                  <div key={m} style={{ padding: "5px 6px", borderRadius: 8, background: theme.activeBg, border: `1px solid ${theme.ring}` }}>
                    <p style={{ fontSize: 7.5, color: muted }}>{m.split(" ")[0]}</p>
                    <p style={{ fontSize: 10, fontWeight: 700, color: text }}>{m.split(" ")[1]}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      )}

      {hdrStyle === "gradient" && (
        <div style={{ padding: "30px 22px 18px", textAlign: "center", position: "relative", zIndex: 1 }}>
          <h1 style={{ fontSize: 28, fontWeight: 900, lineHeight: 1.0, marginBottom: 12, background: `linear-gradient(135deg, ${theme.primary}, ${isDark ? "#06b6d4" : "#7c3aed"})`, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", letterSpacing: "-0.02em" }}>
            Build faster.<br />Ship smarter.
          </h1>
          <p style={{ fontSize: 10, color: muted, maxWidth: 240, margin: "0 auto 18px", lineHeight: 1.65 }}>Everything your team needs in one platform.</p>
          <button style={{ height: 32, padding: "0 20px", borderRadius: 20, fontSize: 10, fontWeight: 600, background: `linear-gradient(135deg, ${theme.primary}, #06b6d4)`, color: "#fff", border: "none", cursor: "pointer", boxShadow: `0 4px 18px ${theme.ring}` }}>Get started →</button>
        </div>
      )}

      {/* Sections */}
      {comps.includes("features") && (
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, padding: "10px 22px", position: "relative", zIndex: 1 }}>
          {[{ icon: "⚡", title: "10× faster deploys" }, { icon: "🔒", title: "Zero-trust security" }, { icon: "📦", title: "Any stack" }, { icon: "🌍", title: "Global CDN" }].map(f => (
            <div key={f.title} style={{ padding: "12px", borderRadius: 12, background: card, border: `1px solid ${border}`, display: "flex", alignItems: "center", gap: 8, boxShadow: "0 1px 3px rgba(0,0,0,0.05)" }}>
              <span style={{ fontSize: 18 }}>{f.icon}</span>
              <p style={{ fontSize: 9.5, fontWeight: 600, color: text }}>{f.title}</p>
            </div>
          ))}
        </div>
      )}

      {comps.includes("metrics") && (
        <div style={{ padding: "10px 22px", position: "relative", zIndex: 1 }}>
          <div style={{ padding: "14px 16px", borderRadius: 14, border: `1px solid ${border}`, background: card, boxShadow: "0 4px 24px rgba(0,0,0,0.06)" }}>
            <p style={{ fontSize: 9, color: muted, marginBottom: 10, textTransform: "uppercase", letterSpacing: "0.08em" }}>Live metrics</p>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
              {["Revenue $128k","Users 24.8k","Growth +34%","Churn 1.4%"].map(m => (
                <div key={m} style={{ padding: "10px 12px", borderRadius: 10, background: theme.activeBg, border: `1px solid ${theme.ring}` }}>
                  <p style={{ fontSize: 9, color: muted, marginBottom: 2 }}>{m.split(" ")[0]}</p>
                  <p style={{ fontSize: 16, fontWeight: 800, color: text }}>{m.split(" ")[1]}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {comps.includes("avatars") && (
        <div style={{ padding: "10px 22px", display: "flex", alignItems: "center", gap: 10, position: "relative", zIndex: 1 }}>
          <div style={{ display: "flex" }}>
            {[theme.primary,"#2563eb","#0d9488","#e11d48"].map((c, i) => (
              <div key={c} style={{ width: 24, height: 24, borderRadius: "50%", background: c, border: `2px solid ${bg}`, marginLeft: i > 0 ? -9 : 0 }} />
            ))}
          </div>
          <span style={{ fontSize: 9, color: muted }}>Trusted by <strong style={{ color: text }}>50,000+</strong> teams</span>
        </div>
      )}

      {comps.includes("pricing") && (
        <div style={{ padding: "10px 22px", position: "relative", zIndex: 1 }}>
          <div style={{ display: "flex", gap: 8 }}>
            {[{ plan: "Starter", price: "Free", hi: false }, { plan: "Pro", price: "$29/mo", hi: true }, { plan: "Enterprise", price: "Custom", hi: false }].map(p => (
              <div key={p.plan} style={{ flex: 1, padding: "12px", borderRadius: 12, background: p.hi ? theme.primary : card, border: `1px solid ${p.hi ? "transparent" : border}`, textAlign: "center", boxShadow: p.hi ? `0 4px 18px ${theme.ring}` : "none" }}>
                <p style={{ fontSize: 8.5, fontWeight: 600, color: p.hi ? theme.primaryFg : muted, marginBottom: 3 }}>{p.plan}</p>
                <p style={{ fontSize: 16, fontWeight: 800, color: p.hi ? theme.primaryFg : text }}>{p.price}</p>
              </div>
            ))}
          </div>
        </div>
      )}

      {comps.includes("testimonials") && (
        <div style={{ padding: "10px 22px", position: "relative", zIndex: 1 }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
            {[{ q: "\"Shipped 3× faster since switching.\"", name: "Sarah K." }, { q: "\"Cut infra costs by 40%.\"", name: "James R." }].map(t => (
              <div key={t.name} style={{ padding: "10px 12px", borderRadius: 12, background: card, border: `1px solid ${border}` }}>
                <p style={{ fontSize: 8.5, color: muted, marginBottom: 6, lineHeight: 1.55 }}>{t.q}</p>
                <p style={{ fontSize: 8.5, fontWeight: 600, color: text }}>{t.name}</p>
              </div>
            ))}
          </div>
        </div>
      )}

      {comps.includes("cta") && (
        <div style={{ margin: "12px 22px 18px", padding: "16px 18px", borderRadius: 14, background: `linear-gradient(135deg, ${theme.primary}18, ${theme.ring}22)`, border: `1px solid ${theme.ring}`, textAlign: "center", position: "relative", zIndex: 1 }}>
          <p style={{ fontSize: 13, fontWeight: 800, color: text, marginBottom: 4 }}>Ready to ship faster?</p>
          <p style={{ fontSize: 9, color: muted, marginBottom: 12 }}>Join 50,000+ teams already on Acme.</p>
          <button style={{ height: 28, padding: "0 18px", borderRadius: 20, fontSize: 9.5, fontWeight: 600, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer", boxShadow: `0 2px 12px ${theme.ring}` }}>Get started free →</button>
        </div>
      )}

      <div style={{ height: 20 }} />
    </div>
  );
}

// ---------------------------------------------------------------------------
// Tailwind only
// ---------------------------------------------------------------------------

export function MarketingTailwind({ themeColor, config }: {
  themeColor?: ThemeColor; config?: DesignConfig;
}) {
  const isDark   = config?.mode === "dark";
  const bgStyle  = config?.background ?? "clean";
  const navStyle = config?.nav        ?? "minimal";
  const hdrStyle = config?.header     ?? "editorial";
  const comps    = config?.components ?? ["features", "stats", "pricing"];
  const ff       = fontStack(config?.font);

  // Use themeColor accent if provided (shadcn palette)
  const accent   = themeColor?.primary ?? "#09090b";
  const accentFg = themeColor?.primaryFg ?? "#fff";

  const bg    = isDark ? "#09090b" : "#fff";
  const text  = isDark ? "#f4f4f5" : "#09090b";
  const muted = isDark ? "#71717a"  : "#71717a";
  const card  = isDark ? "#18181b"  : "#f9fafb";
  const border= isDark ? "#27272a"  : "#e5e7eb";

  const navBg = navStyle === "minimal" ? "transparent" : bg;

  return (
    <div style={{ height: "100%", fontFamily: ff, background: bg, overflow: "auto", position: "relative" }}>
      {bgStyle === "dot-grid" && (
        <div style={{ position: "absolute", inset: 0, backgroundImage: `radial-gradient(${isDark ? "#ffffff18" : "#00000015"} 1px, transparent 1px)`, backgroundSize: "18px 18px", pointerEvents: "none" }} />
      )}
      {bgStyle === "lines" && (
        <div style={{ position: "absolute", inset: 0, backgroundImage: `linear-gradient(${isDark ? "#ffffff08" : "#00000008"} 1px, transparent 1px), linear-gradient(90deg, ${isDark ? "#ffffff08" : "#00000008"} 1px, transparent 1px)`, backgroundSize: "24px 24px", pointerEvents: "none" }} />
      )}

      {/* Nav */}
      <nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 22px", background: navBg, borderBottom: navStyle === "minimal" ? "none" : `1px solid ${border}`, position: "relative", zIndex: 2 }}>
        <span style={{ fontWeight: 900, fontSize: 12, color: text, letterSpacing: "-0.02em" }}>acme</span>
        <div style={{ display: "flex", gap: 16, fontSize: 9.5, color: muted }}>
          {["Features","Pricing","Blog"].map(i => <span key={i}>{i}</span>)}
        </div>
        <div style={{ display: "flex", gap: 6 }}>
          <button style={{ height: 26, padding: "0 10px", fontSize: 9.5, color: muted, background: "none", border: "none", cursor: "pointer" }}>Log in</button>
          <button style={{ height: 26, padding: "0 12px", borderRadius: 5, fontSize: 9.5, fontWeight: 600, background: accent, color: accentFg, border: "none", cursor: "pointer" }}>Sign up</button>
        </div>
      </nav>

      {hdrStyle === "editorial" && (
        <div style={{ padding: "28px 22px 16px", position: "relative", zIndex: 1 }}>
          <span style={{ fontSize: 8.5, fontWeight: 600, color: accent, letterSpacing: "0.14em", textTransform: "uppercase" }}>Now in public beta</span>
          <h1 style={{ fontSize: 28, fontWeight: 900, color: text, marginTop: 6, marginBottom: 10, lineHeight: 1.0, letterSpacing: "-0.03em" }}>The platform<br />built for scale</h1>
          <p style={{ fontSize: 10, color: muted, maxWidth: 260, marginBottom: 18, lineHeight: 1.65 }}>Everything your team needs to build, deploy, and monitor production applications.</p>
          <div style={{ display: "flex", gap: 8 }}>
            <button style={{ height: 30, padding: "0 16px", borderRadius: 6, fontSize: 9.5, fontWeight: 600, background: text, color: bg, border: "none", cursor: "pointer" }}>Get started free</button>
            <button style={{ height: 30, padding: "0 14px", borderRadius: 6, fontSize: 9.5, border: `1px solid ${border}`, color: muted, background: "none", cursor: "pointer" }}>Documentation →</button>
          </div>
        </div>
      )}

      {hdrStyle === "split" && (
        <div style={{ display: "flex", gap: 16, padding: "22px 22px 14px", alignItems: "flex-start", position: "relative", zIndex: 1 }}>
          <div style={{ flex: 1 }}>
            <span style={{ fontSize: 8.5, fontWeight: 600, color: accent, letterSpacing: "0.12em", textTransform: "uppercase" }}>Public beta</span>
            <h1 style={{ fontSize: 22, fontWeight: 900, color: text, marginTop: 5, marginBottom: 8, lineHeight: 1.1, letterSpacing: "-0.02em" }}>The platform<br />built for scale</h1>
            <p style={{ fontSize: 9.5, color: muted, marginBottom: 14, lineHeight: 1.65 }}>Deploy anywhere. Monitor everything.</p>
            <div style={{ display: "flex", gap: 6 }}>
              <button style={{ height: 28, padding: "0 14px", borderRadius: 6, fontSize: 9.5, fontWeight: 600, background: text, color: bg, border: "none", cursor: "pointer" }}>Get started</button>
              <button style={{ height: 28, padding: "0 12px", borderRadius: 6, fontSize: 9.5, border: `1px solid ${border}`, color: muted, background: "none", cursor: "pointer" }}>Docs →</button>
            </div>
          </div>
          <div style={{ width: 120, flexShrink: 0, borderRadius: 8, overflow: "hidden", border: `1px solid ${border}`, background: card }}>
            <div style={{ height: 16, display: "flex", alignItems: "center", gap: 3, padding: "0 6px", background: isDark ? "#27272a" : "#f5f5f5", borderBottom: `1px solid ${border}` }}>
              {["#ff5f56","#ffbd2e","#27c93f"].map(c => <div key={c} style={{ width: 5, height: 5, borderRadius: "50%", background: c }} />)}
            </div>
            <div style={{ padding: 8, fontFamily: "monospace", fontSize: 7.5, color: muted, lineHeight: 1.9 }}>
              <div>$ git push origin main</div>
              <div style={{ color: "#22c55e" }}>✓ Build complete · 2.1s</div>
              <div style={{ color: "#3b82f6" }}>→ Deployed to prod</div>
            </div>
          </div>
        </div>
      )}

      {hdrStyle === "centered" && (
        <div style={{ padding: "32px 22px 18px", textAlign: "center", position: "relative", zIndex: 1 }}>
          <h1 style={{ fontSize: 26, fontWeight: 900, color: text, marginBottom: 8, lineHeight: 1.05, letterSpacing: "-0.03em" }}>The platform<br />built for scale</h1>
          <p style={{ fontSize: 10, color: muted, maxWidth: 240, margin: "0 auto 18px", lineHeight: 1.65 }}>Everything your team needs.</p>
          <button style={{ height: 32, padding: "0 18px", borderRadius: 6, fontSize: 10, fontWeight: 600, background: text, color: bg, border: "none", cursor: "pointer" }}>Get started free →</button>
        </div>
      )}

      {comps.includes("badge") && (
        <div style={{ padding: "0 22px 8px", position: "relative", zIndex: 1 }}>
          <span style={{ display: "inline-block", padding: "3px 10px", borderRadius: 4, fontSize: 8.5, background: `${accent}14`, color: accent, fontWeight: 500 }}>→ v2.0 released — see what&apos;s new</span>
        </div>
      )}

      {comps.includes("logos") && (
        <div style={{ padding: "8px 22px", display: "flex", alignItems: "center", gap: 14, overflow: "hidden", position: "relative", zIndex: 1, borderTop: `1px solid ${border}`, borderBottom: `1px solid ${border}`, background: card }}>
          <span style={{ fontSize: 8, color: muted, whiteSpace: "nowrap" }}>Trusted by</span>
          {["Vercel","Stripe","Linear","Notion","Supabase"].map(b => <span key={b} style={{ fontSize: 8.5, fontWeight: 700, color: muted, opacity: 0.45, whiteSpace: "nowrap" }}>{b}</span>)}
        </div>
      )}

      {comps.includes("features") && (
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, padding: "12px 22px", position: "relative", zIndex: 1 }}>
          {[{ title: "99.9% uptime SLA", desc: "Enterprise reliability" }, { title: "10ms avg latency", desc: "Edge-first network" }, { title: "SOC2 compliant", desc: "Security baked in" }, { title: "GDPR ready", desc: "Privacy by default" }].map(f => (
            <div key={f.title} style={{ display: "flex", alignItems: "flex-start", gap: 8, padding: "9px", borderRadius: 8, background: card, border: `1px solid ${border}` }}>
              <div style={{ width: 14, height: 14, borderRadius: "50%", background: text, flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center", marginTop: 1 }}>
                <span style={{ color: bg, fontSize: 7 }}>✓</span>
              </div>
              <div>
                <p style={{ fontSize: 9, fontWeight: 600, color: text, marginBottom: 1 }}>{f.title}</p>
                <p style={{ fontSize: 8.5, color: muted }}>{f.desc}</p>
              </div>
            </div>
          ))}
        </div>
      )}

      {comps.includes("stats") && (
        <div style={{ padding: "10px 22px", position: "relative", zIndex: 1 }}>
          <div style={{ display: "flex", borderRadius: 10, overflow: "hidden", border: `1px solid ${border}` }}>
            {[["50k+","Teams"],["99.9%","Uptime"],["10ms","Latency"],["$0","To start"]].map(([v, l], i) => (
              <div key={l} style={{ flex: 1, textAlign: "center", padding: "12px 4px", borderRight: i < 3 ? `1px solid ${border}` : "none", background: i % 2 === 0 ? card : bg }}>
                <p style={{ fontSize: 16, fontWeight: 900, color: text, letterSpacing: "-0.02em" }}>{v}</p>
                <p style={{ fontSize: 8, color: muted }}>{l}</p>
              </div>
            ))}
          </div>
        </div>
      )}

      {comps.includes("testimonials") && (
        <div style={{ padding: "10px 22px", position: "relative", zIndex: 1 }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
            {[{ q: "\"Shipped 3× faster.\"", name: "Sarah K.", role: "CTO" }, { q: "\"Cut costs by 40%.\"", name: "James R.", role: "Eng Lead" }].map(t => (
              <div key={t.name} style={{ padding: "10px 12px", borderRadius: 8, background: card, border: `1px solid ${border}` }}>
                <p style={{ fontSize: 9, color: muted, marginBottom: 8, lineHeight: 1.55 }}>{t.q}</p>
                <p style={{ fontSize: 8.5, fontWeight: 600, color: text }}>{t.name} <span style={{ fontWeight: 400 }}>· {t.role}</span></p>
              </div>
            ))}
          </div>
        </div>
      )}

      {comps.includes("pricing") && (
        <div style={{ padding: "10px 22px", position: "relative", zIndex: 1 }}>
          <div style={{ display: "flex", gap: 8 }}>
            {[{ plan: "Starter", price: "Free", hi: false }, { plan: "Pro", price: "$29/mo", hi: true }, { plan: "Enterprise", price: "Custom", hi: false }].map(p => (
              <div key={p.plan} style={{ flex: 1, padding: "12px", borderRadius: 8, background: p.hi ? text : card, border: `1px solid ${p.hi ? "transparent" : border}`, textAlign: "center" }}>
                <p style={{ fontSize: 8.5, fontWeight: 500, color: p.hi ? bg : muted, marginBottom: 3 }}>{p.plan}</p>
                <p style={{ fontSize: 16, fontWeight: 900, color: p.hi ? bg : text, letterSpacing: "-0.02em" }}>{p.price}</p>
              </div>
            ))}
          </div>
        </div>
      )}

      {comps.includes("faq") && (
        <div style={{ padding: "10px 22px", position: "relative", zIndex: 1 }}>
          {["What's included in free?","Can I upgrade anytime?","Do you offer team plans?"].map((q, i) => (
            <div key={q} style={{ padding: "8px 0", borderBottom: `1px solid ${border}`, display: "flex", justifyContent: "space-between" }}>
              <span style={{ fontSize: 9, color: i === 0 ? text : muted }}>{q}</span>
              <span style={{ fontSize: 9, color: muted }}>{i === 0 ? "−" : "+"}</span>
            </div>
          ))}
        </div>
      )}

      {comps.includes("cta") && (
        <div style={{ margin: "12px 22px 18px", padding: "18px", borderRadius: 10, background: text, textAlign: "center", position: "relative", zIndex: 1 }}>
          <p style={{ fontSize: 13, fontWeight: 900, color: bg, marginBottom: 4, letterSpacing: "-0.01em" }}>Ready to ship faster?</p>
          <p style={{ fontSize: 9, color: isDark ? "#6b7280" : "#9ca3af", marginBottom: 12 }}>Join 50,000+ teams already on Acme.</p>
          <button style={{ height: 28, padding: "0 16px", borderRadius: 6, fontSize: 9.5, fontWeight: 600, background: bg, color: text, border: "none", cursor: "pointer" }}>Get started free →</button>
        </div>
      )}

      <div style={{ height: 20 }} />
    </div>
  );
}

export { DAISY_THEMES, HEROUI_MARKETING_THEMES, ACETERNITY_THEMES };