// instructor-safety.jsx — "Tanışın: Gizem Yılmaz" + "Veli Güvencesi"

function Instructor({ lang }) {
  const c = window.CONTENT[lang].instructor;
  return (
    <section id="gizem" className="section anchor" style={{ background: 'var(--bg-soft)' }}>
      <div className="wrap">
        <div style={{
          display: 'grid',
          gridTemplateColumns: '0.85fr 1.15fr',
          gap: 56,
          alignItems: 'center',
        }} className="inst-grid">
          {/* Portrait — real photo */}
          <div style={{ position: 'relative', maxWidth: 380, margin: '0 auto', width: '100%' }}>
            {/* colored disc backdrop */}
            <div aria-hidden="true" className="photo-disc" style={{
              position: 'absolute',
              inset: '8% -6% -10% 8%',
              background: 'var(--coral)',
              border: '2px solid var(--line)',
              borderRadius: '50% 50% 48% 52% / 52% 50% 50% 48%',
              zIndex: 0,
            }}></div>

            {/* dotted accent */}
            <svg aria-hidden="true" className="deco-dots" viewBox="0 0 80 80" style={{
              position: 'absolute', bottom: '-4%', left: '-7%', width: 78, zIndex: 0,
            }}>
              {[0,1,2,3].map(r => [0,1,2,3].map(col => (
                <circle key={`${r}-${col}`} cx={8 + col * 20} cy={8 + r * 20} r="3.4" fill="var(--plum)" />
              )))}
            </svg>

            <div className="card tilt" style={{
              position: 'relative',
              zIndex: 1,
              padding: 16,
              background: 'var(--surface)',
              transform: 'rotate(-2deg)',
            }}>
              <div style={{
                aspectRatio: '1/1',
                borderRadius: 'var(--radius)',
                border: '2px solid var(--line)',
                overflow: 'hidden',
                background: 'var(--bg-soft)',
              }}>
                <img
                  src={(window.__resources && window.__resources.gizemPhoto) || "images/gizem-yilmaz.jpg"}
                  alt="Gizem Yılmaz"
                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                />
              </div>
              <div style={{ padding: '16px 6px 6px', textAlign: 'center' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, marginBottom: 4, lineHeight: 1 }}>
                  Gizem Yılmaz
                </div>
                <div style={{
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  color: 'var(--ink-soft)', fontSize: 13, fontWeight: 600,
                }}>
                  <span style={{ width: 7, height: 7, borderRadius: 999, background: 'var(--leaf)', display: 'inline-block' }}></span>
                  {lang === 'tr' ? 'AI Uzmanı · EdTech Koordinatörü' : 'AI Specialist · EdTech Coordinator'}
                </div>
              </div>
            </div>

            <div className="tilt" style={{
              position: 'absolute',
              top: -18, right: -14,
              transform: 'rotate(8deg)',
              zIndex: 2,
            }}>
              <div className="card" style={{
                padding: '10px 16px', background: 'var(--sun)', fontSize: 13, fontWeight: 700,
                fontFamily: 'var(--font-display)', whiteSpace: 'nowrap',
              }}>
                ✦ {lang === 'tr' ? 'Program Mimarı' : 'Program Architect'}
              </div>
            </div>

            <div className="tilt" style={{
              position: 'absolute',
              bottom: 56, left: -22,
              transform: 'rotate(-6deg)',
              zIndex: 2,
            }}>
              <div className="card" style={{
                padding: '8px 14px', background: 'var(--leaf)', color: '#fff', fontSize: 13, fontWeight: 700,
                fontFamily: 'var(--font-display)', whiteSpace: 'nowrap',
              }}>
                7+ {lang === 'tr' ? 'yıl deneyim' : 'yrs experience'}
              </div>
            </div>
          </div>

          <div>
            <div className="section-eyebrow">{c.eyebrow}</div>
            <h2 className="section-title" style={{ marginBottom: 18, fontSize: 'clamp(28px, 4vw, 48px)' }}>
              {c.title}
            </h2>
            <p style={{ fontSize: 18, color: 'var(--ink-soft)', marginBottom: 18, lineHeight: 1.55 }}>
              {c.lede}
            </p>
            <p style={{ fontSize: 16, color: 'var(--ink-soft)', marginBottom: 32, lineHeight: 1.6 }}>
              {c.body}
            </p>

            {/* Stats */}
            <div style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(4, 1fr)',
              gap: 12,
              marginBottom: 28,
            }} className="inst-stats">
              {c.stats.map((s, i) => (
                <div key={i} style={{
                  padding: '16px 14px',
                  background: 'var(--surface)',
                  border: '2px solid var(--line)',
                  borderRadius: 'var(--radius-sm)',
                  boxShadow: 'var(--shadow-1)',
                  textAlign: 'left',
                }}>
                  <div style={{
                    fontFamily: 'var(--font-display)',
                    fontSize: 32, fontWeight: 800,
                    color: ['var(--coral)','var(--sky)','var(--leaf)','var(--plum)'][i],
                    lineHeight: 1,
                    marginBottom: 6,
                  }}>{s.n}</div>
                  <div style={{ fontSize: 11.5, fontWeight: 600, color: 'var(--ink-soft)', whiteSpace: 'pre-line', lineHeight: 1.25 }}>
                    {s.l}
                  </div>
                </div>
              ))}
            </div>

            {/* Quote */}
            <blockquote style={{
              margin: 0,
              padding: '20px 22px',
              background: 'var(--ink)',
              color: 'var(--bg)',
              borderRadius: 'var(--radius)',
              border: '2px solid var(--line)',
              fontFamily: 'var(--font-display)',
              fontSize: 19,
              fontWeight: 500,
              lineHeight: 1.35,
              position: 'relative',
              boxShadow: 'var(--shadow-2)',
            }}>
              {c.quote}
            </blockquote>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px){
          .inst-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .inst-stats { grid-template-columns: repeat(2, 1fr) !important; }
        }
        @media (max-width: 920px){ .safety-cards { grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 560px){ .safety-cards { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function ParentSafety({ lang }) {
  const c = window.CONTENT[lang].safety;
  return (
    <section id="guven" className="section anchor">
      <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 style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 20,
        }} className="safety-cards">
          {c.items.map((it, i) => (
            <article key={i} className="card" style={{
              padding: 24,
              background: 'var(--surface)',
              display: 'flex',
              flexDirection: 'column',
              gap: 14,
            }}>
              <div style={{
                width: 56, height: 56,
                background: 'var(--bg-soft)',
                border: '2px solid var(--line)',
                borderRadius: 16,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <SafetyIcon name={it.icon} />
              </div>
              <h3 style={{ fontSize: 19, lineHeight: 1.2 }}>{it.title}</h3>
              <p style={{ color: 'var(--ink-soft)', fontSize: 14.5, lineHeight: 1.55 }}>{it.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Instructor, ParentSafety });