Embed

<section id="oxiaai-live" style="max-width:1100px;margin:36px auto;padding:0 12px;font-family:system-ui, -apple-system, Segoe UI">
  <header style="display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px">
    <h2 style="margin:0;font-size:1.35rem;letter-spacing:-.01em">OxiaAI — Country Editions</h2>
    <div id="oxiaai-date" style="color:#666;font-size:.95rem"></div>
  </header>

  
  <div id="oxiaai-countries" style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px"></div>

  
  <div id="oxiaai-book" aria-live="polite" style="position:relative;display:grid;place-items:center;margin-bottom:16px">
    <style>
      #oxiaai-book .book { position:relative; width:min(900px,100%); height:220px; perspective:1800px; }
      #oxiaai-book .cover, #oxiaai-book .page { position:absolute; inset:0; border-radius:14px; overflow:hidden; }
      #oxiaai-book .cover { background:#111; color:#fff; display:grid; place-items:center; transform-origin:left; transform:rotateY(0deg);
        box-shadow:0 18px 50px rgba(0,0,0,.2); animation: bookOpen 1.2s ease forwards .35s; }
      #oxiaai-book .title { font-weight:800; letter-spacing:-.02em; font-size:clamp(1.1rem,2.3vw,1.6rem); }
      #oxiaai-book .page { background:#fff; border:1px solid #eee; display:grid; grid-template-rows:auto auto 1fr; gap:8px; padding:16px 16px 12px; }
      #oxiaai-intro { line-height:1.55; font-size:clamp(1rem,1.2vw,1.05rem); min-height:2.9em; border-right:.08em solid rgba(17,17,17,.5); }
      #oxiaai-source { font-size:.92rem; color:#555; }
      #oxiaai-source a { color:#111; font-weight:700; text-decoration:none; border-bottom:1px solid #111; }
      #oxiaai-source a:hover { opacity:.8; }
      @keyframes bookOpen { to { transform:rotateY(-180deg); opacity:0; } }
      @media (prefers-reduced-motion: reduce){ #oxiaai-book .cover { animation:none; display:none; } #oxiaai-intro { border-right:none; } }
      .chip { border:1px solid #ddd;background:#fff;border-radius:999px;padding:.5rem .8rem;font-weight:600;cursor:pointer }
      .chip[aria-pressed="true"]{ background:#111;color:#fff;border-color:#111 }
      #oxiaai-grid { display:grid; gap:14px; grid-template-columns:repeat(3,1fr); }
      @media (max-width: 900px){ #oxiaai-grid { grid-template-columns:repeat(2,1fr); } }
      @media (max-width: 600px){ #oxiaai-grid { grid-template-columns:1fr; } }
    </style>
    <div class="book">
      <div class="page">
        <div style="font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#666" id="oxiaai-pagekicker">Today’s Opening Line</div>
        <div id="oxiaai-intro" lang="en"></div>
        <div id="oxiaai-source"></div>
      </div>
      <div class="cover">
        <div class="title">Opening today’s edition…</div>
      </div>
    </div>
  </div>

  
  <div id="oxiaai-grid"></div>

  
  <div style="margin-top:18px;border-top:1px solid #eee;padding-top:14px">
    <div style="display:flex;gap:8px;align-items:center;margin-bottom:6px">
      <strong>Ask OxiaAI</strong>
      <small style="color:#666">— searches today’s set for the selected country</small>
    </div>
    <div style="display:flex;gap:8px;flex-wrap:wrap">
      <input id="oxiaai-q" placeholder="Ask about tech, travel, fashion, luxury, culture…" 
             style="flex:1;min-width:240px;padding:.65rem .75rem;border:1px solid #ddd;border-radius:10px;font-size:15px;outline:none">
      <button id="oxiaai-ask" style="padding:.65rem .9rem;border:1px solid #111;background:#111;color:#fff;border-radius:10px;font-weight:700;cursor:pointer">
        Ask
      </button>
    </div>
    <div id="oxiaai-chat" style="margin-top:10px;line-height:1.6;color:#222;white-space:pre-wrap"></div>
  </div>
</section>

<script>
/* ===== SINGLE-RUN GUARD ===== */
if (window.__OXIAAI_INIT__) { console.warn('OxiaAI already initialized'); }
else { window.__OXIAAI_INIT__ = true;

(function(){
  /* ====== CONFIG ====== */
  const API_BASE = "https://api.rss2json.com/v1/api.json?rss_url=";

  const COUNTRY_SOURCES = {
    "Global":[
      {cat:'Tech',    url:'https://www.theverge.com/rss/index.xml'},
      {cat:'Travel',  url:'https://www.cntraveler.com/feed/travel'},
      {cat:'Fashion', url:'https://www.vogue.com/rss'},
      {cat:'Luxury',  url:'https://robbreport.com/feed/'},
      {cat:'Culture', url:'https://variety.com/feed/'}
    ],
    "India":[
      {cat:'Tech',    url:'https://www.indiatoday.in/technology/rss/1/107.rss'},
      {cat:'Travel',  url:'https://www.cntraveller.in/feed/'},
      {cat:'Fashion', url:'https://www.vogue.in/feed/'},
      {cat:'Luxury',  url:'https://www.livemint.com/rss/lifestyle'},
      {cat:'Culture', url:'https://www.thehindu.com/entertainment/feeder/default.rss'}
    ],
    "USA":[
      {cat:'Tech',    url:'https://rss.nytimes.com/services/xml/rss/nyt/Technology.xml'},
      {cat:'Travel',  url:'https://www.nationalgeographic.com/travel/rss/'},
      {cat:'Fashion', url:'https://www.gq.com/feed/rss'},
      {cat:'Luxury',  url:'https://www.hodinkee.com/feed'},
      {cat:'Culture', url:'https://www.newyorker.com/feed/culture'}
    ],
    "Germany":[
      {cat:'Tech',    url:'https://www.heise.de/rss/heise-atom.xml'},
      {cat:'Travel',  url:'https://www.dw.com/feeds/section/travel/rss-e'},
      {cat:'Fashion', url:'https://www.vogue.de/rss/all'},
      {cat:'Luxury',  url:'https://www.handelsblatt.com/contentexport/feed/luxus'},
      {cat:'Culture', url:'https://www.dw.com/feeds/rss-en-culture'}
    ],
    "Czechia":[
      {cat:'Tech',    url:'https://www.root.cz/rss/clanky/'},
      {cat:'Travel',  url:'https://www.pragueexperience.com/news/rss/'},
      {cat:'Fashion', url:'https://www.vogue.cz/rss'},
      {cat:'Luxury',  url:'https://www.luxurypragueapartment.com/feed/'},
      {cat:'Culture', url:'https://english.radio.cz/rss'}
    ]
  };

  /* ====== DOM ====== */
  const reduceMotion = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  const grid   = document.getElementById('oxiaai-grid');
  const chatEl = document.getElementById('oxiaai-chat');
  const qInp   = document.getElementById('oxiaai-q');
  const askBtn = document.getElementById('oxiaai-ask');
  const dateEl = document.getElementById('oxiaai-date');
  const introEl= document.getElementById('oxiaai-intro');
  const sourceEl=document.getElementById('oxiaai-source');
  const pageKicker = document.getElementById('oxiaai-pagekicker');
  const chipsEl= document.getElementById('oxiaai-countries');

  /* ====== helpers ====== */
  function fmtDate(d=new Date()){ return d.toLocaleDateString(undefined,{year:'numeric',month:'long',day:'numeric'}); }
  function strip(html){ return (html||'').replace(/<[^>]+>/g,' ').replace(/\s+/g,' ').trim(); }
  function decodeHtml(s){ const el = document.createElement('textarea'); el.innerHTML = s; return el.value; }

  // Force plain English ASCII: decode HTML, NFKD normalize, strip diacritics & non-ASCII, smart quotes/dashes → straight
  function toEnglishASCII(input){
    let s = decodeHtml(input || '');
    try { s = s.normalize('NFKD'); } catch(e){}
    // replace curly quotes/dashes
    s = s.replace(/[\u2018\u2019\u2032]/g,"'")
         .replace(/[\u201C\u201D\u2033]/g,'"')
         .replace(/[\u2013\u2014]/g,"-");
    // remove combining marks (diacritics)
    try { s = s.replace(/\p{M}+/gu, ""); } catch(e){ s = s.replace(/[\u0300-\u036f]/g,""); }
    // drop any non-ASCII control/odd chars, keep basic punctuation
    s = s.replace(/[^\x09\x0A\x0D\x20-\x7E]/g, "");
    // squeeze spaces
    return s.replace(/\s+/g," ").trim();
  }

  function domainOf(u){ try { return new URL(u).hostname.replace(/^www\./,''); } catch(e){ return ''; } }

  /* ====== chips ====== */
  const COUNTRY_LIST = Object.keys(COUNTRY_SOURCES);
  let currentCountry = COUNTRY_LIST.includes('India') ? 'India' : COUNTRY_LIST[0];

  function paintChips(){
    chipsEl.innerHTML = '';
    COUNTRY_LIST.forEach(name=>{
      const b = document.createElement('button');
      b.className = 'chip'; b.type='button'; b.textContent = name;
      b.setAttribute('aria-pressed', name===currentCountry ? 'true':'false');
      b.addEventListener('click', ()=>{
        if (name===currentCountry) return;
        currentCountry=name; paintChips(); loadCountry(name);
      });
      chipsEl.appendChild(b);
    });
  }

  /* ====== cancellable WORD-by-WORD typewriter ====== */
  let typeToken = 0;
  function typeWords(fullText, cb){
    typeToken++; const myToken = typeToken;
    const words = fullText.split(/\s+/);
    introEl.textContent = '';
    if(reduceMotion){ if(myToken!==typeToken) return; introEl.textContent = fullText; if(cb) cb(); return; }
    let i=0;
    function step(){
      if(myToken!==typeToken) return;
      if(i<words.length){
        introEl.textContent += (i===0? "": " ") + words[i++];
        setTimeout(step, 60); // word speed
      } else {
        introEl.style.borderRight='none';
        if(cb) cb();
      }
    }
    introEl.style.borderRight='.08em solid rgba(17,17,17,.5)';
    step();
  }

  /* ====== cancellable chat typing ====== */
  let chatToken = 0;
  function autoType(text){
    chatToken++; const myToken = chatToken;
    chatEl.textContent = '';
    if(reduceMotion){ if(myToken!==chatToken) return; chatEl.textContent = text; return; }
    let i=0; (function t(){ if(myToken!==chatToken) return;
      if(i<text.length){ chatEl.textContent += text.charAt(i++); setTimeout(t, 14); }
    })();
  }

  /* ====== data load ====== */
  async function fetchFeed(src){
    const r = await fetch(API_BASE + encodeURIComponent(src.url));
    if(!r.ok) throw new Error('Load failed ' + r.status);
    const j = await r.json();
    const items = (j.items||[]).map(it => ({...it, __cat: src.cat}));
    return items;
  }

  async function loadCountry(country){
    dateEl.textContent = country + ' — ' + fmtDate(new Date());
    pageKicker.textContent = country + ': Today’s Opening Line';
    sourceEl.textContent = '';
    introEl.textContent = '';
    grid.innerHTML = 'Loading…';

    const SOURCES = COUNTRY_SOURCES[country] || [];
    if(!SOURCES.length){ grid.innerHTML = `<div style="color:#b00">No sources configured for ${country}.</div>`; return; }

    try{
      const results = await Promise.allSettled(SOURCES.map(fetchFeed));
      let all = results.flatMap(r => r.status==='fulfilled' ? r.value : []);
      // newest first
      all.sort((a,b)=> new Date(b.pubDate||b.pubdate||0) - new Date(a.pubDate||a.pubdate||0));

      // Prefer Travel intro; fallback to first
      const top = all.find(it => it.__cat==='Travel') || all[0];
      if(top){
        const title = toEnglishASCII(top.title||"");
        const desc  = toEnglishASCII(strip(top.description||""));
        const line  = (title + " — " + desc).slice(0, 160); // cap
        typeWords(line, ()=> {
          const d = domainOf(top.link);
          sourceEl.innerHTML = `Source: <a href="${top.link}" target="_blank" rel="noopener">${d || 'Open link'}</a>`;
        });
      } else {
        typeWords("No items loaded yet. Please refresh in a moment.");
      }

      const take = all.slice(0,12);
      grid.innerHTML = take.map(it => {
        const img = it.enclosure?.link || it.thumbnail || "";
        const ttl = toEnglishASCII(it.title||'');
        const dsc = toEnglishASCII(strip(it.description||'')).slice(0,150);
        return `
          <article style="border:1px solid #eee;border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column">
            ${img?`<img src="${img}" alt="" loading="lazy" style="width:100%;aspect-ratio:16/9;object-fit:cover;background:#eee">`:``}
            <div style="padding:12px 12px 14px">
              <div style="font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#666;margin-bottom:2px">${it.__cat}</div>
              <div style="font-weight:800;letter-spacing:-.01em;font-size:1rem;line-height:1.35">${ttl}</div>
              <div style="color:#555;line-height:1.55;margin-top:6px">${dsc}…</div>
              <div style="margin-top:10px">
                <a href="${it.link}" target="_blank" rel="noopener"
                   style="display:inline-block;background:#111;color:#fff;padding:.5rem .8rem;border-radius:10px;text-decoration:none;font-weight:700">
                  Open
                </a>
              </div>
            </div>
          </article>`;
      }).join('');

      window.__OXIAAI_ITEMS = take; // for chat search
    }catch(e){
      typeToken++; // cancel typing
      introEl.textContent = "Failed to load today’s opening line.";
      introEl.style.borderRight='none';
      sourceEl.textContent = '';
      grid.innerHTML = `<div style="color:#b00">Failed to load: ${e.message||e}</div>`;
      window.__OXIAAI_ITEMS = [];
    }
  }

  /* ====== mini chat (search current country’s set) ====== */
  function searchAndReply(q){
    const items = window.__OXIAAI_ITEMS || [];
    if(!q || !items.length){ autoType("No data yet. Try again in a moment."); return; }
    const terms = q.toLowerCase().split(/\s+/).filter(Boolean);
    const scored = items.map(it=>{
      const hay = (toEnglishASCII(it.title||'') + ' ' + toEnglishASCII(strip(it.description||'')) + ' ' + (it.__cat||'')).toLowerCase();
      const score = terms.reduce((s,t)=> s + (hay.includes(t)?1:0), 0) + (hay.includes(terms.join(' '))?1:0);
      return {it, score};
    }).filter(x=>x.score>0);

    scored.sort((a,b)=> b.score - a.score);
    const top3 = scored.slice(0,3);

    if(!top3.length){
      autoType("No strong match in today’s "+currentCountry+" set. Try: tech, travel, fashion, luxury, culture, or be more specific.");
      return;
    }
    const lines = ["Here’s what stands out today in " + currentCountry + ":"]
      .concat(top3.map(x=>`• ${toEnglishASCII(x.it.title)}  —  ${x.it.__cat}\n  ${x.it.link}`));
    autoType(lines.join('\n\n'));
  }

  askBtn.addEventListener('click', ()=> searchAndReply(qInp.value.trim()));
  qInp.addEventListener('keydown', e=>{ if(e.key==='Enter'){ searchAndReply(qInp.value.trim()); } });

  /* ====== init ====== */
  dateEl.textContent = 'Select a country — ' + fmtDate(new Date());
  paintChips();
  loadCountry(currentCountry);
})();
}
</script>

<section id="oxiaai-live" style="max-width:1100px;margin:36px auto;padding:0 12px;font-family:system-ui, -apple-system, Segoe UI">
  <header style="display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px">
    <h2 style="margin:0;font-size:1.35rem;letter-spacing:-.01em">OxiaAI — Country Editions</h2>
    <div id="oxiaai-date" style="color:#666;font-size:.95rem"></div>
  </header>

  
  <div id="oxiaai-countries" style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px"></div>

  
  <div id="oxiaai-book" aria-live="polite" style="position:relative;display:grid;place-items:center;margin-bottom:16px">
    <style>
      /* Book + chips styles (scoped to this section) */
      #oxiaai-book .book { position:relative; width:min(900px,100%); height:220px; perspective:1800px; }
      #oxiaai-book .cover, #oxiaai-book .page { position:absolute; inset:0; border-radius:14px; overflow:hidden; }
      #oxiaai-book .cover { background:#111; color:#fff; display:grid; place-items:center; transform-origin:left; transform:rotateY(0deg);
        box-shadow:0 18px 50px rgba(0,0,0,.2); animation: bookOpen 1.2s ease forwards .35s; }
      #oxiaai-book .title { font-weight:800; letter-spacing:-.02em; font-size:clamp(1.1rem,2.3vw,1.6rem); }
      #oxiaai-book .page { background:#fff; border:1px solid #eee; display:grid; grid-template-rows:auto auto 1fr; gap:8px; padding:16px 16px 12px; }
      #oxiaai-intro { line-height:1.55; font-size:clamp(1rem,1.2vw,1.05rem); min-height:2.9em; border-right:.08em solid rgba(17,17,17,.5); }
      #oxiaai-source { font-size:.92rem; color:#555; }
      #oxiaai-source a { color:#111; font-weight:700; text-decoration:none; border-bottom:1px solid #111; }
      #oxiaai-source a:hover { opacity:.8; }
      @keyframes bookOpen { to { transform:rotateY(-180deg); opacity:0; } }
      @media (prefers-reduced-motion: reduce){ #oxiaai-book .cover { animation:none; display:none; } #oxiaai-intro { border-right:none; } }
      /* chips */
      .chip { border:1px solid #ddd;background:#fff;border-radius:999px;padding:.5rem .8rem;font-weight:600;cursor:pointer }
      .chip[aria-pressed="true"]{ background:#111;color:#fff;border-color:#111 }
      /* grid responsive */
      #oxiaai-grid { display:grid; gap:14px; grid-template-columns:repeat(3,1fr); }
      @media (max-width: 900px){ #oxiaai-grid { grid-template-columns:repeat(2,1fr); } }
      @media (max-width: 600px){ #oxiaai-grid { grid-template-columns:1fr; } }
    </style>
    <div class="book">
      <div class="page">
        <div style="font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#666" id="oxiaai-pagekicker">Today’s Opening Line</div>
        <div id="oxiaai-intro"></div>
        <div id="oxiaai-source"></div>
      </div>
      <div class="cover">
        <div class="title">Opening today’s edition…</div>
      </div>
    </div>
  </div>

  
  <div id="oxiaai-grid"></div>

  
  <div style="margin-top:18px;border-top:1px solid #eee;padding-top:14px">
    <div style="display:flex;gap:8px;align-items:center;margin-bottom:6px">
      <strong>Ask OxiaAI</strong>
      <small style="color:#666">— searches today’s set for the selected country</small>
    </div>
    <div style="display:flex;gap:8px;flex-wrap:wrap">
      <input id="oxiaai-q" placeholder="Ask about tech, travel, fashion, luxury, culture…" 
             style="flex:1;min-width:240px;padding:.65rem .75rem;border:1px solid #ddd;border-radius:10px;font-size:15px;outline:none">
      <button id="oxiaai-ask" style="padding:.65rem .9rem;border:1px solid #111;background:#111;color:#fff;border-radius:10px;font-weight:700;cursor:pointer">
        Ask
      </button>
    </div>
    <div id="oxiaai-chat" style="margin-top:10px;line-height:1.6;color:#222;white-space:pre-wrap"></div>
  </div>
</section>

<script>
(function(){
  /* ====== CONFIG (edit feeds as you like) ====== */
  const API_BASE = "https://api.rss2json.com/v1/api.json?rss_url="; // zero-setup; swap to your Worker later

  const COUNTRY_SOURCES = {
    "Global":[
      {cat:'Tech',    url:'https://www.theverge.com/rss/index.xml'},
      {cat:'Travel',  url:'https://www.cntraveler.com/feed/travel'},
      {cat:'Fashion', url:'https://www.vogue.com/rss'},
      {cat:'Luxury',  url:'https://robbreport.com/feed/'},
      {cat:'Culture', url:'https://variety.com/feed/'}
    ],
    "India":[
      {cat:'Tech',    url:'https://www.indiatoday.in/technology/rss/1/107.rss'},
      {cat:'Travel',  url:'https://www.cntraveller.in/feed/'},
      {cat:'Fashion', url:'https://www.vogue.in/feed/'},
      {cat:'Luxury',  url:'https://www.livemint.com/rss/lifestyle'},
      {cat:'Culture', url:'https://www.thehindu.com/entertainment/feeder/default.rss'}
    ],
    "USA":[
      {cat:'Tech',    url:'https://rss.nytimes.com/services/xml/rss/nyt/Technology.xml'},
      {cat:'Travel',  url:'https://www.nationalgeographic.com/travel/rss/'},
      {cat:'Fashion', url:'https://www.gq.com/feed/rss'},
      {cat:'Luxury',  url:'https://www.hodinkee.com/feed'},
      {cat:'Culture', url:'https://www.newyorker.com/feed/culture'}
    ],
    "Germany":[
      {cat:'Tech',    url:'https://www.heise.de/rss/heise-atom.xml'},
      {cat:'Travel',  url:'https://www.dw.com/feeds/section/travel/rss-e'},
      {cat:'Fashion', url:'https://www.vogue.de/rss/all'},
      {cat:'Luxury',  url:'https://www.handelsblatt.com/contentexport/feed/luxus'},
      {cat:'Culture', url:'https://www.dw.com/feeds/rss-en-culture'}
    ],
    "Czechia":[
      {cat:'Tech',    url:'https://www.root.cz/rss/clanky/'},
      {cat:'Travel',  url:'https://www.pragueexperience.com/news/rss/'},
      {cat:'Fashion', url:'https://www.vogue.cz/rss'},
      {cat:'Luxury',  url:'https://www.luxurypragueapartment.com/feed/'},
      {cat:'Culture', url:'https://english.radio.cz/rss'}
    ]
  };

  /* ====== DOM ====== */
  const reduceMotion = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  const grid   = document.getElementById('oxiaai-grid');
  const chatEl = document.getElementById('oxiaai-chat');
  const qInp   = document.getElementById('oxiaai-q');
  const askBtn = document.getElementById('oxiaai-ask');
  const dateEl = document.getElementById('oxiaai-date');
  const introEl= document.getElementById('oxiaai-intro');
  const sourceEl=document.getElementById('oxiaai-source');
  const pageKicker = document.getElementById('oxiaai-pagekicker');
  const chipsEl= document.getElementById('oxiaai-countries');

  /* ====== helpers ====== */
  function fmtDate(d=new Date()){ return d.toLocaleDateString(undefined,{year:'numeric',month:'long',day:'numeric'}); }
  function strip(html){ return (html||'').replace(/<[^>]+>/g,' ').replace(/\s+/g,' ').trim(); }
  function decodeHtml(s){ const el = document.createElement('textarea'); el.innerHTML = s; return el.value; }
  function domainOf(u){ try { return new URL(u).hostname.replace(/^www\./,''); } catch(e){ return ''; } }

  /* ====== chips ====== */
  const COUNTRY_LIST = Object.keys(COUNTRY_SOURCES);
  let currentCountry = COUNTRY_LIST.includes('India') ? 'India' : COUNTRY_LIST[0];

  function paintChips(){
    chipsEl.innerHTML = '';
    COUNTRY_LIST.forEach(name=>{
      const b = document.createElement('button');
      b.className = 'chip'; b.type='button'; b.textContent = name;
      b.setAttribute('aria-pressed', name===currentCountry ? 'true':'false');
      b.addEventListener('click', ()=>{
        if (name===currentCountry) return;
        currentCountry=name; paintChips(); loadCountry(name);
      });
      chipsEl.appendChild(b);
    });
  }

  /* ====== cancellable typewriter (prevents mixed letters) ====== */
  let typeToken = 0;
  function typeLine(text, cb){
    typeToken++; const myToken = typeToken;
    introEl.textContent = '';
    if(reduceMotion){ if(myToken!==typeToken) return; introEl.textContent = text; if(cb) cb(); return; }
    let i=0;
    function step(){
      if(myToken!==typeToken) return; // cancel previous typing
      if(i<text.length){ introEl.textContent += text.charAt(i++); setTimeout(step, 16); }
      else { introEl.style.borderRight='none'; if(cb) cb(); }
    }
    introEl.style.borderRight='.08em solid rgba(17,17,17,.5)';
    step();
  }

  /* ====== cancellable chat typing ====== */
  let chatToken = 0;
  function autoType(text){
    chatToken++; const myToken = chatToken;
    chatEl.textContent = '';
    if(reduceMotion){ if(myToken!==chatToken) return; chatEl.textContent = text; return; }
    let i=0; (function t(){ if(myToken!==chatToken) return;
      if(i<text.length){ chatEl.textContent += text.charAt(i++); setTimeout(t, 18); }
    })();
  }

  /* ====== data load ====== */
  async function fetchFeed(src){
    const r = await fetch(API_BASE + encodeURIComponent(src.url));
    if(!r.ok) throw new Error('Load failed ' + r.status);
    const j = await r.json();
    const items = (j.items||[]).map(it => ({...it, __cat: src.cat}));
    return items;
  }

  async function loadCountry(country){
    dateEl.textContent = country + ' — ' + fmtDate(new Date());
    pageKicker.textContent = country + ': Today’s Opening Line';
    sourceEl.textContent = '';
    introEl.textContent = '';
    grid.innerHTML = 'Loading…';

    const SOURCES = COUNTRY_SOURCES[country] || [];
    if(!SOURCES.length){ grid.innerHTML = `<div style="color:#b00">No sources configured for ${country}.</div>`; return; }

    try{
      const results = await Promise.allSettled(SOURCES.map(fetchFeed));
      let all = results.flatMap(r => r.status==='fulfilled' ? r.value : []);
      all.sort((a,b)=> new Date(b.pubDate||b.pubdate||0) - new Date(a.pubDate||a.pubdate||0));

      // Prefer Travel intro; fallback to first
      const top = all.find(it => it.__cat==='Travel') || all[0];
      if(top){
        const line = `${decodeHtml(top.title)} — ${decodeHtml(strip(top.description)).slice(0,110)}…`;
        typeLine(line, ()=> {
          const d = domainOf(top.link);
          sourceEl.innerHTML = `Source: <a href="${top.link}" target="_blank" rel="noopener">${d || 'Open link'}</a>`;
        });
      } else {
        typeLine("No items loaded yet. Please refresh in a moment.");
      }

      const take = all.slice(0,12);
      grid.innerHTML = take.map(it => {
        const img = it.enclosure?.link || it.thumbnail || "";
        return `
          <article style="border:1px solid #eee;border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column">
            ${img?`<img src="${img}" alt="" loading="lazy" style="width:100%;aspect-ratio:16/9;object-fit:cover;background:#eee">`:``}
            <div style="padding:12px 12px 14px">
              <div style="font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#666;margin-bottom:2px">${it.__cat}</div>
              <div style="font-weight:800;letter-spacing:-.01em;font-size:1rem;line-height:1.35">${decodeHtml(it.title||'')}</div>
              <div style="color:#555;line-height:1.55;margin-top:6px">${decodeHtml(strip(it.description||'')).slice(0,150)}…</div>
              <div style="margin-top:10px">
                <a href="${it.link}" target="_blank" rel="noopener"
                   style="display:inline-block;background:#111;color:#fff;padding:.5rem .8rem;border-radius:10px;text-decoration:none;font-weight:700">
                  Open
                </a>
              </div>
            </div>
          </article>`;
      }).join('');

      window.__OXIAAI_ITEMS = take; // for chat search
    }catch(e){
      typeToken++; // cancel typing
      introEl.textContent = "Failed to load today’s opening line.";
      introEl.style.borderRight='none';
      sourceEl.textContent = '';
      grid.innerHTML = `<div style="color:#b00">Failed to load: ${e.message||e}</div>`;
      window.__OXIAAI_ITEMS = [];
    }
  }

  /* ====== mini chat (search current country’s set) ====== */
  function searchAndReply(q){
    const items = window.__OXIAAI_ITEMS || [];
    if(!q || !items.length){ autoType("No data yet. Try again in a moment."); return; }
    const terms = q.toLowerCase().split(/\s+/).filter(Boolean);
    const scored = items.map(it=>{
      const hay = ((decodeHtml(it.title||''))+' '+decodeHtml(strip(it.description||''))+' '+(it.__cat||'')).toLowerCase();
      const score = terms.reduce((s,t)=> s + (hay.includes(t)?1:0), 0) + (hay.includes(terms.join(' '))?1:0);
      return {it, score};
    }).filter(x=>x.score>0).sort((a,b)=> b.score-a.score).slice(0,3);

    if(!scored.length){
      autoType("No strong match in today’s "+currentCountry+" set. Try: tech, travel, fashion, luxury, culture, or be more specific.");
      return;
    }
    const lines = ["Here’s what stands out today in " + currentCountry + ":"]
      .concat(scored.map(x=>`• ${decodeHtml(x.it.title)}  —  ${x.it.__cat}\n  ${x.it.link}`));
    autoType(lines.join('\n\n'));
  }

  askBtn.addEventListener('click', ()=> searchAndReply(qInp.value.trim()));
  qInp.addEventListener('keydown', e=>{ if(e.key==='Enter'){ searchAndReply(qInp.value.trim()); } });

  /* ====== init ====== */
  dateEl.textContent = 'Select a country — ' + fmtDate(new Date());
  paintChips();
  loadCountry(currentCountry);
})();
</script>

<section id="oxiaai-live" style="max-width:1100px;margin:36px auto;padding:0 12px;font-family:system-ui, -apple-system, Segoe UI">
  <header style="display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px">
    <h2 style="margin:0;font-size:1.35rem;letter-spacing:-.01em">OxiaAI — Country Editions</h2>
    <div id="oxiaai-date" style="color:#666;font-size:.95rem"></div>
  </header>

  
  <div id="oxiaai-countries" style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px"></div>

  
  <div id="oxiaai-book" aria-live="polite" style="position:relative;display:grid;place-items:center;margin-bottom:16px">
    <style>
      #oxiaai-book .book { position:relative; width:min(900px,100%); height:220px; perspective:1800px; }
      #oxiaai-book .cover, #oxiaai-book .page { position:absolute; inset:0; border-radius:14px; overflow:hidden; }
      #oxiaai-book .cover { background:#111; color:#fff; display:grid; place-items:center; transform-origin:left; transform:rotateY(0deg);
        box-shadow:0 18px 50px rgba(0,0,0,.2); animation: bookOpen 1.2s ease forwards .35s; }
      #oxiaai-book .title { font-weight:800; letter-spacing:-.02em; font-size:clamp(1.1rem,2.3vw,1.6rem); }
      #oxiaai-book .page { background:#fff; border:1px solid #eee; display:grid; grid-template-rows:auto auto 1fr; gap:8px; padding:16px 16px 12px; }
      #oxiaai-intro { line-height:1.55; font-size:clamp(1rem,1.2vw,1.05rem); min-height:2.9em; border-right:.08em solid rgba(17,17,17,.5); }
      #oxiaai-source { font-size:.92rem; color:#555; }
      #oxiaai-source a { color:#111; font-weight:700; text-decoration:none; border-bottom:1px solid #111; }
      #oxiaai-source a:hover { opacity:.8; }
      @keyframes bookOpen { to { transform:rotateY(-180deg); opacity:0; } }
      @media (prefers-reduced-motion: reduce){ #oxiaai-book .cover { animation:none; display:none; } #oxiaai-intro { border-right:none; } }
      /* chips */
      .chip { border:1px solid #ddd;background:#fff;border-radius:999px;padding:.5rem .8rem;font-weight:600;cursor:pointer }
      .chip[aria-pressed="true"]{ background:#111;color:#fff;border-color:#111 }
    </style>
    <div class="book">
      <div class="page">
        <div style="font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#666" id="oxiaai-pagekicker">Today’s Opening Line</div>
        <div id="oxiaai-intro"></div>
        <div id="oxiaai-source"></div>
      </div>
      <div class="cover">
        <div class="title">Opening today’s edition…</div>
      </div>
    </div>
  </div>

  
  <div id="oxiaai-grid" style="display:grid;gap:14px;grid-template-columns:repeat(3,1fr)"></div>

  
  <div style="margin-top:18px;border-top:1px solid #eee;padding-top:14px">
    <div style="display:flex;gap:8px;align-items:center;margin-bottom:6px">
      <strong>Ask OxiaAI</strong>
      <small style="color:#666">— searches today’s set for the selected country</small>
    </div>
    <div style="display:flex;gap:8px;flex-wrap:wrap">
      <input id="oxiaai-q" placeholder="Ask about tech, travel, fashion, luxury, culture…" 
             style="flex:1;min-width:240px;padding:.65rem .75rem;border:1px solid #ddd;border-radius:10px;font-size:15px;outline:none">
      <button id="oxiaai-ask" style="padding:.65rem .9rem;border:1px solid #111;background:#111;color:#fff;border-radius:10px;font-weight:700;cursor:pointer">
        Ask
      </button>
    </div>
    <div id="oxiaai-chat" style="margin-top:10px;line-height:1.6;color:#222;white-space:pre-wrap"></div>
  </div>
</section>

<script>
(function(){
  // ====== CONFIG ======
  const API_BASE = "https://api.rss2json.com/v1/api.json?rss_url="; // swap to your Worker later if you like
  // Per-country feed sets (min 2-3 per cat is ideal). Edit freely.
  const COUNTRY_SOURCES = {
    "Global":[
      {cat:'Tech',    url:'https://www.theverge.com/rss/index.xml'},
      {cat:'Travel',  url:'https://www.cntraveler.com/feed/travel'},
      {cat:'Fashion', url:'https://www.vogue.com/rss'},
      {cat:'Luxury',  url:'https://robbreport.com/feed/'},
      {cat:'Culture', url:'https://variety.com/feed/'}
    ],
    "India":[
      {cat:'Tech',    url:'https://www.indiatoday.in/technology/rss/1/107.rss'},
      {cat:'Travel',  url:'https://www.cntraveller.in/feed/'},
      {cat:'Fashion', url:'https://www.vogue.in/feed/'},
      {cat:'Luxury',  url:'https://www.livemint.com/rss/lifestyle'},
      {cat:'Culture', url:'https://www.thehindu.com/entertainment/feeder/default.rss'}
    ],
    "USA":[
      {cat:'Tech',    url:'https://rss.nytimes.com/services/xml/rss/nyt/Technology.xml'},
      {cat:'Travel',  url:'https://www.nationalgeographic.com/travel/rss/'},
      {cat:'Fashion', url:'https://www.gq.com/feed/rss'},
      {cat:'Luxury',  url:'https://www.hodinkee.com/feed'},
      {cat:'Culture', url:'https://www.newyorker.com/feed/culture'}
    ],
    "Germany":[
      {cat:'Tech',    url:'https://www.heise.de/rss/heise-atom.xml'},
      {cat:'Travel',  url:'https://www.dw.com/feeds/section/travel/rss-e'},
      {cat:'Fashion', url:'https://www.vogue.de/rss/all'},
      {cat:'Luxury',  url:'https://www.handelsblatt.com/contentexport/feed/luxus'},
      {cat:'Culture', url:'https://www.dw.com/feeds/rss-en-culture'}
    ],
    "Czechia":[
      {cat:'Tech',    url:'https://www.root.cz/rss/clanky/'},
      {cat:'Travel',  url:'https://www.pragueexperience.com/news/rss/'},
      {cat:'Fashion', url:'https://www.vogue.cz/rss'}, /* if unavailable, swap later */
      {cat:'Luxury',  url:'https://www.luxurypragueapartment.com/feed/'},
      {cat:'Culture', url:'https://english.radio.cz/rss'}
    ]
  };

  // If you want 24h rotations per country (multiple source sets), define alt sets and pick by dayKey % sets.length.
  // For now we keep one set per country to keep things simple.

  const reduceMotion = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  const grid   = document.getElementById('oxiaai-grid');
  const chatEl = document.getElementById('oxiaai-chat');
  const qInp   = document.getElementById('oxiaai-q');
  const askBtn = document.getElementById('oxiaai-ask');
  const dateEl = document.getElementById('oxiaai-date');
  const introEl= document.getElementById('oxiaai-intro');
  const sourceEl=document.getElementById('oxiaai-source');
  const pageKicker = document.getElementById('oxiaai-pagekicker');
  const chipsEl= document.getElementById('oxiaai-countries');

  function todayKey(){ return Math.floor(Date.now() / (24*60*60*1000)); } // rotates daily (UTC)
  function fmtDate(d=new Date()){ return d.toLocaleDateString(undefined,{year:'numeric',month:'long',day:'numeric'}); }
  function strip(html){ return (html||'').replace(/<[^>]+>/g,' ').replace(/\s+/g,' ').trim(); }
  function domainOf(u){ try { return new URL(u).hostname.replace(/^www\./,''); } catch(e){ return ''; } }

  // Build country chips
  const COUNTRY_LIST = Object.keys(COUNTRY_SOURCES);
  let currentCountry = COUNTRY_LIST.includes('India') ? 'India' : COUNTRY_LIST[0];
  function paintChips(){
    chipsEl.innerHTML = '';
    COUNTRY_LIST.forEach(name=>{
      const b = document.createElement('button');
      b.className = 'chip';
      b.type='button';
      b.textContent = name;
      b.setAttribute('aria-pressed', name===currentCountry ? 'true':'false');
      b.addEventListener('click', ()=>{ currentCountry=name; paintChips(); loadCountry(name); });
      chipsEl.appendChild(b);
    });
  }

  function typeLine(text, cb){
    introEl.textContent = '';
    if(reduceMotion){ introEl.textContent = text; if(cb) cb(); return; }
    let i=0;
    (function t(){
      if(i<text.length){ introEl.textContent += text.charAt(i++); setTimeout(t, 16); }
      else { introEl.style.borderRight='none'; if(cb) cb(); }
    })();
  }

  async function fetchFeed(src){
    const r = await fetch(API_BASE + encodeURIComponent(src.url));
    if(!r.ok) throw new Error('Load failed ' + r.status);
    const j = await r.json();
    const items = (j.items||[]).map(it => ({...it, __cat: src.cat}));
    return items;
  }

  async function loadCountry(country){
    dateEl.textContent = country + ' — ' + fmtDate(new Date());
    pageKicker.textContent = country + ': Today’s Opening Line';
    sourceEl.textContent = '';
    introEl.textContent = ''; introEl.style.borderRight='.08em solid rgba(17,17,17,.5)';
    grid.innerHTML = 'Loading…';

    const SOURCES = COUNTRY_SOURCES[country] || [];
    if(!SOURCES.length){ grid.innerHTML = `<div style="color:#b00">No sources configured for ${country}.</div>`; return; }

    try{
      const results = await Promise.allSettled(SOURCES.map(fetchFeed));
      let all = results.flatMap(r => r.status==='fulfilled' ? r.value : []);
      // sort newest first
      all.sort((a,b)=> new Date(b.pubDate||b.pubdate||0) - new Date(a.pubDate||a.pubdate||0));

      // Prefer a Travel intro if available (nice for lifestyle vibe)
      const top = all.find(it => it.__cat==='Travel') || all[0];
      if(top){
        const line = `${top.title} — ${strip(top.description).slice(0,110)}…`;
        typeLine(line, ()=> {
          const d = domainOf(top.link);
          sourceEl.innerHTML = `Source: <a href="${top.link}" target="_blank" rel="noopener">${d || 'Open link'}</a>`;
        });
      } else {
        typeLine("No items loaded yet. Please refresh in a moment.");
      }

      const take = all.slice(0,12);
      grid.innerHTML = take.map(it => {
        const img = it.enclosure?.link || it.thumbnail || "";
        return `
          <article style="border:1px solid #eee;border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column">
            ${img?`<img src="${img}" alt="" loading="lazy" style="width:100%;aspect-ratio:16/9;object-fit:cover;background:#eee">`:``}
            <div style="padding:12px 12px 14px">
              <div style="font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#666;margin-bottom:2px">${it.__cat}</div>
              <div style="font-weight:800;letter-spacing:-.01em;font-size:1rem;line-height:1.35">${it.title||''}</div>
              <div style="color:#555;line-height:1.55;margin-top:6px">${(strip(it.description)||'').slice(0,150)}…</div>
              <div style="margin-top:10px">
                <a href="${it.link}" target="_blank" rel="noopener"
                   style="display:inline-block;background:#111;color:#fff;padding:.5rem .8rem;border-radius:10px;text-decoration:none;font-weight:700">
                  Open
                </a>
              </div>
            </div>
          </article>`;
      }).join('');

      window.__OXIAAI_ITEMS = take; // for chat search (country-scoped)
    }catch(e){
      introEl.textContent = "Failed to load today’s opening line."; introEl.style.borderRight='none';
      sourceEl.textContent = '';
      grid.innerHTML = `<div style="color:#b00">Failed to load: ${e.message||e}</div>`;
      window.__OXIAAI_ITEMS = [];
    }
  }

  // mini chat (search current country’s set)
  function autoType(text){
    chatEl.textContent = '';
    if(reduceMotion){ chatEl.textContent = text; return; }
    let i=0; (function t(){ if(i<text.length){ chatEl.textContent += text.charAt(i++); setTimeout(t, 18); } })();
  }
  function searchAndReply(q){
    const items = window.__OXIAAI_ITEMS || [];
    if(!q || !items.length){ autoType("No data yet. Try again in a moment."); return; }
    const terms = q.toLowerCase().split(/\s+/).filter(Boolean);
    const scored = items.map(it=>{
      const hay = ((it.title||'')+' '+strip(it.description||'')+' '+(it.__cat||'')).toLowerCase();
      const score = terms.reduce((s,t)=> s + (hay.includes(t)?1:0), 0) + (hay.includes(terms.join(' '))?1:0);
      return {it, score};
    }).filter(x=>x.score>0).sort((a,b)=> b.score-a.score).slice(0,3);

    if(!scored.length){
      autoType("No strong match in today’s "+currentCountry+" set. Try: tech, travel, fashion, luxury, culture, or be more specific.");
      return;
    }
    const lines = ["Here’s what stands out today in " + currentCountry + ":"]
      .concat(scored.map(x=>`• ${x.it.title}  —  ${x.it.__cat}\n  ${x.it.link}`));
    autoType(lines.join('\n\n'));
  }

  askBtn.addEventListener('click', ()=> searchAndReply(qInp.value.trim()));
  qInp.addEventListener('keydown', e=>{ if(e.key==='Enter'){ searchAndReply(qInp.value.trim()); } });

  // init
  dateEl.textContent = 'Select a country — ' + fmtDate(new Date());
  paintChips();
  loadCountry(currentCountry);
})();
</script>

<section id="oxiaai-live" style="max-width:1100px;margin:36px auto;padding:0 12px;font-family:system-ui, -apple-system, Segoe UI">
  <header style="display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px">
    <h2 style="margin:0;font-size:1.35rem;letter-spacing:-.01em">OxiaAI — Live Edition</h2>
    <div id="oxiaai-date" style="color:#666;font-size:.95rem"></div>
  </header>

  
  <div id="oxiaai-book" aria-live="polite" style="position:relative;display:grid;place-items:center;margin-bottom:16px">
    <style>
      #oxiaai-book .book {
        position:relative; width:min(900px,100%); height:220px; perspective:1800px;
      }
      #oxiaai-book .cover, #oxiaai-book .page {
        position:absolute; inset:0; border-radius:14px; overflow:hidden;
      }
      #oxiaai-book .cover {
        background:#111; color:#fff; display:grid; place-items:center;
        transform-origin:left; transform:rotateY(0deg);
        box-shadow:0 18px 50px rgba(0,0,0,.2);
        animation: bookOpen 1.2s ease forwards .35s;
      }
      #oxiaai-book .title {
        font-weight:800; letter-spacing:-.02em; font-size:clamp(1.1rem,2.3vw,1.6rem);
      }
      #oxiaai-book .page {
        background:#fff; border:1px solid #eee;
        display:grid; grid-template-rows:auto auto 1fr; gap:8px;
        padding:16px 16px 12px;
      }
      #oxiaai-intro { line-height:1.55; font-size:clamp(1rem,1.2vw,1.05rem); min-height:2.9em; border-right:.08em solid rgba(17,17,17,.5); }
      #oxiaai-source { font-size:.92rem; color:#555; }
      #oxiaai-source a { color:#111; font-weight:700; text-decoration:none; border-bottom:1px solid #111; }
      #oxiaai-source a:hover { opacity:.8; }
      @keyframes bookOpen { to { transform:rotateY(-180deg); opacity:0; } }
      @media (prefers-reduced-motion: reduce){
        #oxiaai-book .cover { animation:none; display:none; }
        #oxiaai-intro { border-right:none; }
      }
    </style>
    <div class="book">
      <div class="page">
        <div style="font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#666">Today’s Opening Line</div>
        <div id="oxiaai-intro"></div>
        <div id="oxiaai-source"></div>
      </div>
      <div class="cover">
        <div class="title">Opening today’s edition…</div>
      </div>
    </div>
  </div>

  
  <div id="oxiaai-grid" style="display:grid;gap:14px;grid-template-columns:repeat(3,1fr)"></div>

  
  <div style="margin-top:18px;border-top:1px solid #eee;padding-top:14px">
    <div style="display:flex;gap:8px;align-items:center;margin-bottom:6px">
      <strong>Ask OxiaAI</strong>
      <small style="color:#666">— searches today’s sources</small>
    </div>
    <div style="display:flex;gap:8px;flex-wrap:wrap">
      <input id="oxiaai-q" placeholder="Ask about tech, travel, fashion, luxury, culture…" 
             style="flex:1;min-width:240px;padding:.65rem .75rem;border:1px solid #ddd;border-radius:10px;font-size:15px;outline:none">
      <button id="oxiaai-ask" style="padding:.65rem .9rem;border:1px solid #111;background:#111;color:#fff;border-radius:10px;font-weight:700;cursor:pointer">
        Ask
      </button>
    </div>
    <div id="oxiaai-chat" style="margin-top:10px;line-height:1.6;color:#222;white-space:pre-wrap"></div>
  </div>
</section>

<script>
(function(){
  // ====== CONFIG ======
  const API_BASE = "https://api.rss2json.com/v1/api.json?rss_url="; // zero-setup; swap to your Worker later if desired
  // Daily rotations (rotate every 24h). Adjust freely.
  const ROTATIONS = [
    [
      {cat:'Tech',    url:'https://www.theverge.com/rss/index.xml'},
      {cat:'Travel',  url:'https://www.nationalgeographic.com/travel/rss/'},
      {cat:'Fashion', url:'https://www.vogue.com/rss'},
      {cat:'Luxury',  url:'https://www.hodinkee.com/feed'},
      {cat:'Culture', url:'https://www.smithsonianmag.com/rss/latest/'}
    ],
    [
      {cat:'Tech',    url:'https://rss.nytimes.com/services/xml/rss/nyt/Technology.xml'},
      {cat:'Travel',  url:'https://feeds.bbci.co.uk/news/world/rss.xml'},
      {cat:'Fashion', url:'https://www.gq.com/feed/rss'},
      {cat:'Luxury',  url:'https://robbreport.com/feed/'},
      {cat:'Culture', url:'https://www.newyorker.com/feed/culture'}
    ],
    [
      {cat:'Tech',    url:'https://blog.google/products/rss/'},
      {cat:'Travel',  url:'https://www.cntraveler.com/feed/travel'},
      {cat:'Fashion', url:'https://www.highsnobiety.com/feed/'},
      {cat:'Luxury',  url:'https://www.luxuo.com/feed'},
      {cat:'Culture', url:'https://variety.com/feed/'}
    ]
  ];

  const reduceMotion = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  const grid = document.getElementById('oxiaai-grid');
  const chat = document.getElementById('oxiaai-chat');
  const qInp = document.getElementById('oxiaai-q');
  const askBtn = document.getElementById('oxiaai-ask');
  const dateEl = document.getElementById('oxiaai-date');
  const introEl = document.getElementById('oxiaai-intro');
  const sourceEl = document.getElementById('oxiaai-source');

  function todayKey(){ return Math.floor(Date.now() / (24*60*60*1000)); } // rotates daily (UTC)
  function pickRotation(){ return ROTATIONS[todayKey() % ROTATIONS.length]; }
  function fmtDate(d=new Date()){ return d.toLocaleDateString(undefined,{year:'numeric',month:'long',day:'numeric'}); }

  function strip(html){ return (html||'').replace(/<[^>]+>/g,' ').replace(/\s+/g,' ').trim(); }
  function domainOf(u){ try { return new URL(u).hostname.replace(/^www\./,''); } catch(e){ return ''; } }

  function card(cat,it){
    const img = it.enclosure?.link || it.thumbnail || "";
    return `
      <article style="border:1px solid #eee;border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column">
        ${img?`<img src="${img}" alt="" loading="lazy"
             style="width:100%;aspect-ratio:16/9;object-fit:cover;background:#eee">`:``}
        <div style="padding:12px 12px 14px">
          <div style="font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#666;margin-bottom:2px">${cat}</div>
          <div style="font-weight:800;letter-spacing:-.01em;font-size:1rem;line-height:1.35">${it.title||''}</div>
          <div style="color:#555;line-height:1.55;margin-top:6px">${(strip(it.description)||'').slice(0,150)}…</div>
          <div style="margin-top:10px">
            <a href="${it.link}" target="_blank" rel="noopener"
               style="display:inline-block;background:#111;color:#fff;padding:.5rem .8rem;border-radius:10px;text-decoration:none;font-weight:700">
              Open
            </a>
          </div>
        </div>
      </article>`;
  }

  function typeLine(text, cb){
    introEl.textContent = '';
    if(reduceMotion){ introEl.textContent = text; if(cb) cb(); return; }
    let i=0;
    (function t(){
      if(i<text.length){ introEl.textContent += text.charAt(i++); setTimeout(t, 16); }
      else { introEl.style.borderRight='none'; if(cb) cb(); }
    })();
  }

  async function fetchFeed(src){
    const r = await fetch(API_BASE + encodeURIComponent(src.url));
    if(!r.ok) throw new Error('Load failed ' + r.status);
    const j = await r.json();
    const items = (j.items||[]).map(it => ({...it, __cat: src.cat}));
    return items;
  }

  async function loadToday(){
    dateEl.textContent = 'Daily set: ' + fmtDate(new Date());
    grid.innerHTML = 'Loading…';
    sourceEl.textContent = '';

    const SOURCES = pickRotation();
    try{
      const results = await Promise.allSettled(SOURCES.map(fetchFeed));
      const all = results.flatMap(r => r.status==='fulfilled' ? r.value : []);
      // Sort by pubDate (desc) if available
      all.sort((a,b)=> new Date(b.pubDate||b.pubdate||0) - new Date(a.pubDate||a.pubdate||0));

      // ---- Book intro content (top item) ----
      const top = all[0];
      if(top){
        const line = `${top.title} — ${strip(top.description).slice(0,110)}…`;
        typeLine(line, ()=> {
          const d = domainOf(top.link);
          sourceEl.innerHTML = `Source: <a href="${top.link}" target="_blank" rel="noopener">${d || 'Open link'}</a>`;
        });
      }else{
        typeLine("No items loaded yet. Please refresh in a moment.");
      }

      // ---- Cards (up to 12) ----
      const mixed = all.slice(0, 12);
      grid.innerHTML = mixed.map(it => card(it.__cat, it)).join('') || `<div style="color:#b00">No items loaded.</div>`;
      window.__OXIAAI_ITEMS = mixed; // for chat search
    }catch(e){
      introEl.textContent = "Failed to load today’s opening line.";
      introEl.style.borderRight='none';
      sourceEl.textContent = '';
      grid.innerHTML = `<div style="color:#b00">Failed to load: ${e.message||e}</div>`;
      window.__OXIAAI_ITEMS = [];
    }
  }

  // ----- mini chat (search + autotype) -----
  function autoType(text){
    chat.textContent = '';
    if(reduceMotion){ chat.textContent = text; return; }
    let i=0;
    (function t(){
      if(i<text.length){ chat.textContent += text.charAt(i++); setTimeout(t, 18); }
    })();
  }

  function searchAndReply(q){
    const items = window.__OXIAAI_ITEMS || [];
    if(!q || !items.length){ autoType("No data yet. Try again in a moment."); return; }
    const terms = q.toLowerCase().split(/\s+/).filter(Boolean);
    const scored = items.map(it=>{
      const hay = ((it.title||'')+' '+strip(it.description||'')+' '+(it.__cat||'')).toLowerCase();
      const score = terms.reduce((s,t)=> s + (hay.includes(t)?1:0), 0) + (hay.includes(terms.join(' '))?1:0);
      return {it, score};
    }).filter(x=>x.score>0).sort((a,b)=> b.score-a.score).slice(0,3);

    if(!scored.length){
      autoType("I didn’t find a strong match in today’s set. Try: tech, travel, fashion, luxury, culture, or be more specific.");
      return;
    }
    const lines = ["Here’s what stands out today:"]
      .concat(scored.map(x=>`• ${x.it.title}  —  ${x.it.__cat}\n  ${x.it.link}`));
    autoType(lines.join('\n\n'));
  }

  askBtn.addEventListener('click', ()=> searchAndReply(qInp.value.trim()));
  qInp.addEventListener('keydown', e=>{ if(e.key==='Enter'){ searchAndReply(qInp.value.trim()); } });

  // init
  loadToday();
})();
</script>

<section id="oxiaai-live" style="max-width:1100px;margin:36px auto;padding:0 12px;font-family:system-ui, -apple-system, Segoe UI">
  <header style="display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px">
    <h2 style="margin:0;font-size:1.35rem;letter-spacing:-.01em">OxiaAI — Live Edition</h2>
    <div id="oxiaai-date" style="color:#666;font-size:.95rem"></div>
  </header>

  
  <div id="oxiaai-grid" style="display:grid;gap:14px;grid-template-columns:repeat(3,1fr)"></div>

  
  <div style="margin-top:18px;border-top:1px solid #eee;padding-top:14px">
    <div style="display:flex;gap:8px;align-items:center;margin-bottom:6px">
      <strong>Ask OxiaAI</strong>
      <small style="color:#666">— searches today’s sources</small>
    </div>
    <div style="display:flex;gap:8px;flex-wrap:wrap">
      <input id="oxiaai-q" placeholder="Ask about tech, travel, fashion, luxury, culture…" 
             style="flex:1;min-width:240px;padding:.65rem .75rem;border:1px solid #ddd;border-radius:10px;font-size:15px;outline:none">
      <button id="oxiaai-ask" style="padding:.65rem .9rem;border:1px solid #111;background:#111;color:#fff;border-radius:10px;font-weight:700;cursor:pointer">
        Ask
      </button>
    </div>
    <div id="oxiaai-chat" style="margin-top:10px;line-height:1.6;color:#222;white-space:pre-wrap"></div>
  </div>
</section>

<script>
(function(){
  // ====== CONFIG ======
  const API_BASE = "https://api.rss2json.com/v1/api.json?rss_url="; // swap later to your Worker if you want
  // Daily sources (rotate by day). Feel free to add/replace.
  const ROTATIONS = [
    [
      {cat:'Tech',    url:'https://www.theverge.com/rss/index.xml'},
      {cat:'Travel',  url:'https://www.nationalgeographic.com/travel/rss/'},
      {cat:'Fashion', url:'https://www.vogue.com/rss'},
      {cat:'Luxury',  url:'https://www.hodinkee.com/feed'},
      {cat:'Culture', url:'https://www.smithsonianmag.com/rss/latest/'}
    ],
    [
      {cat:'Tech',    url:'https://rss.nytimes.com/services/xml/rss/nyt/Technology.xml'},
      {cat:'Travel',  url:'https://feeds.bbci.co.uk/news/world/rss.xml'},
      {cat:'Fashion', url:'https://www.gq.com/feed/rss'},
      {cat:'Luxury',  url:'https://robbreport.com/feed/'},
      {cat:'Culture', url:'https://www.newyorker.com/feed/culture'}
    ],
    [
      {cat:'Tech',    url:'https://blog.google/products/rss/'},
      {cat:'Travel',  url:'https://www.cntraveler.com/feed/travel'},
      {cat:'Fashion', url:'https://www.highsnobiety.com/feed/'},
      {cat:'Luxury',  url:'https://www.luxuo.com/feed'},
      {cat:'Culture', url:'https://variety.com/feed/'}
    ]
  ];

  const reduceMotion = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  const grid = document.getElementById('oxiaai-grid');
  const chat = document.getElementById('oxiaai-chat');
  const qInp = document.getElementById('oxiaai-q');
  const askBtn = document.getElementById('oxiaai-ask');
  const dateEl = document.getElementById('oxiaai-date');

  function todayKey(){ return Math.floor(Date.now() / (24*60*60*1000)); } // changes once per 24h UTC
  function pickRotation(){
    const idx = todayKey() % ROTATIONS.length;
    return ROTATIONS[idx];
  }

  function fmtDate(d=new Date()){
    return d.toLocaleDateString(undefined,{year:'numeric',month:'long',day:'numeric'});
  }

  function card(cat,it){
    const img = it.enclosure?.link || it.thumbnail || "";
    return `
      <article style="border:1px solid #eee;border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column">
        ${img?`<img src="${img}" alt="" loading="lazy"
             style="width:100%;aspect-ratio:16/9;object-fit:cover;background:#eee">`:``}
        <div style="padding:12px 12px 14px">
          <div style="font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#666;margin-bottom:2px">${cat}</div>
          <div style="font-weight:800;letter-spacing:-.01em;font-size:1rem;line-height:1.35">${it.title||''}</div>
          <div style="color:#555;line-height:1.55;margin-top:6px">${(strip(it.description)||'').slice(0,150)}…</div>
          <div style="margin-top:10px">
            <a href="${it.link}" target="_blank" rel="noopener"
               style="display:inline-block;background:#111;color:#fff;padding:.5rem .8rem;border-radius:10px;text-decoration:none;font-weight:700">
              Open
            </a>
          </div>
        </div>
      </article>`;
  }

  function strip(html){ return (html||'').replace(/<[^>]+>/g,' ').replace(/\s+/g,' ').trim(); }

  async function fetchFeed(src){
    const r = await fetch(API_BASE + encodeURIComponent(src.url));
    if(!r.ok) throw new Error('Load failed ' + r.status);
    const j = await r.json();
    const items = (j.items||[]).map(it => ({...it, __cat: src.cat})); // tag category
    return items;
  }

  async function loadToday(){
    dateEl.textContent = 'Daily set: ' + fmtDate(new Date());
    grid.innerHTML = 'Loading…';
    const SOURCES = pickRotation();
    try{
      const results = await Promise.allSettled(SOURCES.map(fetchFeed));
      const all = results.flatMap(r => r.status==='fulfilled' ? r.value : []);
      // keep up to 12 mixed items (3x4)
      const mixed = all.slice(0, 12);
      grid.innerHTML = mixed.map(it => card(it.__cat, it)).join('') || `<div style="color:#b00">No items loaded.</div>`;
      window.__OXIAAI_ITEMS = mixed; // expose for chat
    }catch(e){
      grid.innerHTML = `<div style="color:#b00">Failed to load: ${e.message||e}</div>`;
      window.__OXIAAI_ITEMS = [];
    }
  }

  // ----- mini chat (search + autotype) -----
  function autoType(text){
    chat.textContent = '';
    if(reduceMotion){ chat.textContent = text; return; }
    let i=0;
    (function t(){
      if(i<text.length){ chat.textContent += text.charAt(i++); setTimeout(t, 18); }
    })();
  }

  function searchAndReply(q){
    const items = window.__OXIAAI_ITEMS || [];
    if(!q || !items.length){ autoType("No data yet. Try again in a moment."); return; }
    const terms = q.toLowerCase().split(/\s+/).filter(Boolean);
    const scored = items.map(it=>{
      const hay = ((it.title||'')+' '+strip(it.description||'')+' '+(it.__cat||'')).toLowerCase();
      const score = terms.reduce((s,t)=> s + (hay.includes(t)?1:0), 0) + (hay.includes(terms.join(' '))?1:0);
      return {it, score};
    }).filter(x=>x.score>0).sort((a,b)=> b.score-a.score).slice(0,3);

    if(!scored.length){
      autoType("I didn’t find a strong match in today’s set. Try: tech, travel, fashion, luxury, culture, or be more specific.");
      return;
    }
    const lines = ["Here’s what stands out today:"]
      .concat(scored.map(x=>`• ${x.it.title}  —  ${x.it.__cat}\n  ${x.it.link}`));
    autoType(lines.join('\n\n'));
  }

  askBtn.addEventListener('click', ()=> searchAndReply(qInp.value.trim()));
  qInp.addEventListener('keydown', e=>{ if(e.key==='Enter'){ searchAndReply(qInp.value.trim()); } });

  // init
  loadToday();
})();
</script>

<section id="oxiaai-cards" style="max-width:1100px;margin:36px auto;padding:0 12px;font-family:system-ui">
  <h2 style="margin:0 0 10px;">OxiaAI — Live Edition</h2>
  <div id="grid" style="display:grid;gap:12px;grid-template-columns:repeat(3,1fr)"></div>
</section>

<script>
(async () => {
  const WORKER = "https://oxiaai-chat.patient-boat-4128.workers.dev?rss="; // later: https://ai.oxiaai.com?rss=
  const FEED   = "https://www.theverge.com/rss/index.xml"; // change anytime

  function card(it){
    const img = it.image ? `<img src="${it.image}" alt="" style="width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px 10px 0 0;background:#eee;">` : "";
    return `
      <article style="border:1px solid #eee;border-radius:12px;overflow:hidden;background:#fff">
        ${img}
        <div style="padding:12px 12px 14px">
          <div style="font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#666;margin-bottom:2px">Tech</div>
          <div style="font-weight:800;letter-spacing:-.01em;font-size:1rem;line-height:1.35">${it.title||''}</div>
          <div style="color:#555;line-height:1.55;margin-top:6px">${(it.description||'').slice(0,140)}…</div>
          <div style="margin-top:10px">
            <a href="${it.link}" target="_blank" rel="noopener" style="display:inline-block;background:#111;color:#fff;padding:.5rem .8rem;border-radius:10px;text-decoration:none;font-weight:700">Open</a>
          </div>
        </div>
      </article>`;
  }

  try{
    const res = await fetch(WORKER + encodeURIComponent(FEED));
    const json = await res.json();
    const items = (json.items||[]).slice(0,6);
    document.getElementById('grid').innerHTML = items.map(card).join('');
  }catch(e){
    document.getElementById('grid').innerHTML = `<div style="color:#b00">Failed to load feed: ${e.message||e}</div>`;
  }
})();
</script>