{/* animated gradient blobs */}

{/* floating platform badges */} {FLOATERS.map((f, i) => { const Icon = f.icon; return (

); })}

Now scheduling to 10 platforms

Social moves faster than your dashboards.

Your social media,
on autopilot.

Write a post once, connect every account you run, and let Recura queue it up for the right time — automatically.

Create a full week of social content in 10 minutes. Grow your audience with Recura's Nexa social media AI.

{[ { icon: Repeat, label: "Recycle Posts", delay: "0s" }, { icon: LayoutTemplate, label: "Inspiration Templates", delay: "0.4s" }, { icon: Rocket, label: "Nexa AI Assist", delay: "0.8s" }, ].map((f, i) => { const Icon = f.icon; return ( {f.label} ); })}

setEmail(e.target.value)} placeholder="Enter your email…" style={{ flex: 1, border: "none", outline: "none", padding: "10px 12px", fontSize: 14, background: "transparent", color: INK }} />

No credit card required. Disconnect anytime.

{/* ---- works-everywhere platform showcase (colorful cards, like the reference) ---- */}

One queue. Every platform.

Connect once and Recura handles the rest, wherever your audience is.

{Object.entries(PLATFORMS).map(([key, p], i) => { const Icon = p.icon; return (

{p.label}

{PLATFORM_BLURB[key]}

); })}

); } /* ============================= LOGIN ============================= */ function Login({ setView, onAuthed, startStep }) { const [mode, setMode] = useState("login"); const [step, setStep] = useState(startStep || "credentials"); // credentials | phone | otp const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [phone, setPhone] = useState(""); const [otp, setOtp] = useState(["", "", "", "", "", ""]); const [error, setError] = useState(false); const [errorMsg, setErrorMsg] = useState(""); const [devCode, setDevCode] = useState(null); // only ever set when the server runs OTP_PROVIDER=dev const [resendIn, setResendIn] = useState(0); const [busy, setBusy] = useState(false); const otpRefs = useRef([]); useEffect(() => { if (resendIn <= 0) return; const t = setInterval(() => setResendIn((s) => Math.max(0, s - 1)), 1000); return () => clearInterval(t); }, [resendIn]); const shake = () => { setError(true); setTimeout(() => setError(false), 400); }; const submitCredentials = async () => { if (!email.trim() || !password.trim()) return shake(); setBusy(true); try { // Try logging in first; if there's no account yet, register instead. let u; try { u = await Api.login(email.trim(), password); } catch (loginErr) { u = await Api.register(email.trim(), password); } setErrorMsg(""); onAuthed && onAuthed(); if (u && u.phone_verified) setView("connect"); else setStep("phone"); } catch (e) { setErrorMsg(e.message || "Something went wrong"); shake(); } finally { setBusy(false); } }; const sendCode = async () => { const digits = phone.replace(/\D/g, ""); if (digits.length < 10) { setErrorMsg("Enter your 10-digit mobile number."); return shake(); } setBusy(true); try { const res = await Api.sendOtp(phone); setDevCode(res.dev_code || null); setErrorMsg(""); setOtp(["", "", "", "", "", ""]); setResendIn(30); setStep("otp"); setTimeout(() => otpRefs.current[0]?.focus(), 50); } catch (e) { setErrorMsg(e.message || "Couldn't send the code."); shake(); } finally { setBusy(false); } }; const updateOtpDigit = (i, val) => { const digit = val.replace(/\D/g, "").slice(-1); setOtp((o) => { const next = [...o]; next[i] = digit; return next; }); if (digit && i < 5) otpRefs.current[i + 1]?.focus(); }; const onOtpKeyDown = (i, e) => { if (e.key === "Backspace" && !otp[i] && i > 0) otpRefs.current[i - 1]?.focus(); }; const verifyOtp = async () => { const entered = otp.join(""); if (entered.length < 6) { setErrorMsg("Enter all 6 digits."); return shake(); } setBusy(true); try { await Api.verifyOtp(phone, entered); setErrorMsg(""); onAuthed && onAuthed(); setView("connect"); } catch (e) { setErrorMsg(e.message || "Wrong code."); setOtp(["", "", "", "", "", ""]); setTimeout(() => otpRefs.current[0]?.focus(), 50); shake(); } finally { setBusy(false); } }; return (

Recura

{/* step indicator */}

{["credentials", "phone", "otp"].map((s, i) => ( ))}

{step === "credentials" && ( <>

{mode === "login" ? "Welcome back" : "Create your account"}

{mode === "login" ? "Log in to manage your queue." : "Start scheduling in under a minute."}

setEmail(e.target.value)} placeholder="you@example.com" style={{ border: "none", outline: "none", flex: 1, fontSize: 13.5, background: "transparent", color: INK }} />

setPassword(e.target.value)} placeholder="••••••••" style={{ border: "none", outline: "none", flex: 1, fontSize: 13.5, background: "transparent", color: INK }} />

or continue with

{["G", "in", ""].map((letter, i) => ( ))}

{mode === "login" ? "New to Recura?" : "Already have an account?"}{" "} setMode(mode === "login" ? "signup" : "login")} style={{ color: ACCENT, fontWeight: 600, cursor: "pointer" }}> {mode === "login" ? "Sign up" : "Log in"}

)} {step === "phone" && ( <>

Verify your phone

We'll text a 6-digit code to confirm it's you.

setPhone(e.target.value)} placeholder="98765 43210 (or +country code)" inputMode="tel" autoComplete="tel" style={{ border: "none", outline: "none", flex: 1, fontSize: 13.5, background: "transparent", color: INK }} />

{errorMsg &&

{errorMsg}

}

setStep("credentials")} style={{ textAlign: "center", fontSize: 12.5, color: MUTED, cursor: "pointer", margin: 0 }}> ← Back

)} {step === "otp" && ( <>

Enter the code

Sent to {phone || "your phone"}

{devCode ? (

Test mode (no SMS sent) — your code is {devCode}

) : (

)}

{otp.map((d, i) => ( (otpRefs.current[i] = el)} value={d} onChange={(e) => updateOtpDigit(i, e.target.value)} onKeyDown={(e) => onOtpKeyDown(i, e)} maxLength={1} inputMode="numeric" className="auth-input" style={{ flex: "1 1 0", minWidth: 0, maxWidth: 42, height: 50, textAlign: "center", fontSize: 19, fontWeight: 700, borderRadius: 10, border: `1.5px solid ${BORDER}`, outline: "none", color: INK, fontFamily: "'JetBrains Mono', monospace", }} /> ))}

{errorMsg &&

{errorMsg}

}

{resendIn > 0 ? ( <>Resend code in {resendIn}s ) : ( Resend code )} {" · "} setStep("phone")} style={{ color: MUTED, cursor: "pointer" }}> Change number

)}

); } /* ============================= CONNECT ACCOUNTS ============================= */ function Connect({ connected, setConnected, setView, accounts, refreshAccounts }) { const [authModal, setAuthModal] = useState(null); // platform key pending authorization const [authing, setAuthing] = useState(false); const [blueskyHandle, setBlueskyHandle] = useState(""); const [blueskyPw, setBlueskyPw] = useState(""); const [connectError, setConnectError] = useState(""); const accountIdFor = (key) => { const a = accounts.find((a) => a.platform === key); return a ? a.id : null; }; const disconnect = async (key) => { const id = accountIdFor(key); if (id) { try { await Api.disconnectAccount(id); } catch (e) { /* ignore, still refresh below */ } } await refreshAccounts(); }; const requestConnect = (key) => { setConnectError(""); setAuthModal(key); }; const confirmAuthorize = async () => { if (authModal === "bluesky") { if (!blueskyHandle.trim() || !blueskyPw.trim()) { setConnectError("Enter your handle and an app password."); return; } setAuthing(true); try { await Api.connectBluesky(blueskyHandle.trim(), blueskyPw.trim()); await refreshAccounts(); setAuthing(false); setAuthModal(null); setBlueskyHandle(""); setBlueskyPw(""); } catch (e) { setAuthing(false); setConnectError(e.message || "Couldn't connect Bluesky"); } return; } // Every other platform is real OAuth: leave the app and let the backend // + the platform's own login screen take over. It redirects back here // (?connected=platform&status=ok|error) when done. window.location.href = Api.oauthStartUrl(authModal); }; return (

Connect your accounts

Pick every platform you post to. You can add or remove accounts anytime.

{/* platform grid */}

{Object.entries(PLATFORMS).map(([key, p], i) => { const Icon = p.icon; const isConnected = connected.includes(key); return (

{p.label}

); })}

{/* vertical connected rail */}

Connected

{connected.length === 0 ? "Nothing connected yet." : `${connected.length} account${connected.length === 1 ? "" : "s"} linked`}

{connected.length === 0 ? (

Tap "Connect" on any platform to add it here.

) : (

{connected.map((key, i) => { const p = PLATFORMS[key]; const Icon = p.icon; return (

{p.label}

); })}

)}

{authModal && (

!authing && setAuthModal(null)} >

e.stopPropagation()} style={{ background: "#fff", borderRadius: 18, padding: 28, width: "100%", maxWidth: 360, boxShadow: "0 24px 60px rgba(15,30,23,0.25)", textAlign: "center" }} > {(() => { const Icon = PLATFORMS[authModal].icon; return ; })()}

Connect {PLATFORMS[authModal].label}

{authModal === "bluesky" ? "Bluesky doesn't use app-store style login — paste your handle and an app password (create one in the Bluesky app under Settings > App Passwords)." : "You'll be taken to " + PLATFORMS[authModal].label + " to sign in and approve access. Recura never sees your password."}

{authModal === "bluesky" && !authing && (

setBlueskyHandle(e.target.value)} placeholder="you.bsky.social" style={{ border: `1.5px solid ${BORDER}`, borderRadius: 10, padding: "10px 12px", fontSize: 13.5, outline: "none" }} /> setBlueskyPw(e.target.value)} type="password" placeholder="xxxx-xxxx-xxxx-xxxx (app password)" style={{ border: `1.5px solid ${BORDER}`, borderRadius: 10, padding: "10px 12px", fontSize: 13.5, outline: "none" }} />

)} {connectError && (

{connectError}

)} {authing ? (

Authorizing…

) : (

)}

); } /* ============================= COMPOSER BOX ============================= */ function ComposerBox({ text, setText, overLimit, tightestLimit, selected, image, setImage }) { const [focused, setFocused] = useState(false); const fileInputRef = useRef(null); const pct = tightestLimit ? Math.min(100, (text.length / tightestLimit) * 100) : 0; const barColor = overLimit ? "#D64545" : pct > 80 ? AMBER : ACCENT; const onPickFile = (e) => { const file = e.target.files?.[0]; if (!file) return; const reader = new FileReader(); reader.onload = () => setImage({ name: file.name, url: reader.result, file }); reader.readAsDataURL(file); e.target.value = ""; }; return (

setText(e.target.value)}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        placeholder="What do you want to share?"
        rows={6}
        style={{ width: "100%", border: "none", outline: "none", resize: "vertical", background: "transparent", fontSize: 14.5, lineHeight: 1.55, color: INK }}
      />

{image && (
        <div className="fade-up" style={{ position: "relative", marginTop: 10, display: "inline-block" }}>
          <img
            src={image.url}
            alt={image.name}
            style={{ maxHeight: 150, maxWidth: "100%", borderRadius: 10, border: `1px solid ${BORDER}`, display: "block" }}
          />
          <button
            onClick={() => setImage(null)}
            title="Remove image"
            style={{
              position: "absolute",
              top: -8,
              right: -8,
              width: 24,
              height: 24,
              borderRadius: "50%",
              border: "none",
              background: INK,
              color: "#fff",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              cursor: "pointer",
              boxShadow: "0 4px 10px rgba(0,0,0,0.2)",
            }}
          >
            <X size={13} />
          </button>
        </div>
      )}

<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 8 }}>
        <button
          type="button"
          onClick={() => fileInputRef.current?.click()}
          style={{ display: "flex", alignItems: "center", gap: 6, background: "none", border: "none", color: image ? ACCENT : MUTED, fontSize: 12.5, cursor: "pointer", padding: "4px 6px", transition: "color 150ms ease" }}
          onMouseEnter={(e) => (e.currentTarget.style.color = ACCENT)}
          onMouseLeave={(e) => (e.currentTarget.style.color = image ? ACCENT : MUTED)}
          title="Upload an image"
        >
          <ImagePlus size={15} /> {image ? "Change image" : "Add image"}
        </button>
        <input ref={fileInputRef} type="file" accept="image/*" onChange={onPickFile} style={{ display: "none" }} />
        <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: overLimit ? "#D64545" : MUTED }}>
          {text.length}{tightestLimit !== null ? ` / ${tightestLimit}` : ""}
        </span>
      </div>
      {selected.length > 0 && (
        <div className="limit-bar-track">
          <div className="limit-bar-fill" style={{ width: `${pct}%`, background: barColor }} />
        </div>
      )}
    </div>
  );
}

