/* Landing page — full composition combining hero, features, demos, comparison, pricing, FAQ */

const featuresList = [
  { icon: "brain-circuit", title: "Smart Scan", desc: "169 cleanup rules across 5 groups — system junk, caches, leftovers, logs, mail.", tag: null },
  { icon: "package-x", title: "App Uninstaller", desc: "9-level heuristic finds every leftover container, prefs, support, cache.", tag: null },
  { icon: "tombstone", title: "Orphan Finder", desc: "Reclaim disk space from apps you deleted years ago — the bones they left behind.", tag: null },
  { icon: "magnify-stacked", title: "Duplicate Finder", desc: "Three-pass detection: size → hash → bit-by-bit. No false positives.", tag: "Pro" },
  { icon: "chart-treemap", title: "Disk Treemap", desc: "Squarified visualization of every byte on disk. Drill down to any folder.", tag: "Pro" },
  { icon: "rocket", title: "App Updater", desc: "Sparkle, App Store, and Homebrew updates in one place — no more pinging.", tag: "Pro" },
  { icon: "apple", title: "Menu-bar actions", desc: "Quick clean from the menu bar without ever opening the main window." },
  { icon: "tools-cross", title: "Maintenance", desc: "Rebuild Spotlight, flush DNS, restart Finder — every utility you forget exists." },
  { icon: "globe", title: "9 languages", desc: "Localized for every market — including ones the big guys ignore." },
];

const FeatureCard = ({ icon, title, desc, tag }) => (
  <div className="surface" style={{
    padding: 22,
    position: "relative",
    overflow: "hidden",
    transition: "transform 0.3s var(--ease-apple-spring), border-color 0.3s, box-shadow 0.3s",
  }}
  onMouseEnter={e => {
    e.currentTarget.style.transform = "translateY(-3px)";
    e.currentTarget.style.borderColor = "color-mix(in srgb, var(--brand-500) 30%, transparent)";
    e.currentTarget.style.boxShadow = "0 24px 50px -20px rgba(99,102,241,0.35)";
  }}
  onMouseLeave={e => {
    e.currentTarget.style.transform = "";
    e.currentTarget.style.borderColor = "var(--hairline)";
    e.currentTarget.style.boxShadow = "";
  }}>
    {tag && (
      <div style={{ position: "absolute", top: 14, right: 14 }}>
        <span className="pro-tag">{tag}</span>
      </div>
    )}
    <div style={{
      width: 44, height: 44,
      borderRadius: 11,
      background: "linear-gradient(135deg, rgba(99,102,241,0.18), rgba(167,139,250,0.08))",
      display: "grid", placeItems: "center",
      color: "var(--brand-300)",
      border: "1px solid color-mix(in srgb, var(--brand-500) 22%, transparent)",
      marginBottom: 14,
    }}>
      <Icon name={icon} size={22}/>
    </div>
    <h3 style={{ margin: 0, fontSize: 16, fontWeight: 600, letterSpacing: "-0.01em" }}>{title}</h3>
    <p style={{ margin: "6px 0 0", fontSize: 13.5, color: "var(--text-secondary)", lineHeight: 1.5 }}>{desc}</p>
  </div>
);

/* === Live demos — 4 mini interactive cards === */
const DemoCard = ({ title, kicker, children }) => (
  <div className="surface" style={{
    padding: 22,
    background: "linear-gradient(180deg, var(--surface-1) 0%, color-mix(in srgb, var(--surface-1) 80%, var(--brand-950)) 100%)",
    overflow: "hidden",
    position: "relative",
  }}>
    <div className="cap" style={{ marginBottom: 4 }}>{kicker}</div>
    <h3 style={{ margin: 0, fontSize: 15, fontWeight: 600 }}>{title}</h3>
    <div style={{ marginTop: 16, height: 200, position: "relative" }}>
      {children}
    </div>
  </div>
);

