const { useState } = React;

const R = "#CC1A00";
const RD = "#A01400";
const BK = "#0D0D0D";
const DK = "#1C1C1C";
const MD = "#4A4A4A";
const MT = "#7A7570";
const BD = "#D8D3CC";
const BG = "#FAF8F4";
const WH = "#FFFFFF";
const LG = "#F0EDE6";

const SECS = ["Politics","World","Culture","Sport","Technology","Opinion"];

const SEED = [
  { id:1, title:"Historic Climate Accord Signed at Geneva Summit", subtitle:"Over 190 nations commit to binding emissions targets in a landmark deal that reshapes global environmental policy for d[...]", author:"Sarah Martinez", section:"World", date:"10 May 2026", content:"The historic climate accord represents a turning point in global environmental policy...", img:"https://images.unsplash.com/photo-1569163139394-de4798aa62b2?w=1200&h=675&fit=crop", featured:true },
  { id:2, title:"Markets Surge as Fed Signals Rate Pause", subtitle:"S&P 500 hits record high after central bank holds rates steady for third consecutive meeting", author:"James Crawford", section:"Technology", date:"10 May 2026", content:"Financial markets responded positively today as the Federal Reserve announced...", img:"https://images.unsplash.com/photo-1590080876/market-traders?w=1200&h=675&fit=crop", featured:false },
  { id:3, title:"Ancient City Discovered Beneath the Sahara", subtitle:"Archaeologists unearth a 4,000-year-old metropolis in southern Libya, rewriting the history of human civilisation", author:"Dr. Emma Thompson", section:"Culture", date:"9 May 2026", content:"An extraordinary archaeological discovery has emerged from the Sahara desert...", img:"https://images.unsplash.com/photo-1518709268805-4e9042af9f23?w=1200&h=675&fit=crop", featured:false },
  { id:4, title:"Venice Film Festival Announces a Stellar Programme", subtitle:"New works from Villeneuve, Campion and Sorrentino headline one of the strongest lineups in the festival's history", author:"Lucas Moretti", section:"Culture", date:"9 May 2026", content:"The Venice Film Festival has unveiled an exceptional programme this year...", img:"https://images.unsplash.com/photo-1489599849228-ed4dc6900f2f?w=1200&h=675&fit=crop", featured:false },
  { id:5, title:"Roma Clinch Serie A Title in Stunning Comeback", subtitle:"Giallorossi seal championship after extraordinary 3-2 victory over Juventus ends a 24-year wait", author:"Luca Conti", section:"Sport", date:"8 May 2026", content:"In one of the most dramatic finishes to a Serie A season in recent memory...", img:"https://images.unsplash.com/photo-1461896836934-ffe607ba8211?w=1200&h=675&fit=crop", featured:false },
  { id:6, title:"AI Now Generates 40% of All Production Code", subtitle:"A landmark MIT study reveals the extraordinary scale of artificial intelligence's transformation of software development", author:"David Chen", section:"Technology", date:"8 May 2026", content:"A comprehensive new study from MIT reveals the shocking extent to which AI has...", img:"https://images.unsplash.com/photo-1677442d019cecf3d87f5439fbf0a5a27//ai-tech?w=1200&h=675&fit=crop", featured:false },
  { id:7, title:"The Real Cost of Our Obsession With Productivity", subtitle:"We have optimised every hour of our lives — and made ourselves profoundly miserable in the process", author:"Anna Williams", section:"Opinion", date:"7 May 2026", content:"In our endless pursuit of productivity and optimization, we have lost sight of what truly matters...", img:"", featured:false },
];

const TICKER = "G20 leaders call emergency summit on AI governance  ·  Pope Francis addresses climate crisis in historic encyclical  ·  Earthquake measuring 6.2 strikes central Italy; no casualties reported  ·  Nobel Prize announcements begin Monday  ·  G20 leaders call emergency summit on AI governance";

const fonts = `@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=Crimson+Pro:ital,wght@0,400;0,600;1,400&family=Barlow+Condensed:wght@400;600;700;800;900&display=swap');`;

const anim = `
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes fadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.art-card:hover .art-title { color:#CC1A00; }
.art-card:hover img { opacity:0.88; }
.nav-item:hover { color:#CC1A00 !important; }
.admin-row:hover { background:#F0EDE6 !important; }
`;

const EMPTY_FORM = { title:"", subtitle:"", author:"", section:"Politics", content:"", img:"", featured:false };
const EMPTY_PAGE = { id:"", name:"", position:0 };

