// why-graduate.jsx — "Neden Şimdi?" + "Mezun Profili"

function WhyNow({ lang }) {
  const c = window.CONTENT[lang].why;
  return (
    <section id="neden" className="section anchor" style={{ background: 'var(--bg-soft)' }}>
      <div className="wrap">
        <div style={{ maxWidth: 780, marginBottom: 56 }}>
          <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 className="why-cards" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 24,
        }}>
          {c.cards.map((card, i) => (
            <article key={i} className="card" style={{
              padding: 28,
              background: 'var(--surface)',
              display: 'flex',
              flexDirection: 'column',
              gap: 16,
              transform: i % 2 ? 'rotate(0.4deg)' : 'rotate(-0.4deg)',
            }}>
              <div style={{
                display: 'inline-flex',
                alignItems: 'center',
                gap: 10,
                width: 'fit-content',
                padding: '6px 14px',
                background: `var(--${card.color})`,
                color: card.color === 'sun' ? 'var(--ink)' : '#fff',
                borderRadius: 999,
                border: '2px solid var(--line)',
                fontWeight: 700,
                fontSize: 12,
                letterSpacing: '0.08em',
                textTransform: 'uppercase',
              }}>
                {card.tag}
              </div>
              <h3 style={{ fontSize: 24, lineHeight: 1.15 }}>{card.title}</h3>
              <p style={{ color: 'var(--ink-soft)', fontSize: 16, lineHeight: 1.55 }}>{card.body}</p>
            </article>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 1040px){ .why-cards { grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 560px){ .why-cards { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function GraduateProfile({ lang }) {
  const c = window.CONTENT[lang].profile;
  return (
    <section id="profil" className="section anchor" style={{ position: 'relative' }}>
      <div className="wrap">
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 64,
          alignItems: 'start',
          marginBottom: 56,
        }} className="grad-head">
          <div>
            <div className="section-eyebrow">{c.eyebrow}</div>
            <h2 className="section-title" style={{ marginBottom: 18 }}>{c.title}</h2>
          </div>
          <p style={{ fontSize: 19, color: 'var(--ink-soft)', maxWidth: 460, paddingTop: 14 }}>{c.lede}</p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
          gap: 20,
        }}>
          {c.items.map((it, i) => (
            <article key={i} className="card" style={{
              padding: 24,
              background: 'var(--surface)',
              display: 'flex',
              flexDirection: 'column',
              gap: 12,
              minHeight: 250,
            }}>
              <div style={{
                width: 64, height: 64,
                background: `var(--${it.color})`,
                border: '2px solid var(--line)',
                borderRadius: 18,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 8,
                boxShadow: 'var(--shadow-1)',
              }}>
                <ProfileIcon name={it.icon} color={`var(--${it.color})`} />
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{
                  fontFamily: 'var(--font-display)',
                  fontSize: 13,
                  fontWeight: 700,
                  background: 'var(--bg-soft)',
                  padding: '3px 10px',
                  borderRadius: 999,
                  color: 'var(--ink-soft)',
                }}>0{i+1}</span>
              </div>
              <h3 style={{ fontSize: 19, lineHeight: 1.2 }}>{it.label}</h3>
              <p style={{ color: 'var(--ink-soft)', fontSize: 14.5, lineHeight: 1.5 }}>{it.body}</p>
            </article>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 880px){
          .grad-head { grid-template-columns: 1fr !important; gap: 20px !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { WhyNow, GraduateProfile });