import { useState } from "react";
import {
  Instagram, Youtube, Facebook, Twitter, Check, ChevronRight, ChevronLeft,
  ArrowRight, FolderOpen, Cloud, Smartphone, RefreshCw, FileText, Sparkles,
  Code2, UtensilsCrossed, Lightbulb, Lock, Infinity as Inf, Download, X,
  FolderPlus, Folder, Plus, ShieldCheck, TrendingUp, CornerDownRight
} from "lucide-react";

const CSS = `
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root{
  --bg:#0B0E0C; --bg2:#11140F; --panel:#15191400; 
  --card:#161A16; --card2:#1C211C; --line:rgba(255,255,255,.07);
  --line2:rgba(255,255,255,.12);
  --txt:#EDEFEC; --mut:#8B938B; --dim:#5C645C;
  --green:#14452F; --green2:#1E5C3F; --bright:#3FA77E; --brightT:rgba(63,167,126,.16);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sift-root{font-family:'Hanken Grotesk',sans-serif;background:var(--bg);min-height:100vh;
  display:flex;justify-content:center;color:var(--txt)}
.serif{font-family:'Fraunces',serif;font-weight:500;letter-spacing:-.01em}

.app{position:relative;width:100%;max-width:440px;height:100vh;height:100dvh;
  background:var(--bg);overflow:hidden}
.screen{position:absolute;inset:0;padding:44px 26px 30px;display:flex;flex-direction:column;
  overflow:hidden;animation:slide .42s cubic-bezier(.22,1,.36,1)}
.screen.scroll{overflow-y:auto}
.screen::-webkit-scrollbar{display:none}
@keyframes slide{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes glow{0%,100%{box-shadow:0 0 40px rgba(63,167,126,.25)}50%{box-shadow:0 0 70px rgba(63,167,126,.45)}}

.bg-orb{position:absolute;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,var(--green2),transparent 68%);filter:blur(40px);
  opacity:.45;top:-90px;right:-110px;z-index:0;pointer-events:none}

.brand-mark{width:64px;height:64px;border-radius:19px;display:flex;align-items:center;
  justify-content:center;background:linear-gradient(145deg,var(--green2),var(--green));
  box-shadow:0 12px 40px rgba(20,69,47,.6);animation:glow 4s ease-in-out infinite}
.logo-row{display:flex;align-items:center;gap:11px}
.logo-name{font-size:23px;font-weight:600;letter-spacing:-.02em}

h1.title{font-size:32px;line-height:1.08;margin:0 0 12px;font-weight:500}
.sub{color:var(--mut);font-size:15px;line-height:1.5;margin:0 0 26px}
.eyebrow{color:var(--bright);font-size:12.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;margin-bottom:14px}

.btn{width:100%;border:none;border-radius:16px;padding:17px;font-family:inherit;font-size:16px;
  font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .15s,filter .15s}
.btn:active{transform:scale(.975)}
.btn-primary{background:linear-gradient(135deg,var(--bright),var(--green2));color:#04140C}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:var(--card);color:var(--txt);border:1px solid var(--line2)}
.btn-ghost:hover{background:var(--card2)}

.field{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 16px;
  margin-bottom:13px}
.field label{display:block;font-size:11.5px;color:var(--dim);font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;margin-bottom:5px}
.field input{width:100%;background:none;border:none;outline:none;color:var(--txt);font-size:16px;
  font-family:inherit}
.field input::placeholder{color:var(--dim)}
.field:focus-within{border-color:var(--bright)}

.choice{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:18px;margin-bottom:12px;cursor:pointer;text-align:left;width:100%;
  font-family:inherit;color:var(--txt);transition:.18s;animation:rise .5s both}
.choice:hover{border-color:var(--line2);background:var(--card2)}
.choice.sel{border-color:var(--bright);background:var(--brightT)}
.ic-wrap{width:44px;height:44px;border-radius:12px;background:var(--bg2);display:flex;
  align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--line)}
.choice .ti{font-size:15.5px;font-weight:600}
.choice .de{font-size:13px;color:var(--mut);margin-top:2px;line-height:1.35}

.step-checklist{display:flex;flex-direction:column;gap:12px;margin:8px 0 24px}
.check-item{display:flex;gap:14px;align-items:flex-start;background:var(--card);
  border:1px solid var(--line);border-radius:15px;padding:15px 16px;animation:rise .5s both}
.num{width:27px;height:27px;border-radius:50%;background:var(--green2);color:#04140C;font-weight:700;
  font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.num.done{background:var(--bright)}
.check-item .ti{font-size:14.5px;font-weight:600}
.check-item .de{font-size:12.5px;color:var(--mut);line-height:1.4;margin-top:3px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.src{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:15px;
  cursor:pointer;transition:.18s;animation:rise .5s both}
.src:hover{border-color:var(--line2)}
.src.on{border-color:var(--bright);background:var(--brightT)}
.src .srow{display:flex;align-items:center;justify-content:space-between}
.src .pname{font-size:14px;font-weight:600;margin-top:11px}
.dot{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line2);display:flex;
  align-items:center;justify-content:center}
.dot.on{background:var(--bright);border-color:var(--bright)}

.progress{display:flex;gap:6px;margin-bottom:26px}
.progress span{height:3px;flex:1;border-radius:2px;background:var(--line)}
.progress span.a{background:var(--bright)}

.back{position:absolute;top:40px;left:22px;width:38px;height:38px;border-radius:50%;
  background:var(--card);border:1px solid var(--line);display:flex;align-items:center;
  justify-content:center;cursor:pointer;z-index:30;color:var(--txt)}
.back:hover{background:var(--card2)}

.vault-card{background:linear-gradient(150deg,var(--card2),var(--card));border:1px solid var(--line2);
  border-radius:20px;padding:20px;display:flex;align-items:center;gap:15px;margin-bottom:14px}
.vault-card .vc-ic{width:48px;height:48px;border-radius:13px;background:var(--brightT);
  display:flex;align-items:center;justify-content:center;color:var(--bright)}

/* plan */
.plan{border:1px solid var(--line);border-radius:20px;padding:22px;margin-bottom:14px;background:var(--card)}
.plan.pro{border-color:var(--bright);background:linear-gradient(160deg,var(--brightT),var(--card));
  position:relative;overflow:hidden}
.plan.pro::after{content:'';position:absolute;width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle,rgba(63,167,126,.35),transparent 70%);top:-60px;right:-50px}
.plan .pl-name{font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
.plan.pro .pl-name{color:var(--bright)}
.plan .price{font-size:34px;font-weight:600;margin:6px 0 2px}
.plan .price small{font-size:15px;color:var(--mut);font-weight:500}
.feat{display:flex;align-items:center;gap:10px;font-size:13.5px;margin-top:11px;color:var(--txt)}
.feat svg{color:var(--bright);flex-shrink:0}

/* dashboard */
.dash-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.proBadge{font-size:10.5px;font-weight:700;letter-spacing:.08em;color:#04140C;
  background:linear-gradient(135deg,var(--bright),var(--green2));padding:4px 9px;border-radius:7px}
.statbar{display:flex;gap:10px;margin:16px 0 18px}
.stat{flex:1;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 14px}
.stat .n{font-size:21px;font-weight:600;font-family:'Fraunces',serif}
.stat .l{font-size:11px;color:var(--mut);margin-top:2px}
.post{display:flex;gap:13px;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:15px;padding:13px;margin-bottom:10px;animation:rise .5s both}
.post .p-ic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;flex-shrink:0}
.post .p-t{font-size:14px;font-weight:600;line-height:1.25}
.post .p-meta{display:flex;gap:7px;align-items:center;margin-top:5px}
.tag{font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:6px;display:inline-flex;
  align-items:center;gap:4px}
.tag.code{background:rgba(99,160,255,.14);color:#7FB2FF}
.tag.food{background:rgba(255,170,90,.14);color:#FFB36B}
.tag.insp{background:rgba(63,167,126,.16);color:var(--bright)}
.status{font-size:11px;color:var(--mut);display:flex;align-items:center;gap:5px;margin-left:auto;
  white-space:nowrap}
.status.sync{color:var(--bright)}
.spin{animation:spin 1s linear infinite}

.tip{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px 15px;
  font-size:12.5px;color:var(--mut);line-height:1.5;display:flex;gap:10px;margin-bottom:14px}
.tip svg{color:var(--bright);flex-shrink:0;margin-top:1px}
.spacer{flex:1;min-height:14px}
.center{text-align:center;align-items:center;justify-content:center}

/* smart-sort sheet */
.smart-btn{display:flex;align-items:center;gap:11px;width:100%;text-align:left;font-family:inherit;
  background:linear-gradient(135deg,var(--brightT),var(--card));border:1px solid rgba(63,167,126,.3);
  border-radius:15px;padding:13px 14px;color:var(--txt);cursor:pointer;margin:8px 0 16px}
.smart-btn:hover{border-color:var(--bright)}
.smart-btn .sb-ic{width:36px;height:36px;border-radius:10px;background:var(--bright);color:#04140C;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.smart-btn .ti{font-size:13.5px;font-weight:600}
.smart-btn .de{font-size:11.5px;color:var(--mut)}
.scrim{position:absolute;inset:0;z-index:60;background:rgba(4,7,5,.6);backdrop-filter:blur(3px);
  animation:fade .25s both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:61;background:var(--bg2);
  border-top:1px solid var(--line2);border-radius:26px 26px 46px 46px;padding:14px 22px 30px;
  box-shadow:0 -20px 60px rgba(0,0,0,.6);animation:sheetUp .42s cubic-bezier(.22,1,.36,1) both;
  max-height:86%;overflow-y:auto}
.sheet::-webkit-scrollbar{display:none}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
.handle{width:38px;height:4px;border-radius:3px;background:var(--line2);margin:2px auto 16px}
.sheet-ey{color:var(--bright);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  display:flex;align-items:center;gap:7px;margin-bottom:10px}
.sheet h2{font-size:21px;font-weight:600;letter-spacing:-.01em;margin-bottom:6px;font-family:'Fraunces',serif}
.sheet .lead{font-size:13.5px;color:var(--mut);line-height:1.5;margin-bottom:16px}
.detect{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:13px;margin-bottom:14px}
.detect .d-ic{width:38px;height:38px;border-radius:10px;background:var(--bg);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.newpill{font-size:9.5px;font-weight:700;letter-spacing:.06em;color:#04140C;background:var(--bright);
  padding:3px 7px;border-radius:6px;margin-left:auto;flex-shrink:0}
.catrow{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:13px;padding:13px 14px;margin-bottom:9px;cursor:pointer;width:100%;font-family:inherit;
  color:var(--txt);text-align:left;transition:.16s;animation:rise .4s both}
.catrow:hover{border-color:var(--line2);background:var(--card2)}
.catrow.sel{border-color:var(--bright);background:var(--brightT)}
.catrow .c-ic{color:var(--bright)}
.catrow .ti{font-size:14px;font-weight:600}
.catrow .de{font-size:11.5px;color:var(--mut);margin-top:1px}
.tree{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;line-height:1.9;color:var(--mut);
  background:var(--card);border:1px solid var(--line);border-radius:13px;padding:14px 16px;margin-bottom:16px}
.tree .root{color:var(--txt)}
.tree .new{color:var(--bright);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chip{font-family:inherit;font-size:12.5px;font-weight:500;padding:8px 13px;border-radius:100px;
  border:1px solid var(--line2);background:var(--card);color:var(--txt);cursor:pointer;display:flex;align-items:center;gap:6px}
.chip:hover,.chip.sel{border-color:var(--bright);background:var(--brightT);color:var(--bright)}
.perm-note{font-size:11.5px;color:var(--dim);display:flex;gap:8px;align-items:flex-start;margin-top:6px;line-height:1.45}
.perm-note svg{flex-shrink:0;margin-top:1px;color:var(--bright)}
.sheet-actions{display:flex;gap:10px;margin-top:6px}
.sheet-actions .btn{flex:1;padding:15px}
.done-ic{width:64px;height:64px;border-radius:20px;margin:6px auto 16px;display:flex;align-items:center;
  justify-content:center;background:linear-gradient(145deg,var(--bright),var(--green2));
  animation:glow 3s ease-in-out infinite}
`;