/* ============================= AI STUDIO ============================= */
const REWRITE_MODES = [
  { key: "improve", label: "Improve writing" },
  { key: "shorten", label: "Long → short" },
  { key: "expand", label: "Short → long" },
  { key: "professional", label: "Casual → professional" },
  { key: "casual", label: "Professional → casual" },
  { key: "grammar", label: "Fix grammar" },
];

function AiStudioPanel({ text, setText, platforms, notify }) {
  const [open, setOpen] = useState(false);
  const [tab, setTab] = useState("caption");
  const [loading, setLoading] = useState(null); // key of the in-flight action, or null
  const [prevText, setPrevText] = useState(null); // one-step undo buffer

const [topic, setTopic] = useState("");
  const [tone, setTone] = useState("friendly");
  const [language, setLanguage] = useState("Spanish");
  const [bestTime, setBestTime] = useState(null);

const primaryPlatform = platforms[0] || null;

const applyText = (next) => {
    setPrevText(text);
    setText(next);
  };
  const undo = () => {
    if (prevText === null) return;
    setText(prevText);
    setPrevText(null);
  };

const doCaption = () =>
    run("caption", async () => {
      if (!topic.trim()) return notify("Describe what the post is about first");
      const { text: out } = await Api.aiCaption(topic.trim(), primaryPlatform, tone);
      applyText(out);
      notify("Caption generated");
    });

const doRewrite = (mode, label) =>
    run(mode, async () => {
      if (!text.trim()) return notify("There's no text to rewrite yet");
      const { text: out } = await Api.aiRewrite(text, mode);
      applyText(out);
      notify(label);
    });

const doBestTime = () =>
    run("best-time", async () => {
      const { suggestion } = await Api.aiBestTime(primaryPlatform || "general");
      setBestTime(suggestion);
    });

const TABS = [
    { key: "caption", label: "Caption", icon: Wand2 },
    { key: "hashtags", label: "Hashtags", icon: Hash },
    { key: "rewrite", label: "Rewrite", icon: RefreshCw },
    { key: "translate", label: "Translate", icon: Languages },
    { key: "time", label: "Best time", icon: Clock3 },
  ];

const smallInputStyle = {
    width: "100%",
    border: `1px solid ${BORDER}`,
    borderRadius: 9,
    padding: "8px 11px",
    fontSize: 13,
    color: INK,
    outline: "none",
    background: "#fff",
  };

const aiBtnStyle = (active) => ({
    display: "flex",
    alignItems: "center",
    gap: 6,
    border: `1.5px solid ${active ? ACCENT : BORDER}`,
    background: active ? "#EAF6EF" : "#fff",
    color: active ? ACCENT : INK,
    borderRadius: 8,
    padding: "7px 12px",
    fontSize: 12.5,
    fontWeight: 600,
    cursor: "pointer",
  });

return (
    <div style={{ marginTop: 14, border: `1px solid ${BORDER}`, borderRadius: 12, overflow: "hidden", background: "#fff" }}>
      <button
        onClick={() => setOpen((o) => !o)}
        style={{
          width: "100%",
          display: "flex",
          alignItems: "center",
          gap: 8,
          background: "none",
          border: "none",
          padding: "10px 14px",
          cursor: "pointer",
          fontSize: 12.5,
          fontWeight: 700,
          color: INK,
        }}
      >
        <Sparkles size={14} color={ACCENT} />
        AI Studio
        <span style={{ fontWeight: 500, color: MUTED, fontSize: 11.5 }}>caption · hashtags · rewrite · translate</span>
        <ChevronDown size={14} color={MUTED} style={{ marginLeft: "auto", transform: open ? "rotate(180deg)" : "none", transition: "transform 180ms ease" }} />
      </button>

{open && (
        <div className="fade-in" style={{ padding: "0 14px 16px" }}>
          <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginBottom: 12 }}>
            {TABS.map((t) => {
              const TIcon = t.icon;
              return (
                <button key={t.key} onClick={() => setTab(t.key)} style={aiBtnStyle(tab === t.key)}>
                  <TIcon size={13} /> {t.label}
                </button>
              );
            })}
            {prevText !== null && (
              <button onClick={undo} style={{ ...aiBtnStyle(false), marginLeft: "auto", color: MUTED }} title="Undo last AI change">
                <Undo2 size={13} /> Undo
              </button>
            )}
          </div>

{tab === "caption" && (
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              <input
                value={topic}
                onChange={(e) => setTopic(e.target.value)}
                placeholder="What's the post about? e.g. launch of our new tote bag"
                style={smallInputStyle}
              />
              <div style={{ display: "flex", gap: 8 }}>
                <select value={tone} onChange={(e) => setTone(e.target.value)} style={{ ...smallInputStyle, flex: 1 }}>
                  <option value="friendly">Friendly</option>
                  <option value="professional">Professional</option>
                  <option value="playful">Playful</option>
                  <option value="bold">Bold</option>
                  <option value="informative">Informative</option>
                </select>
                <button onClick={doCaption} disabled={loading === "caption"} style={{ ...aiBtnStyle(true), whiteSpace: "nowrap" }}>
                  {loading === "caption" ? <RefreshCw size={13} className="spin-icon" /> : <Sparkles size={13} />} Generate
                </button>
              </div>
            </div>
          )}

{tab === "hashtags" && (
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              <p style={{ margin: 0, fontSize: 12.5, color: MUTED }}>Generates hashtags from whatever's currently in the composer, and appends them.</p>
              <button onClick={doHashtags} disabled={loading === "hashtags"} style={{ ...aiBtnStyle(true), alignSelf: "flex-start" }}>
                {loading === "hashtags" ? <RefreshCw size={13} className="spin-icon" /> : <Hash size={13} />} Generate hashtags
              </button>
            </div>
          )}

{tab === "rewrite" && (
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
              {REWRITE_MODES.map((m) => (
                <button key={m.key} onClick={() => doRewrite(m.key, m.label)} disabled={loading === m.key} style={aiBtnStyle(false)}>
                  {loading === m.key ? <RefreshCw size={13} className="spin-icon" /> : <Wand2 size={13} />} {m.label}
                </button>
              ))}
            </div>
          )}

{tab === "translate" && (
            <div style={{ display: "flex", gap: 8 }}>
              <input value={language} onChange={(e) => setLanguage(e.target.value)} placeholder="Language, e.g. French" style={{ ...smallInputStyle, flex: 1 }} />
              <button onClick={doTranslate} disabled={loading === "translate"} style={{ ...aiBtnStyle(true), whiteSpace: "nowrap" }}>
                {loading === "translate" ? <RefreshCw size={13} className="spin-icon" /> : <Languages size={13} />} Translate
              </button>
            </div>
          )}

{tab === "time" && (
            <div style={{ display: "flex", flexDirection: "column", gap: 8, alignItems: "flex-start" }}>
              <button onClick={doBestTime} disabled={loading === "best-time"} style={aiBtnStyle(true)}>
                {loading === "best-time" ? <RefreshCw size={13} className="spin-icon" /> : <Clock3 size={13} />}
                {primaryPlatform ? `Best time for ${PLATFORMS[primaryPlatform]?.label || primaryPlatform}` : "Best time to post"}
              </button>
              {bestTime && <p style={{ margin: 0, fontSize: 12.5, color: "#333", lineHeight: 1.5 }}>{bestTime}</p>}
            </div>
          )}
        </div>
      )}
    </div>
  );
}

