/* ========================================================================
   screens-instagram.jsx — Instagram scheduler (centerpiece) + calendar
   ====================================================================== */

const IGQueueRow = ({ ix, thumb, cap, when, date, status }) => (
  <div className={"ig-post-row " + status}>
    <div className="grip"><span /><span /><span /></div>
    <div className="thumb" style={{ background: thumb }}>
      <span className="ix">{String(ix).padStart(2, "0")}</span>
    </div>
    <div style={{ minWidth: 0 }}>
      <div className="cap">{cap}</div>
      <div className="meta">
        <span>{status}</span>
        <span>·</span>
        <span>3 IMG</span>
        <span>·</span>
        <span style={{ color: "#EFFF00" }}>QS 94</span>
      </div>
    </div>
    <div className="when">
      <span className="d">{date}</span>
      <span>{when}</span>
    </div>
    <div className="actions">
      <button><Icon name="edit" size={11} stroke={2} /></button>
      <button><Icon name="copy" size={11} stroke={2} /></button>
      <button><Icon name="more" size={11} stroke={2} /></button>
    </div>
  </div>
);

let InstagramScreen = () => (
  <div style={{ height: "100%", display: "flex", background: "#1A1813" }}>
    <SidebarNav active="instagram" />
    <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
      <TopBar project="Renoo · Notes" />

      {/* header strip */}
      <div style={{ padding: "20px 28px 0" }}>
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
          <div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, letterSpacing: "0.22em", color: "#EFFF00", fontWeight: 800, textTransform: "uppercase", display: "inline-flex", alignItems: "center", gap: 8 }}><span style={{ width: 18, height: 1, background: "#EFFF00" }} />INSTAGRAM · CONTENT BANK</div>
            <h1 style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 48, lineHeight: 1, textTransform: "uppercase", margin: "6px 0 4px", color: "#FFF" }}>Queue · 30 posts</h1>
            <div style={{ color: "#8A8A8A", fontSize: 12, display: "flex", gap: 10, flexWrap: "wrap" }}>
              <span>22 scheduled · 6 draft · 2 ready · 0 posted</span>
              <span>·</span>
              <SyncChip state="sync" />
              <span style={{ color: "#FFB23F", fontFamily: "'JetBrains Mono', monospace", fontWeight: 800, letterSpacing: "0.14em", textTransform: "uppercase", fontSize: 10 }}>· Instagram not connected</span>
            </div>
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <button className="btn btn-secondary"><Icon name="copy" size={12} stroke={2} /> Copy all captions</button>
            <button className="btn btn-secondary"><Icon name="csv" size={12} stroke={2} /> Export CSV</button>
            <button className="btn btn-secondary"><Icon name="md" size={12} stroke={2} /> Export Markdown</button>
            <button className="btn btn-primary"><BoltMini size={13} color="#1A1813" /> Generate 30 ideas</button>
          </div>
        </div>

        {/* AI toolbar */}
        <div style={{ marginTop: 14, background: "#201E18", border: "1px solid #3A372F", padding: 12, display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 12, alignItems: "center" }}>
          <span className="ai-chip"><Icon name="sparkle" size={11} stroke={2} /> AI BULK</span>
          <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
            {[
              { l: "+ 30 IDEAS",       on: false },
              { l: "+ 90 IDEAS",       on: false },
              { l: "BULK CAPTIONS",    on: true  },
              { l: "BULK HASHTAGS",    on: false },
              { l: "BULK CTAS",        on: false },
              { l: "BULK ALT TEXT",    on: false },
              { l: "BULK FIRST COMMENT", on: false },
            ].map(t => (
              <span key={t.l} style={{ padding: "5px 10px", background: t.on ? "#EFFF00" : "#2C2A23", color: t.on ? "#1A1813" : "#C8C8C5", border: t.on ? "1px solid #ADC700" : "1px solid #333", fontFamily: "'JetBrains Mono', monospace", fontSize: 10, fontWeight: 800, letterSpacing: "0.12em" }}>{t.l}</span>
            ))}
          </div>
          <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
            <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.14em", color: "#8A8A8A", textTransform: "uppercase", fontWeight: 800 }}>SCHEDULE</span>
            <button className="btn btn-secondary btn-sm">Same time daily</button>
            <button className="btn btn-secondary btn-sm">Choose date · time</button>
          </div>
        </div>
      </div>

      {/* 3 columns: queue + editor + composer */}
      <div style={{ flex: 1, overflow: "hidden", display: "grid", gridTemplateColumns: "1.1fr 1.4fr 360px", gap: 0 }}>
        {/* LEFT — queue list */}
        <div style={{ borderRight: "1px solid #3A372F", padding: "12px 12px 12px 28px", overflowY: "auto" }}>
          <div style={{ display: "flex", gap: 6, marginBottom: 10 }}>
            {["All · 30","Draft · 6","Ready · 2","Scheduled · 22","Posted · 0"].map((t, i) => (
              <button key={t} className="chip" style={{ background: i === 0 ? "#EFFF00" : "#26241E", color: i === 0 ? "#1A1813" : "#C8C8C5", border: i === 0 ? "1px solid #ADC700" : "1px solid #3A372F", fontSize: 9.5, padding: "4px 8px" }}>{t}</button>
            ))}
          </div>
          <div className="ig-queue">
            {[
              { i: 1,  thumb: "linear-gradient(135deg, #FF6B35, #C9522A)", cap: "One folder. Every idea.\nBuilders die from forgotten ideas, not bad ones.", date: "MON 06", when: "09:00", status: "scheduled" },
              { i: 2,  thumb: "linear-gradient(135deg, #4DA8FF, #1E5FCC)", cap: "3 founders. 4 weeks. Zero launches. Until they tried this.", date: "TUE 07", when: "09:00", status: "scheduled" },
              { i: 3,  thumb: "linear-gradient(135deg, #EFFF00, #ADC700)", cap: "Why your last app died. (it wasn't the code)", date: "WED 08", when: "09:00", status: "ready" },
              { i: 4,  thumb: "linear-gradient(135deg, #1E1E1E, #1A1813)", cap: "Streak or starve. Founder ritual that ships.", date: "THU 09", when: "09:00", status: "scheduled" },
              { i: 5,  thumb: "linear-gradient(135deg, #A86BFF, #6B3DCC)", cap: "Notes that compile. Renoo turns daily capture into ship-ready Codex prompts.", date: "FRI 10", when: "09:00", status: "scheduled" },
              { i: 6,  thumb: "linear-gradient(135deg, #4ADE80, #1FA659)", cap: "Day 1 of building in public. Here's everything I'm shipping this month.", date: "SAT 11", when: "10:30", status: "draft" },
              { i: 7,  thumb: "linear-gradient(135deg, #FFB23F, #C97A1A)", cap: "Behind the scenes: how we shipped 14 features in 7 days.", date: "MON 13", when: "09:00", status: "scheduled" },
              { i: 8,  thumb: "linear-gradient(135deg, #FF4D5E, #C9303F)", cap: "I deleted 12 productivity apps last week. Here's what I'm replacing them with.", date: "TUE 14", when: "09:00", status: "draft" },
            ].map(p => <IGQueueRow key={p.i} ix={p.i} {...p} />)}
          </div>
        </div>

        {/* CENTER — editor */}
        <div style={{ overflowY: "auto", padding: 22, background: "#201E18" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
            <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.22em", color: "#EFFF00", fontWeight: 800, textTransform: "uppercase" }}>POST 02 / 30 · EDITING</span>
            <Pill tone="yellow" className="ml-auto">SCHEDULED · TUE 09:00</Pill>
            <span className="pill pill-yellow" style={{ fontSize: 9 }}>QS 94</span>
            <span className="pill pill-yellow-soft" style={{ fontSize: 9 }}>BRAND 92</span>
          </div>

          {/* media + caption editor */}
          <div style={{ display: "grid", gridTemplateColumns: "180px 1fr", gap: 14 }}>
            <div>
              <div style={{ background: "linear-gradient(135deg, #4DA8FF, #1E5FCC)", aspectRatio: "1/1", border: "1px solid #333", position: "relative", display: "grid", placeItems: "center" }}>
                <div style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 28, color: "#FFF", textTransform: "uppercase", textAlign: "center", padding: "0 12px", letterSpacing: "0.02em" }}>3 FOUNDERS.<br />4 WEEKS.<br />ZERO LAUNCHES.</div>
                <div style={{ position: "absolute", top: 8, left: 8, fontFamily: "'JetBrains Mono', monospace", fontSize: 9, color: "#FFF", padding: "2px 6px", background: "rgba(0,0,0,0.4)", letterSpacing: "0.12em", fontWeight: 800 }}>SLIDE 1/3</div>
              </div>
              <div style={{ display: "flex", gap: 4, marginTop: 8 }}>
                {[2,3].map(s => (
                  <div key={s} style={{ flex: 1, aspectRatio: "1/1", background: "#1E5FCC", border: "1px solid #333", display: "grid", placeItems: "center", color: "#FFF", fontFamily: "'JetBrains Mono', monospace", fontSize: 10, fontWeight: 800, letterSpacing: "0.12em" }}>{s}/3</div>
                ))}
                <div style={{ flex: 1, aspectRatio: "1/1", background: "#201E18", border: "1px dashed #333", display: "grid", placeItems: "center", color: "#5C5C5C" }}><Icon name="plus" size={14} stroke={2} /></div>
              </div>
              <label style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 11, color: "#FFF", marginTop: 12 }}>
                <span style={{ width: 16, height: 16, borderRadius: 3, background: "#EFFF00", display: "grid", placeItems: "center", color: "#1A1813" }}><Icon name="check" size={11} stroke={2.8} /></span>
                Repost as Story
              </label>
              <label style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 11, color: "#FFF", marginTop: 6 }}>
                <span style={{ width: 16, height: 16, borderRadius: 3, border: "1px solid #333", background: "#201E18" }} />
                Pin to grid
              </label>
            </div>
            <div>
              <label className="field-label">Caption</label>
              <textarea className="textarea" defaultValue={"3 founders. 4 weeks. Zero launches.\n\nUntil they tried this →\n\nBuilders die from forgotten ideas, not bad ones. Renoo is a 4-second capture app for builders shipping under chaos.\n\nLink in bio · 7-day trial."} style={{ minHeight: 140 }} />
              <div style={{ display: "flex", justifyContent: "space-between", marginTop: 6, fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "#8A8A8A", letterSpacing: "0.1em" }}>
                <span>178 / 2200 CHARS · 4 LINES</span>
                <span style={{ color: "#4ADE80" }}>READABILITY · A</span>
              </div>

              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginTop: 14 }}>
                <div>
                  <label className="field-label">Hashtags</label>
                  <input className="input" defaultValue="#indiehacker #buildinpublic #notesapp #codex #founder" />
                </div>
                <div>
                  <label className="field-label">CTA</label>
                  <input className="input" defaultValue="Link in bio · 7-day trial" />
                </div>
                <div>
                  <label className="field-label">First comment</label>
                  <input className="input" defaultValue="Try Renoo free — link in bio." />
                </div>
                <div>
                  <label className="field-label">Alt text (a11y)</label>
                  <input className="input" defaultValue="Bold quote card on blue: '3 founders. 4 weeks. Zero launches.'" />
                </div>
                <div>
                  <label className="field-label">Story link sticker</label>
                  <input className="input" defaultValue="https://renoo.app/?ref=ig-02" />
                </div>
                <div>
                  <label className="field-label">Scheduled</label>
                  <div className="input" style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    <Icon name="calendar" size={13} stroke={2} color="#EFFF00" />
                    <span>Tue · 7 Nov · 09:00 BST</span>
                  </div>
                </div>
              </div>

              {/* improve toolbar */}
              <div style={{ marginTop: 16, display: "flex", gap: 6, flexWrap: "wrap" }}>
                {["Punchier","Shorter","More premium","More viral","Founder voice","Stronger CTA","Add hook","A/B 5 hooks","Rewrite for Threads"].map(t => (
                  <button key={t} className="chip" style={{ background: "#2C2A23", color: "#C8C8C5", border: "1px solid #333" }}>{t}</button>
                ))}
              </div>

              <div style={{ marginTop: 16, display: "flex", gap: 8 }}>
                <button className="btn btn-secondary"><Icon name="refresh" size={12} stroke={2} /> Regenerate</button>
                <button className="btn btn-secondary"><Icon name="copy" size={12} stroke={2} /> Copy</button>
                <span style={{ marginLeft: "auto" }} />
                <button className="btn btn-secondary">Save draft</button>
                <button className="btn btn-primary"><Icon name="calendar" size={12} stroke={2} /> Schedule</button>
              </div>
            </div>
          </div>
        </div>

        {/* RIGHT — AI optimisation + connection */}
        <div style={{ borderLeft: "1px solid #3A372F", padding: 18, background: "#1A1813", overflowY: "auto", display: "flex", flexDirection: "column", gap: 14 }}>
          <div className="card" style={{ padding: 14 }}>
            <div className="card-title" style={{ marginBottom: 10 }}>AI optimisation</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              {[
                { l: "Clicks", v: true  },
                { l: "Likes",  v: false },
                { l: "Saves",  v: true  },
                { l: "Shares", v: true  },
                { l: "Comments", v: false },
              ].map(t => (
                <label key={t.l} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "6px 10px", background: "#201E18", border: "1px solid #3A372F", fontSize: 12, color: "#FFF" }}>
                  <span>{t.l}</span>
                  <span style={{ width: 30, height: 16, borderRadius: 99, background: t.v ? "#EFFF00" : "#1A1A1A", border: t.v ? "1px solid #ADC700" : "1px solid #333", position: "relative" }}>
                    <span style={{ position: "absolute", top: 1, left: t.v ? 15 : 1, width: 12, height: 12, background: t.v ? "#1A1813" : "#5C5C5C", borderRadius: 99, transition: "all .15s" }} />
                  </span>
                </label>
              ))}
              {[
                { l: "Viral hook",   v: true  },
                { l: "Strong CTA",   v: true  },
                { l: "Founder voice",v: true  },
                { l: "Premium tone", v: false },
              ].map(t => (
                <label key={t.l} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "6px 10px", background: "#201E18", border: "1px solid #3A372F", fontSize: 12, color: "#FFF" }}>
                  <span>{t.l}</span>
                  <span style={{ width: 30, height: 16, borderRadius: 99, background: t.v ? "#EFFF00" : "#1A1A1A", border: t.v ? "1px solid #ADC700" : "1px solid #333", position: "relative" }}>
                    <span style={{ position: "absolute", top: 1, left: t.v ? 15 : 1, width: 12, height: 12, background: t.v ? "#1A1813" : "#5C5C5C", borderRadius: 99 }} />
                  </span>
                </label>
              ))}
            </div>
          </div>

          {/* connect IG */}
          <div style={{ background: "#201E18", border: "1px solid rgba(255,178,63,0.3)", padding: 14, position: "relative", overflow: "hidden" }}>
            <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 3, background: "#FFB23F" }} />
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
              <Icon name="alert" size={15} stroke={2.4} color="#FFB23F" />
              <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.18em", color: "#FFB23F", fontWeight: 800, textTransform: "uppercase" }}>NOT CONNECTED</span>
            </div>
            <div style={{ fontSize: 12.5, color: "#C8C8C5", lineHeight: 1.55 }}>
              Auto-posting requires connecting to <b style={{ color: "#FFF" }}>Meta / Instagram Graph</b>. Until then, BoltKit schedules your queue and copies posts to your clipboard at the right time.
            </div>
            <button className="btn btn-secondary btn-sm" style={{ marginTop: 12, width: "100%" }} onClick={() => window.BoltKitConnectInstagram?.()}><Icon name="insta" size={12} stroke={2} /> Connect Instagram</button>
          </div>

          {/* future platforms */}
          <div className="card" style={{ padding: 14 }}>
            <div className="card-title" style={{ marginBottom: 10 }}>Future platforms</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
              {[
                { i: "tiktok",   l: "TikTok",       on: false },
                { i: "youtube",  l: "YouTube Shorts", on: false },
                { i: "linkedin", l: "LinkedIn",     on: false },
                { i: "google",   l: "X / Twitter",  on: false },
                { i: "facebook", l: "Facebook Page",on: false },
                { i: "meta",     l: "Threads",      on: false },
              ].map(p => (
                <div key={p.l} style={{ display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 10, padding: "8px 10px", background: "#1A1813", border: "1px solid #3A372F", alignItems: "center" }}>
                  <Icon name={p.i} size={13} stroke={2} color="#8A8A8A" />
                  <span style={{ fontSize: 12, color: "#C8C8C5" }}>{p.l}</span>
                  <span className="pill pill-dark" style={{ fontSize: 8.5 }}>SOON</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
);

InstagramScreen = () => {
  const posts = [
    { i: 1, thumb: "linear-gradient(135deg, #FF6B35, #C9522A)", cap: "Your camera roll is already a content plan.", date: "MON 06", when: "09:00", status: "scheduled" },
    { i: 2, thumb: "linear-gradient(135deg, #4DA8FF, #1E5FCC)", cap: "30 post ideas from one brand pack.", date: "TUE 07", when: "09:00", status: "scheduled" },
    { i: 3, thumb: "linear-gradient(135deg, #EFFF00, #ADC700)", cap: "Stop staring at a blank caption box.", date: "WED 08", when: "09:00", status: "ready" },
    { i: 4, thumb: "linear-gradient(135deg, #1E1E1E, #1A1813)", cap: "Your next seven days of posts are planned.", date: "THU 09", when: "09:00", status: "scheduled" },
    { i: 5, thumb: "linear-gradient(135deg, #A86BFF, #6B3DCC)", cap: "Turn one idea into five platform-ready posts.", date: "FRI 10", when: "09:00", status: "scheduled" },
    { i: 6, thumb: "linear-gradient(135deg, #4ADE80, #1FA659)", cap: "Behind the scenes: how I batch content calmly.", date: "SAT 11", when: "10:30", status: "draft" },
  ];
  const goals = ["Clicks", "Likes", "Saves", "Shares", "Viral hook", "Strong CTA", "Founder voice", "Premium tone"];
  return (
    <div className="ig-redesign-shell">
      <SidebarNav active="instagram" />
      <main className="ig-redesign-main">
        <TopBar project="Creator Workspace" />
        <div className="ig-redesign-scroll">
          <section className="ig-hero-panel">
            <div>
              <div className="ig-eyebrow"><span />INSTAGRAM · SCHEDULER</div>
              <h1>Plan a week of posts without the messy tabs.</h1>
              <p>Upload media, generate captions, tune the AI goals, then schedule each post from one calm creator workspace.</p>
              <div className="ig-status-row">
                <SyncChip state="sync" />
                <Pill tone="amber">Instagram not connected</Pill>
                <span>22 scheduled · 6 drafts · 2 ready</span>
              </div>
            </div>
            <div className="ig-hero-actions">
              <button className="btn btn-secondary"><Icon name="copy" size={12} stroke={2} /> Copy captions</button>
              <button className="btn btn-secondary"><Icon name="csv" size={12} stroke={2} /> Export CSV</button>
              <button className="btn btn-primary"><BoltMini size={13} color="#1A1813" /> Generate 30 ideas</button>
            </div>
          </section>

          <section className="ig-bulk-bar">
            <span className="ai-chip"><Icon name="sparkle" size={11} stroke={2} /> AI BULK</span>
            <div className="ig-chip-row">
              {["+30 ideas", "+90 ideas", "Bulk captions", "Bulk hashtags", "Bulk CTAs", "Alt text", "First comment"].map((label, index) => (
                <button key={label} className={"ig-pill-button" + (index === 2 ? " active" : "")}>{label}</button>
              ))}
            </div>
            <div className="ig-schedule-buttons">
              <button className="btn btn-secondary btn-sm">Same time daily</button>
              <button className="btn btn-secondary btn-sm">Pick date range</button>
            </div>
          </section>

          <section className="ig-workspace">
            <aside className="ig-queue-panel">
              <div className="ig-panel-head">
                <div>
                  <div className="card-title">Post queue</div>
                  <div className="card-sub">Choose a post, set the date, keep the week moving</div>
                </div>
                <Pill tone="yellow">30</Pill>
              </div>
              <div className="ig-chip-row compact">
                {["All", "Draft", "Ready", "Scheduled"].map((label, index) => (
                  <button key={label} className={"ig-pill-button" + (index === 0 ? " active" : "")}>{label}</button>
                ))}
              </div>
              <div className="ig-queue-clean">
                {posts.map(post => <IGQueueRow key={post.i} ix={post.i} {...post} />)}
              </div>
            </aside>

            <section className="ig-editor-panel">
              <div className="ig-panel-head">
                <div>
                  <div className="ig-eyebrow small"><span />POST 02 / 30</div>
                  <h2>30 post ideas from one brand pack.</h2>
                </div>
                <div className="ig-score-pair">
                  <Pill tone="yellow">QS 94</Pill>
                  <Pill tone="green">Brand 92</Pill>
                </div>
              </div>

              <div className="ig-editor-grid">
                <div className="ig-media-card">
                  <div className="ig-media-preview">
                    <span>SLIDE 1 / 3</span>
                    <b>30 ideas.<br />One brand.<br />Ready to post.</b>
                  </div>
                  <div className="ig-media-strip">
                    <button>2/3</button>
                    <button>3/3</button>
                    <button><Icon name="plus" size={14} stroke={2} /></button>
                  </div>
                  <label className="ig-check on"><span><Icon name="check" size={11} stroke={3} /></span>Post to Story too</label>
                  <label className="ig-check"><span />Add link sticker</label>
                </div>

                <div className="ig-copy-editor">
                  <label className="field-label">Caption</label>
                  <textarea className="textarea" defaultValue={"30 post ideas from one brand pack.\n\nNo blank caption box. No messy folders. No guessing what to post next.\n\nBoltKit turns your links, assets and content notes into captions, hooks, hashtags and a clean posting calendar.\n\nSave this for your next content batch."} />
                  <div className="ig-form-grid">
                    <label><span>Hashtags</span><input className="input" defaultValue="#contentcreator #socialmediatips #instagramtips #creatorbusiness" /></label>
                    <label><span>CTA</span><input className="input" defaultValue="Save this for your next batch day" /></label>
                    <label><span>First comment</span><input className="input" defaultValue="Want the checklist? Drop 'CONTENT' below." /></label>
                    <label><span>Scheduled</span><input className="input" defaultValue="Tue · 7 Nov · 09:00 BST" /></label>
                    <label className="wide"><span>Alt text</span><input className="input" defaultValue="Bold blue quote card saying 30 ideas, one brand, ready to post." /></label>
                  </div>
                </div>
              </div>

              <div className="ig-improve-row">
                {["Punchier", "Shorter", "More viral", "Creator voice", "Stronger CTA", "A/B 5 hooks"].map(label => (
                  <button key={label} className="ig-pill-button">{label}</button>
                ))}
              </div>
              <div className="ig-editor-actions">
                <button className="btn btn-secondary"><Icon name="refresh" size={12} stroke={2} /> Regenerate</button>
                <button className="btn btn-secondary"><Icon name="copy" size={12} stroke={2} /> Copy</button>
                <span />
                <button className="btn btn-secondary">Save draft</button>
                <button className="btn btn-primary"><Icon name="calendar" size={12} stroke={2} /> Schedule post</button>
              </div>
            </section>

            <aside className="ig-side-panel">
              <div className="ig-card-soft">
                <div className="card-title">AI optimisation goals</div>
                <div className="ig-goal-grid">
                  {goals.map((goal, index) => (
                    <button key={goal} className={"ig-goal" + ([0, 2, 4, 5, 6].includes(index) ? " on" : "")}>
                      <span>{goal}</span>
                      <i />
                    </button>
                  ))}
                </div>
              </div>
              <div className="ig-warning-card">
                <div><Icon name="alert" size={15} stroke={2.4} color="#FFB23F" /> NOT CONNECTED</div>
                <p>Auto-posting needs Meta / Instagram Graph. Until then, BoltKit keeps your schedule and makes posting manually painless.</p>
                <button className="btn btn-secondary btn-sm" onClick={() => window.BoltKitConnectInstagram?.()}><Icon name="insta" size={12} stroke={2} /> Connect Instagram</button>
              </div>
              <div className="ig-card-soft">
                <div className="card-title">Coming next</div>
                {["TikTok", "YouTube Shorts", "LinkedIn", "Threads", "Facebook Page"].map(label => (
                  <div key={label} className="ig-soon-row"><span>{label}</span><Pill tone="dark">Soon</Pill></div>
                ))}
              </div>
            </aside>
          </section>
        </div>
      </main>
    </div>
  );
};

/* CONTENT CALENDAR */
let CalendarScreen = () => (
  <div style={{ height: "100%", display: "flex", background: "#1A1813" }}>
    <SidebarNav active="calendar" />
    <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
      <TopBar />
      <div style={{ flex: 1, overflowY: "auto", padding: "24px 28px 40px" }}>
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 18, flexWrap: "wrap", gap: 12 }}>
          <div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, letterSpacing: "0.22em", color: "#EFFF00", fontWeight: 800, textTransform: "uppercase", display: "inline-flex", alignItems: "center", gap: 8 }}><span style={{ width: 18, height: 1, background: "#EFFF00" }} />CONTENT CALENDAR</div>
            <h1 style={{ fontFamily: "'Anton', Impact, sans-serif", fontSize: 48, lineHeight: 1, textTransform: "uppercase", margin: "6px 0 0", color: "#FFF" }}>November 2026</h1>
          </div>
          <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
            <div style={{ display: "flex", background: "#201E18", border: "1px solid #3A372F" }}>
              {["Month","Week","Day"].map((v, i) => (
                <div key={v} style={{ padding: "8px 14px", background: i === 0 ? "#EFFF00" : "transparent", color: i === 0 ? "#1A1813" : "#C8C8C5", fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, letterSpacing: "0.14em", fontWeight: 800, textTransform: "uppercase", cursor: "pointer" }}>{v}</div>
              ))}
            </div>
            <button className="icon-btn"><Icon name="chevron_left" size={13} stroke={2} /></button>
            <button className="icon-btn"><Icon name="chevron_right" size={13} stroke={2} /></button>
            <button className="btn btn-secondary btn-sm"><Icon name="filter" size={11} stroke={2} /> Filters</button>
            <button className="btn btn-primary btn-sm"><Icon name="plus" size={11} stroke={2.4} /> New post</button>
          </div>
        </div>

        {/* filter chips */}
        <div style={{ display: "flex", gap: 6, marginBottom: 14, flexWrap: "wrap" }}>
          {["All projects","Renoo","Atelier","Lofti","Instagram","TikTok","Reels","Drafts","Scheduled","Posted"].map((c, i) => (
            <span key={c} className="chip" style={{ background: i === 0 ? "#FFF" : "#26241E", color: i === 0 ? "#1A1813" : "#C8C8C5", border: i === 0 ? "1px solid #FFF" : "1px solid #3A372F", fontSize: 9.5 }}>{c}</span>
          ))}
        </div>

        {/* week header */}
        <div className="cal-grid">
          {["MON","TUE","WED","THU","FRI","SAT","SUN"].map(d => (
            <div key={d} style={{ background: "#1A1813", padding: "8px 8px", fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: "#8A8A8A", letterSpacing: "0.18em", fontWeight: 800 }}>{d}</div>
          ))}
        </div>

        {/* month grid */}
        <div className="cal-grid" style={{ borderTop: 0 }}>
          {/* 5 rows × 7 cols = 35 cells. Start with last days of Oct, then Nov */}
          {Array.from({ length: 35 }).map((_, i) => {
            const day = i - 5; // Oct ends, Nov starts at col 6
            const dim = day < 1 || day > 30;
            const today = day === 6;
            const events = {
              1:  [{ l: "RENOO · IG 1", t: "y" }],
              2:  [{ l: "RENOO · IG 2", t: "y" }, { l: "REEL 02", t: "b" }],
              3:  [{ l: "RENOO · IG 3", t: "y" }],
              6:  [{ l: "ATELIER · IG", t: "g" }, { l: "RENOO · IG 5", t: "y" }, { l: "TikTok 01", t: "b" }],
              7:  [{ l: "RENOO · IG 6", t: "y" }, { l: "+ 2 MORE", t: "gh" }],
              8:  [{ l: "RENOO · IG 7", t: "y" }],
              9:  [{ l: "RENOO · IG 8", t: "y" }, { l: "LinkedIn", t: "b" }],
              10: [{ l: "RENOO · IG 9", t: "y" }],
              13: [{ l: "LOFTI · IG 1", t: "g" }],
              14: [{ l: "RENOO · IG 10", t: "y" }, { l: "REEL 04", t: "b" }],
              15: [{ l: "RENOO · IG 11", t: "y" }],
              16: [{ l: "RENOO · IG 12", t: "y" }],
              17: [{ l: "ATELIER · IG", t: "g" }],
              20: [{ l: "RENOO · IG 13", t: "y" }],
              21: [{ l: "RENOO · IG 14", t: "y" }],
              22: [{ l: "RENOO · IG 15", t: "y" }],
              23: [{ l: "RENOO · IG 16", t: "y" }],
              24: [{ l: "LOFTI · IG 2",  t: "g" }],
              27: [{ l: "RENOO · IG 17", t: "y" }, { l: "REEL 05", t: "b" }],
              28: [{ l: "RENOO · IG 18", t: "y" }],
              29: [{ l: "RENOO · IG 19", t: "y" }],
              30: [{ l: "RENOO · IG 20", t: "y" }, { l: "LAUNCH DAY", t: "gh" }],
            }[day] || [];
            return (
              <div key={i} className={"cal-cell" + (dim ? " dim" : "") + (today ? " today" : "")}>
                <div className="d">{dim ? (day < 1 ? 25 + i : day - 30) : day}</div>
                {events.map((e, j) => <div key={j} className={"cal-event " + (e.t === "y" ? "" : e.t)}>{e.l}</div>)}
              </div>
            );
          })}
        </div>

        {/* legend */}
        <div style={{ marginTop: 14, display: "flex", gap: 18, color: "#8A8A8A", fontFamily: "'JetBrains Mono', monospace", fontSize: 10.5, letterSpacing: "0.14em", textTransform: "uppercase", fontWeight: 800, alignItems: "center" }}>
          <span style={{ display: "flex", alignItems: "center", gap: 6 }}><span style={{ width: 12, height: 12, background: "#EFFF00" }} />RENOO</span>
          <span style={{ display: "flex", alignItems: "center", gap: 6 }}><span style={{ width: 12, height: 12, background: "#4DA8FF" }} />REELS · TIKTOK</span>
          <span style={{ display: "flex", alignItems: "center", gap: 6 }}><span style={{ width: 12, height: 12, background: "#4ADE80" }} />OTHER PROJECTS</span>
          <span style={{ marginLeft: "auto" }}>Drag posts to reschedule · Cmd+click to duplicate</span>
        </div>
      </div>
    </div>
  </div>
);