const TreemapDemo = () => {
  // 5-block hand-tuned squarified layout — looks like a real treemap, not a 2x2 grid.
  // Coords/sizes in % so it fills the 200px parent regardless of width.
  const blocks = [
    { label: "node_modules", v: 8.4, x: 0,  y: 0,   w: 56, h: 100, intensity: 1.00, big: true },
    { label: "Photos",       v: 4.2, x: 56, y: 0,   w: 44, h: 52,  intensity: 0.65 },
    { label: "DerivedData",  v: 3.1, x: 56, y: 52,  w: 26, h: 48,  intensity: 0.50 },
    { label: "Caches",       v: 2.0, x: 82, y: 52,  w: 18, h: 28,  intensity: 0.38 },
    { label: "Mail",         v: 1.2, x: 82, y: 80,  w: 18, h: 20,  intensity: 0.28 },
  ];
  const maxV = 8.4;
  return (
    <div style={{ position: "absolute", inset: 0, borderRadius: 8, overflow: "hidden", background: "var(--surface-2)" }}>
      {blocks.map((b, i) => {
        const lightness = 0.32 + b.intensity * 0.32;
        return (
          <div key={i} style={{
            position: "absolute",
            left: `calc(${b.x}% + 1.5px)`,
            top: `calc(${b.y}% + 1.5px)`,
            width: `calc(${b.w}% - 3px)`,
            height: `calc(${b.h}% - 3px)`,
            background: `oklch(${lightness} 0.16 290)`,
            borderRadius: 6,
            border: "1px solid color-mix(in srgb, white 10%, transparent)",
            boxShadow: "inset 0 1px 0 rgba(255,255,255,0.10)",
            display: "flex", flexDirection: "column", justifyContent: b.big ? "space-between" : "flex-end",
            padding: b.big ? 12 : "8px 10px",
            color: "white",
            opacity: 0,
            animation: `tmFade 0.7s var(--ease-apple-spring) ${i * 0.1}s forwards`,
            overflow: "hidden",
          }}>
            {b.big && (
              <div style={{ display: "flex", alignItems: "center", gap: 5, fontSize: 9.5, opacity: 0.7, textTransform: "uppercase", letterSpacing: "0.08em" }}>
                <Icon name="folder" size={10}/> ~/dev
              </div>
            )}
            <div>
              <div style={{ fontSize: b.big ? 13 : 11, fontWeight: 600, letterSpacing: "-0.01em", textShadow: "0 1px 2px rgba(0,0,0,0.35)", lineHeight: 1.15, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{b.label}</div>
              <div className="tnum" style={{ fontSize: b.big ? 11 : 10, opacity: 0.78, fontWeight: 500, marginTop: 1 }}>{b.v.toFixed(1)} GB</div>
            </div>
          </div>
        );
      })}
      <style>{`@keyframes tmFade { 0% { opacity: 0; transform: scale(0.94); } 100% { opacity: 1; transform: scale(1); } }`}</style>
    </div>
  );
};

const GaugeDemo = () => {
  const [pct, setPct] = React.useState(0);
  React.useEffect(() => {
    const t = setTimeout(() => setPct(67), 200);
    return () => clearTimeout(t);
  }, []);
  return (
    <div style={{ display: "grid", placeItems: "center", height: "100%" }}>
      <DiskGauge percent={pct} size={170}/>
    </div>
  );
};

const MenuBarDemo = () => {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const i = setInterval(() => setOpen(o => !o), 2400);
    return () => clearInterval(i);
  }, []);
  return (
    <div style={{ position: "absolute", inset: 0 }}>
      {/* fake menu bar */}
      <div style={{
        position: "absolute", top: 0, left: 0, right: 0,
        height: 22,
        background: "color-mix(in srgb, var(--surface-2) 60%, transparent)",
        backdropFilter: "blur(20px)",
        borderRadius: 6,
        display: "flex", alignItems: "center", padding: "0 8px",
        gap: 6, fontSize: 9, color: "var(--text-tertiary)",
      }}>
        <Icon name="apple" size={10}/>
        <span>File</span><span>Edit</span><span>View</span>
        <span style={{ marginLeft: "auto" }}>100%</span>
        <Icon name="apple" size={10} style={{ color: open ? "var(--brand-400)" : "var(--text-tertiary)", transition: "color 0.3s" }}/>
      </div>
      {/* popover */}
      <div style={{
        position: "absolute", top: 26, right: 8,
        width: 180,
        opacity: open ? 1 : 0,
        transform: open ? "translateY(0) scale(1)" : "translateY(-6px) scale(0.96)",
        transformOrigin: "top right",
        transition: "all 0.4s var(--ease-apple-spring)",
        background: "color-mix(in srgb, var(--surface-1) 88%, transparent)",
        backdropFilter: "blur(28px) saturate(180%)",
        border: "1px solid var(--hairline-strong)",
        borderRadius: 10,
        padding: 10,
        boxShadow: "0 20px 40px -10px rgba(0,0,0,0.5)",
      }}>
        <div style={{ fontSize: 10, fontWeight: 600, marginBottom: 6 }}>Quick clean</div>
        <div style={{ height: 4, borderRadius: 999, background: "var(--surface-2)", overflow: "hidden", marginBottom: 8 }}>
          <div style={{ height: "100%", width: open ? "67%" : "0%", background: "var(--brand-500)", transition: "width 1.2s var(--ease-apple-spring)" }}/>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 4 }}>
          {["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: 5, color: "var(--brand-300)" }}>
              <Icon name={n} size={11}/>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

const DuplicateDemo = () => {
  const passes = ["Scanning by size", "Hashing candidates", "Bit-by-bit verify"];
  const [phase, setPhase] = React.useState(0);
  React.useEffect(() => {
    const i = setInterval(() => setPhase(p => (p + 1) % 4), 1200);
    return () => clearInterval(i);
  }, []);
  return (
    <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", gap: 10, justifyContent: "center" }}>
      {passes.map((p, i) => {
        const done = phase > i || phase === 0;
        const active = phase === i + 1;
        return (
          <div key={i} style={{
            display: "flex", alignItems: "center", gap: 10,
            padding: "10px 14px",
            background: active ? "color-mix(in srgb, var(--brand-500) 14%, var(--surface-2))" : "var(--surface-2)",
            borderRadius: 8,
            border: `1px solid ${active ? "color-mix(in srgb, var(--brand-500) 40%, transparent)" : "var(--hairline)"}`,
            transition: "all 0.4s var(--ease-apple-spring)",
          }}>
            <div style={{
              width: 18, height: 18, borderRadius: 999,
              background: done && !active ? "var(--success)" : active ? "var(--brand-500)" : "var(--surface-0)",
              border: "1px solid var(--hairline-strong)",
              display: "grid", placeItems: "center", color: "white",
              flexShrink: 0,
            }}>
              {done && !active && <Icon name="check-circle" size={12}/>}
              {active && <Icon name="dot" size={12}/>}
            </div>
            <span style={{ fontSize: 12.5, fontWeight: active ? 600 : 500, color: active ? "var(--text-primary)" : "var(--text-secondary)" }}>
              Pass {i+1} · {p}
            </span>
            {done && !active && <span style={{ marginLeft: "auto", fontSize: 10, color: "var(--text-tertiary)" }} className="tnum">12,431 files</span>}
          </div>
        );
      })}
    </div>
  );
};

/* === Comparison table — MacFleek vs CleanMyMac === */
const ComparisonRow = ({ label, mac, cmm, highlight }) => (
  <tr style={{ borderTop: "1px solid var(--hairline)" }}>
    <td style={{ padding: "14px 18px", fontSize: 13.5 }}>{label}</td>
    <td style={{ padding: "14px 18px", fontSize: 13.5, fontWeight: highlight ? 600 : 500, color: highlight ? "var(--brand-300)" : "var(--text-primary)", textAlign: "center", fontVariantNumeric: "tabular-nums" }}>{mac}</td>
    <td style={{ padding: "14px 18px", fontSize: 13.5, color: "var(--text-secondary)", textAlign: "center", fontVariantNumeric: "tabular-nums" }}>{cmm}</td>
  </tr>
);
const Yes = () => <Icon name="check-circle" size={16} style={{ color: "var(--success)" }}/>;
const No = () => <Icon name="circle-x" size={16} style={{ color: "var(--zinc-500)" }}/>;

const PricingCard = ({ tier, price, period, features, highlight, cta }) => (
  <div className="surface" style={{
    padding: 28,
    position: "relative",
    background: highlight
      ? "linear-gradient(165deg, var(--brand-950) 0%, color-mix(in srgb, var(--brand-700) 60%, var(--brand-950)) 100%)"
      : "var(--surface-1)",
    border: highlight ? "1px solid color-mix(in srgb, var(--brand-500) 50%, transparent)" : "1px solid var(--hairline)",
    boxShadow: highlight ? "0 32px 80px -20px rgba(99,102,241,0.45)" : "none",
    overflow: "hidden",
  }}>
    {highlight && (
      <div style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(80% 50% at 50% 0%, rgba(167,139,250,0.20) 0%, transparent 60%)",
        pointerEvents: "none",
      }}/>
    )}
    <div style={{ position: "relative" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
        <span style={{ fontSize: 12, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.08em", color: highlight ? "var(--brand-300)" : "var(--text-tertiary)" }}>
          {tier}
        </span>
        {highlight && <span className="pro-tag">Lifetime deal</span>}
      </div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 6, margin: "8px 0 4px" }}>
        <span className="tnum" style={{ fontSize: 56, fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1 }}>${price}</span>
        <span style={{ fontSize: 14, color: highlight ? "var(--brand-200)" : "var(--text-secondary)" }}>{period}</span>
      </div>
      <div style={{ fontSize: 12, color: highlight ? "var(--brand-200)" : "var(--text-tertiary)", marginBottom: 22 }}>
        {highlight ? "One payment. Forever. No subscription." : "Forever free, ad-free, MIT licensed."}
      </div>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
        {features.map((f, i) => (
          <li key={i} style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 13.5 }}>
            <Icon name="check-circle" size={15} style={{ color: highlight ? "var(--brand-300)" : "var(--success)", flexShrink: 0 }}/>
            <span style={{ color: highlight ? "white" : "var(--text-secondary)" }}>{f}</span>
          </li>
        ))}
      </ul>
      <button className={highlight ? "btn btn-primary btn-xl" : "btn btn-xl"} style={{ marginTop: 22, width: "100%", justifyContent: "center" }}>
        {cta}
      </button>
    </div>
  </div>
);

