/* SUPERMEDIA storefront — Blog (žurnal). Clean, light editorial listing. */
const { useState: useStateBlog, useEffect: useEffectBlog } = React;

const BLOG_POSTS = [
  { tag: 'Vodič', icon: 'refrigerator', title: 'Kako izabrati frižider koji ne troši kao mali grad', excerpt: 'Energetski razredi, inverter kompresori i trikovi koji prepolove račun za struju.', read: '6 min', date: 'Uskoro' },
  { tag: 'Gaming', icon: 'gamepad-2', title: 'Gaming setup iz snova za manje para nego što misliš', excerpt: 'Od monitora sa 240Hz do stolice u kojoj se preživi ceo ranked grind.', read: '7 min', date: 'Uskoro' },
  { tag: 'Lepota', icon: 'sparkles', title: 'Home spa rutina: salon u kupatilu za 15 minuta', excerpt: 'Fenovi, LED maske i uređaji koji rade posao kozmetičara — bez zakazivanja.', read: '5 min', date: 'Uskoro' },
  { tag: 'Vodič', icon: 'washing-machine', title: 'Mašina za veš: koliko kilograma ti zaista treba?', excerpt: 'Kapacitet, brzina centrifuge i programi koji čuvaju omiljene komade.', read: '5 min', date: 'Uskoro' },
  { tag: 'Tehnologija', icon: 'smartphone', title: 'Kako prebaciti podatke na novi telefon bez nerviranja', excerpt: 'Kontakti, fotografije i aplikacije — sve na novom uređaju za par minuta.', read: '4 min', date: 'Uskoro' },
  { tag: 'Kuhinja', icon: 'coffee', title: 'Espresso kod kuće: aparat koji se isplati', excerpt: 'Na šta da paziš pri izboru i kako da svako jutro počne kao u kafiću.', read: '6 min', date: 'Uskoro' },
];

const BLOG_COVERS = [
  'linear-gradient(150deg, #d7e8df, #eef4f0)',
  'linear-gradient(150deg, #dfe2f3, #eef0f8)',
  'linear-gradient(150deg, #f3e2ee, #f8eef5)',
  'linear-gradient(150deg, #e7e2f3, #f1eef8)',
  'linear-gradient(150deg, #e2eef3, #eef5f8)',
  'linear-gradient(150deg, #f3ece2, #f8f3ee)',
];

function BlogIndex({ onNav }) {
  const isMobile = useIsMobile();
  const wide = { maxWidth: 1280, margin: '0 auto', padding: isMobile ? '0 16px' : '0 24px' };

  return (
    <div style={{ paddingBottom: isMobile ? 48 : 76 }}>
      {/* header */}
      <div style={{ ...wide, paddingTop: isMobile ? 32 : 52, paddingBottom: isMobile ? 24 : 34 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--sm-text-muted)', marginBottom: 16 }}>
          <a onClick={() => onNav({ view: 'home' })} style={{ cursor: 'pointer', color: 'var(--sm-text-muted)' }}>Početna</a>
          {I('chevron-right', 14)}<span style={{ color: 'var(--sm-text)', fontWeight: 600 }}>Žurnal</span>
        </div>
        <div style={{ fontFamily: 'var(--sm-font-techno)', textTransform: 'uppercase', letterSpacing: '.2em', fontSize: 12.5, color: 'var(--sm-primary)', marginBottom: 12 }}>SuperMedia žurnal</div>
        <h1 style={{ margin: 0, fontFamily: 'var(--sm-font-display)', fontWeight: 800, fontSize: isMobile ? 30 : 46, letterSpacing: '-.02em', lineHeight: 1.08 }}>Saveti, vodiči i priče</h1>
        <p style={{ margin: '14px 0 0', fontSize: isMobile ? 16 : 18, lineHeight: 1.6, color: 'var(--sm-text-muted)', maxWidth: '60ch' }}>Praktični vodiči za kupovinu, saveti za dom i sve što ti treba da izabereš pravi uređaj — bez marketinške magle.</p>
      </div>

      {/* grid */}
      <div style={{ ...wide }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(264px, 1fr))', gap: isMobile ? 14 : 22 }}>
          {BLOG_POSTS.map((p, i) => (
            <article key={i} style={{ position: 'relative', borderRadius: 'var(--sm-radius-xl)', overflow: 'hidden', background: '#fff', border: '1px solid var(--sm-border)', boxShadow: 'var(--sm-shadow-xs)', display: 'flex', flexDirection: 'column' }}>
              <div style={{ position: 'relative', aspectRatio: '16 / 10', background: BLOG_COVERS[i % BLOG_COVERS.length], display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--sm-purple-300)' }}>
                {I(p.icon, 48, { strokeWidth: 1.3 })}
                <span style={{ position: 'absolute', top: 12, left: 12, background: 'rgba(255,255,255,.88)', borderRadius: 'var(--sm-radius-pill)', padding: '5px 11px', fontFamily: 'var(--sm-font-techno)', textTransform: 'uppercase', letterSpacing: '.12em', fontSize: 10.5, color: 'var(--sm-text)' }}>{p.tag}</span>
              </div>
              <div style={{ padding: '16px 18px 18px', display: 'flex', flexDirection: 'column', flex: 1 }}>
                <h3 style={{ margin: 0, fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 17.5, lineHeight: 1.25 }}>{p.title}</h3>
                <p style={{ margin: '8px 0 14px', fontSize: 13.5, lineHeight: 1.5, color: 'var(--sm-text-muted)' }}>{p.excerpt}</p>
                <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 12.5, color: 'var(--sm-text-subtle)' }}>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>{I('clock', 13)} {p.read}</span>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, color: 'var(--sm-primary)', fontWeight: 700, fontFamily: 'var(--sm-font-display)' }}>{p.date}</span>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { BlogIndex });