// ideas-levels.jsx — "Beş Büyük Fikir" diagram + "Seviyeler"

function FiveBigIdeas({ lang }) {
  const c = window.CONTENT[lang].ideas;
  const [active, setActive] = React.useState(0);
  const items = c.items;
  const cur = items[active];

  return (
    <section id="mufredat" className="section anchor" style={{ background: 'var(--bg-soft)' }}>
      <div className="wrap">
        <div style={{ maxWidth: 760, marginBottom: 48 }}>
          <div className="section-eyebrow">{c.eyebrow}</div>
          <h2 className="section-title" style={{ marginBottom: 18 }}>{c.title}</h2>
          <p style={{ fontSize: 19, color: 'var(--ink-soft)', maxWidth: 620 }}>{c.lede}</p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: '1.05fr 0.95fr',
          gap: 56,
          alignItems: 'center',
        }} className="ideas-grid">
          <div>
            <PentagonDiagram items={items} active={active} onSelect={setActive} />
          </div>

          <div style={{
            background: 'var(--surface)',
            border: '2px solid var(--line)',
            borderRadius: 'var(--radius-lg)',
            padding: 32,
            boxShadow: 'var(--shadow-3)',
            position: 'relative',
            minHeight: 280,
          }}>
            <div style={{
              position: 'absolute',
              top: -22, left: 24,
              padding: '8px 14px',
              background: `var(--${cur.color})`,
              color: cur.color === 'sun' ? 'var(--ink)' : '#fff',
              border: '2px solid var(--line)',
              borderRadius: 999,
              fontWeight: 700,
              fontSize: 13,
              letterSpacing: '0.05em',
            }}>
              MODÜL {cur.n} · {(lang === 'tr' ? 'Beş Büyük Fikir' : 'Five Big Ideas')}
            </div>

            <h3 style={{ fontSize: 42, marginBottom: 16, marginTop: 8, lineHeight: 1 }}>
              {cur.name}
            </h3>
            <p style={{
              fontFamily: 'var(--font-display)',
              fontSize: 22,
              fontWeight: 500,
              color: 'var(--ink)',
              marginBottom: 24,
              lineHeight: 1.25,
            }}>
              {cur.q}
            </p>

            <div style={{ display: 'flex', gap: 6, marginTop: 24 }}>
              {items.map((_, i) => (
                <button key={i} onClick={() => setActive(i)} style={{
                  width: 24, height: 6, padding: 0,
                  borderRadius: 3,
                  border: 0,
                  background: i === active ? 'var(--ink)' : 'rgba(0,0,0,0.15)',
                  cursor: 'pointer',
                  transition: 'background .2s',
                }} aria-label={`Idea ${i+1}`}/>
              ))}
            </div>

            <p style={{
              marginTop: 20, fontSize: 14, color: 'var(--ink-soft)',
              fontStyle: 'italic',
            }}>
              {lang === 'tr' ? 'Düğüme tıkla, kavramı keşfet.' : 'Tap a node to explore each concept.'}
            </p>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px){
          .ideas-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </section>
  );
}

function Levels({ lang }) {
  const c = window.CONTENT[lang].levels;
  return (
    <section id="seviye" className="section anchor">
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 32, marginBottom: 56 }}>
          <div style={{ maxWidth: 640 }}>
            <div className="section-eyebrow">{c.eyebrow}</div>
            <h2 className="section-title" style={{ marginBottom: 18 }}>{c.title}</h2>
            <p style={{ fontSize: 19, color: 'var(--ink-soft)' }}>{c.lede}</p>
          </div>
        </div>

        {/* Curved journey illustration on desktop */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
          gap: 24,
          position: 'relative',
        }}>
          {c.items.map((lv, i) => <LevelCard key={i} lv={lv} idx={i} />)}
        </div>
      </div>
    </section>
  );
}

function LevelCard({ lv, idx }) {
  const isSun = lv.color === 'sun';
  return (
    <article className="card" style={{
      padding: 0,
      overflow: 'hidden',
      background: 'var(--surface)',
      display: 'flex',
      flexDirection: 'column',
      transform: `rotate(${idx % 2 ? 0.5 : -0.5}deg)`,
      transition: 'transform .25s ease',
    }}
    onMouseEnter={e => e.currentTarget.style.transform = 'rotate(0deg) translateY(-4px)'}
    onMouseLeave={e => e.currentTarget.style.transform = `rotate(${idx % 2 ? 0.5 : -0.5}deg)`}
    >
      <div style={{
        background: `var(--${lv.color})`,
        color: isSun ? 'var(--ink)' : '#fff',
        padding: '24px 24px 18px',
        borderBottom: '2px solid var(--line)',
        position: 'relative',
      }}>
        <div style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'flex-start',
          marginBottom: 12,
        }}>
          <span style={{
            fontSize: 12, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase',
            opacity: 0.85,
          }}>{lv.tag}</span>
          <div style={{
            fontSize: 36, lineHeight: 1,
            filter: 'drop-shadow(0 2px 0 rgba(0,0,0,0.15))',
          }}>{lv.icon}</div>
        </div>
        <h3 style={{
          color: 'currentColor', fontSize: 32, marginBottom: 4,
        }}>
          {lv.name}
        </h3>
        <div style={{ fontSize: 14, fontWeight: 700, opacity: 0.9 }}>{lv.age}</div>
      </div>

      <div style={{
        padding: 22,
        display: 'flex', flexDirection: 'column', gap: 12, flex: 1,
      }}>
        <p style={{
          fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 17, lineHeight: 1.25,
        }}>{lv.line}</p>
        <p style={{ color: 'var(--ink-soft)', fontSize: 14.5, lineHeight: 1.5 }}>{lv.body}</p>
        <div style={{
          marginTop: 'auto',
          paddingTop: 14,
          borderTop: '1.5px dashed rgba(0,0,0,0.2)',
          fontSize: 13,
          color: 'var(--ink)',
          fontWeight: 600,
        }}>
          <span style={{
            display: 'inline-block',
            background: 'var(--bg-soft)',
            padding: '4px 10px',
            borderRadius: 999,
            border: '1.5px solid var(--line)',
            fontSize: 11.5,
            fontWeight: 700,
            letterSpacing: '0.06em',
            textTransform: 'uppercase',
            marginRight: 8,
          }}>★ Final</span>
          {lv.final.replace(/^Final[:：]?\s*/i, '')}
        </div>
      </div>
    </article>
  );
}

Object.assign(window, { FiveBigIdeas, Levels });