/* Landing page — hero, features grid, demos, comparison, screenshots, pricing, FAQ */

const LandingNav = () => (
  <nav style={{
    position: "sticky", top: 0, zIndex: 50,
    display: "flex", alignItems: "center", gap: 24,
    padding: "14px 40px",
    background: "color-mix(in srgb, var(--surface-0) 60%, transparent)",
    backdropFilter: "blur(28px) saturate(180%)",
    WebkitBackdropFilter: "blur(28px) saturate(180%)",
    borderBottom: "1px solid var(--hairline)",
  }}>
    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
      <AppIcon size={28}/>
      <span style={{ fontWeight: 700, fontSize: 15, letterSpacing: "-0.01em" }}>MacFleek</span>
    </div>
    <div style={{ flex: 1 }}/>
    <div style={{ display: "flex", gap: 28, fontSize: 13, color: "var(--text-secondary)" }}>
      {["Features", "Pricing", "Compare", "Changelog", "FAQ"].map(l => (
        <a key={l} href="#" style={{ color: "inherit", textDecoration: "none", transition: "color 0.2s" }}
           onMouseEnter={e => e.currentTarget.style.color = "var(--text-primary)"}
           onMouseLeave={e => e.currentTarget.style.color = "var(--text-secondary)"}>{l}</a>
      ))}
    </div>
    <a href="#" className="btn btn-ghost"><Icon name="github" size={14}/> GitHub</a>
    <a href="#" className="btn btn-primary"><Icon name="arrow-down" size={13}/> Download</a>
  </nav>
);