const FAQItem = ({ q, a, defaultOpen = false }) => {
  const [open, setOpen] = React.useState(defaultOpen);
  return (
    <div className="surface" style={{ padding: 0, overflow: "hidden" }}>
      <button onClick={() => setOpen(o => !o)} style={{
        width: "100%", textAlign: "left", padding: "16px 20px",
        background: "transparent", border: "none", cursor: "pointer",
        display: "flex", alignItems: "center", gap: 12,
        color: "inherit", fontFamily: "inherit", fontSize: 14, fontWeight: 500,
      }}>
        <span style={{ flex: 1 }}>{q}</span>
        <Icon name="chevron-down" size={16} style={{
          color: "var(--text-tertiary)",
          transition: "transform 0.3s var(--ease-apple-spring)",
          transform: open ? "rotate(180deg)" : "none",
        }}/>
      </button>
      <div style={{
        maxHeight: open ? 200 : 0,
        overflow: "hidden",
        transition: "max-height 0.45s var(--ease-apple-smooth)",
      }}>
        <div style={{ padding: "0 20px 18px", fontSize: 13.5, color: "var(--text-secondary)", lineHeight: 1.65 }}>{a}</div>
      </div>
    </div>
  );
};

const LandingView = () => {
  return (
    <div style={{ background: "var(--surface-0)", minHeight: "100%", position: "relative" }}>
      {/* Atmospheric backdrop */}
      <div style={{
        position: "absolute", top: 0, left: 0, right: 0, height: 1100,
        background: `
          radial-gradient(70% 50% at 30% 0%, rgba(99,102,241,0.18) 0%, transparent 60%),
          radial-gradient(60% 40% at 80% 20%, rgba(167,139,250,0.12) 0%, transparent 65%),
          linear-gradient(180deg, var(--brand-950) 0%, transparent 70%)`,
        pointerEvents: "none",
        zIndex: 0,
      }}/>

      <div style={{ position: "relative", zIndex: 1 }}>
        {/* LandingNav removed — production uses /shell.js NavBar at the page root */}

        {/* Hero */}
        <section style={{ padding: "70px 40px 60px", maxWidth: 1280, margin: "0 auto" }}>
          <div style={{ textAlign: "center", marginBottom: 60 }}>
            <div style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              padding: "5px 12px",
              borderRadius: 999,
              background: "color-mix(in srgb, var(--brand-500) 12%, transparent)",
              border: "1px solid color-mix(in srgb, var(--brand-500) 28%, transparent)",
              fontSize: 11.5, fontWeight: 500,
              color: "var(--brand-200)",
              marginBottom: 24,
            }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--brand-300)", boxShadow: "0 0 8px var(--brand-300)" }}/>
              v1.4 · 169 cleanup rules · MIT-licensed
            </div>
            <h1 style={{
              margin: 0,
              fontSize: "clamp(2.6rem, 6.5vw, 5rem)",
              fontWeight: 800,
              letterSpacing: "-0.03em",
              lineHeight: 1.02,
              maxWidth: 900, marginInline: "auto",
            }}>
              The <span style={{
                background: "linear-gradient(180deg, #c4b5fd, #6366f1)",
                WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
                backgroundClip: "text",
              }}>honest</span> macOS cleaner.
            </h1>
            <p style={{
              margin: "20px auto 0",
              maxWidth: 620,
              fontSize: 17.5,
              color: "var(--text-secondary)",
              lineHeight: 1.55,
            }}>
              Open source. Zero telemetry. <strong style={{ color: "var(--text-primary)" }}>$29 once</strong> and you own it. The cleaner CleanMyMac wishes it could be — without the panic pop-ups.
            </p>
            <div style={{ display: "inline-flex", gap: 12, marginTop: 30 }}>
              <button className="btn btn-primary btn-xl"><Icon name="arrow-down" size={14}/> Download for macOS</button>
              <button className="btn btn-xl"><Icon name="github" size={14}/> View on GitHub</button>
            </div>
            <div className="mono" style={{ fontSize: 11.5, color: "var(--text-tertiary)", marginTop: 14 }}>
              macOS 13+ · Universal binary · 24 MB · SHA-256: a3f9…02b7
            </div>
          </div>
          <HeroDiskMockup/>
        </section>

        {/* Features grid */}
        <section style={{ padding: "120px 40px 60px", maxWidth: 1280, margin: "0 auto" }}>
          <div style={{ textAlign: "center", marginBottom: 48 }}>
            <div className="cap" style={{ marginBottom: 8 }}>Everything you need</div>
            <h2 style={{ margin: 0, fontSize: "clamp(2rem, 4vw, 3rem)", fontWeight: 700, letterSpacing: "-0.02em" }}>
              Nine features. Zero bloat.
            </h2>
            <p style={{ margin: "12px auto 0", maxWidth: 560, fontSize: 15.5, color: "var(--text-secondary)" }}>
              Built by developers for developers. Every feature earned its place.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }}>
            {featuresList.map((f, i) => <FeatureCard key={i} {...f}/>)}
          </div>
        </section>

        {/* Live demos */}
        <section style={{ padding: "60px 40px", maxWidth: 1280, margin: "0 auto" }}>
          <div style={{ marginBottom: 32 }}>
            <div className="cap" style={{ marginBottom: 8 }}>Real interactions</div>
            <h2 style={{ margin: 0, fontSize: "clamp(2rem, 4vw, 3rem)", fontWeight: 700, letterSpacing: "-0.02em" }}>
              Watch it work.
            </h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 18 }}>
            <DemoCard kicker="Treemap" title="See storage at a glance.">
              <TreemapDemo/>
            </DemoCard>
            <DemoCard kicker="Gauge" title="Animated on every scan.">
              <GaugeDemo/>
            </DemoCard>
            <DemoCard kicker="Menu bar" title="Quick clean from anywhere.">
              <MenuBarDemo/>
            </DemoCard>
            <DemoCard kicker="Duplicate finder" title="Three-pass verification.">
              <DuplicateDemo/>
            </DemoCard>
          </div>
        </section>

        {/* Comparison */}
        <section style={{ padding: "80px 40px", maxWidth: 1100, margin: "0 auto" }}>
          <div style={{ textAlign: "center", marginBottom: 36 }}>
            <div className="cap" style={{ marginBottom: 8 }}>Side by side</div>
            <h2 style={{ margin: 0, fontSize: "clamp(2rem, 4vw, 3rem)", fontWeight: 700, letterSpacing: "-0.02em" }}>
              The honest comparison.
            </h2>
          </div>
          <div className="surface" style={{ padding: 0, overflow: "hidden" }}>
            <table style={{ width: "100%", borderCollapse: "collapse" }}>
              <thead>
                <tr>
                  <th style={{ padding: "20px 18px", textAlign: "left", fontSize: 11, fontWeight: 600, color: "var(--text-tertiary)", textTransform: "uppercase", letterSpacing: "0.08em" }}>Feature</th>
                  <th style={{ padding: "20px 18px", textAlign: "center", fontSize: 13, fontWeight: 700 }}>
                    <div style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
                      <AppIcon size={22}/> MacFleek
                    </div>
                  </th>
                  <th style={{ padding: "20px 18px", textAlign: "center", fontSize: 13, fontWeight: 500, color: "var(--text-tertiary)" }}>
                    The other one
                  </th>
                </tr>
              </thead>
              <tbody>
                <ComparisonRow label="Price" mac="$29 lifetime" cmm="$89/year" highlight/>
                <ComparisonRow label="Open source" mac={<Yes/>} cmm={<No/>}/>
                <ComparisonRow label="Telemetry" mac="None" cmm="Yes"/>
                <ComparisonRow label="Cleanup rules" mac="169" cmm="~50" highlight/>
                <ComparisonRow label="Disk Treemap" mac={<Yes/>} cmm={<No/>}/>
                <ComparisonRow label="Full CLI access" mac={<Yes/>} cmm="Limited"/>
                <ComparisonRow label="9-level uninstall heuristic" mac={<Yes/>} cmm={<No/>}/>
                <ComparisonRow label="Panic pop-ups" mac="Never" cmm="Yes"/>
                <ComparisonRow label="Languages" mac="9" cmm="~12"/>
              </tbody>
            </table>
          </div>
        </section>

        {/* Pricing */}
        <section style={{ padding: "80px 40px", maxWidth: 980, margin: "0 auto" }}>
          <div style={{ textAlign: "center", marginBottom: 40 }}>
            <div className="cap" style={{ marginBottom: 8 }}>One price. Forever.</div>
            <h2 style={{ margin: 0, fontSize: "clamp(2rem, 4vw, 3rem)", fontWeight: 700, letterSpacing: "-0.02em" }}>
              Pricing
            </h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
            <PricingCard
              tier="Free"
              price="0"
              period="forever"
              features={[
                "Smart Scan · 169 rules",
                "App Uninstaller · full heuristic",
                "Orphan Finder",
                "Menu bar quick actions",
                "Maintenance toolkit",
              ]}
              cta="Download free"
            />
            <PricingCard
              tier="Pro"
              price="29"
              period="lifetime"
              highlight
              features={[
                "Everything in Free",
                "Disk Treemap (squarified)",
                "Duplicate Finder · 3-pass",
                "Smart App Updater",
                "Priority email support",
                "All future updates · forever",
              ]}
              cta="Buy MacFleek Pro · $29"
            />
          </div>
          <div style={{ textAlign: "center", marginTop: 20, fontSize: 12, color: "var(--text-tertiary)", display: "flex", justifyContent: "center", gap: 18, flexWrap: "wrap" }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}><Icon name="shield" size={12}/> 14-day refund · no questions</span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}><Icon name="lock" size={12}/> Encrypted checkout · Stripe</span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}><Icon name="infinity" size={12}/> No subscription, ever</span>
          </div>
        </section>

        {/* FAQ */}
        <section style={{ padding: "80px 40px", maxWidth: 820, margin: "0 auto" }}>
          <div style={{ textAlign: "center", marginBottom: 40 }}>
            <div className="cap" style={{ marginBottom: 8 }}>Frequently asked</div>
            <h2 style={{ margin: 0, fontSize: "clamp(2rem, 4vw, 3rem)", fontWeight: 700, letterSpacing: "-0.02em" }}>
              Answers, not marketing.
            </h2>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            <FAQItem defaultOpen
              q="Is MacFleek really safe? CleanMyMac scares me."
              a="Every action MacFleek takes is reversible — items go to Trash, not /dev/null. The 169 rules are conservative: when in doubt we skip. Source code is public; audit it yourself. No surprise system modifications, no kernel extensions."
            />
            <FAQItem
              q="Why $29 lifetime when CleanMyMac charges $89/year?"
              a="Because we don't need recurring revenue to justify CEO bonuses. Open source means low overhead; one-time pricing aligns our incentives with shipping good software, not addicting you to a subscription."
            />
            <FAQItem
              q="What's the difference between Free and Pro?"
              a="Free covers the 90% case: scan, clean, uninstall. Pro adds the deep-dive visual tools — treemap and duplicate finder — plus the app updater. If you live in your home folder, you want Pro."
            />
            <FAQItem
              q="I'm in Russia. Will the checkout work?"
              a="Yes. We support international cards, Russian cards (МИР, СБП), and crypto. Region is auto-detected; you can override it on the checkout page."
            />
            <FAQItem
              q="Do you collect any data at all?"
              a="No telemetry. No analytics. No phone-home for updates (we use Sparkle which checks a static JSON). Network access is opt-in for the app updater and is shown plainly in the toolbar."
            />
          </div>
        </section>

        {/* Footer removed — production uses /shell.js SiteFooter at the page root.
            The prototype's internal footer was for the design-system browser context only. */}
      </div>
    </div>
  );
};

Object.assign(window, { LandingView });