/* ============================= CHARACTER LIMITS PANEL ============================= */
function CharacterLimitsPanel() {
  const [open, setOpen] = useState(false);
  return (
    <div style={{ marginTop: 14, border: `1px solid ${BORDER}`, borderRadius: 12, overflow: "hidden", background: "#fff" }}>
      <button
        onClick={() => setOpen((o) => !o)}
        style={{
          width: "100%",
          display: "flex",
          alignItems: "center",
          gap: 8,
          background: "none",
          border: "none",
          padding: "10px 14px",
          cursor: "pointer",
          fontSize: 12.5,
          fontWeight: 700,
          color: INK,
        }}
      >
        <Info size={14} color={ACCENT} />
        Character limits by platform
        <ChevronDown size={14} color={MUTED} style={{ marginLeft: "auto", transform: open ? "rotate(180deg)" : "none", transition: "transform 180ms ease" }} />
      </button>
      {open && (
        <div className="fade-in" style={{ padding: "0 14px 14px", display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))", gap: 8 }}>
          {Object.entries(PLATFORMS).map(([key, p]) => {
            const Icon = p.icon;
            return (
              <div key={key} style={{ display: "flex", alignItems: "center", gap: 7, fontSize: 12, color: MUTED, padding: "5px 0" }}>
                <Icon size={13} color={p.color} />
                <span style={{ color: INK, fontWeight: 600 }}>{p.label}</span>
                <span style={{ marginLeft: "auto", fontFamily: "'JetBrains Mono', monospace" }}>{p.limit.toLocaleString()}</span>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}

/* ============================= VERTICAL PLATFORM RAIL ============================= */
function VerticalPlatformRail({ availableKeys, selected, togglePlatform, connected }) {
  return (
    <div
      className="fade-up lc-platform-rail"
      style={{
        background: "#fff",
        border: `1px solid ${BORDER}`,
        borderRadius: 16,
        padding: "16px 10px",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        gap: 10,
        alignSelf: "start",
        position: "sticky",
        top: 96,
      }}
    >
      <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: "0.06em", color: "#9AA39B", textTransform: "uppercase", marginBottom: 2 }}>
        Channels
      </span>
      {availableKeys.map((key, i) => {
        const p = PLATFORMS[key];
        const Icon = p.icon;
        const active = selected.includes(key);
        const isConnected = connected.length === 0 || connected.includes(key);
        return (
          <button
            key={key}
            className={`chip fade-up ${active ? "selected" : ""}`}
            onClick={() => togglePlatform(key)}
            title={p.label}
            style={{
              position: "relative",
              width: 42,
              height: 42,
              borderRadius: 12,
              border: `1.5px solid ${active ? p.color : BORDER}`,
              background: active ? p.soft : "#fff",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              cursor: "pointer",
              animationDelay: `${0.04 * i}s`,
            }}
          >
            <Icon size={18} strokeWidth={2.2} color={active ? p.color : MUTED} />
            {isConnected && (
              <span
                className="rail-dot-connected"
                style={{ position: "absolute", top: -3, right: -3, width: 9, height: 9, borderRadius: "50%", background: GREEN, border: "2px solid #fff" }}
              />
            )}
          </button>
        );
      })}
    </div>
  );
}

/* ============================= MESSAGE CENTER ============================= */
const MOCK_MESSAGES = [
  { id: "m1", platform: "instagram", name: "Priya Sharma", preview: "Love this collection! Do you ship to Pune?", time: "2m", unread: true },
  { id: "m2", platform: "facebook", name: "Alex Turner", preview: "What time does the livestream start today?", time: "18m", unread: true },
  { id: "m3", platform: "twitter", name: "Dev Patel", preview: "Great thread — sharing this with my team.", time: "1h", unread: false },
  { id: "m4", platform: "linkedin", name: "Meera Nair", preview: "Would love to connect about a partnership.", time: "3h", unread: true },
  { id: "m5", platform: "tiktok", name: "@rico.codes", preview: "This edit is so clean 🔥", time: "5h", unread: false },
];

function MessageCenter() {
  const [messages, setMessages] = useState(MOCK_MESSAGES);
  const unreadCount = messages.filter((m) => m.unread).length;

const markRead = (id) => setMessages((m) => m.map((msg) => (msg.id === id ? { ...msg, unread: false } : msg)));

return (
    <section className="fade-up" style={{ background: "#fff", border: `1px solid ${BORDER}`, borderRadius: 16, padding: "22px 22px 10px", animationDelay: "0.18s" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 16 }}>
        <Inbox size={17} color={ACCENT} />
        <h2 style={{ fontFamily: "'Sora', sans-serif", fontSize: 16, fontWeight: 700, margin: 0 }}>Messages</h2>
        {unreadCount > 0 && (
          <span style={{ fontSize: 11, fontWeight: 700, background: CORAL, color: "#fff", borderRadius: 999, padding: "2px 8px" }}>{unreadCount} new</span>
        )}
        <span style={{ marginLeft: "auto", fontSize: 12, color: MUTED }}>Across all connected accounts</span>
      </div>

<div className="lc-scroll" style={{ maxHeight: 300, overflowY: "auto" }}>
        {messages.map((m, i) => {
          const p = PLATFORMS[m.platform];
          const Icon = p.icon;
          return (
            <div
              key={m.id}
              onClick={() => markRead(m.id)}
              className="queue-item"
              style={{
                display: "flex",
                gap: 12,
                alignItems: "flex-start",
                padding: "12px 6px",
                borderBottom: `1px solid #F1F1EC`,
                cursor: "pointer",
                animationDelay: `${i * 0.05}s`,
                background: m.unread ? "#FAFBF8" : "transparent",
                borderRadius: 8,
              }}
            >
              <span
                style={{
                  position: "relative",
                  width: 38,
                  height: 38,
                  borderRadius: "50%",
                  background: "#EDEEF0",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  fontWeight: 700,
                  fontSize: 14,
                  color: MUTED,
                  flexShrink: 0,
                }}
              >
                {m.name.slice(0, 1)}
                <span
                  style={{
                    position: "absolute",
                    bottom: -2,
                    right: -2,
                    width: 17,
                    height: 17,
                    borderRadius: "50%",
                    background: p.soft,
                    border: "2px solid #fff",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                  }}
                >
                  <Icon size={9} color={p.color} />
                </span>
              </span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                  <span style={{ fontWeight: 700, fontSize: 13.5, color: INK }}>{m.name}</span>
                  <span style={{ fontSize: 11.5, color: "#9AA39B", marginLeft: "auto" }}>{m.time}</span>
                </div>
                <p style={{ margin: "2px 0 0", fontSize: 13, color: m.unread ? INK : MUTED, lineHeight: 1.4, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
                  {m.preview}
                </p>
              </div>
              {m.unread && <span style={{ width: 8, height: 8, borderRadius: "50%", background: ACCENT, marginTop: 6, flexShrink: 0 }} />}
            </div>
          );
        })}
      </div>
    </section>
  );
}

/* ============================= APP (composer + queue) ============================= */
function AppDashboard({ connected }) {
  const availableKeys = connected.length ? connected : Object.keys(PLATFORMS);
  const [selected, setSelected] = useState(availableKeys.slice(0, 2));
  const [text, setText] = useState("");
  const [image, setImage] = useState(null); // File object, or null
  const [when, setWhen] = useState(defaultDateTime());
  const [toast, setToast] = useState(null);
  const [pulseButton, setPulseButton] = useState(false);
  const toastTimer = useRef(null);

const [queue, setQueue] = useState([]);
  const [loadingQueue, setLoadingQueue] = useState(true);

useEffect(() => {
    loadPosts();
    // poll so posts flip from "queued" to "posted"/"failed" as the backend
    // scheduler fires them, without needing a manual refresh
    const t = setInterval(loadPosts, 15000);
    return () => clearInterval(t);
  }, []);

const showToast = (msg) => {
    clearTimeout(toastTimer.current);
    setToast({ id: uid(), msg });
    toastTimer.current = setTimeout(() => setToast(null), 2600);
  };
  useEffect(() => () => clearTimeout(toastTimer.current), []);

const togglePlatform = (key) => setSelected((s) => (s.includes(key) ? s.filter((k) => k !== key) : [...s, key]));

const tightestLimit = useMemo(() => (selected.length === 0 ? null : Math.min(...selected.map((k) => PLATFORMS[k].limit))), [selected]);
  const overLimit = tightestLimit !== null && text.length > tightestLimit;
  const canSchedule = text.trim().length > 0 && selected.length > 0 && !overLimit;
  const sortedQueue = useMemo(() => [...queue].sort((a, b) => new Date(a.when) - new Date(b.when)), [queue]);
  const postedCount = useMemo(() => queue.filter((p) => p.status === "posted").length, [queue]);

const fireButtonPulse = () => {
    setPulseButton(true);
    setTimeout(() => setPulseButton(false), 500);
  };

const stats = [
    { label: "Accounts connected", value: connected.length, icon: Users, color: ACCENT },
    { label: "Posts queued", value: sortedQueue.length - postedCount, icon: Clock3, color: AMBER },
    { label: "Published", value: postedCount, icon: CircleCheck, color: GREEN },
    { label: "Platforms available", value: Object.keys(PLATFORMS).length, icon: BarChart3, color: "#5B5BD6" },
  ];

return (
    <div className="lc-dash" style={{ maxWidth: 1320, margin: "0 auto", padding: "28px 24px 64px" }}>
      <div className="fade-up" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 20, flexWrap: "wrap", gap: 12 }}>
        <div>
          <h1 style={{ fontFamily: "'Sora', sans-serif", fontSize: 22, fontWeight: 800, margin: 0, color: INK }}>Dashboard</h1>
          <p style={{ fontSize: 13, color: MUTED, margin: "4px 0 0" }}>{connected.length} account{connected.length === 1 ? "" : "s"} connected</p>
        </div>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12.5, color: MUTED, display: "flex", alignItems: "center", gap: 6 }}>
          <Sparkles size={13} color={ACCENT} />
          {sortedQueue.length} post{sortedQueue.length === 1 ? "" : "s"} total
        </div>
      </div>

{/* stat cards */}
      <div className="fade-up lc-stats" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: 14, marginBottom: 22, animationDelay: "0.03s" }}>
        {stats.map((s, i) => {
          const Icon = s.icon;
          return (
            <div key={s.label} className="platform-card" style={{ background: "#fff", border: `1px solid ${BORDER}`, borderRadius: 14, padding: "16px 18px", display: "flex", alignItems: "center", gap: 12 }}>
              <span style={{ width: 38, height: 38, borderRadius: 10, background: `${s.color}1A`, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                <Icon size={18} color={s.color} />
              </span>
              <div>
                <div style={{ fontFamily: "'Sora', sans-serif", fontSize: 20, fontWeight: 800, color: INK, lineHeight: 1 }}>{s.value}</div>
                <div style={{ fontSize: 12, color: MUTED, marginTop: 2 }}>{s.label}</div>
              </div>
            </div>
          );
        })}
      </div>

<section className="fade-up lc-card" style={{ background: "#fff", border: `1px solid ${BORDER}`, borderRadius: 16, padding: 24, alignSelf: "start", animationDelay: "0.06s" }}>
          <h2 style={{ fontFamily: "'Sora', sans-serif", fontSize: 17, fontWeight: 700, margin: "0 0 4px" }}>New post</h2>
          <p style={{ color: MUTED, fontSize: 13.5, margin: "0 0 18px" }}>Write once, choose where it lands, pick a time.</p>

<div style={{ display: "flex", gap: 8, marginBottom: 16, flexWrap: "wrap" }}>
            {availableKeys.map((key, i) => {
              const p = PLATFORMS[key];
              const Icon = p.icon;
              const active = selected.includes(key);
              return (
                <button
                  key={key}
                  className={`chip fade-up ${active ? "selected" : ""}`}
                  onClick={() => togglePlatform(key)}
                  style={{
                    display: "flex",
                    alignItems: "center",
                    gap: 7,
                    padding: "8px 14px",
                    borderRadius: 999,
                    border: `1.5px solid ${active ? p.color : BORDER}`,
                    background: active ? p.soft : "#fff",
                    color: active ? p.color : MUTED,
                    fontSize: 13.5,
                    fontWeight: 600,
                    cursor: "pointer",
                    animationDelay: `${0.04 * i}s`,
                  }}
                >
                  <Icon size={15} strokeWidth={2.2} color={active ? p.color : MUTED} />
                  {p.label}
                </button>
              );
            })}
          </div>

{overLimit && (
            <div style={{ display: "flex", gap: 6, alignItems: "center", color: "#D64545", fontSize: 12.5, marginTop: 8 }}>
              <CircleAlert size={14} /> Too long for a selected platform. Trim it or unselect that platform.
            </div>
          )}

<div className="lc-actions" style={{ display: "flex", gap: 10, marginTop: 18, alignItems: "center", flexWrap: "wrap" }}>
            <label style={{ display: "flex", alignItems: "center", gap: 8, border: `1px solid ${BORDER}`, borderRadius: 10, padding: "9px 12px", fontSize: 13, color: INK, flex: "1 1 220px" }}>
              <CalendarDays size={16} color={MUTED} />
              <input
                type="datetime-local"
                value={when}
                onChange={(e) => setWhen(e.target.value)}
                style={{ border: "none", outline: "none", fontFamily: "'JetBrains Mono', monospace", fontSize: 12.5, background: "transparent", color: INK, width: "100%" }}
              />
            </label>

<button
              className={`primary-btn ${pulseButton ? "pulse" : ""}`}
              onClick={addToQueue}
              disabled={!canSchedule}
              style={{ display: "flex", alignItems: "center", gap: 7, border: "none", borderRadius: 10, padding: "10px 18px", background: canSchedule ? ACCENT : "#D9E4DF", color: "#fff", fontWeight: 700, fontSize: 13.5, cursor: canSchedule ? "pointer" : "not-allowed" }}
            >
              <Plus size={16} /> Add to queue
            </button>

<section className="fade-up lc-scroll lc-queue" style={{ background: "#fff", border: `1px solid ${BORDER}`, borderRadius: 16, padding: "22px 22px 8px", maxHeight: 640, overflowY: "auto", animationDelay: "0.12s" }}>
          <h2 style={{ fontFamily: "'Sora', sans-serif", fontSize: 16, fontWeight: 700, margin: "0 0 18px" }}>Queue</h2>

{sortedQueue.length === 0 && (
            <div style={{ textAlign: "center", padding: "40px 12px", color: MUTED, fontSize: 13.5 }}>Nothing queued yet — schedule your first post to see it here.</div>
          )}

{grouped.map(([day, posts]) => (
            <div key={day} style={{ marginBottom: 22 }}>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11.5, letterSpacing: "0.03em", color: MUTED, textTransform: "uppercase", marginBottom: 10 }}>{day}</div>
              <div style={{ position: "relative", paddingLeft: 20 }}>
                <div style={{ position: "absolute", left: 5, top: 4, bottom: 4, width: 2, background: "#EEECE4" }} />
                {posts.map((post, idx) => {
                  const { time } = formatWhen(post.when);
                  const isPosted = post.status === "posted";
                  return (
                    <div key={post.id} className="queue-item" style={{ position: "relative", marginBottom: 16, animationDelay: `${idx * 0.05}s` }}>
                      <div className={isPosted ? "rail-dot-posted" : "rail-dot-queued"} style={{ position: "absolute", left: -20, top: 4, width: 12, height: 12, borderRadius: "50%", background: isPosted ? GREEN : AMBER }} />
                      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
                        <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: INK, fontWeight: 500 }}>{time}</span>
                        <span style={{ display: "inline-flex", alignItems: "center", gap: 4, fontSize: 10.5, fontWeight: 700, padding: "2px 7px", borderRadius: 999, background: isPosted ? GREEN_SOFT : AMBER_SOFT, color: isPosted ? GREEN : AMBER, textTransform: "uppercase", letterSpacing: "0.02em" }}>
                          {isPosted ? <CircleCheck size={11} /> : <Clock3 size={11} />}
                          {isPosted ? "Posted" : "Queued"}
                        </span>
                        <div style={{ display: "flex", gap: 4, marginLeft: "auto" }}>
                          {post.platforms.map((k) => {
                            const Icon = PLATFORMS[k].icon;
                            return (
                              <span key={k} style={{ display: "inline-flex", width: 20, height: 20, borderRadius: "50%", alignItems: "center", justifyContent: "center", background: PLATFORMS[k].soft }}>
                                <Icon size={11} strokeWidth={2.4} color={PLATFORMS[k].color} />
                              </span>
                            );
                          })}
                          <button
                            onClick={() => removeFromQueue(post.id)}
                            title="Remove from queue"
                            style={{ border: "none", background: "none", color: MUTED, cursor: "pointer", padding: 2, display: "inline-flex", transition: "transform 150ms ease, color 150ms ease" }}
                            onMouseEnter={(e) => (e.currentTarget.style.color = "#D64545")}
                            onMouseLeave={(e) => (e.currentTarget.style.color = MUTED)}
                          >
                            <X size={14} />
                          </button>
                        </div>
                      </div>
                      <div style={{ display: "flex", gap: 8, alignItems: "flex-start" }}>
                        {post.image && (
                          <img src={post.image} alt="" style={{ width: 42, height: 42, borderRadius: 8, objectFit: "cover", border: `1px solid ${BORDER}`, flexShrink: 0 }} />
                        )}
                        <p style={{ margin: 0, fontSize: 13, lineHeight: 1.5, color: "#333", paddingRight: 4 }}>{post.text}</p>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          ))}
        </section>
      </div>

{toast && (
        <div key={toast.id} className="toast lc-toast" style={{ position: "fixed", bottom: 24, right: 24, background: INK, color: "#fff", padding: "12px 18px", borderRadius: 10, fontSize: 13.5, fontWeight: 500, display: "flex", alignItems: "center", gap: 8, boxShadow: "0 8px 24px rgba(0,0,0,0.18)" }}>
          <CircleCheck size={16} color="#7CE39A" />
          {toast.msg}
        </div>
      )}
    </div>
  );
}

/* ============================= PLANS / RAZORPAY ============================= */
function Plans({ setView, user, refreshUser }) {
  const [data, setData] = useState(null);
  const [busyPlan, setBusyPlan] = useState("");
  const [msg, setMsg] = useState({ type: "", text: "" });

useEffect(() => {
    Api.plans().then(setData).catch((e) => setMsg({ type: "err", text: e.message }));
  }, []);

const rupees = (paise) => "₹" + (paise / 100).toLocaleString("en-IN");

const current = data?.current?.plan || "free";
  const expiry = data?.current?.expires_at ? new Date(data.current.expires_at).toLocaleDateString(undefined, { day: "numeric", month: "short", year: "numeric" }) : null;

return (
    <div className="lc-page" style={{ maxWidth: 1000, margin: "0 auto", padding: "48px 24px 90px" }}>
      <div className="fade-up" style={{ textAlign: "center", marginBottom: 32 }}>
        <h1 style={{ fontFamily: "'Sora', sans-serif", fontSize: "clamp(26px, 5vw, 34px)", fontWeight: 800, margin: "0 0 8px", color: INK }}>Choose your plan</h1>
        <p style={{ color: MUTED, fontSize: 14.5, margin: 0 }}>
          {current !== "free" && expiry ? `You're on the ${current} plan until ${expiry}. Buying again extends it.` : "Upgrade anytime. Pay securely with UPI, cards or netbanking."}
        </p>
      </div>

{msg.text && (
        <div className="fade-in" style={{ maxWidth: 560, margin: "0 auto 22px", padding: "12px 16px", borderRadius: 12, fontSize: 13.5, background: msg.type === "ok" ? GREEN_SOFT : "#FDECEC", color: msg.type === "ok" ? ACCENT_DEEP : "#B42323" }}>
          {msg.text}
        </div>
      )}
      {data && !data.razorpay_configured && (
        <div style={{ maxWidth: 560, margin: "0 auto 22px", padding: "12px 16px", borderRadius: 12, fontSize: 13, background: "#FFF4E5", color: "#8A5A00" }}>
          Payments aren't switched on yet — add your Razorpay keys to <code>backend/.env</code>.
        </div>
      )}

<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 18 }}>
        {(data?.plans || []).map((p, i) => {
          const isCurrent = current === p.id;
          return (
            <div key={p.id} className="platform-card fade-up" style={{ background: "#fff", border: `1.5px solid ${i === 0 ? ACCENT : BORDER}`, borderRadius: 18, padding: 26, animationDelay: `${0.05 * i}s`, display: "flex", flexDirection: "column" }}>
              <h3 style={{ fontFamily: "'Sora', sans-serif", fontSize: 18, fontWeight: 700, margin: "0 0 6px", color: INK }}>{p.name}</h3>
              <div style={{ margin: "0 0 16px" }}>
                <span style={{ fontFamily: "'Sora', sans-serif", fontSize: 34, fontWeight: 800, color: INK }}>{rupees(p.amount)}</span>
                <span style={{ color: MUTED, fontSize: 13.5 }}> / {p.days} days</span>
              </div>
              <ul style={{ listStyle: "none", padding: 0, margin: "0 0 22px", display: "grid", gap: 9, flex: 1 }}>
                {p.features.map((f) => (
                  <li key={f} style={{ display: "flex", gap: 8, alignItems: "flex-start", fontSize: 13.5, color: "#333" }}>
                    <CircleCheck size={16} color={ACCENT} style={{ flexShrink: 0, marginTop: 1 }} /> {f}
                  </li>
                ))}
              </ul>
              <button
                onClick={() => pay(p.id)}
                disabled={!!busyPlan || !data.razorpay_configured}
                className="primary-btn"
                style={{ border: "none", borderRadius: 10, padding: "12px 0", background: data.razorpay_configured ? ACCENT : "#D9E4DF", color: "#fff", fontWeight: 700, fontSize: 14, cursor: busyPlan || !data.razorpay_configured ? "not-allowed" : "pointer" }}
              >
                {busyPlan === p.id ? "Opening payment…" : isCurrent ? "Extend 30 days" : `Pay ${rupees(p.amount)}`}
              </button>
            </div>
          );
        })}
      </div>

<p style={{ textAlign: "center", color: "#9AA39B", fontSize: 12, marginTop: 24 }}>
        Payments are processed by Razorpay. We never see or store your card or UPI details.
      </p>
      <p onClick={() => setView("app")} style={{ textAlign: "center", fontSize: 13, color: MUTED, cursor: "pointer", marginTop: 8 }}>← Back to dashboard</p>
    </div>
  );
}

/* ============================= ROOT APP ============================= */
function App() {
  const [view, setView] = useState("landing"); // landing | login | connect | app
  const [connected, setConnected] = useState([]);
  const [accounts, setAccounts] = useState([]);
  const [bootError, setBootError] = useState("");
  const [user, setUser] = useState(null);
  const [startStep, setStartStep] = useState("credentials");
  const loggedIn = view === "connect" || view === "app" || view === "plans";

const refreshUser = async () => {
    try {
      const res = await Api.me();
      setUser(res.user);
    } catch (e) {}
  };

// On first load: figure out if we're already logged in (existing session
  // cookie), and if we just got bounced back here from an OAuth callback.
  useEffect(() => {
    (async () => {
      const params = new URLSearchParams(window.location.search);
      const justConnected = params.get("connected");
      const status = params.get("status");

let me = null;
      try {
        const res = await Api.me();
        me = res.user;
      } catch (e) {
        setBootError("Can't reach the Recura backend at " + Api.base + ". Is it running?");
      }

if (me) {
        setUser(me);
        await refreshAccounts();
        if (!me.phone_verified) {
          // signed in earlier but never finished phone verification
          setStartStep("phone");
          setView("login");
        } else if (justConnected) {
          setView("connect");
          if (status !== "ok") {
            setBootError(`Couldn't connect ${justConnected}${params.get("detail") ? ": " + params.get("detail") : ""}.`);
          }
        } else {
          setView("connect");
        }
      }

if (justConnected) {
        // clean the OAuth-callback params out of the URL
        window.history.replaceState({}, "", window.location.pathname);
      }
    })();
  }, []);

return (
    <div style={{ background: BG, color: INK, minHeight: "100%", fontFamily: "'Inter', sans-serif" }}>
      <Navbar
        view={view}
        setView={setView}
        loggedIn={loggedIn}
        plan={user?.plan}
        onLogout={async () => {
          try {
            await Api.logout();
          } catch (e) {}
          setConnected([]);
          setAccounts([]);
          setUser(null);
          setStartStep("credentials");
          setView("landing");
        }}
      />
      {bootError && (
        <div style={{ background: "#FFF4E5", color: "#8A5A00", fontSize: 12.5, padding: "8px 16px", textAlign: "center" }}>
          {bootError}
        </div>
      )}
      {view === "landing" && <Landing setView={setView} />}
      {view === "login" && (
        <Login
          key={startStep}
          setView={setView}
          startStep={startStep}
          onAuthed={() => {
            refreshAccounts();
            refreshUser();
          }}
        />
      )}
      {view === "connect" && (
        <Connect connected={connected} setConnected={setConnected} setView={setView} accounts={accounts} refreshAccounts={refreshAccounts} />
      )}
      {view === "app" && <AppDashboard connected={connected} />}
      {view === "plans" && <Plans setView={setView} user={user} refreshUser={refreshUser} />}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

Your social media,on autopilot.

One queue. Every platform.

{p.label}

{mode === "login" ? "Welcome back" : "Create your account"}

Verify your phone

Enter the code

Connect your accounts

Connected

Connect {PLATFORMS[authModal].label}

Your social media,
on autopilot.