const HeroDiskMockup = () => {
  // Animated mini-dashboard mockup for the hero, looks like real app
  return (
    <div style={{ position: "relative", margin: "0 auto", maxWidth: 1100 }}>
      {/* Witch decorator (1st of 2 brand appearances) */}
      <div style={{
        position: "absolute",
        top: -40, right: -40,
        opacity: 0.35,
        pointerEvents: "none",
        filter: "drop-shadow(0 20px 60px rgba(167,139,250,0.4))",
      }}>
        <Witch size={280} variant="chrome" stars animate/>
      </div>

      <MacWindow title="MacFleek — Dashboard" height={620}
        toolbar={
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginLeft: 8 }}>
            <span style={{ fontSize: 12, color: "var(--text-secondary)", fontWeight: 500 }}>MacFleek</span>
            <span style={{ width: 1, height: 12, background: "var(--hairline-strong)" }}/>
            <span style={{ fontSize: 11, color: "var(--text-tertiary)" }}>Macintosh HD · 19.2 GB recoverable</span>
            <div style={{ flex: 1, minWidth: 200 }}/>
            <div className="glass" style={{ display: "flex", alignItems: "center", gap: 6, padding: "3px 10px", borderRadius: 7, fontSize: 11, color: "var(--text-tertiary)" }}>
              <Icon name="search" size={12}/><span>Search</span><span className="mono" style={{ opacity: 0.5 }}>⌘ F</span>
            </div>
          </div>
        }
      >
        <AppSidebar
          current="dashboard"
          items={[
            { label: "Overview", items: [
              { id: "dashboard", icon: "dashboard", label: "Dashboard" },
              { id: "scan", icon: "sparkles", label: "Smart Scan", badge: "169" },
            ]},
            { label: "Cleanup", items: [
              { id: "system", icon: "gear", label: "System Junk", badge: "4.2 GB" },
              { id: "cache", icon: "database", label: "User Caches", badge: "8.1 GB" },
              { id: "xcode", icon: "hammer", label: "Xcode Junk", badge: "12 GB" },
              { id: "brew", icon: "mug", label: "Brew Cache" },
            ]},
            { label: "Pro Tools", items: [
              { id: "treemap", icon: "chart-treemap", label: "Disk Treemap", pro: true },
              { id: "dup", icon: "copy", label: "Duplicates", pro: true },
            ]},
          ]}
        />
        <main style={{ flex: 1, padding: 28, overflow: "hidden", background: "var(--surface-0)" }}>
          <DashboardHeroContent compact/>
        </main>
      </MacWindow>

      {/* Floating menu-bar popover decoration */}
      <div style={{
        position: "absolute",
        bottom: -30, right: 40,
        width: 220,
        transform: "rotate(2deg)",
      }} className="glass" >
        <div style={{
          borderRadius: 14,
          padding: 14,
          border: "1px solid var(--hairline-strong)",
          boxShadow: "0 40px 80px -30px rgba(0,0,0,0.7), 0 20px 40px -20px rgba(99,102,241,0.3)",
          background: "color-mix(in srgb, var(--surface-1) 80%, transparent)",
          backdropFilter: "blur(28px) saturate(180%)",
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 10 }}>
            <Icon name="apple" size={14} style={{ color: "var(--brand-300)" }}/>
            <span style={{ fontSize: 11, fontWeight: 600 }}>MacFleek</span>
            <span style={{ marginLeft: "auto", fontSize: 10, color: "var(--text-tertiary)" }}>320 GB free</span>
          </div>
          <div style={{ height: 6, borderRadius: 999, background: "var(--surface-2)", overflow: "hidden", marginBottom: 8 }}>
            <div className="fill-anim" style={{ height: "100%", background: "linear-gradient(90deg, var(--brand-500), var(--brand-300))", "--target": "67%" }}/>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 6 }}>
            {["trash-fill", "memory", "drive", "bubble-x", "eye", "globe-network"].map(n => (
              <div key={n} style={{
                aspectRatio: "1", display: "grid", placeItems: "center",
                background: "var(--surface-2)", borderRadius: 8,
                border: "1px solid var(--hairline)",
                color: "var(--brand-300)",
              }}><Icon name={n} size={14}/></div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

/* The actual content inside the dashboard mockup — used here and on the Dashboard view */
const DashboardHeroContent = ({ compact = false }) => {
  const segments = [
    { label: "Applications", value: 38, color: "#a78bfa" },
    { label: "System", value: 22, color: "#8b5cf6" },
    { label: "Documents", value: 14, color: "#6366f1" },
    { label: "Caches", value: 10, color: "#4f46e5" },
    { label: "Other", value: 6, color: "#3730a3" },
    { label: "Free", value: 10, color: "#27272a" },
  ];
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 22, height: "100%" }}>
      {/* Top row — disk gauge + recoverable stat */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
        <div className="surface" style={{ display: "flex", alignItems: "center", gap: 24, padding: 22 }}>
          <DiskGauge percent={67} size={148}/>
          <div>
            <div className="cap" style={{ marginBottom: 4 }}>Macintosh HD</div>
            <div className="tnum" style={{ fontSize: 28, fontWeight: 700, letterSpacing: "-0.02em" }}>
              319.4 <span style={{ fontSize: 14, color: "var(--text-secondary)", fontWeight: 500 }}>/ 994 GB</span>
            </div>
            <div style={{ fontSize: 12, color: "var(--text-tertiary)", marginTop: 4 }}>67% used · APFS encrypted</div>
            <div style={{ marginTop: 12, display: "flex", gap: 6 }}>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 4, fontSize: 11, padding: "3px 8px", borderRadius: 999, background: "color-mix(in srgb, var(--success) 14%, transparent)", color: "var(--success)" }}>
                <Icon name="check-circle" size={11}/> Healthy
              </span>
              <span style={{ fontSize: 11, padding: "3px 8px", borderRadius: 999, background: "var(--surface-2)", color: "var(--text-secondary)" }}>Last scan 2 min ago</span>
            </div>
          </div>
        </div>

        <div className="surface" style={{ padding: 22, position: "relative", overflow: "hidden" }}>
          <div style={{
            position: "absolute", inset: 0,
            background: "radial-gradient(60% 80% at 100% 0%, rgba(167,139,250,0.16) 0%, transparent 70%)",
            pointerEvents: "none",
          }}/>
          <div className="cap" style={{ marginBottom: 6 }}>Recoverable now</div>
          <div className="stat-big">
            <span className="num">19.2</span><span className="unit">GB</span>
            <span className="label">across 5 categories · zero risk</span>
          </div>
          <div style={{ marginTop: 14, display: "flex", gap: 8 }}>
            <button className="btn btn-primary"><Icon name="bolt" size={13}/> Clean now</button>
            <button className="btn"><Icon name="search" size={13}/> Review items</button>
          </div>
        </div>
      </div>

      {/* Stacked disk breakdown */}
      <div className="surface" style={{ padding: 18 }}>
        <div style={{ display: "flex", alignItems: "baseline", marginBottom: 12 }}>
          <span style={{ fontSize: 13, fontWeight: 600 }}>Storage breakdown</span>
          <span style={{ marginLeft: "auto", fontSize: 11, color: "var(--text-tertiary)" }}>Hover for details</span>
        </div>
        <div style={{ display: "flex", height: 12, borderRadius: 999, overflow: "hidden", background: "var(--surface-2)" }}>
          {segments.map((s, i) => (
            <div key={i} className="fill-anim" style={{
              "--target": `${s.value}%`,
              background: s.color,
              animationDelay: `${i * 0.12}s`,
            }}/>
          ))}
        </div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 14, marginTop: 12 }}>
          {segments.map((s, i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 11.5 }}>
              <span style={{ width: 8, height: 8, borderRadius: 2, background: s.color }}/>
              <span style={{ color: "var(--text-secondary)" }}>{s.label}</span>
              <span className="tnum" style={{ color: "var(--text-tertiary)" }}>{s.value}%</span>
            </div>
          ))}
        </div>
      </div>

      {!compact && (
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
          {quickActions.map((q, i) => <QuickActionCard key={i} {...q}/>)}
        </div>
      )}
    </div>
  );
};