// minimal brand glyphs not in lucide
const TikTok = ({ s = 20, c = "#fff" }) => (
  <svg width={s} height={s} viewBox="0 0 24 24" fill={c}><path d="M16.6 5.82a4.28 4.28 0 0 1-1.06-2.82h-3.1v12.4a2.5 2.5 0 1 1-2.5-2.5c.2 0 .4.03.6.08V9.8a5.6 5.6 0 0 0-.6-.03A5.56 5.56 0 1 0 15.5 15.4V9.1a7.3 7.3 0 0 0 4.3 1.38V7.4a4.28 4.28 0 0 1-3.2-1.58z"/></svg>
);
const Snap = ({ s = 20, c = "#fff" }) => (
  <svg width={s} height={s} viewBox="0 0 24 24" fill={c}><path d="M12 2c2.7 0 4.5 2 4.6 4.7 0 .6-.04 1.3-.07 1.9.3.16.7.1 1.1-.06.2-.07.5-.04.66.16.2.27.07.6-.2.77-.3.2-.86.33-1.2.6-.2.16-.13.4-.04.66.4 1.1 1.3 2 2.4 2.5.3.13.5.3.43.6-.1.45-.86.6-1.27.7-.2.05-.3.1-.34.34-.03.2-.1.43-.4.43-.4 0-.8-.2-1.4-.2-.55 0-.9.12-1.4.5-.6.45-1.27.96-2.6.96s-2-.5-2.6-.96c-.5-.38-.85-.5-1.4-.5-.6 0-1 .2-1.4.2-.3 0-.37-.23-.4-.43-.04-.24-.14-.3-.34-.34-.4-.1-1.17-.25-1.27-.7-.07-.3.13-.47.43-.6 1.1-.5 2-1.4 2.4-2.5.1-.26.16-.5-.04-.66-.34-.27-.9-.4-1.2-.6-.27-.17-.4-.5-.2-.77.16-.2.46-.23.66-.16.4.16.8.22 1.1.06-.03-.6-.07-1.3-.07-1.9C7.5 4 9.3 2 12 2z"/></svg>
);

