// Instagram news feed — latest relevant posts from @schuelerunion_noe
function InstaGlyph({ size = 16, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="3" width="18" height="18" rx="5" />
      <circle cx="12" cy="12" r="4" />
      <circle cx="17.5" cy="6.5" r="1" fill={color} stroke="none" />
    </svg>
  );
}

function InstaPostVisual({ post, tone }) {
  // Decorative visual per post — gradient + iconography that matches the post kind
  const c = tone.c, bg2 = tone.bg2;
  return (
    <div style={{
      position: 'relative',
      aspectRatio: '1 / 1',
      background: `linear-gradient(135deg, ${bg2}, oklch(0.14 0.06 268))`,
      overflow: 'hidden',
    }}>
      {/* Starfield */}
      <svg viewBox="0 0 200 200" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        <defs>
          <radialGradient id={`ig-glow-${post.id}`} cx="0.5" cy="0.5" r="0.55">
            <stop offset="0" stopColor={c} stopOpacity="0.45" />
            <stop offset="1" stopColor={c} stopOpacity="0" />
          </radialGradient>
        </defs>
        <rect width="200" height="200" fill={`url(#ig-glow-${post.id})`} />
        {Array.from({ length: 26 }).map((_, i) => {
          const cx = (i * 41 + 13 + post.id * 7) % 200;
          const cy = (i * 53 + 19 + post.id * 11) % 200;
          const r = (i % 6 === 0) ? 1.6 : 0.7;
          return <circle key={i} cx={cx} cy={cy} r={r} fill="oklch(0.99 0.02 80)" opacity={0.35 + (i % 4) * 0.12} />;
        })}
        {/* Cross-flare hero stars */}
        {[[60, 70], [140, 130]].map(([cx, cy], i) => (
          <g key={i}>
            <circle cx={cx} cy={cy} r="2.2" fill="oklch(0.99 0.02 80)" />
            <line x1={cx - 9} y1={cy} x2={cx + 9} y2={cy} stroke="oklch(0.99 0.02 80 / 0.7)" strokeWidth="0.6" />
            <line x1={cx} y1={cy - 9} x2={cx} y2={cy + 9} stroke="oklch(0.99 0.02 80 / 0.7)" strokeWidth="0.6" />
          </g>
        ))}
      </svg>

      {/* Centerpiece */}
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        {post.icon === 'play' && (
          <div style={{
            width: 64, height: 64, borderRadius: '50%',
            background: `radial-gradient(circle, ${c.replace(')', ' / 0.4)')}, transparent 70%)`,
            border: `1.5px solid ${c}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: `0 0 24px ${c.replace(')', ' / 0.5)')}`,
          }}>
            <span style={{
              width: 0, height: 0,
              borderLeft: `16px solid oklch(0.99 0.02 80)`,
              borderTop: '10px solid transparent',
              borderBottom: '10px solid transparent',
              marginLeft: 4,
            }}></span>
          </div>
        )}
        {post.icon === 'image' && (
          <div style={{
            fontFamily: '"Cormorant Garamond", serif', fontSize: 64,
            color: c, lineHeight: 1, textShadow: `0 0 30px ${c.replace(')', ' / 0.7)')}`,
          }}>✦</div>
        )}
        {post.icon === 'event' && (
          <div style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
          }}>
            <div style={{
              fontFamily: '"Cormorant Garamond", serif', fontSize: 56, color: c, lineHeight: 1,
              textShadow: `0 0 24px ${c.replace(')', ' / 0.6)')}`,
            }}>11</div>
            <div style={{ fontSize: 10, letterSpacing: '0.32em', color: c, fontWeight: 600 }}>JUN</div>
          </div>
        )}
      </div>

      {/* Top-left tag */}
      <div style={{
        position: 'absolute', top: 10, left: 10,
        fontSize: 10, letterSpacing: '0.24em', textTransform: 'uppercase',
        color: c, fontWeight: 700,
        padding: '4px 10px', borderRadius: 999,
        background: 'oklch(0.10 0.05 268 / 0.8)',
        border: `1px solid ${c}`,
        backdropFilter: 'blur(6px)',
      }}>{post.tagText}</div>

      {/* Top-right kind glyph */}
      <div style={{
        position: 'absolute', top: 10, right: 10,
        width: 28, height: 28, borderRadius: '50%',
        background: 'oklch(0.10 0.05 268 / 0.7)',
        border: '1px solid oklch(1 0 0 / 0.15)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: 'oklch(0.99 0.02 80 / 0.9)',
      }}>
        {post.kind === 'reel' ? (
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg>
        ) : (
          <InstaGlyph size={13} />
        )}
      </div>
    </div>
  );
}

function InstaFeed({ lang }) {
  const posts = React.useMemo(() => ([
    {
      id: 1, kind: 'reel', icon: 'play', tone: 'gold',
      tag: { de: 'Wahlkampf', en: 'Campaign' },
      title: { de: 'Die ersten 19 stehen fest', en: 'The first 19 are confirmed' },
      caption: {
        de: 'Unser Team für die LSV-Wahl 2026 steht — 19 Schüler*innen aus AHS, BMHS und BS. Heute Abend: das volle Team-Reveal.',
        en: 'Our team for the 2026 election is set — 19 students from AHS, BMHS and BS. Tonight: full team reveal.',
      },
      time: { de: 'vor 2 Std.', en: '2h ago' },
      stats: { likes: 412, comments: 38 },
    },
    {
      id: 2, kind: 'post', icon: 'image', tone: 'orange',
      tag: { de: 'Forderungen', en: 'Demands' },
      title: { de: 'Praxis vor Bürokratie', en: 'Practice over bureaucracy' },
      caption: {
        de: 'BMHS-Forderung Nr. 1: weniger Papierkram, mehr Werkstatt. Wir haben mit 200 Schüler*innen gesprochen.',
        en: 'BMHS demand #1: less paperwork, more workshop. We talked to 200 students.',
      },
      time: { de: 'vor 1 Tag', en: '1d ago' },
      stats: { likes: 287, comments: 24 },
    },
    {
      id: 3, kind: 'post', icon: 'event', tone: 'violet',
      tag: { de: 'Event', en: 'Event' },
      title: { de: 'Beachvolleyball am Ratzersdorfer See', en: 'Beach volleyball at Lake Ratzersdorf' },
      caption: {
        de: 'Save the date — 11. Juni, ab 14:00. Match, Grill & Chill, alle sind willkommen.',
        en: 'Save the date — 11 June, from 2 pm. Match, grill & chill, everyone welcome.',
      },
      time: { de: 'vor 3 Tagen', en: '3d ago' },
      stats: { likes: 524, comments: 61 },
    },
    {
      id: 4, kind: 'reel', icon: 'image', tone: 'gold',
      tag: { de: 'Im Dialog', en: 'In dialogue' },
      title: { de: 'Treffen mit dem Bildungsminister', en: 'Meeting the Minister of Education' },
      caption: {
        de: 'Heute übergaben wir unsere drei Forderungspapiere im Ministerium. Was wir mitgenommen haben — bald hier.',
        en: 'Today we handed our three demand papers to the ministry. Takeaways coming soon.',
      },
      time: { de: 'vor 5 Tagen', en: '5d ago' },
      stats: { likes: 891, comments: 102 },
    },
  ]), []);

  const tones = {
    gold:   { c: 'oklch(0.84 0.15 82)',  bg2: 'oklch(0.30 0.15 60)' },
    orange: { c: 'oklch(0.72 0.17 45)',  bg2: 'oklch(0.28 0.16 40)' },
    violet: { c: 'oklch(0.65 0.20 305)', bg2: 'oklch(0.25 0.16 290)' },
  };

  return (
    <div>
      <div style={{
        display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
        flexWrap: 'wrap', gap: 12, marginBottom: 18,
      }}>
        <h2 style={{
          fontSize: 'clamp(26px, 3.6vw, 42px)', lineHeight: 1.1,
          margin: 0, fontWeight: 400,
          fontFamily: '"Cormorant Garamond", serif',
        }}>
          {lang === 'de' ? 'Auf Instagram' : 'On Instagram'}
        </h2>
        <a href="https://instagram.com/schuelerunion_noe" target="_blank" rel="noreferrer"
          style={{
            fontSize: 13, color: 'var(--ink-soft)', textDecoration: 'none',
            display: 'inline-flex', alignItems: 'center', gap: 8,
          }}>
          <InstaGlyph size={14} />
          @schuelerunion_noe <span>→</span>
        </a>
      </div>

      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
        gap: 14,
      }}>
        {posts.map((p, i) => {
          const tone = tones[p.tone];
          const post = { ...p, tagText: p.tag[lang] };
          return (
            <a key={p.id}
              href="https://instagram.com/schuelerunion_noe" target="_blank" rel="noreferrer"
              className="insta-card"
              style={{
                position: 'relative',
                background: 'oklch(0.16 0.05 268 / 0.6)',
                border: '1px solid var(--line)',
                borderRadius: 16,
                overflow: 'hidden',
                textDecoration: 'none',
                color: 'inherit',
                display: 'flex', flexDirection: 'column',
                transition: 'transform .25s ease, border-color .25s ease, box-shadow .25s ease',
                animation: `instaIn .5s ease ${i * 0.06}s both`,
              }}>
              <InstaPostVisual post={post} tone={tone} />

              <div style={{ padding: '12px 14px 14px', display: 'flex', flexDirection: 'column', gap: 6 }}>
                <div style={{
                  fontFamily: '"Cormorant Garamond", serif', fontSize: 17,
                  lineHeight: 1.2, color: 'var(--ink-bright)',
                }}>{p.title[lang]}</div>
                <div style={{
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  fontSize: 11, color: 'var(--ink-mute)', marginTop: 2,
                }}>
                  <span>{p.time[lang]}</span>
                  <span style={{ color: tone.c, fontWeight: 600 }}>→</span>
                </div>
              </div>
            </a>
          );
        })}
      </div>

      <style>{`
        @keyframes instaIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        .insta-card:hover {
          transform: translateY(-3px);
          border-color: oklch(0.84 0.15 82 / 0.5);
          box-shadow: 0 18px 40px -16px oklch(0 0 0 / 0.55), 0 0 0 1px oklch(0.84 0.15 82 / 0.2);
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { InstaFeed });