"use client";

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

// Marketing Site surface — public-facing pages: hero, features, pricing, CTA
// Context: prospective users discovering the product, not signed-in users.
// All components accept a DesignConfig to drive live preview changes.

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";
}

// ---------------------------------------------------------------------------
// 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.08)") : (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);

  // Background overlay applied to the hero area
  const heroBgLayer =
    bgStyle === "gradient"  ? `radial-gradient(ellipse 80% 55% at 50% -5%, ${theme.primary}40, transparent)` :
    bgStyle === "pattern"   ? undefined : // handled as a full-page layer
    bgStyle === "noise"     ? undefined :
    undefined;

  const navBg     = navStyle === "transparent" ? "transparent" : bg;
  const navBorderB = navStyle === "transparent" ? "none" : `1px solid ${border}`;

  const pillNav = navStyle === "pill";

  const NavContent = () => (
    <>
      <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: 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: 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 10px", borderRadius: 16, fontSize: 9.5, fontWeight: 700, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer" }}>Get started</button>
      </div>
    </>
  );

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

      {/* Nav */}
      {pillNav ? (
        <div style={{ display: "flex", justifyContent: "center", padding: "10px 22px", position: "relative", zIndex: 2 }}>
          <nav style={{ display: "flex", alignItems: "center", gap: 20, padding: "7px 18px", borderRadius: 30, background: isDark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.04)", border: `1px solid ${border}` }}>
            <NavContent />
          </nav>
        </div>
      ) : (
        <nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "9px 22px", background: navBg, borderBottom: navBorderB, position: "relative", zIndex: 2 }}>
          <NavContent />
        </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 10px", borderRadius: 20, fontSize: 9, fontWeight: 700, marginBottom: 12, background: `${theme.primary}22`, color: theme.primary, border: `1px solid ${theme.primary}44` }}>
            ✦ {theme.label} theme · v2.0
          </div>
          <h1 style={{ fontSize: 22, fontWeight: 900, marginBottom: 8, color: text, lineHeight: 1.15 }}>Build faster,<br />ship smarter</h1>
          <p style={{ fontSize: 10, color: muted, maxWidth: 240, margin: "0 auto 16px", lineHeight: 1.6 }}>The all-in-one platform that helps teams build, launch, and scale.</p>
          <div style={{ display: "flex", gap: 8, justifyContent: "center" }}>
            <button style={{ height: 30, padding: "0 16px", borderRadius: 20, fontSize: 9.5, fontWeight: 700, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer" }}>Start for free</button>
            <button style={{ height: 30, padding: "0 16px", borderRadius: 20, fontSize: 9.5, border: `1px solid ${border}`, color: text, background: "none", cursor: "pointer" }}>See demo →</button>
          </div>
        </div>
      )}

      {/* Hero — split layout */}
      {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` }}>✦ New · v2.0</div>
            <h1 style={{ fontSize: 19, 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.6 }}>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, 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, 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 16px rgba(0,0,0,0.12)" }}>
            <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(m => (
                <div key={m} style={{ marginBottom: 6, padding: "5px 7px", borderRadius: 6, background: `${theme.primary}10`, border: `1px solid ${theme.primary}22` }}>
                  <p style={{ fontSize: 7.5, color: muted }}>{m.split(" ")[0]}</p>
                  <p style={{ fontSize: 11, fontWeight: 700, color: text }}>{m.split(" ")[1]}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

      {/* Hero — with stats */}
      {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: 21, 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.6 }}>Trusted by thousands of teams worldwide.</p>
          <div style={{ display: "flex", gap: 8, justifyContent: "center", marginBottom: 16 }}>
            <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: 20 }}>
            {[["50k+","Teams"],["99.9%","Uptime"],["10ms","Latency"]].map(([v, l]) => (
              <div key={l} style={{ textAlign: "center" }}>
                <p style={{ fontSize: 16, fontWeight: 800, color: theme.primary }}>{v}</p>
                <p style={{ fontSize: 8.5, color: muted }}>{l}</p>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Conditional 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.6, whiteSpace: "nowrap" }}>{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: "From 0 to millions" }].map(f => (
            <div key={f.title} style={{ padding: "10px 12px", borderRadius: 10, textAlign: "center", background: card, border: `1px solid ${border}` }}>
              <div style={{ fontSize: 16, marginBottom: 4 }}>{f.icon}</div>
              <p style={{ fontSize: 9.5, fontWeight: 700, color: text, marginBottom: 2 }}>{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", gap: 0 }}>
            {["Connect your repo","Configure your 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: 22, height: 22, 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.4 }}>{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. Incredible.\"", name: "Sarah K.", role: "CTO, Startup" }, { q: "\"Cut our infra costs by 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.5 }}>{t.q}</p>
                <p style={{ fontSize: 8.5, fontWeight: 700, color: text }}>{t.name}</p>
                <p style={{ fontSize: 7.5, color: muted }}>{t.role}</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", highlight: false }, { plan: "Pro", price: "$29/mo", highlight: true }, { plan: "Enterprise", price: "Custom", highlight: false }].map(p => (
              <div key={p.plan} style={{ flex: 1, padding: "8px 10px", borderRadius: 8, background: p.highlight ? theme.primary : "transparent", border: `1px solid ${p.highlight ? "transparent" : border}`, textAlign: "center" }}>
                <p style={{ fontSize: 8.5, fontWeight: 600, color: p.highlight ? theme.primaryFg : muted, marginBottom: 2 }}>{p.plan}</p>
                <p style={{ fontSize: 13, fontWeight: 800, color: p.highlight ? 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 the free plan?","Can I upgrade anytime?","Do you offer team billing?"].map((q, i) => (
            <div key={q} style={{ padding: "7px 0", borderBottom: `1px solid ${border}`, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <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: "14px 18px", borderRadius: 12, background: `${theme.primary}14`, border: `1px solid ${theme.primary}30`, textAlign: "center", position: "relative", zIndex: 1 }}>
          <p style={{ fontSize: 12, 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 16px", 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.7)" : "rgba(255,255,255,0.7)")
    : navStyle === "minimal" ? "transparent"
    : bg;
  const navBorderB = navStyle === "minimal" ? "none" : `1px solid ${border}`;

  const heroBgOverlay =
    bgStyle === "gradient-mesh" ? `radial-gradient(ellipse 70% 60% at 30% 40%, ${theme.primary}25, transparent 60%), radial-gradient(ellipse 50% 50% at 80% 60%, ${isDark ? "#06b6d422" : "#06b6d418"}, transparent 60%)` :
    bgStyle === "glass"         ? `linear-gradient(135deg, ${theme.primary}14, ${isDark ? "#18181b" : "#fff"} 60%)` :
    bgStyle === "aurora"        ? `radial-gradient(ellipse 80% 60% at 50% -10%, ${theme.primary}35, 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: 260, background: heroBgOverlay, pointerEvents: "none", zIndex: 0 }} />}

      {/* Nav */}
      <nav style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "9px 22px", borderBottom: navBorderB, position: "sticky", top: 0, zIndex: 10,
        background: navBg,
        backdropFilter: navBlur ? "blur(12px)" : undefined,
        WebkitBackdropFilter: navBlur ? "blur(12px)" : undefined,
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
          <div style={{ width: 18, height: 18, 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: 24, padding: "0 10px", borderRadius: 16, border: `1px solid ${border}`, fontSize: 9.5, background: "none", color: muted, cursor: "pointer" }}>Login</button>
          <button style={{ height: 24, padding: "0 10px", borderRadius: 16, fontSize: 9.5, fontWeight: 600, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer", boxShadow: `0 2px 10px ${theme.ring}` }}>Get started</button>
        </div>
      </nav>

      {/* Hero — animated badge style */}
      {hdrStyle === "animated-badge" && (
        <div style={{ padding: "24px 22px 16px", textAlign: "center", position: "relative", zIndex: 1 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 5, padding: "3px 10px", borderRadius: 20, fontSize: 9, fontWeight: 600, marginBottom: 14, background: theme.activeBg, color: theme.activeFg, border: `1px solid ${theme.ring}` }}>
            🚀 Now in public beta
          </div>
          <h1 style={{ fontSize: 22, fontWeight: 900, color: theme.primary, marginBottom: 8, lineHeight: 1.15 }}>Build faster,<br />ship smarter</h1>
          <p style={{ fontSize: 10, color: muted, maxWidth: 240, margin: "0 auto 16px", lineHeight: 1.6 }}>The all-in-one platform for teams that move fast.</p>
          <div style={{ display: "flex", gap: 8, justifyContent: "center" }}>
            <button style={{ height: 30, padding: "0 16px", borderRadius: 20, fontSize: 9.5, fontWeight: 600, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer", boxShadow: `0 4px 14px ${theme.ring}` }}>Start for free</button>
            <button style={{ height: 30, padding: "0 14px", borderRadius: 20, fontSize: 9.5, background: "none", border: `1px solid ${border}`, color: muted, cursor: "pointer" }}>Live demo →</button>
          </div>
        </div>
      )}

      {/* Hero — split layout */}
      {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 }}>🚀 Beta</div>
            <h1 style={{ fontSize: 20, fontWeight: 900, color: theme.primary, marginBottom: 8, lineHeight: 1.2 }}>Build faster,<br />ship smarter</h1>
            <p style={{ fontSize: 9.5, color: muted, marginBottom: 14, lineHeight: 1.6 }}>The platform for fast-moving teams.</p>
            <div style={{ display: "flex", gap: 6 }}>
              <button style={{ height: 28, padding: "0 14px", borderRadius: 18, fontSize: 9, 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, border: `1px solid ${border}`, color: muted, background: "none", cursor: "pointer" }}>Demo →</button>
            </div>
          </div>
          <div style={{ width: 130, flexShrink: 0, borderRadius: 12, overflow: "hidden", border: `1px solid ${border}`, boxShadow: `0 8px 24px rgba(0,0,0,0.12)`, 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: 7, 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>
      )}

      {/* Hero — gradient headline */}
      {hdrStyle === "gradient" && (
        <div style={{ padding: "28px 22px 16px", textAlign: "center", position: "relative", zIndex: 1 }}>
          <h1 style={{ fontSize: 24, fontWeight: 900, lineHeight: 1.1, marginBottom: 10, background: `linear-gradient(135deg, ${theme.primary}, ${isDark ? "#06b6d4" : "#7c3aed"})`, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>
            Build faster.<br />Ship smarter.
          </h1>
          <p style={{ fontSize: 10, color: muted, maxWidth: 240, margin: "0 auto 16px", lineHeight: 1.6 }}>Everything your team needs in one platform.</p>
          <div style={{ display: "flex", gap: 8, justifyContent: "center" }}>
            <button style={{ height: 30, padding: "0 16px", borderRadius: 20, fontSize: 9.5, fontWeight: 600, background: `linear-gradient(135deg, ${theme.primary}, #06b6d4)`, color: "#fff", border: "none", cursor: "pointer" }}>Get started →</button>
          </div>
        </div>
      )}

      {/* Conditional sections */}
      {comps.includes("features") && (
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, padding: "10px 22px", position: "relative", zIndex: 1 }}>
          {[{ icon: "⚡", title: "10x faster deploys" }, { icon: "🔒", title: "Zero-trust security" }, { icon: "📦", title: "Any stack" }, { icon: "🌍", title: "Global CDN" }].map(f => (
            <div key={f.title} style={{ padding: "10px 12px", borderRadius: 10, background: card, border: `1px solid ${border}`, display: "flex", alignItems: "center", gap: 8 }}>
              <span style={{ fontSize: 16 }}>{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: "12px 16px", borderRadius: 12, border: `1px solid ${border}`, background: card, boxShadow: `0 4px 20px rgba(0,0,0,0.06)` }}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
              {["Revenue $12k","Users 2.8k","Growth +24%","Churn 2.1%"].map((m, i) => (
                <div key={m} style={{ padding: "8px 10px", 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: 14, fontWeight: 700, 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" }}>
            {["#7c3aed","#2563eb","#0d9488","#e11d48"].map((c, i) => (
              <div key={c} style={{ width: 22, height: 22, borderRadius: "50%", background: c, border: `2px solid ${bg}`, marginLeft: i > 0 ? -8 : 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: "10px", borderRadius: 10, background: p.hi ? theme.primary : card, border: `1px solid ${p.hi ? "transparent" : border}`, textAlign: "center", boxShadow: p.hi ? `0 4px 14px ${theme.ring}` : "none" }}>
                <p style={{ fontSize: 8.5, fontWeight: 600, color: p.hi ? theme.primaryFg : muted, marginBottom: 3 }}>{p.plan}</p>
                <p style={{ fontSize: 14, 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 3x faster since switching.\"", name: "Sarah K." }, { q: "\"Cut infra costs by 40%.\"", name: "James R." }].map(t => (
              <div key={t.name} style={{ padding: "10px", borderRadius: 10, background: card, border: `1px solid ${border}` }}>
                <p style={{ fontSize: 8.5, color: muted, marginBottom: 6, lineHeight: 1.5 }}>{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: "14px 18px", borderRadius: 12, background: `linear-gradient(135deg, ${theme.primary}18, ${theme.ring}22)`, border: `1px solid ${theme.ring}`, textAlign: "center", position: "relative", zIndex: 1 }}>
          <p style={{ fontSize: 12, fontWeight: 800, color: text, marginBottom: 4 }}>Ready to ship faster?</p>
          <p style={{ fontSize: 9, color: muted, marginBottom: 10 }}>Join 50,000+ teams already on Acme.</p>
          <button style={{ height: 28, padding: "0 16px", borderRadius: 20, fontSize: 9.5, fontWeight: 600, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer", boxShadow: `0 2px 10px ${theme.ring}` }}>Get started free →</button>
        </div>
      )}

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

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

export function MarketingAceternity({ config }: { themeColor?: ThemeColor; config?: DesignConfig }) {
  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);

  const bg    = isDark ? "#030303" : "#f8fafc";
  const text  = isDark ? "#fff"    : "#0f172a";
  const muted = isDark ? "rgba(255,255,255,0.38)" : "#64748b";
  const card  = isDark ? "rgba(255,255,255,0.03)" : "rgba(0,0,0,0.03)";
  const border= isDark ? "rgba(255,255,255,0.06)"  : "rgba(0,0,0,0.08)";

  // Background effects rendered as CSS
  const BackgroundEffect = () => {
    if (bgStyle === "beams") return (
      <div style={{ position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none", zIndex: 0 }}>
        {/* Vertical beam lines */}
        {Array.from({ length: 8 }).map((_, i) => (
          <div key={i} style={{ position: "absolute", top: 0, bottom: 0, width: 1, left: `${10 + i * 12}%`, background: `linear-gradient(180deg, transparent, ${i % 2 === 0 ? "rgba(168,85,247,0.15)" : "rgba(59,130,246,0.1)"}, transparent)` }} />
        ))}
        <div style={{ position: "absolute", inset: 0, background: "radial-gradient(ellipse 70% 50% at 50% 0%, rgba(168,85,247,0.12), transparent)" }} />
      </div>
    );
    if (bgStyle === "meteors") return (
      <div style={{ position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none", zIndex: 0 }}>
        <div style={{ position: "absolute", inset: 0, background: "radial-gradient(ellipse 60% 40% at 50% 0%, rgba(168,85,247,0.1), transparent)" }} />
        {Array.from({ length: 6 }).map((_, i) => (
          <div key={i} style={{ position: "absolute", top: `${5 + i * 12}%`, left: `${10 + i * 15}%`, width: 1, height: `${20 + i * 8}px`, background: "linear-gradient(180deg, #a855f7, transparent)", transform: "rotate(-35deg)", opacity: 0.4 + i * 0.08 }} />
        ))}
      </div>
    );
    if (bgStyle === "sparkles") return (
      <div style={{ position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none", zIndex: 0 }}>
        {Array.from({ length: 20 }).map((_, i) => (
          <div key={i} style={{ position: "absolute", width: 3, height: 3, borderRadius: "50%", background: i % 3 === 0 ? "#a855f7" : i % 3 === 1 ? "#3b82f6" : "#22c55e", top: `${(i * 37) % 90}%`, left: `${(i * 53) % 90}%`, opacity: 0.3 + (i % 4) * 0.15 }} />
        ))}
      </div>
    );
    if (bgStyle === "wavy") return (
      <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 200, overflow: "hidden", pointerEvents: "none", zIndex: 0 }}>
        <svg viewBox="0 0 400 100" preserveAspectRatio="none" style={{ width: "100%", height: "100%" }}>
          <path d="M0,50 Q50,20 100,50 T200,50 T300,50 T400,50 L400,100 L0,100 Z" fill="rgba(168,85,247,0.06)" />
          <path d="M0,60 Q60,30 120,60 T240,60 T360,60 T400,60 L400,100 L0,100 Z" fill="rgba(59,130,246,0.05)" />
        </svg>
      </div>
    );
    if (bgStyle === "dot-grid") return (
      <div style={{ position: "absolute", inset: 0, backgroundImage: "radial-gradient(rgba(168,85,247,0.2) 1px, transparent 1px)", backgroundSize: "20px 20px", pointerEvents: "none", zIndex: 0 }} />
    );
    // gradient (default radial glow)
    return <div style={{ position: "absolute", inset: 0, background: "radial-gradient(ellipse 70% 50% at 50% 0%, rgba(168,85,247,0.15), transparent)", pointerEvents: "none", zIndex: 0 }} />;
  };

  const floatingNav = navStyle === "floating";

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

      {/* Nav */}
      {floatingNav ? (
        <div style={{ display: "flex", justifyContent: "center", padding: "10px 22px", position: "relative", zIndex: 10 }}>
          <nav style={{ display: "flex", alignItems: "center", gap: 18, padding: "7px 18px", borderRadius: 30, background: "rgba(168,85,247,0.1)", border: "1px solid rgba(168,85,247,0.25)" }}>
            <span style={{ fontWeight: 800, fontSize: 11, color: text }}>Acme</span>
            {["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: "rgba(168,85,247,0.4)", border: "1px solid rgba(168,85,247,0.4)", 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 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
            <div style={{ width: 18, height: 18, borderRadius: 4, background: "linear-gradient(135deg,#a855f7,#3b82f6)" }} />
            <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"].map(i => <span key={i}>{i}</span>)}
          </div>
          <button style={{ height: 24, padding: "0 10px", borderRadius: 5, fontSize: 9.5, fontWeight: 600, color: "#fff", background: "rgba(168,85,247,0.2)", border: "1px solid rgba(168,85,247,0.3)", cursor: "pointer" }}>Get started</button>
        </nav>
      )}

      {/* Hero — gradient text */}
      {hdrStyle === "gradient-text" && (
        <div style={{ padding: "26px 22px 16px", textAlign: "center", position: "relative", zIndex: 1 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 5, padding: "3px 10px", borderRadius: 20, fontSize: 9, fontWeight: 500, marginBottom: 14, border: "1px solid rgba(168,85,247,0.3)", color: "rgba(168,85,247,0.9)" }}>
            ✦ Open source · 12k stars
          </div>
          <h1 style={{ fontSize: 22, fontWeight: 900, marginBottom: 8, lineHeight: 1.15, background: isDark ? "linear-gradient(180deg,#fff 0%,rgba(255,255,255,0.5) 100%)" : "linear-gradient(180deg,#0f172a 0%,rgba(15,23,42,0.5) 100%)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>
            Build the future<br />of the web
          </h1>
          <p style={{ fontSize: 10, color: muted, maxWidth: 230, margin: "0 auto 16px", lineHeight: 1.6 }}>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 16px", borderRadius: 6, fontSize: 9.5, fontWeight: 600, color: "#fff", background: "linear-gradient(135deg,#a855f7,#3b82f6)", border: "none", cursor: "pointer" }}>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>
      )}

      {/* Hero — lamp effect */}
      {hdrStyle === "lamp" && (
        <div style={{ padding: "20px 22px 16px", textAlign: "center", position: "relative", zIndex: 1 }}>
          <div style={{ position: "absolute", top: 0, left: "50%", transform: "translateX(-50%)", width: 200, height: 60, background: "radial-gradient(ellipse at top, rgba(168,85,247,0.4), transparent 70%)", borderRadius: "0 0 100px 100px", pointerEvents: "none" }} />
          <div style={{ width: 80, height: 1, background: "linear-gradient(90deg, transparent, #a855f7, transparent)", margin: "0 auto 16px" }} />
          <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 14px", lineHeight: 1.6 }}>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,#a855f7,#3b82f6)", border: "none", cursor: "pointer" }}>Get started →</button>
        </div>
      )}

      {/* Hero — typewriter */}
      {hdrStyle === "typewriter" && (
        <div style={{ padding: "26px 22px 16px", textAlign: "center", position: "relative", zIndex: 1 }}>
          <div style={{ fontSize: 9, color: "rgba(168,85,247,0.7)", letterSpacing: "0.2em", marginBottom: 12 }}>THE FUTURE IS HERE</div>
          <h1 style={{ fontSize: 20, fontWeight: 900, color: text, marginBottom: 8, lineHeight: 1.2 }}>
            Build the future<br />
            <span style={{ background: "linear-gradient(90deg,#a855f7,#3b82f6)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>of the web_</span>
          </h1>
          <p style={{ fontSize: 10, color: muted, maxWidth: 220, margin: "0 auto 14px", lineHeight: 1.6 }}>Components that bring your ideas to life.</p>
          <button style={{ height: 30, padding: "0 16px", borderRadius: 6, fontSize: 9.5, fontWeight: 600, color: "#fff", background: "linear-gradient(135deg,#a855f7,#3b82f6)", border: "none", cursor: "pointer" }}>Get started →</button>
        </div>
      )}

      {/* Conditional sections */}
      {comps.includes("features") && (
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8, padding: "10px 22px", position: "relative", zIndex: 1 }}>
          {[{ label: "Animated", color: "#a855f7" }, { label: "Accessible", color: "#3b82f6" }, { label: "Open source", color: "#22c55e" }].map(f => (
            <div key={f.label} style={{ padding: "10px 12px", borderRadius: 10, background: card, border: `1px solid ${border}` }}>
              <div style={{ width: 18, height: 18, borderRadius: 5, marginBottom: 6, background: `${f.color}22`, display: "flex", alignItems: "center", justifyContent: "center" }}>
                <div style={{ width: 7, height: 7, borderRadius: "50%", background: f.color }} />
              </div>
              <p style={{ fontSize: 9.5, fontWeight: 600, color: text, marginBottom: 2 }}>{f.label}</p>
              <p style={{ fontSize: 8.5, color: muted }}>Built for production</p>
            </div>
          ))}
        </div>
      )}

      {comps.includes("badge") && (
        <div style={{ padding: "8px 22px", textAlign: "center", position: "relative", zIndex: 1 }}>
          <span style={{ display: "inline-block", padding: "4px 12px", borderRadius: 20, fontSize: 9, border: "1px solid rgba(168,85,247,0.4)", color: "rgba(168,85,247,0.9)", background: "rgba(168,85,247,0.08)" }}>✦ v2.0 just shipped — see what's new →</span>
        </div>
      )}

      {comps.includes("moving-cards") && (
        <div style={{ padding: "10px 22px", position: "relative", zIndex: 1, overflow: "hidden" }}>
          <p style={{ fontSize: 9, color: muted, marginBottom: 8, textAlign: "center" }}>What our users say</p>
          <div style={{ display: "flex", gap: 10, overflow: "hidden" }}>
            {[{ text: "\"Game changer for our team.\"", name: "Sarah K." }, { text: "\"Ships 3x faster.\"", name: "James R." }, { text: "\"Zero-config deploys.\"", name: "Mia L." }].map(t => (
              <div key={t.name} style={{ minWidth: 140, padding: "10px 12px", borderRadius: 10, background: card, border: `1px solid rgba(168,85,247,0.12)`, flexShrink: 0 }}>
                <p style={{ fontSize: 8.5, color: muted, marginBottom: 6, lineHeight: 1.5 }}>{t.text}</p>
                <p style={{ fontSize: 8.5, fontWeight: 600, color: text }}>— {t.name}</p>
              </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 rgba(168,85,247,0.12)`, gridRow: "1 / 3" }}>
              <p style={{ fontSize: 10, fontWeight: 700, color: text, marginBottom: 4 }}>Analytics</p>
              <div style={{ height: 40, background: "linear-gradient(to right, rgba(168,85,247,0.2), rgba(59,130,246,0.2))", borderRadius: 6, marginTop: 8 }} />
            </div>
            <div style={{ padding: "10px", borderRadius: 12, background: card, border: `1px solid ${border}` }}>
              <p style={{ fontSize: 9, fontWeight: 600, color: text }}>Deploys</p>
              <p style={{ fontSize: 16, fontWeight: 800, color: "#a855f7" }}>∞</p>
            </div>
            <div style={{ padding: "10px", borderRadius: 12, background: card, border: `1px solid ${border}` }}>
              <p style={{ fontSize: 9, fontWeight: 600, color: text }}>Uptime</p>
              <p style={{ fontSize: 14, fontWeight: 800, color: "#22c55e" }}>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(p => (
              <div key={p.plan} style={{ flex: 1, padding: "10px", borderRadius: 10, background: p.hi ? "linear-gradient(135deg,rgba(168,85,247,0.25),rgba(59,130,246,0.2))" : card, border: `1px solid ${p.hi ? "rgba(168,85,247,0.4)" : border}`, textAlign: "center" }}>
                <p style={{ fontSize: 8.5, fontWeight: 600, color: p.hi ? "#c084fc" : muted, marginBottom: 2 }}>{p.plan}</p>
                <p style={{ fontSize: 13, fontWeight: 800, color: text }}>{p.price}</p>
              </div>
            ))}
          </div>
        </div>
      )}

      {comps.includes("cta") && (
        <div style={{ margin: "12px 22px 18px", padding: "14px 18px", borderRadius: 12, background: "linear-gradient(135deg,rgba(168,85,247,0.12),rgba(59,130,246,0.1))", border: "1px solid rgba(168,85,247,0.2)", textAlign: "center", position: "relative", zIndex: 1 }}>
          <p style={{ fontSize: 12, fontWeight: 800, color: text, marginBottom: 4 }}>Start building today</p>
          <p style={{ fontSize: 9, color: muted, marginBottom: 10 }}>Join thousands of developers worldwide.</p>
          <button style={{ height: 28, padding: "0 16px", borderRadius: 6, fontSize: 9.5, fontWeight: 600, color: "#fff", background: "linear-gradient(135deg,#a855f7,#3b82f6)", border: "none", cursor: "pointer" }}>Get started →</button>
        </div>
      )}

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

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

export function MarketingTailwind({ 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);

  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 accent = "#7c3aed";

  const navBg      = navStyle === "minimal" ? "transparent" : bg;
  const navBorderB = navStyle === "minimal" ? "none" : `1px solid ${border}`;

  return (
    <div style={{ height: "100%", fontFamily: ff, background: bg, overflow: "auto", position: "relative" }}>
      {/* Background effects */}
      {bgStyle === "dot-grid" && (
        <div style={{ position: "absolute", inset: 0, backgroundImage: `radial-gradient(${isDark ? "#ffffff18" : "#00000018"} 1px, transparent 1px)`, backgroundSize: "16px 16px", pointerEvents: "none" }} />
      )}
      {bgStyle === "lines" && (
        <div style={{ position: "absolute", inset: 0, backgroundImage: `linear-gradient(${isDark ? "rgba(255,255,255,0.04)" : "rgba(0,0,0,0.04)"} 1px, transparent 1px), linear-gradient(90deg, ${isDark ? "rgba(255,255,255,0.04)" : "rgba(0,0,0,0.04)"} 1px, transparent 1px)`, backgroundSize: "24px 24px", pointerEvents: "none" }} />
      )}
      {bgStyle === "noise" && (
        <div style={{ position: "absolute", inset: 0, opacity: 0.03, backgroundImage: "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")", pointerEvents: "none" }} />
      )}

      {/* Nav */}
      <nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 22px", background: navBg, borderBottom: navBorderB, position: "relative", zIndex: 2 }}>
        <span style={{ fontWeight: 900, fontSize: 12, color: text, letterSpacing: navStyle === "minimal" ? "0.05em" : 0 }}>acme</span>
        <div style={{ display: "flex", gap: 14, 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: 24, padding: "0 10px", fontSize: 9.5, color: muted, background: "none", border: "none", cursor: "pointer" }}>Log in</button>
          <button style={{ height: 24, padding: "0 10px", borderRadius: 5, fontSize: 9.5, fontWeight: 500, background: text, color: bg, border: "none", cursor: "pointer" }}>Sign up</button>
        </div>
      </nav>

      {/* Hero — editorial big type */}
      {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: 26, fontWeight: 900, color: text, marginTop: 6, marginBottom: 10, lineHeight: 1.05, letterSpacing: "-0.02em" }}>The platform<br />built for scale</h1>
          <p style={{ fontSize: 10, color: muted, maxWidth: 260, marginBottom: 16, lineHeight: 1.6 }}>Everything your team needs to build, deploy, and monitor production applications.</p>
          <div style={{ display: "flex", gap: 8 }}>
            <button style={{ height: 30, padding: "0 14px", 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>
      )}

      {/* Hero — split */}
      {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: 20, fontWeight: 900, color: text, marginTop: 5, marginBottom: 8, lineHeight: 1.15, letterSpacing: "-0.01em" }}>The platform<br />built for scale</h1>
            <p style={{ fontSize: 9.5, color: muted, marginBottom: 14, lineHeight: 1.6 }}>Deploy anywhere. Monitor everything.</p>
            <div style={{ display: "flex", gap: 6 }}>
              <button style={{ height: 28, padding: "0 12px", borderRadius: 6, fontSize: 9, fontWeight: 600, background: text, color: bg, border: "none", cursor: "pointer" }}>Get started</button>
              <button style={{ height: 28, padding: "0 10px", borderRadius: 6, fontSize: 9, 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: 7, fontFamily: "monospace", fontSize: 7.5, color: muted, lineHeight: 1.8 }}>
              <div style={{ color: "#22c55e" }}>✓ Build complete</div>
              <div>→ Deploying…</div>
              <div style={{ color: "#3b82f6" }}>✓ Live in 2.1s</div>
            </div>
          </div>
        </div>
      )}

      {/* Hero — centered minimal */}
      {hdrStyle === "centered" && (
        <div style={{ padding: "32px 22px 16px", textAlign: "center", position: "relative", zIndex: 1 }}>
          <h1 style={{ fontSize: 22, fontWeight: 900, color: text, marginBottom: 8, lineHeight: 1.1, letterSpacing: "-0.02em" }}>The platform<br />built for scale</h1>
          <p style={{ fontSize: 10, color: muted, maxWidth: 240, margin: "0 auto 16px", lineHeight: 1.6 }}>Everything your team needs.</p>
          <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>
        </div>
      )}

      {/* Conditional sections */}
      {comps.includes("badge") && (
        <div style={{ padding: "6px 22px", 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's new</span>
        </div>
      )}

      {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: 8.5, fontWeight: 700, color: muted, opacity: 0.5, 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: "8px", 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, lineHeight: 1 }}>✓</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", gap: 0, 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: "10px 4px", borderRight: i < 3 ? `1px solid ${border}` : "none", background: i % 2 === 0 ? card : bg }}>
                <p style={{ fontSize: 15, fontWeight: 800, color: text }}>{v}</p>
                <p style={{ fontSize: 7.5, 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 3x 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", borderRadius: 8, background: card, border: `1px solid ${border}` }}>
                <p style={{ fontSize: 9, color: muted, marginBottom: 8, lineHeight: 1.5 }}>{t.q}</p>
                <p style={{ fontSize: 8.5, fontWeight: 600, color: text }}>{t.name} · <span style={{ fontWeight: 400, color: muted }}>{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: "10px", 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: 14, fontWeight: 800, color: p.hi ? bg : text }}>{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: "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: 10, background: text, textAlign: "center", position: "relative", zIndex: 1 }}>
          <p style={{ fontSize: 12, fontWeight: 800, color: bg, marginBottom: 4 }}>Ready to ship faster?</p>
          <p style={{ fontSize: 9, color: isDark ? "#71717a" : "#9ca3af", marginBottom: 10 }}>Join 50,000+ teams already on Acme.</p>
          <button style={{ height: 28, padding: "0 14px", 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 };