const PLATFORMS = [
  { id: "ig", name: "Instagram", color: "#E1306C", Icon: (p) => <Instagram {...p} /> },
  { id: "tt", name: "TikTok", color: "#fff", Icon: (p) => <TikTok s={p.size} c={p.color} /> },
  { id: "yt", name: "YouTube", color: "#FF0033", Icon: (p) => <Youtube {...p} /> },
  { id: "x", name: "X", color: "#fff", Icon: (p) => <Twitter {...p} /> },
  { id: "fb", name: "Facebook", color: "#1877F2", Icon: (p) => <Facebook {...p} /> },
  { id: "sc", name: "Snapchat", color: "#FFFC00", Icon: (p) => <Snap s={p.size} c={p.color} /> },
];

export default function SiftApp() {
  const [step, setStep] = useState(0);
  const [usesObsidian, setUsesObsidian] = useState(null);
  const [acct, setAcct] = useState({ name: "", email: "" });
  const [vaultMethod, setVaultMethod] = useState(null);
  const [vaultConnected, setVaultConnected] = useState(false);
  const [sources, setSources] = useState({ ig: true, tt: true, yt: false, x: false, fb: false, sc: false });
  const [plan, setPlan] = useState(null);
  const [sheet, setSheet] = useState(null);   // null | detect | created | choose | sub | done
  const [chosenCat, setChosenCat] = useState(null);
  const [subPick, setSubPick] = useState(null);
  const openSheet = () => { setSheet("detect"); setChosenCat(null); setSubPick(null); };
  const closeSheet = () => setSheet(null);

  const go = (n) => setStep(n);
  const toggleSrc = (id) => setSources((s) => ({ ...s, [id]: !s[id] }));

  const Bar = ({ n, total = 6 }) => (
    <div className="progress">{Array.from({ length: total }).map((_, i) =>
      <span key={i} className={i < n ? "a" : ""} />)}</div>
  );
  const Back = ({ to }) => (
    <div className="back" onClick={() => go(to)}><ChevronLeft size={19} /></div>
  );

  const screens = {
    // 0 — welcome
    0: (
      <div className="screen center" key="s0">
        <div className="bg-orb" />
        <div className="brand-mark" style={{ width: 76, height: 76, borderRadius: 22 }}>
          <Sparkles size={34} color="#EAFBF2" />
        </div>
        <div className="logo-name serif" style={{ fontSize: 30, marginTop: 22 }}>Sift</div>
        <p className="sub center" style={{ maxWidth: 270, marginTop: 10 }}>
          Save anything you watch. We turn it into clean Markdown, straight into your Obsidian vault.
        </p>
        <div style={{ flex: 1 }} />
        <button className="btn btn-primary" onClick={() => go(1)}>
          Get started <ArrowRight size={18} />
        </button>
        <button className="btn btn-ghost" style={{ marginTop: 11 }} onClick={() => go(1)}>
          I already have an account
        </button>
      </div>
    ),
    // 1 — account wizard p1
    1: (
      <div className="screen" key="s1">
        <Back to={0} />
        <Bar n={1} />
        <div className="eyebrow">Create account · 1 of 2</div>
        <h1 className="title serif">Let's set up<br />your profile</h1>
        <p className="sub">Your vault stays yours — Sift only writes the notes you send it.</p>
        <div className="field">
          <label>Full name</label>
          <input placeholder="Justus" value={acct.name}
            onChange={(e) => setAcct({ ...acct, name: e.target.value })} />
        </div>
        <div className="field">
          <label>Email</label>
          <input placeholder="you@dailyform.ai" value={acct.email}
            onChange={(e) => setAcct({ ...acct, email: e.target.value })} />
        </div>
        <div className="spacer" />
        <button className="btn btn-primary" onClick={() => go(2)}>Continue <ChevronRight size={18} /></button>
      </div>
    ),
    // 2 — account wizard p2
    2: (
      <div className="screen" key="s2">
        <Back to={1} />
        <Bar n={2} />
        <div className="eyebrow">Create account · 2 of 2</div>
        <h1 className="title serif">Secure it</h1>
        <p className="sub">Use a passkey for sign-in — no password to remember.</p>
        <div className="field"><label>Password</label><input type="password" placeholder="••••••••••" /></div>
        <button className="btn btn-ghost" style={{ marginTop: 4 }}>
          <Lock size={16} /> Use Face ID / Passkey instead
        </button>
        <div className="spacer" />
        <button className="btn btn-primary" onClick={() => go(3)}>Create account <ArrowRight size={18} /></button>
      </div>
    ),
    // 3 — obsidian question (the branch)
    3: (
      <div className="screen" key="s3">
        <Back to={2} />
        <div className="eyebrow" style={{ marginTop: 8 }}>Onboarding</div>
        <h1 className="title serif">Do you already<br />use Obsidian?</h1>
        <p className="sub">This tailors the next steps. No wrong answer.</p>
        <button className={"choice" + (usesObsidian === true ? " sel" : "")}
          style={{ animationDelay: ".05s" }}
          onClick={() => { setUsesObsidian(true); go(4); }}>
          <div className="ic-wrap"><Check size={20} color="#3FA77E" /></div>
          <div><div className="ti">Yes, I use it daily</div>
            <div className="de">I have a vault already — let's connect it.</div></div>
          <ChevronRight size={18} color="#5C645C" style={{ marginLeft: "auto" }} />
        </button>
        <button className={"choice" + (usesObsidian === false ? " sel" : "")}
          style={{ animationDelay: ".12s" }}
          onClick={() => { setUsesObsidian(false); go(4); }}>
          <div className="ic-wrap"><Sparkles size={20} color="#8B938B" /></div>
          <div><div className="ti">Not yet — I'm new</div>
            <div className="de">Walk me through setting Obsidian up first.</div></div>
          <ChevronRight size={18} color="#5C645C" style={{ marginLeft: "auto" }} />
        </button>
      </div>
    ),
    // 4 — adapted steps
    4: usesObsidian ? (
      <div className="screen" key="s4y">
        <Back to={3} />
        <Bar n={4} />
        <div className="eyebrow">Connect vault</div>
        <h1 className="title serif">Three quick taps</h1>
        <p className="sub">Sift writes notes into a folder your vault already syncs.</p>
        <div className="step-checklist">
          {[
            ["Pick your storage", "iCloud Drive, On-device, or Obsidian Sync.", true],
            ["Point Sift at the vault folder", "Choose the folder Obsidian opens as your vault.", false],
            ["Confirm a Sift subfolder", "We create /Sift Inbox so nothing else is touched.", false],
          ].map(([t, d, done], i) => (
            <div className="check-item" key={i} style={{ animationDelay: `${i * .07}s` }}>
              <div className={"num" + (done ? " done" : "")}>{done ? <Check size={15} /> : i + 1}</div>
              <div><div className="ti">{t}</div><div className="de">{d}</div></div>
            </div>
          ))}
        </div>
        <button className="btn btn-primary" onClick={() => go(5)}>Choose storage <ChevronRight size={18} /></button>
      </div>
    ) : (
      <div className="screen" key="s4n">
        <Back to={3} />
        <Bar n={4} />
        <div className="eyebrow">Set up Obsidian first</div>
        <h1 className="title serif">No problem —<br />here's the plan</h1>
        <p className="sub">Obsidian is a free notes app. Five minutes and you're set.</p>
        <div className="step-checklist">
          {[
            ["Download Obsidian", "Free on the App Store. Tap to open the listing."],
            ["Create a vault", "Name it anything — e.g. \"Brain\". Store it in iCloud Drive."],
            ["Come back to Sift", "We'll detect the vault and link it automatically."],
          ].map(([t, d], i) => (
            <div className="check-item" key={i} style={{ animationDelay: `${i * .07}s` }}>
              <div className="num">{i + 1}</div>
              <div><div className="ti">{t}</div><div className="de">{d}</div></div>
            </div>
          ))}
        </div>
        <button className="btn btn-ghost"><Download size={16} /> Open Obsidian in App Store</button>
        <div style={{ height: 10 }} />
        <button className="btn btn-primary" onClick={() => go(5)}>I've created a vault <ChevronRight size={18} /></button>
      </div>
    ),
    // 5 — vault connect
    5: (
      <div className="screen" key="s5">
        <Back to={4} />
        <Bar n={5} />
        <div className="eyebrow">Connect vault</div>
        <h1 className="title serif">Where's your vault?</h1>
        <p className="sub">Pick how your vault is stored so Sift can sync to it.</p>
        {[
          ["icloud", Cloud, "iCloud Drive", "Recommended — syncs across all your devices."],
          ["local", Smartphone, "On my iPhone", "Stored locally in the Files app."],
          ["sync", RefreshCw, "Obsidian Sync", "Use your existing Obsidian Sync remote."],
        ].map(([id, Ic, t, d], i) => (
          <button key={id} className={"choice" + (vaultMethod === id ? " sel" : "")}
            style={{ animationDelay: `${i * .06}s` }}
            onClick={() => { setVaultMethod(id); setVaultConnected(true); }}>
            <div className="ic-wrap"><Ic size={20} color={vaultMethod === id ? "#3FA77E" : "#8B938B"} /></div>
            <div><div className="ti">{t}</div><div className="de">{d}</div></div>
            <div className={"dot" + (vaultMethod === id ? " on" : "")} style={{ marginLeft: "auto" }}>
              {vaultMethod === id && <Check size={13} color="#04140C" />}</div>
          </button>
        ))}
        {vaultConnected && (
          <div className="vault-card" style={{ marginTop: 6, animation: "rise .4s both" }}>
            <div className="vc-ic"><FolderOpen size={22} /></div>
            <div><div style={{ fontSize: 14, fontWeight: 600 }}>Brain / Sift Inbox</div>
              <div style={{ fontSize: 12, color: "#3FA77E", display: "flex", alignItems: "center", gap: 5, marginTop: 2 }}>
                <Check size={13} /> Connected & writable</div></div>
          </div>
        )}
        <div className="spacer" />
        <button className="btn btn-primary" disabled={!vaultConnected}
          style={{ opacity: vaultConnected ? 1 : .4 }} onClick={() => go(6)}>
          Continue <ChevronRight size={18} /></button>
      </div>
    ),
    // 6 — sources
    6: (
      <div className="screen" key="s6">
        <Back to={5} />
        <Bar n={6} />
        <div className="eyebrow">Sources</div>
        <h1 className="title serif">What do you<br />save from?</h1>
        <p className="sub">Toggle the apps you use. You can change this anytime.</p>
        <div className="grid2">
          {PLATFORMS.map((p, i) => (
            <button key={p.id} className={"src" + (sources[p.id] ? " on" : "")}
              style={{ animationDelay: `${i * .05}s` }} onClick={() => toggleSrc(p.id)}>
              <div className="srow">
                <p.Icon size={22} color={p.color} />
                <div className={"dot" + (sources[p.id] ? " on" : "")}>
                  {sources[p.id] && <Check size={13} color="#04140C" />}</div>
              </div>
              <div className="pname">{p.name}</div>
            </button>
          ))}
        </div>
        <div className="tip" style={{ marginTop: 16 }}>
          <Sparkles size={16} />
          <span>To save a post, just tap <b style={{ color: "#EDEFEC" }}>Share → Sift</b> inside any of these apps. The note appears in your vault seconds later.</span>
        </div>
        <button className="btn btn-primary" onClick={() => go(7)}>Continue <ChevronRight size={18} /></button>
      </div>
    ),
    // 7 — pro plan
    7: (
      <div className="screen" key="s7">
        <Back to={6} />
        <div className="eyebrow" style={{ marginTop: 8 }}>Plans</div>
        <h1 className="title serif">Save without limits</h1>
        <p className="sub">Start free. Go Pro when your brain gets hungry.</p>
        <div className={"plan" + (plan === "free" ? "" : "")} onClick={() => setPlan("free")}
          style={{ borderColor: plan === "free" ? "var(--line2)" : "var(--line)" }}>
          <div className="pl-name">Free</div>
          <div className="price">€0</div>
          <div className="feat"><Check size={16} /> 20 Markdown conversions / month</div>
          <div className="feat"><Check size={16} /> 1 vault, all 6 platforms</div>
        </div>
        <div className="plan pro" onClick={() => setPlan("pro")}
          style={{ outline: plan === "pro" ? "1px solid var(--bright)" : "none" }}>
          <div className="pl-name">Sift Pro</div>
          <div className="price">€6,99<small> / month</small></div>
          <div className="feat"><Inf size={16} /> Unlimited conversions</div>
          <div className="feat"><Check size={16} /> Auto-tagging & smart categories</div>
          <div className="feat"><Check size={16} /> Full transcripts + on-screen text (OCR)</div>
          <div className="feat"><Check size={16} /> Multiple vaults & custom templates</div>
        </div>
        <div className="spacer" />
        <button className="btn btn-primary" onClick={() => { setPlan("pro"); go(8); }}>
          <Sparkles size={17} /> Start Pro — 7 days free</button>
        <button className="btn btn-ghost" style={{ marginTop: 10 }} onClick={() => { setPlan("free"); go(8); }}>
          Continue with Free</button>
      </div>
    ),
    // 8 — dashboard
    8: (
      <div className="screen scroll" key="s8">
        <div className="bg-orb" style={{ opacity: .3 }} />
        <div className="dash-head">
          <div className="logo-row">
            <div className="brand-mark" style={{ width: 38, height: 38, borderRadius: 12 }}>
              <Sparkles size={19} color="#EAFBF2" /></div>
            <div className="logo-name" style={{ fontSize: 19 }}>Sift</div>
          </div>
          {plan === "pro"
            ? <span className="proBadge">PRO</span>
            : <span style={{ fontSize: 12, color: "#8B938B" }}>Free · 14 left</span>}
        </div>
        <div style={{ fontSize: 13, color: "#3FA77E", display: "flex", alignItems: "center", gap: 6, marginTop: 8 }}>
          <Check size={14} /> Synced to Brain / Sift Inbox
        </div>
        <button className="smart-btn" onClick={openSheet}>
          <div className="sb-ic"><FolderPlus size={18} /></div>
          <div><div className="ti">New save needs sorting</div>
            <div className="de">Tap to see Sift's smart-folder request</div></div>
          <ChevronRight size={18} color="#5C645C" style={{ marginLeft: "auto" }} />
        </button>
        <div className="statbar">
          <div className="stat"><div className="n">128</div><div className="l">Notes saved</div></div>
          <div className="stat"><div className="n">6</div><div className="l">Sources</div></div>
          <div className="stat"><div className="n">{plan === "pro" ? "∞" : "14"}</div><div className="l">Left</div></div>
        </div>
        <div style={{ fontSize: 13, fontWeight: 600, color: "#8B938B", marginBottom: 10 }}>Recent</div>
        {[
          { p: "ig", t: "Next.js server actions pattern", tag: "code", st: "Saved", icon: <Instagram size={20} color="#E1306C" /> },
          { p: "tt", t: "30-min high-protein ramen", tag: "food", st: "sync", icon: <TikTok s={20} c="#fff" /> },
          { p: "yt", t: "Local LLM agents with Ollama", tag: "code", st: "Saved", icon: <Youtube size={20} color="#FF0033" /> },
          { p: "x", t: "Thread: founder positioning", tag: "insp", st: "Saved", icon: <Twitter size={20} color="#fff" /> },
        ].map((it, i) => (
          <div className="post" key={i} style={{ animationDelay: `${i * .08}s` }}>
            <div className="p-ic" style={{ background: "var(--bg2)", border: "1px solid var(--line)" }}>{it.icon}</div>
            <div style={{ minWidth: 0 }}>
              <div className="p-t">{it.t}</div>
              <div className="p-meta">
                <span className={"tag " + it.tag}>
                  {it.tag === "code" && <Code2 size={11} />}
                  {it.tag === "food" && <UtensilsCrossed size={11} />}
                  {it.tag === "insp" && <Lightbulb size={11} />}
                  {it.tag === "code" ? "Coding" : it.tag === "food" ? "Recipe" : "Inspiration"}
                </span>
              </div>
            </div>
            {it.st === "sync"
              ? <div className="status sync"><RefreshCw size={12} className="spin" /> Converting</div>
              : <div className="status"><FileText size={12} /> .md</div>}
          </div>
        ))}
        <div className="spacer" />
        <button className="btn btn-ghost" onClick={() => go(0)}>
          <RefreshCw size={15} /> Restart demo</button>
      </div>
    ),
  };

  const CATS = [
    { id: "coding", name: "Coding", icon: <Code2 size={18} />, subs: ["Next.js", "Prisma", "AI Agents"], suggest: ["React", "DevOps"] },
    { id: "recipes", name: "Recipes", icon: <UtensilsCrossed size={18} />, subs: ["Quick", "High-protein"], suggest: ["Asian", "Baking"] },
    { id: "inspiration", name: "Inspiration", icon: <Lightbulb size={18} />, subs: ["Founder", "Design"], suggest: ["Marketing", "Quotes"] },
    { id: "trading", name: "Trading", icon: <TrendingUp size={18} />, subs: ["Strategies"], suggest: ["Backtesting", "Risk"] },
  ];
  const cat = CATS.find((c) => c.id === chosenCat);

  const PermNote = () => (
    <div className="perm-note"><ShieldCheck size={14} />
      <span>Sift never changes your vault structure without asking. You're the admin.</span></div>
  );

  const Sheet = () => {
    if (!sheet) return null;
    return (
      <>
        <div className="scrim" onClick={closeSheet} />
        <div className="sheet">
          <div className="handle" />

          {sheet === "detect" && (<>
            <div className="sheet-ey"><Sparkles size={13} /> Smart Sort</div>
            <h2>New category detected</h2>
            <p className="lead">Sift analysed your latest save and it doesn't fit any existing folder.</p>
            <div className="detect">
              <div className="d-ic"><Youtube size={18} color="#FF0033" /></div>
              <div><div style={{ fontSize: 13.5, fontWeight: 600 }}>Optuna Bayesian tuning</div>
                <div style={{ fontSize: 11.5, color: "#8B938B" }}>suggested: Algorithmic Trading</div></div>
              <span className="newpill">NEW</span>
            </div>
            <p className="lead" style={{ marginBottom: 12 }}>Create a folder <b style={{ color: "#EDEFEC" }}>“Algorithmic Trading”</b> in your vault?</p>
            <PermNote />
            <div className="sheet-actions" style={{ marginTop: 16 }}>
              <button className="btn btn-ghost" onClick={() => setSheet("choose")}>No, choose existing</button>
              <button className="btn btn-primary" onClick={() => setSheet("created")}>
                <FolderPlus size={16} /> Yes, create</button>
            </div>
          </>)}

          {sheet === "created" && (<>
            <div className="sheet-ey"><Check size={13} /> Folder created</div>
            <h2>“Algorithmic Trading”</h2>
            <p className="lead">Added to your vault. Want a matching subfolder for finer sorting?</p>
            <div className="tree">
              <div className="root">📂 Brain</div>
              <div>&nbsp;&nbsp;└ 📂 Sift Inbox</div>
              <div className="new">&nbsp;&nbsp;&nbsp;&nbsp;└ 📂 Algorithmic Trading ✦</div>
              {subPick && <div className="new">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└ 📂 {subPick} ✦</div>}
            </div>
            <div style={{ fontSize: 12.5, fontWeight: 600, color: "#8B938B", marginBottom: 9 }}>Suggested subfolder</div>
            <div className="chips">
              {["Backtesting", "Optuna", "Strategies"].map((s) => (
                <button key={s} className={"chip" + (subPick === s ? " sel" : "")}
                  onClick={() => setSubPick(s)}><Plus size={13} /> {s}</button>
              ))}
            </div>
            <PermNote />
            <div className="sheet-actions" style={{ marginTop: 16 }}>
              <button className="btn btn-ghost" onClick={() => { setSubPick(null); setSheet("done"); }}>Just the folder</button>
              <button className="btn btn-primary" disabled={!subPick} style={{ opacity: subPick ? 1 : .45 }}
                onClick={() => setSheet("done")}><FolderPlus size={16} /> Create subfolder</button>
            </div>
          </>)}

          {sheet === "choose" && (<>
            <div className="sheet-ey"><FolderOpen size={13} /> Choose existing</div>
            <h2>Pick a category</h2>
            <p className="lead">Sift will file this save into a folder you already have.</p>
            {CATS.map((c, i) => (
              <button key={c.id} className="catrow" style={{ animationDelay: `${i * .05}s` }}
                onClick={() => { setChosenCat(c.id); setSubPick(null); setSheet("sub"); }}>
                <span className="c-ic">{c.icon}</span>
                <div><div className="ti">{c.name}</div>
                  <div className="de">{c.subs.length} subfolders</div></div>
                <ChevronRight size={17} color="#5C645C" style={{ marginLeft: "auto" }} />
              </button>
            ))}
          </>)}

          {sheet === "sub" && cat && (<>
            <div className="sheet-ey">{cat.icon} {cat.name}</div>
            <h2>Save into {cat.name}</h2>
            <p className="lead">Drop it here, or create a new subcategory (a subfolder in Obsidian).</p>
            <div className="tree">
              <div className="root">📂 {cat.name}</div>
              {cat.subs.map((s) => <div key={s}>&nbsp;&nbsp;└ 📂 {s}</div>)}
              {subPick && <div className="new">&nbsp;&nbsp;└ 📂 {subPick} ✦</div>}
            </div>
            <div style={{ fontSize: 12.5, fontWeight: 600, color: "#8B938B", marginBottom: 9 }}>New subcategory</div>
            <div className="chips">
              {cat.suggest.map((s) => (
                <button key={s} className={"chip" + (subPick === s ? " sel" : "")}
                  onClick={() => setSubPick(s)}><Plus size={13} /> {s}</button>
              ))}
            </div>
            <PermNote />
            <div className="sheet-actions" style={{ marginTop: 16 }}>
              <button className="btn btn-ghost" onClick={() => { setSubPick(null); setSheet("done"); }}>Save here</button>
              <button className="btn btn-primary" disabled={!subPick} style={{ opacity: subPick ? 1 : .45 }}
                onClick={() => setSheet("done")}><FolderPlus size={16} /> Create & save</button>
            </div>
          </>)}

          {sheet === "done" && (<>
            <div className="done-ic"><Check size={30} color="#04140C" /></div>
            <h2 style={{ textAlign: "center" }}>Filed away</h2>
            <p className="lead" style={{ textAlign: "center" }}>Your note is saved and the folders exist as real subfolders in Obsidian.</p>
            <div className="tree">
              {chosenCat
                ? (<><div className="root">📂 {cat.name}</div>
                  <div className={subPick ? "new" : ""}>&nbsp;&nbsp;└ 📂 {subPick || cat.subs[0]}{subPick ? " ✦" : ""}</div>
                  <div>&nbsp;&nbsp;&nbsp;&nbsp;└ 📄 optuna-tuning.md</div></>)
                : (<><div className="root">📂 Algorithmic Trading</div>
                  {subPick && <div className="new">&nbsp;&nbsp;└ 📂 {subPick} ✦</div>}
                  <div>{subPick ? "\u00A0\u00A0\u00A0\u00A0" : "\u00A0\u00A0"}└ 📄 optuna-tuning.md</div></>)}
            </div>
            <button className="btn btn-primary" onClick={closeSheet}>Done</button>
          </>)}
        </div>
      </>
    );
  };

  return (
    <div className="sift-root">
      <style>{CSS}</style>
      <div className="app">
        {screens[step]}
        {step === 8 && <Sheet />}
      </div>
    </div>
  );
}


<script defer data-domain="html.cafe" src="https://milkymouse.com/js/script.js"></script>