function TheTip() {
  const [view, setView] = useState("home");
  const [arts, setArts] = useState(SEED);
  const [sel, setSel] = useState(null);
  const [sec, setSec] = useState("All");
  const [auth, setAuth] = useState(false);
  const [pwd, setPwd] = useState("");
  const [pwdErr, setPwdErr] = useState(false);
  const [tab, setTab] = useState("list");
  const [form, setForm] = useState(EMPTY_FORM);
  const [msg, setMsg] = useState("");
  const [delConfirm, setDelConfirm] = useState(null);
  const [hov, setHov] = useState(null);
  const [ticker, setTicker] = useState(TICKER);
  const [pages, setPages] = useState(SECS.map((s, i) => ({ id: s.toLowerCase(), name: s, position: i })));
  const [pageForm, setPageForm] = useState(EMPTY_PAGE);
  const [editingPageId, setEditingPageId] = useState(null);

  const featured = arts.find(a => a.featured) || arts[0];
  const grid = sec === "All"
    ? arts.filter(a => a.id !== featured?.id)
    : arts.filter(a => a.section === sec);

  const goHome = () => { setView("home"); setSel(null); };

  const openArt = (a) => { setSel(a); setView("article"); };

  const doLogin = () => {
    if (pwd === "thetip2026") { setAuth(true); setView("admin"); setPwdErr(false); setPwd(""); }
    else { setPwdErr(true); }
  };

  const doAdd = () => {
    if (!form.title.trim() || !form.content.trim()) { setMsg("err"); return; }
    const now = new Date().toLocaleDateString("en-GB",{day:"numeric",month:"long",year:"numeric"});
    const a = { ...form, id: Date.now(), date: now };
    setArts(p => [a, ...p]);
    setForm(EMPTY_FORM);
    setMsg("ok");
    setTimeout(() => setMsg(""), 3000);
  };

  const doDelete = (id) => { setArts(p => p.filter(a => a.id !== id)); setDelConfirm(null); };
  const doFeature = (id) => setArts(p => p.map(a => ({ ...a, featured: a.id === id })));

  const addPage = () => {
    if (!pageForm.name.trim()) { setMsg("err"); return; }
    const newPage = { id: pageForm.name.toLowerCase().replace(/\s+/g, '-'), name: pageForm.name, position: pages.length };
    setPages(p => [...p, newPage]);
    setPageForm(EMPTY_PAGE);
    setMsg("ok");
    setTimeout(() => setMsg(""), 2000);
  };

  const updatePage = () => {
    if (!pageForm.name.trim()) { setMsg("err"); return; }
    setPages(p => p.map(pg => pg.id === editingPageId ? { ...pg, name: pageForm.name } : pg));
    setEditingPageId(null);
    setPageForm(EMPTY_PAGE);
    setMsg("ok");
    setTimeout(() => setMsg(""), 2000);
  };

  const deletePage = (id) => { setPages(p => p.filter(pg => pg.id !== id)); };

  const movePage = (id, direction) => {
    const idx = pages.findIndex(p => p.id === id);
    if ((direction === "up" && idx > 0) || (direction === "down" && idx < pages.length - 1)) {
      const newPages = [...pages];
      const swapIdx = direction === "up" ? idx - 1 : idx + 1;
      [newPages[idx], newPages[swapIdx]] = [newPages[swapIdx], newPages[idx]];
      setPages(newPages);
    }
  };

  const Inp = ({ label, val, onChange, placeholder, big, type="text" }) => (
    React.createElement("div", { style: { marginBottom:18 } },
      React.createElement("div", { style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:11, letterSpacing:"0.12em", textTransform:"uppercase", color:MT, marginBottom:6 } }, label),
      big
        ? React.createElement("textarea", { value:val, onChange:onChange, placeholder:placeholder, style: { width:"100%", padding:"10px 14px", fontFamily:"'Crimson Pro',Georgia,serif", fontSize:18, border:`1px solid ${BD}`, borderRadius:3, fontWeight:400, resize:"vertical", minHeight:150 } })
        : React.createElement("input", { type:type, value:val, onChange:e => onChange(e), placeholder:placeholder, onKeyDown:type==="password" ? e => e.key==="Enter"&&doLogin() : undefined, style: { width:"100%", padding:"10px 14px", fontFamily:"'Crimson Pro',Georgia,serif", fontSize:16, border:`1px solid ${BD}`, borderRadius:3 } })
    )
  );

  const SectionTag = ({ s }) => (
    React.createElement("span", { style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:11, letterSpacing:"0.15em", textTransform:"uppercase", color:R } }, s)
  );

  const Meta = ({ author, date }) => (
    React.createElement("span", { style: { fontFamily:"'Barlow Condensed',sans-serif", fontSize:12, color:MT, textTransform:"uppercase", letterSpacing:"0.05em" } },
      `By ${author || "Staff Reporter"} · ${date}`
    )
  );

  const Header = () => (
    React.createElement("header", { style: { background:WH, borderBottom:`3px solid ${BK}` } },
      React.createElement("div", { style: { display:"flex", alignItems:"center", justifyContent:"space-between", padding:"7px 28px", borderBottom:`1px solid ${BD}` } },
        React.createElement("span", { style: { fontFamily:"'Barlow Condensed',sans-serif", fontSize:12, color:MT, textTransform:"uppercase", letterSpacing:"0.06em" } }, "Sunday, May 10, 2026"),
        React.createElement("div", { style: { display:"flex", gap:16, alignItems:"center" } },
          React.createElement("span", { onClick: () => setView(auth ? "admin" : "login"), style: { fontFamily:"'Barlow Condensed',sans-serif", fontSize:12, textTransform:"uppercase", letterSpacing:"0.08em", color:auth ? R : BK, cursor:"pointer" } },
            auth ? "● Editorial Dashboard" : "Staff Login"
          ),
          React.createElement("span", { style: { fontFamily:"'Barlow Condensed',sans-serif", fontSize:11, fontWeight:800, textTransform:"uppercase", letterSpacing:"0.1em", background:R, color:WH, padding:"5px 14px", cursor:"pointer" }, onClick:goHome }, "Subscribe")
        )
      ),
      React.createElement("div", { style: { textAlign:"center", padding:"20px 28px 16px", cursor:"pointer" }, onClick:goHome },
        React.createElement("div", { style: { display:"inline-flex", alignItems:"baseline", gap:0 } },
          React.createElement("span", { style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:28, color:DK, textTransform:"uppercase", letterSpacing:"0.05em", marginRight:6, lineHeight:1 } }, "THE"),
          React.createElement("span", { style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:900, fontSize:88, color:R, textTransform:"uppercase", letterSpacing:"-3px", lineHeight:1 } }, "TIP")
        ),
        React.createElement("div", { style: { fontFamily:"'Crimson Pro',Georgia,serif", fontStyle:"italic", fontSize:14, color:MT, marginTop:-4, letterSpacing:"0.05em" } }, "Independent journalism at its sharpest")
      ),
      React.createElement("nav", { style: { display:"flex", alignItems:"center", padding:"0 28px", borderTop:`1px solid ${BD}`, overflowX:"auto" } },
        ["All",...pages.map(p => p.name)].map(s => 
          React.createElement("span", { key:s, className:"nav-item", onClick: () => { setSec(s); setView("home"); }, style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:13, textTransform:"uppercase", letterSpacing:"0.08em", color:sec === s ? R : BK, padding:"14px 20px", cursor:"pointer", whiteSpace:"nowrap", transition:"color 0.15s", borderBottom: sec === s ? `3px solid ${R}` : "none" } },
            s
          )
        )
      )
    )
  );

  const Footer = () => (
    React.createElement("footer", { style: { background:BK, color:"rgba(255,255,255,0.55)", padding:"44px 28px 32px", marginTop:56 } },
      React.createElement("div", { style: { maxWidth:1200, margin:"0 auto" } },
        React.createElement("div", { style: { display:"flex", alignItems:"baseline", gap:6, marginBottom:20 } },
          React.createElement("span", { style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:22, color:"rgba(255,255,255,0.5)", textTransform:"uppercase" } }, "THE"),
          React.createElement("span", { style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:900, fontSize:56, color:R, textTransform:"uppercase", letterSpacing:"-2px", lineHeight:1 } }, "TIP")
        ),
        React.createElement("div", { style: { display:"flex", flexWrap:"wrap", gap:"8px 28px", marginBottom:28 } },
          pages.map(p => React.createElement("span", { key:p.id, onClick: () => { setSec(p.name); setView("home"); }, style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:600, fontSize:12, textTransform:"uppercase", letterSpacing:"0.05em", color:"rgba(255,255,255,0.6)", cursor:"pointer", transition:"color 0.15s" }, onMouseEnter:e=>e.target.style.color="rgba(255,255,255,1)", onMouseLeave:e=>e.target.style.color="rgba(255,255,255,0.6)" }, p.name))
        ),
        React.createElement("div", { style: { borderTop:"1px solid rgba(255,255,255,0.1)", paddingTop:20, fontFamily:"'Barlow Condensed',sans-serif", fontSize:12, letterSpacing:"0.05em" } },
          "© 2026 The Tip Media Group. All rights reserved."
        )
      )
    )
  );

  /* ── LOGIN ──────────────────────────────────────────────────────────────── */
  if (view === "login") return (
    React.createElement("div", { style: { fontFamily:"'Crimson Pro',Georgia,serif", background:BG, minHeight:"100vh", display:"flex", alignItems:"center", justifyContent:"center" } },
      React.createElement("style", {}, `${fonts}${anim}`),
      React.createElement("div", { style: { background:WH, width:380, borderTop:`4px solid ${R}`, padding:"44px 40px", boxShadow:"0 8px 40px rgba(0,0,0,0.08)", animation:"fadeUp 0.4s ease" } },
        React.createElement("div", { style: { textAlign:"center", marginBottom:32 } },
          React.createElement("div", { style: { display:"inline-flex", alignItems:"baseline", gap:4, marginBottom:6 } },
            React.createElement("span", { style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:18, color:DK, textTransform:"uppercase" } }, "THE"),
            React.createElement("span", { style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:900, fontSize:44, color:R, textTransform:"uppercase", letterSpacing:"-2px", lineHeight:1 } }, "TIP")
          ),
          React.createElement("div", { style: { fontFamily:"'Barlow Condensed',sans-serif", fontSize:11, color:MT, textTransform:"uppercase", letterSpacing:"0.15em" } }, "Editorial Dashboard · Staff Only")
        ),
        React.createElement(Inp, { label:"Password", val:pwd, onChange:e => setPwd(e.target.value), placeholder:"Enter your password", type:"password" }),
        pwdErr && React.createElement("div", { style: { fontFamily:"'Barlow Condensed',sans-serif", fontSize:12, color:R, letterSpacing:"0.05em", marginTop:-12, marginBottom:16 } }, "Incorrect password. Please try again."),
        React.createElement("button", { onClick:doLogin, style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:800, fontSize:14, letterSpacing:"0.1em", textTransform:"uppercase", width:"100%", padding:14, background:R, color:WH, border:"none", cursor:"pointer", borderRadius:3 } }, "Sign In"),
        React.createElement("div", { onClick:goHome, style: { fontFamily:"'Barlow Condensed',sans-serif", fontSize:12, color:MT, textAlign:"center", marginTop:18, cursor:"pointer", letterSpacing:"0.05em", textTransform:"uppercase" } }, "← Back to home")
      )
    )
  );

  /* ── ADMIN ──────────────────────────────────────────────────────────────── */
  if (view === "admin" && auth) return (
    React.createElement("div", { style: { background:"#F4F2EE", minHeight:"100vh", fontFamily:"'Crimson Pro',Georgia,serif" } },
      React.createElement("style", {}, `${fonts}${anim}`),
      React.createElement("div", { style: { background:BK, padding:"14px 28px", display:"flex", alignItems:"center", justifyContent:"space-between" } },
        React.createElement("div", { style: { display:"flex", alignItems:"center", gap:16 } },
          React.createElement("span", { style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:900, fontSize:24, color:R, textTransform:"uppercase", letterSpacing:"-0.5px" } }, "THE TIP"),
          React.createElement("span", { style: { fontFamily:"'Barlow Condensed',sans-serif", fontSize:12, color:"rgba(255,255,255,0.4)", textTransform:"uppercase", letterSpacing:"0.1em" } }, "/ Editorial Dashboard")
        ),
        React.createElement("div", { style: { display:"flex", gap:10 } },
          React.createElement("button", { onClick:goHome, style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:12, letterSpacing:"0.08em", textTransform:"uppercase", padding:"8px 18px", background:"rgba(255,255,255,0.1)", color:WH, border:"none", cursor:"pointer", borderRadius:3 } }, "View Site"),
          React.createElement("button", { onClick: () => { setAuth(false); goHome(); }, style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:12, letterSpacing:"0.08em", textTransform:"uppercase", padding:"8px 18px", background:"rgba(255,255,255,0.1)", color:WH, border:"none", cursor:"pointer", borderRadius:3 } }, "Sign Out")
        )
      ),
      React.createElement("div", { style: { maxWidth:1140, margin:"0 auto", padding:"36px 28px" } },
        React.createElement("h1", { style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:900, fontSize:34, textTransform:"uppercase", letterSpacing:"0.04em", color:BK, marginBottom:6 } }, "Editorial Dashboard"),
        React.createElement("p", { style: { fontFamily:"'Crimson Pro',serif", fontSize:18, color:MT, marginBottom:32 } }, `${arts.length} articles published across ${pages.length} sections`),
        React.createElement("div", { style: { display:"flex", gap:8, marginBottom:28 } },
          [["list","All Articles"],["add","Add Article"],["ticker","Breaking News"],["pages","Manage Sections"]].map(([id,lbl]) => 
            React.createElement("button", { key:id, onClick: () => setTab(id), style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:13, letterSpacing:"0.1em", textTransform:"uppercase", padding:"10px 20px", background: tab === id ? R : BD, color: tab === id ? WH : BK, border:"none", cursor:"pointer", borderRadius:3 } },
              lbl
            )
          )
        ),
        tab === "list" && React.createElement("div", { style: { background:WH, border:`1px solid ${BD}`, overflow:"auto" } },
          React.createElement("table", { style: { width:"100%", borderCollapse:"collapse", fontSize:14, minWidth:700 } },
            React.createElement("thead", {},
              React.createElement("tr", { style: { background:"#EEEBE6" } },
                ["Headline","Section","Author","Date","Featured","Actions"].map(h => 
                  React.createElement("th", { key:h, style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:11, letterSpacing:"0.12em", textTransform:"uppercase", padding:"12px 16px", textAlign:"left", color:BK } }, h)
                )
              )
            ),
            React.createElement("tbody", {},
              arts.map(a => 
                React.createElement("tr", { key:a.id, className:"admin-row", style: { borderBottom:`1px solid ${BD}`, background: delConfirm===a.id ? "#FFF5F5" : WH, transition:"background 0.15s" } },
                  React.createElement("td", { style: { padding:"14px 16px", maxWidth:280 } },
                    React.createElement("div", { style: { fontFamily:"'Playfair Display',Georgia,serif", fontWeight:700, fontSize:15, lineHeight:1.3, color:BK } }, a.title)
                  ),
                  React.createElement("td", { style: { padding:"14px 16px", whiteSpace:"nowrap" } },
                    React.createElement(SectionTag, { s:a.section })
                  ),
                  React.createElement("td", { style: { padding:"14px 16px", fontFamily:"'Barlow Condensed',sans-serif", fontSize:13, color:MT, whiteSpace:"nowrap" } }, a.author || "—"),
                  React.createElement("td", { style: { padding:"14px 16px", fontFamily:"'Barlow Condensed',sans-serif", fontSize:12, color:MT, whiteSpace:"nowrap" } }, a.date),
                  React.createElement("td", { style: { padding:"14px 16px" } },
                    a.featured
                      ? React.createElement("span", { style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:800, fontSize:10, letterSpacing:"0.12em", textTransform:"uppercase", background:R, color:WH, padding:"5px 12px", borderRadius:3, display:"inline-block" } }, "Featured")
                      : React.createElement("button", { onClick: () => doFeature(a.id), style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:11, textTransform:"uppercase", letterSpacing:"0.08em", padding:"5px 12px", background:LG, color:BK, border:"none", cursor:"pointer", borderRadius:3 } }, "Set as Featured")
                  ),
                  React.createElement("td", { style: { padding:"14px 16px" } },
                    React.createElement("div", { style: { display:"flex", gap:8, flexWrap:"nowrap" } },
                      React.createElement("button", { onClick: () => openArt(a), style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:11, textTransform:"uppercase", letterSpacing:"0.06em", padding:"5px 12px", background:R, color:WH, border:"none", cursor:"pointer", borderRadius:3 } }, "Edit"),
                      delConfirm === a.id
                        ? React.createElement(React.Fragment, {},
                            React.createElement("button", { onClick: () => doDelete(a.id), style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:11, textTransform:"uppercase", padding:"5px 12px", background:"#DC2626", color:WH, border:"none", cursor:"pointer", borderRadius:3 } }, "Confirm"),
                            React.createElement("button", { onClick: () => setDelConfirm(null), style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:11, textTransform:"uppercase", padding:"5px 12px", background:MT, color:WH, border:"none", cursor:"pointer", borderRadius:3 } }, "Cancel")
                          )
                        : React.createElement("button", { onClick: () => setDelConfirm(a.id), style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:11, textTransform:"uppercase", padding:"5px 12px", background:"#9CA3AF", color:WH, border:"none", cursor:"pointer", borderRadius:3 } }, "Delete")
                    )
                  )
                )
              )
            )
          )
        ),
        tab === "add" && React.createElement("div", { style: { background:WH, border:`1px solid ${BD}`, padding:"36px 36px 28px", animation:"fadeUp 0.3s ease" } },
          React.createElement("div", { style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:800, fontSize:18, textTransform:"uppercase", letterSpacing:"0.1em", color:BK, borderBottom:`2px solid ${BD}`, paddingBottom:20, marginBottom:24 } }, "Add New Article"),
          msg && React.createElement("div", { style: { padding:"12px 18px", marginBottom:24, background: msg==="ok" ? "#F0FFF4" : "#FFF5F5", border:`1px solid ${msg==="ok" ? "#68D391" : "#FC8181"}`, fontFamily:"'Barlow Condensed',sans-serif", fontSize:13, color: msg==="ok" ? "#22543D" : "#742A2A", borderRadius:3 } },
            msg === "ok" ? "✓ Article published successfully." : "Title and content are required fields."
          ),
          React.createElement("div", { style: { display:"grid", gridTemplateColumns:"1fr 1fr", gap:"0 24px" } },
            React.createElement("div", { style: { gridColumn:"1/-1" } }, React.createElement(Inp, { label:"Headline *", val:form.title, onChange:e=>setForm(p=>({...p,title:e.target.value})), placeholder:"Article headline..." })),
            React.createElement("div", { style: { gridColumn:"1/-1" } }, React.createElement(Inp, { label:"Subtitle / Standfirst", val:form.subtitle, onChange:e=>setForm(p=>({...p,subtitle:e.target.value})), placeholder:"Brief summary..." })),
            React.createElement("div", {}, React.createElement(Inp, { label:"Author", val:form.author, onChange:e=>setForm(p=>({...p,author:e.target.value})), placeholder:"Author name..." })),
            React.createElement("div", {},
              React.createElement("div", { style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:11, letterSpacing:"0.12em", textTransform:"uppercase", color:MT, marginBottom:6 } }, "Section *"),
              React.createElement("div", { style: { marginBottom:18 } },
                React.createElement("select", { value:form.section, onChange:e=>setForm(p=>({...p,section:e.target.value})), style: { width:"100%", padding:"10px 14px", fontFamily:"'Barlow Condensed',sans-serif", fontSize:14, border:`1px solid ${BD}`, borderRadius:3 } },
                  pages.map(s=>React.createElement("option", { key:s.id, value:s.name }, s.name))
                )
              )
            ),
            React.createElement("div", { style: { gridColumn:"1/-1" } }, React.createElement(Inp, { label:"Image URL (optional)", val:form.img, onChange:e=>setForm(p=>({...p,img:e.target.value})), placeholder:"https://images.unsplash.com/..." })),
            React.createElement("div", { style: { gridColumn:"1/-1" } }, React.createElement(Inp, { label:"Article Body *", val:form.content, onChange:e=>setForm(p=>({...p,content:e.target.value})), placeholder:"Write the article here. Separate paragraphs with blank lines.", big:true }))
          ),
          React.createElement("div", { style: { display:"flex", alignItems:"center", gap:10, marginBottom:24 } },
            React.createElement("input", { type:"checkbox", id:"feat", checked:form.featured, onChange:e=>setForm(p=>({...p,featured:e.target.checked})), style: { width:16, height:16, cursor:"pointer", accentColor:R } }),
            React.createElement("label", { htmlFor:"feat", style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:12, letterSpacing:"0.1em", textTransform:"uppercase", color:MD, cursor:"pointer" } }, "Feature this article")
          ),
          React.createElement("button", { onClick:doAdd, style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:800, fontSize:14, letterSpacing:"0.1em", textTransform:"uppercase", padding:"14px 36px", background:R, color:WH, border:"none", cursor:"pointer", borderRadius:3 } }, "Publish Article")
        ),
        tab === "ticker" && React.createElement("div", { style: { background:WH, border:`1px solid ${BD}`, padding:"36px 36px 28px" } },
          React.createElement("div", { style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:800, fontSize:18, textTransform:"uppercase", letterSpacing:"0.1em", color:BK, borderBottom:`2px solid ${BD}`, paddingBottom:20, marginBottom:24 } }, "Breaking News Ticker"),
          React.createElement(Inp, { label:"Ticker Text", val:ticker, onChange:e=>setTicker(e.target.value), placeholder:"Separate stories with · (bullet point)", big:true }),
          React.createElement("button", { onClick: () => { setMsg("ok"); setTimeout(() => setMsg(""), 2000); }, style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:800, fontSize:14, letterSpacing:"0.1em", textTransform:"uppercase", padding:"14px 36px", background:R, color:WH, border:"none", cursor:"pointer", borderRadius:3 } }, "Update Ticker")
        ),
        tab === "pages" && React.createElement("div", { style: { background:WH, border:`1px solid ${BD}`, padding:"36px 36px 28px" } },
          React.createElement("div", { style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:800, fontSize:18, textTransform:"uppercase", letterSpacing:"0.1em", color:BK, borderBottom:`2px solid ${BD}`, paddingBottom:20, marginBottom:24 } }, "Manage Sections"),
          React.createElement("div", { style: { marginBottom:32, paddingBottom:24, borderBottom:`1px solid ${BD}` } },
            React.createElement("div", { style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:14, textTransform:"uppercase", letterSpacing:"0.08em", color:BK, marginBottom:16 } },
              editingPageId ? "Edit Section" : "Add New Section"
            ),
            React.createElement(Inp, { label:"Section Name", val:pageForm.name, onChange:e=>setPageForm(p=>({...p,name:e.target.value})), placeholder:"e.g. Breaking News, Features..." }),
            React.createElement("div", { style: { display:"flex", gap:10 } },
              React.createElement("button", { onClick:editingPageId ? updatePage : addPage, style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:800, fontSize:14, letterSpacing:"0.1em", textTransform:"uppercase", padding:"10px 24px", background:R, color:WH, border:"none", cursor:"pointer", borderRadius:3 } },
                editingPageId ? "Update Section" : "Add Section"
              ),
              editingPageId && React.createElement("button", { onClick: () => { setEditingPageId(null); setPageForm(EMPTY_PAGE); }, style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:12, letterSpacing:"0.08em", textTransform:"uppercase", padding:"10px 24px", background:MT, color:WH, border:"none", cursor:"pointer", borderRadius:3 } }, "Cancel")
            )
          ),
          React.createElement("div", {},
            React.createElement("div", { style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:14, textTransform:"uppercase", letterSpacing:"0.08em", color:BK, marginBottom:16 } }, "Current Sections"),
            pages.map((p, i) => 
              React.createElement("div", { key:p.id, style: { background:LG, padding:"14px 16px", marginBottom:10, display:"flex", alignItems:"center", justifyContent:"space-between", borderRadius:3 } },
                React.createElement("span", { style: { fontFamily:"'Barlow Condensed',sans-serif", fontSize:14, color:BK, fontWeight:600 } }, p.name),
                React.createElement("div", { style: { display:"flex", gap:8 } },
                  React.createElement("button", { onClick: () => movePage(p.id, "up"), disabled:i === 0, style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:11, textTransform:"uppercase", padding:"5px 10px", background:i === 0 ? "#D1D5DB" : BK, color:WH, border:"none", cursor: i === 0 ? "not-allowed" : "pointer", borderRadius:3 } }, "↑"),
                  React.createElement("button", { onClick: () => movePage(p.id, "down"), disabled:i === pages.length - 1, style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:11, textTransform:"uppercase", padding:"5px 10px", background:i === pages.length - 1 ? "#D1D5DB" : BK, color:WH, border:"none", cursor: i === pages.length - 1 ? "not-allowed" : "pointer", borderRadius:3 } }, "↓"),
                  React.createElement("button", { onClick: () => { setEditingPageId(p.id); setPageForm(p); }, style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:11, textTransform:"uppercase", padding:"5px 10px", background:R, color:WH, border:"none", cursor:"pointer", borderRadius:3 } }, "Edit"),
                  React.createElement("button", { onClick: () => deletePage(p.id), style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:11, textTransform:"uppercase", padding:"5px 10px", background:"#9CA3AF", color:WH, border:"none", cursor:"pointer", borderRadius:3 } }, "Delete")
                )
              )
            )
          )
        )
      )
    )
  );

  /* ── ARTICLE ────────────────────────────────────────────────────────────── */
  if (view === "article" && sel) return (
    React.createElement("div", { style: { background:BG, minHeight:"100vh", fontFamily:"'Crimson Pro',Georgia,serif" } },
      React.createElement("style", {}, `${fonts}${anim}`),
      React.createElement(Header),
      React.createElement("div", { style: { background:WH, borderBottom:`1px solid ${BD}` } },
        React.createElement("div", { style: { maxWidth:800, margin:"0 auto", padding:"14px 28px" } },
          React.createElement("span", { onClick:goHome, style: { fontFamily:"'Barlow Condensed',sans-serif", fontSize:12, fontWeight:700, textTransform:"uppercase", letterSpacing:"0.1em", color:MT, cursor:"pointer" } }, "← Back")
        )
      ),
      React.createElement("div", { style: { maxWidth:800, margin:"0 auto", padding:"40px 28px 60px", animation:"fadeUp 0.4s ease" } },
        React.createElement("div", { style: { marginBottom:14 } }, React.createElement(SectionTag, { s:sel.section })),
        React.createElement("h1", { style: { fontFamily:"'Playfair Display',Georgia,serif", fontWeight:900, fontSize:46, lineHeight:1.1, color:BK, marginBottom:18 } }, sel.title),
        sel.subtitle && React.createElement("p", { style: { fontFamily:"'Crimson Pro',Georgia,serif", fontSize:22, lineHeight:1.55, color:MD, marginBottom:22, borderBottom:`1px solid ${BD}`, paddingBottom:22 } }, sel.subtitle),
        React.createElement("div", { style: { marginBottom:28 } }, React.createElement(Meta, { author:sel.author, date:sel.date })),
        sel.img && React.createElement("img", { src:sel.img, alt:"", style: { width:"100%", aspectRatio:"16/9", objectFit:"cover", display:"block", marginBottom:32, borderRadius:3 }, onError:e => e.target.style.display='none' }),
        React.createElement("div", { style: { fontFamily:"'Crimson Pro',Georgia,serif", fontSize:21, lineHeight:1.8, color:DK } },
          sel.content.split("\n\n").map((p,i) => React.createElement("p", { key:i, style: { marginBottom:28 } }, p))
        )
      ),
      React.createElement(Footer)
    )
  );

  /* ── HOME ───────────────────────────────────────────────────────────────── */
  return (
    React.createElement("div", { style: { background:BG, minHeight:"100vh", fontFamily:"'Crimson Pro',Georgia,serif" } },
      React.createElement("style", {}, `${fonts}${anim}`),
      React.createElement(Header),
      React.createElement("div", { style: { background:R, display:"flex", alignItems:"center", overflow:"hidden" } },
        React.createElement("div", { style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:900, fontSize:10, letterSpacing:"0.2em", textTransform:"uppercase", background:BK, color:WH, padding:"9px 16px", whiteSpace:"nowrap" } }, "● LIVE"),
        React.createElement("div", { style: { overflow:"hidden", flex:1 } },
          React.createElement("div", { style: { display:"inline-block", animation:"ticker 55s linear infinite", whiteSpace:"nowrap", padding:"9px 0", fontFamily:"'Barlow Condensed',sans-serif", fontWeight:600, fontSize:12, color:WH, letterSpacing:"0.05em" } },
            ticker.repeat(2)
          )
        )
      ),
      featured && React.createElement("div", { style: { maxWidth:1200, margin:"0 auto", padding:"36px 28px 0" } },
        React.createElement("div", { style: { display:"grid", gridTemplateColumns:"1fr 420px", gap:"0 40px", alignItems:"start" } },
          React.createElement("div", {},
            featured.img && React.createElement("img", { src:featured.img, alt:"", onClick: () => openArt(featured), style: { width:"100%", aspectRatio:"16/9", objectFit:"cover", display:"block", marginBottom:20, cursor:"pointer", borderRadius:3 }, onError:e => e.target.style.display='none' })
          ),
          React.createElement("div", { style: { paddingTop:8 } },
            React.createElement("div", { style: { marginBottom:10 } }, React.createElement(SectionTag, { s:featured.section })),
            React.createElement("h1", { onClick: () => openArt(featured), style: { fontFamily:"'Playfair Display',Georgia,serif", fontWeight:900, fontSize:38, lineHeight:1.1, color:BK, marginBottom:14, cursor:"pointer", transition:"color 0.15s" }, onMouseEnter:e=>e.currentTarget.style.color=R, onMouseLeave:e=>e.currentTarget.style.color=BK }, featured.title),
            featured.subtitle && React.createElement("p", { style: { fontFamily:"'Crimson Pro',Georgia,serif", fontSize:19, lineHeight:1.55, color:MD, marginBottom:14 } }, featured.subtitle),
            React.createElement(Meta, { author:featured.author, date:featured.date })
          )
        ),
        React.createElement("hr", { style: { border:"none", borderTop:`1px solid ${BD}`, margin:"32px 0 0" } })
      ),
      React.createElement("div", { style: { maxWidth:1200, margin:"0 auto", padding:"28px 28px 0" } },
        React.createElement("div", { style: { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:900, fontSize:11, letterSpacing:"0.22em", textTransform:"uppercase", color:BK, borderTop:`3px solid ${BK}`, borderBottom:`1px solid ${BD}`, paddingTop:16, paddingBottom:12, marginBottom:28 } },
          sec === "All" ? "Latest Stories" : sec
        ),
        grid.length === 0
          ? React.createElement("div", { style: { textAlign:"center", padding:"56px", fontFamily:"'Crimson Pro',serif", fontSize:20, color:MT, fontStyle:"italic" } }, "No articles in this section yet.")
          : React.createElement("div", { style: { display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:"40px 28px" } },
              grid.map((a, i) => 
                React.createElement("div", { key:a.id, className:"art-card", onClick: () => openArt(a), style: { cursor:"pointer", borderTop: i>2 ? `1px solid ${BD}` : "none", paddingTop: i>2 ? 28 : 0 } },
                  a.img
                    ? React.createElement("img", { src:a.img, alt:"", style: { width:"100%", aspectRatio:"3/2", objectFit:"cover", display:"block", marginBottom:14, transition:"opacity 0.2s", borderRadius:3 }, onError:e => e.target.style.display='none' })
                    : React.createElement("div", { style: { width:"100%", aspectRatio:"3/2", background:LG, marginBottom:14, display:"flex", alignItems:"center", justifyContent:"center", borderRadius:3 } },
                        React.createElement("span", { style: { fontFamily:"'Barlow Condensed',sans-serif", fontSize:11, color:MT, textTransform:"uppercase", letterSpacing:"0.1em" } }, "No image")
                      ),
                  React.createElement("div", { style: { marginBottom:8 } }, React.createElement(SectionTag, { s:a.section })),
                  React.createElement("h3", { className:"art-title", style: { fontFamily:"'Playfair Display',Georgia,serif", fontWeight:700, fontSize:22, lineHeight:1.25, color:BK, marginBottom:10, transition:"color 0.15s" } },
                    a.title
                  ),
                  a.subtitle && React.createElement("p", { style: { fontFamily:"'Crimson Pro',Georgia,serif", fontSize:16, lineHeight:1.5, color:MD, marginBottom:10 } }, a.subtitle),
                  React.createElement(Meta, { author:a.author, date:a.date })
                )
              )
            )
      ),
      React.createElement(Footer)
    )
  );
}