CalendarScreen = () => {
  const [selectedDay, setSelectedDay] = React.useState(6);
  const [selectedPost, setSelectedPost] = React.useState("renoo-ig-05");
  const [time, setTime] = React.useState("09:00");
  const [platforms, setPlatforms] = React.useState(["Instagram", "Facebook"]);
  const posts = [
    { id: "renoo-ig-01", label: "One folder. Every idea.", type: "Carousel", ready: true },
    { id: "renoo-ig-05", label: "3 founders. 4 weeks. Zero launches.", type: "Carousel", ready: true },
    { id: "renoo-reel-02", label: "Launch faster in 10 seconds", type: "Reel / Short", ready: true },
    { id: "renoo-story-01", label: "Behind the scenes launch story", type: "Story", ready: false },
    { id: "renoo-linkedin-01", label: "Founder launch lesson thread", type: "Text + image", ready: true },
  ];
  const platformsAll = [
    { name: "Instagram", icon: "insta", connected: false, note: "Feed, Reels, Stories" },
    { name: "Facebook", icon: "facebook", connected: false, note: "Page post + Story" },
    { name: "TikTok", icon: "tiktok", connected: false, note: "Short vertical video" },
    { name: "YouTube", icon: "youtube", connected: false, note: "Shorts" },
    { name: "LinkedIn", icon: "linkedin", connected: false, note: "Founder post" },
  ];
  const events = {
    1: ["IG 1"],
    2: ["IG 2", "Reel"],
    6: ["IG 5", "TikTok", "FB"],
    7: ["IG 6"],
    9: ["LinkedIn"],
    14: ["IG 10", "Short"],
    21: ["IG 14"],
    30: ["Launch day"],
  };
  const togglePlatform = (name) => {
    setPlatforms((current) => current.includes(name) ? current.filter(item => item !== name) : [...current, name]);
  };
  const selected = posts.find(post => post.id === selectedPost) || posts[0];
  return (
    <div className="ig-redesign-shell">
      <SidebarNav active="calendar" />
      <main className="ig-redesign-main">
        <TopBar project="Renoo · Notes" />
        <div className="ig-redesign-scroll">
          <section className="ig-hero-panel">
            <div>
              <div className="ig-eyebrow"><span />ALL-IN-ONE · SOCIAL CALENDAR</div>
              <h1>Click a day. Pick a post. Choose every platform.</h1>
              <p>Plan Instagram, Facebook, TikTok, YouTube Shorts and LinkedIn from one launch calendar. Publishing stays gated until each platform is connected.</p>
              <div className="ig-status-row">
                <SyncChip state="sync" />
                <Pill tone="amber">Publishing not connected</Pill>
                <span>{platforms.join(" + ")} · {time} on Nov {selectedDay}</span>
              </div>
            </div>
            <div className="ig-hero-actions">
              <button className="btn btn-secondary"><Icon name="filter" size={12} stroke={2} /> Filter</button>
              <button className="btn btn-primary"><BoltMini size={13} color="#1A1813" /> Add to calendar</button>
            </div>
          </section>

          <section className="social-platform-strip">
            {platformsAll.map(platform => (
              <button key={platform.name} className={platforms.includes(platform.name) ? "active" : ""} onClick={() => togglePlatform(platform.name)}>
                <Icon name={platform.icon} size={15} stroke={2} />
                <span>{platform.name}</span>
                <small>{platform.note}</small>
                <Pill tone={platform.connected ? "green" : "dark"}>{platform.connected ? "Live" : "Soon"}</Pill>
              </button>
            ))}
          </section>

          <section className="social-calendar-layout">
            <div className="social-calendar-card">
              <div className="ig-panel-head">
                <div>
                  <div className="ig-eyebrow small"><span />NOVEMBER 2026</div>
                  <h2>Launch calendar</h2>
                </div>
                <div className="ig-chip-row compact">
                  {["Month", "Week", "Day"].map((label, index) => <button key={label} className={"ig-pill-button" + (index === 0 ? " active" : "")}>{label}</button>)}
                </div>
              </div>
              <div className="social-week-head">
                {["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"].map(day => <span key={day}>{day}</span>)}
              </div>
              <div className="social-calendar-grid">
                {Array.from({ length: 35 }).map((_, index) => {
                  const day = index - 5;
                  const display = day < 1 ? 25 + index : day > 30 ? day - 30 : day;
                  const dim = day < 1 || day > 30;
                  const active = day === selectedDay;
                  return (
                    <button key={index} className={(dim ? "dim " : "") + (active ? "active " : "")} onClick={() => !dim && setSelectedDay(day)}>
                      <b>{display}</b>
                      {(events[day] || []).slice(0, 3).map(event => <span key={event}>{event}</span>)}
                    </button>
                  );
                })}
              </div>
            </div>

            <aside className="day-planner-panel">
              <div className="ig-eyebrow small"><span />DAY PLANNER</div>
              <h2>Nov {selectedDay}</h2>
              <label>
                <span>Post to schedule</span>
                <select value={selectedPost} onChange={(event) => setSelectedPost(event.target.value)}>
                  {posts.map(post => <option key={post.id} value={post.id}>{post.label}</option>)}
                </select>
              </label>
              <div className="selected-post-preview">
                <div><BoltMini size={18} color="#1A1813" /></div>
                <section>
                  <b>{selected.label}</b>
                  <span>{selected.type} · {selected.ready ? "Ready" : "Needs review"}</span>
                </section>
              </div>
              <label>
                <span>Time</span>
                <input type="time" value={time} onChange={(event) => setTime(event.target.value)} />
              </label>
              <label>
                <span>Caption note</span>
                <textarea defaultValue="Use founder voice, punchy hook, strong link-in-bio CTA. Reuse as Story where available." />
              </label>
              <div className="planner-platforms">
                {platformsAll.map(platform => (
                  <button key={platform.name} className={platforms.includes(platform.name) ? "active" : ""} onClick={() => togglePlatform(platform.name)}>
                    <Icon name={platform.icon} size={14} stroke={2} />
                    {platform.name}
                  </button>
                ))}
              </div>
              <button className="btn btn-primary" style={{ width: "100%", justifyContent: "center" }}>
                <Icon name="calendar" size={12} stroke={2} /> Schedule on {platforms.length} platform{platforms.length === 1 ? "" : "s"}
              </button>
              <p>Auto-posting will activate per platform after Meta/TikTok/Google/LinkedIn connections are approved.</p>
            </aside>
          </section>
        </div>
      </main>
    </div>
  );
};

Object.assign(window, { InstagramScreen, CalendarScreen });