const DiskGauge = ({ percent, size = 140 }) => {
  const stroke = size * 0.085;
  const r = size / 2 - stroke / 2 - 2;
  const c = 2 * Math.PI * r;
  const dash = c * percent / 100;
  return (
    <div style={{ position: "relative", width: size, height: size }}>
      <svg width={size} height={size} style={{ transform: "rotate(-90deg)" }}>
        <circle cx={size/2} cy={size/2} r={r}
          stroke="var(--surface-2)" strokeWidth={stroke} fill="none"/>
        <circle cx={size/2} cy={size/2} r={r}
          stroke="url(#gauge-grad)" strokeWidth={stroke} fill="none"
          strokeLinecap="round"
          strokeDasharray={`${dash} ${c}`}
          style={{ transition: "stroke-dasharray 1.8s var(--ease-apple-spring)" }}/>
        <defs>
          <linearGradient id="gauge-grad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#a78bfa"/>
            <stop offset="100%" stopColor="#6366f1"/>
          </linearGradient>
        </defs>
      </svg>
      <div style={{
        position: "absolute", inset: 0,
        display: "flex", flexDirection: "column",
        alignItems: "center", justifyContent: "center",
        textAlign: "center",
        gap: 6,
      }}>
        <div className="tnum" style={{
          fontSize: size * 0.26, fontWeight: 700,
          letterSpacing: "-0.03em", lineHeight: 1,
          display: "inline-flex", alignItems: "baseline", gap: 1,
        }}>
          {percent}
          <span style={{
            fontSize: size * 0.13, fontWeight: 500,
            color: "var(--text-tertiary)",
          }}>%</span>
        </div>
        <div style={{
          fontSize: 10, color: "var(--text-tertiary)",
          textTransform: "uppercase", letterSpacing: "0.08em",
        }}>used</div>
      </div>
    </div>
  );
};

const quickActions = [
  { icon: "trash-fill", label: "Empty Trash", value: "2.4 GB", hint: "12 items" },
  { icon: "memory", label: "Free RAM", value: "6.1 GB", hint: "inactive" },
  { icon: "drive", label: "Clear Caches", value: "8.1 GB", hint: "safe" },
  { icon: "bubble-x", label: "Crash Logs", value: "412 MB", hint: "32 files" },
];
const QuickActionCard = ({ icon, label, value, hint }) => (
  <button className="surface" style={{
    display: "flex", flexDirection: "column", gap: 4,
    padding: 14, textAlign: "left", cursor: "pointer",
    border: "1px solid var(--hairline)",
    background: "var(--surface-1)",
    color: "inherit", fontFamily: "inherit",
    transition: "transform 0.25s var(--ease-apple-spring), box-shadow 0.25s, border-color 0.25s",
  }}
  onMouseEnter={e => {
    e.currentTarget.style.transform = "translateY(-2px)";
    e.currentTarget.style.boxShadow = "0 18px 36px -16px rgba(99,102,241,0.3)";
    e.currentTarget.style.borderColor = "color-mix(in srgb, var(--brand-500) 30%, transparent)";
  }}
  onMouseLeave={e => {
    e.currentTarget.style.transform = "";
    e.currentTarget.style.boxShadow = "";
    e.currentTarget.style.borderColor = "var(--hairline)";
  }}>
    <Icon name={icon} size={18} style={{ color: "var(--brand-300)" }}/>
    <span style={{ fontSize: 12, color: "var(--text-secondary)", marginTop: 4 }}>{label}</span>
    <span className="tnum" style={{ fontSize: 18, fontWeight: 600, letterSpacing: "-0.01em" }}>{value}</span>
    <span style={{ fontSize: 10.5, color: "var(--text-tertiary)" }}>{hint}</span>
  </button>
);

Object.assign(window, { LandingNav, HeroDiskMockup, DashboardHeroContent, DiskGauge, QuickActionCard });