"use client";

import { ThemeColor, 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.

export function MarketingDaisy({ themeColor }: { themeColor?: ThemeColor }) {
  const theme = themeColor ?? DAISY_THEMES[0];
  const text = theme.textColor ?? "#f8f8f2";
  const muted = theme.mutedText ?? "rgba(255,255,255,0.5)";
  const card = theme.cardBg ?? "rgba(255,255,255,0.05)";
  const border = theme.borderColor ?? "rgba(255,255,255,0.1)";
  const bg = theme.bg ?? "#1d232a";

  return (
    <div style={{ height: "100%", fontFamily: "system-ui, sans-serif", background: bg, color: text, overflow: "auto" }}>
      {/* Nav */}
      <nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 22px", borderBottom: `1px solid ${border}` }}>
        <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
          <div style={{ width: 20, height: 20, borderRadius: 4, background: theme.primary }} />
          <span style={{ fontWeight: 800, fontSize: 12, color: text }}>Acme</span>
        </div>
        <div style={{ display: "flex", gap: 16, fontSize: 10, color: muted }}>
          {["Features", "Pricing", "Docs", "Blog"].map(i => <span key={i}>{i}</span>)}
        </div>
        <div style={{ display: "flex", gap: 7 }}>
          <button style={{ height: 26, padding: "0 12px", borderRadius: 20, fontSize: 10, fontWeight: 700, background: `${border}`, color: text, border: "none", cursor: "pointer" }}>Login</button>
          <button style={{ height: 26, padding: "0 12px", borderRadius: 20, fontSize: 10, fontWeight: 700, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer" }}>Get started</button>
        </div>
      </nav>

      {/* Hero */}
      <div style={{ padding: "28px 22px 18px", textAlign: "center" }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 5, padding: "3px 10px", borderRadius: 20, fontSize: 9, fontWeight: 700, marginBottom: 14, 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: 260, margin: "0 auto 18px", lineHeight: 1.6 }}>The all-in-one platform that helps teams build, launch, and scale their products.</p>
        <div style={{ display: "flex", gap: 8, justifyContent: "center", marginBottom: 22 }}>
          <button style={{ height: 32, padding: "0 18px", 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 18px", borderRadius: 20, fontSize: 10, fontWeight: 700, border: `1px solid ${border}`, color: text, background: "none", cursor: "pointer" }}>See demo →</button>
        </div>
      </div>

      {/* Feature cards */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8, padding: "0 22px 18px" }}>
        {[{ icon: "⚡", title: "Lightning fast", desc: "Deploy in seconds" }, { icon: "🔒", title: "Secure by default", desc: "Enterprise-grade security" }, { icon: "📈", title: "Scales with you", desc: "From zero to millions" }].map(f => (
          <div key={f.title} style={{ padding: "12px 14px", borderRadius: 12, textAlign: "center", background: card, border: `1px solid ${border}` }}>
            <div style={{ fontSize: 18, marginBottom: 5 }}>{f.icon}</div>
            <p style={{ fontSize: 10, fontWeight: 700, color: text, marginBottom: 3 }}>{f.title}</p>
            <p style={{ fontSize: 9, color: muted }}>{f.desc}</p>
          </div>
        ))}
      </div>

      {/* Pricing strip */}
      <div style={{ padding: "0 22px" }}>
        <div style={{ borderRadius: 12, padding: "14px 16px", background: card, border: `1px solid ${border}` }}>
          <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: 9, 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>
      </div>
    </div>
  );
}

export function MarketingHeroUI({ themeColor }: { themeColor?: ThemeColor }) {
  const theme = themeColor ?? HEROUI_MARKETING_THEMES[0];
  const bg = theme.bg ?? "#fff";
  const text = theme.textColor ?? "#18181b";
  const muted = theme.mutedText ?? "#71717a";
  const card = theme.cardBg ?? "#fff";
  const border = theme.borderColor ?? "#f4f4f5";

  return (
    <div style={{ height: "100%", fontFamily: "system-ui, sans-serif", background: bg, overflow: "auto" }}>
      <nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 22px", borderBottom: `1px solid ${border}` }}>
        <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: 10, color: muted }}>
          {["Features", "Pricing", "Docs", "Blog"].map(i => <span key={i}>{i}</span>)}
        </div>
        <div style={{ display: "flex", gap: 7 }}>
          <button style={{ height: 26, padding: "0 12px", borderRadius: 20, border: `1px solid ${border}`, fontSize: 10, background: "none", color: muted, cursor: "pointer" }}>Login</button>
          <button style={{ height: 26, padding: "0 12px", borderRadius: 20, fontSize: 10, fontWeight: 600, background: theme.primary, color: theme.primaryFg, border: "none", cursor: "pointer" }}>Get started</button>
        </div>
      </nav>

      <div style={{ padding: "26px 22px 16px", textAlign: "center" }}>
        <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}` }}>
          🚀 {theme.label} theme — v2.0
        </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: 260, 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", marginBottom: 18 }}>
          <button style={{ height: 32, padding: "0 18px", borderRadius: 20, fontSize: 10, 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: 32, padding: "0 18px", borderRadius: 20, fontSize: 10, background: "none", border: `1px solid ${border}`, color: muted, cursor: "pointer" }}>Live demo →</button>
        </div>

        {/* Dashboard preview card */}
        <div style={{ borderRadius: 16, overflow: "hidden", border: `1px solid ${border}`, maxWidth: 340, margin: "0 auto", background: card, boxShadow: `0 8px 30px rgba(0,0,0,0.08)` }}>
          <div style={{ height: 22, display: "flex", alignItems: "center", gap: 5, padding: "0 10px", background: bg === "#09090b" ? "#27272a" : "#fafafa", borderBottom: `1px solid ${border}` }}>
            {["#ff5f56", "#ffbd2e", "#27c93f"].map(c => <div key={c} style={{ width: 7, height: 7, borderRadius: "50%", background: c }} />)}
          </div>
          <div style={{ padding: 12 }}>
            <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: 13, fontWeight: 700, color: text }}>{m.split(" ")[1]}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export function MarketingAceternity() {
  return (
    <div style={{ height: "100%", fontFamily: "system-ui, sans-serif", background: "#030303", overflow: "auto" }}>
      <nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 22px", borderBottom: "1px solid rgba(255,255,255,0.06)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
          <div style={{ width: 20, height: 20, borderRadius: 4, background: "linear-gradient(135deg,#a855f7,#3b82f6)" }} />
          <span style={{ fontWeight: 800, fontSize: 11, color: "#fff" }}>Acme</span>
        </div>
        <div style={{ display: "flex", gap: 14, fontSize: 10, color: "rgba(255,255,255,0.4)" }}>
          {["Features", "Pricing", "Docs"].map(i => <span key={i}>{i}</span>)}
        </div>
        <button style={{ height: 26, padding: "0 12px", borderRadius: 5, fontSize: 10, 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>
      <div style={{ position: "relative", padding: "28px 22px 18px", textAlign: "center", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, background: "radial-gradient(ellipse 60% 40% at 50% 0%,rgba(168,85,247,0.15),transparent)", pointerEvents: "none" }} />
        <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 GitHub stars
        </div>
        <h1 style={{ fontSize: 22, fontWeight: 900, marginBottom: 8, lineHeight: 1.15, background: "linear-gradient(180deg,#fff 0%,rgba(255,255,255,0.5) 100%)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>
          Build the future<br />of the web
        </h1>
        <p style={{ fontSize: 10, color: "rgba(255,255,255,0.35)", maxWidth: 240, margin: "0 auto 18px", lineHeight: 1.6 }}>Beautifully crafted components built with Tailwind CSS and Framer Motion.</p>
        <div style={{ display: "flex", gap: 8, justifyContent: "center", marginBottom: 22 }}>
          <button style={{ height: 32, padding: "0 18px", borderRadius: 6, fontSize: 10, fontWeight: 600, color: "#fff", background: "linear-gradient(135deg,#a855f7,#3b82f6)", border: "none", cursor: "pointer" }}>Get started →</button>
          <button style={{ height: 32, padding: "0 18px", borderRadius: 6, fontSize: 10, color: "rgba(255,255,255,0.6)", border: "1px solid rgba(255,255,255,0.1)", background: "none", cursor: "pointer" }}>View components</button>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8 }}>
          {["Animated", "Accessible", "Open source"].map((f, i) => (
            <div key={f} style={{ padding: "10px 12px", borderRadius: 10, textAlign: "left", background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.06)" }}>
              <div style={{ width: 20, height: 20, borderRadius: 5, marginBottom: 6, background: ["rgba(168,85,247,0.15)", "rgba(59,130,246,0.15)", "rgba(34,197,94,0.15)"][i], display: "flex", alignItems: "center", justifyContent: "center" }}>
                <div style={{ width: 8, height: 8, borderRadius: "50%", background: ["#a855f7", "#3b82f6", "#22c55e"][i] }} />
              </div>
              <p style={{ fontSize: 9, fontWeight: 600, color: "#fff", marginBottom: 2 }}>{f}</p>
              <p style={{ fontSize: 9, color: "rgba(255,255,255,0.3)" }}>Built for production</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export function MarketingTailwind() {
  return (
    <div style={{ height: "100%", fontFamily: "system-ui, sans-serif", background: "#fff", overflow: "auto" }}>
      <nav style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 22px", borderBottom: "1px solid #e5e7eb" }}>
        <span style={{ fontWeight: 900, fontSize: 12, color: "#09090b" }}>acme</span>
        <div style={{ display: "flex", gap: 14, fontSize: 10, color: "#71717a" }}>
          {["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: 10, color: "#71717a", background: "none", border: "none", cursor: "pointer" }}>Log in</button>
          <button style={{ height: 26, padding: "0 12px", borderRadius: 5, fontSize: 10, fontWeight: 500, background: "#09090b", color: "#fff", border: "none", cursor: "pointer" }}>Sign up</button>
        </div>
      </nav>
      <div style={{ padding: "28px 22px" }}>
        <div style={{ maxWidth: 320 }}>
          <span style={{ fontSize: 9, fontWeight: 600, color: "#7c3aed", letterSpacing: "0.12em", textTransform: "uppercase" }}>Now in public beta</span>
          <h1 style={{ fontSize: 22, fontWeight: 900, color: "#09090b", marginTop: 4, marginBottom: 8, lineHeight: 1.15 }}>The platform<br />built for scale</h1>
          <p style={{ fontSize: 10, color: "#71717a", marginBottom: 18, lineHeight: 1.6 }}>Everything your team needs to build, deploy, and monitor production applications.</p>
          <div style={{ display: "flex", gap: 8, marginBottom: 24 }}>
            <button style={{ height: 30, padding: "0 14px", borderRadius: 6, fontSize: 10, fontWeight: 500, background: "#09090b", color: "#fff", border: "none", cursor: "pointer" }}>Get started free</button>
            <button style={{ height: 30, padding: "0 14px", borderRadius: 6, fontSize: 10, fontWeight: 500, border: "1px solid #e5e7eb", color: "#71717a", background: "none", cursor: "pointer" }}>Documentation →</button>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
            {["99.9% uptime SLA", "10ms avg latency", "SOC2 compliant", "GDPR ready"].map(f => (
              <div key={f} style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 9, color: "#71717a" }}>
                <div style={{ width: 14, height: 14, borderRadius: "50%", background: "#09090b", flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <span style={{ color: "#fff", fontSize: 8, lineHeight: 1 }}>✓</span>
                </div>
                {f}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

export { DAISY_THEMES, HEROUI_MARKETING_THEMES };