/* eslint-disable react/prop-types */
/* TUS Mentor — UI Kit · Content sections: ToolsStrip, Services, Mentor, Process */

function ToolsStrip() {
  const P = PALETTE;
  const tools = [
    ['Gemini', <span style={{ width: 22, height: 22, display: 'grid', placeItems: 'center' }}><svg width="22" height="22" viewBox="0 0 24 24"><path d="M12 1 14.5 9.5 23 12l-8.5 2.5L12 23l-2.5-8.5L1 12l8.5-2.5z" fill="#4285F4" opacity="0.85" /></svg></span>],
    ['NotebookLM', <span style={{ width: 22, height: 22, display: 'grid', placeItems: 'center', background: '#1A73E8', borderRadius: 6, color: '#fff' }}><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><path d="M4 4h14a2 2 0 0 1 2 2v14M4 4v16h14M4 4l4 4-4 4" /></svg></span>],
    ['Google Calendar', <span style={{ width: 22, height: 22, position: 'relative', display: 'grid', placeItems: 'center', background: '#fff', border: '1.5px solid #1A73E8', borderRadius: 5, color: '#1A73E8', fontWeight: 800, fontSize: 10, lineHeight: 1, paddingTop: 4, overflow: 'hidden' }}><span style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 4, background: 'linear-gradient(90deg, #EA4335 0 25%, #FBBC04 25% 50%, #34A853 50% 75%, #1A73E8 75% 100%)' }} />31</span>],
    ['Anki', <span style={{ width: 22, height: 22, display: 'grid', placeItems: 'center', background: '#3F51B5', borderRadius: 6, color: '#fff', fontWeight: 800, fontSize: 12 }}>A</span>],
    ['Trello', <span style={{ width: 22, height: 22, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 2, background: '#0079BF', borderRadius: 6, padding: 3 }}><span style={{ background: '#fff', borderRadius: 1.5, height: 12 }} /><span style={{ background: '#fff', borderRadius: 1.5, height: 8 }} /></span>],
    ['Telegram', <span style={{ width: 22, height: 22, display: 'grid', placeItems: 'center', background: 'linear-gradient(180deg, #2AABEE, #229ED9)', borderRadius: '50%' }}><svg width="14" height="14" viewBox="0 0 24 24" fill="#fff"><path d="M9.78 18.65 10.06 14.42 17.74 7.5C18.08 7.19 17.67 7.04 17.22 7.31L7.74 13.3 3.64 12C2.76 11.75 2.75 11.14 3.84 10.7L19.81 4.54C20.54 4.21 21.24 4.72 20.96 5.84L18.24 18.65C18.05 19.56 17.5 19.78 16.74 19.36L12.6 16.3 10.61 18.23C10.38 18.46 10.19 18.65 9.78 18.65Z" /></svg></span>],
  ];
  return (
    <section style={{ padding: '32px 32px 24px', background: '#fff', borderBottom: `1px solid ${P.slate200}` }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 32, alignItems: 'center' }}>
        <div style={{ fontSize: 13, fontWeight: 600, color: P.slate500 }}>Araçlar:</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 36, flexWrap: 'wrap' }}>
          {tools.map(([t, glyph]) => (
            <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              {glyph}
              <span style={{ fontSize: 16, fontWeight: 700, color: P.slate700, letterSpacing: '-0.01em' }}>{t}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Services bento ─────────────────────────────────────── */
function Services() {
  const P = PALETTE;
  return (
    <section id="hizmetler" style={{ padding: '96px 32px', background: P.slate50 }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 64px' }}>
          <SectionTag>SİSTEM</SectionTag>
          <h2 style={{ fontSize: 'clamp(32px, 4vw, 52px)', fontWeight: 800, letterSpacing: '-0.025em', margin: '14px 0', lineHeight: 1.05, textWrap: 'balance' }}>
            Her hizmet, çalışan bir <span style={{ color: P.blue }}>araca</span> bağlı.
          </h2>
          <p style={{ fontSize: 17.5, color: P.slate500, margin: 0 }}>
            Sadece "plan yapıyoruz" demiyoruz — planı yaşatıyoruz. İşte sistem nasıl çalışıyor:
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 20 }}>
          <ServiceCard span={3} accent="Plan" title="Kişisel haftalık plan" desc="Sınava kadar takip edeceğimiz haftalık-aylık genel planlamalar." mock={<WeeklyPlanMock />} />
          <ServiceCard span={3} accent="Trello" title="Trello ile konu takibi" desc="Ders ders, konu konu kartlarla ilerle. Hiçbir konu unutulmaz." mock={<TrelloMock />} />
          <ServiceCard span={2} accent="Anki" title="Anki ile kalıcı bellek" desc="Kişisel Anki destesi, spaced repetition." mock={<AnkiMock />} />
          <ServiceCard span={2} accent="AI" title="Gemini & NotebookLM" desc="Özel AI promptları ile öğrenme sistemini seviye atlat." mock={<GeminiMock />} />
          <ServiceCard span={2} accent="Analiz" title="Deneme analizi" desc="Her deneme sonrası hata haritası ve öneri." mock={<DenemeMock />} />
          <ServiceCard span={3} accent="Mentor" title="Haftalık 1:1 check-up" desc="Her hafta video ya da WhatsApp ile 30 dk görüşme. İlerleme, plan revizyonu, motivasyon." mock={<CheckupMock />} />
          <ServiceCard span={3} accent="Günlük" title="Günde 5 TUS Sorusu" desc={"Her gün 5 açıklamalı çıkmış TUS sorusu — 24 saatte değişir. \nGünde 5 dakika; sınava kadar binlerce soru."} mock={<DailyQuizMock />} />
        </div>
      </div>
    </section>
  );
}

function ServiceCard({ title, desc, mock, accent, span = 2 }) {
  const P = PALETTE;
  return (
    <article style={{ gridColumn: `span ${span}`, background: '#fff', border: `1px solid ${P.slate200}`,
      borderRadius: 18, padding: 24, display: 'flex', flexDirection: 'column', gap: 16, minHeight: 320 }}>
      <AccentChip>{accent}</AccentChip>
      <div>
        <h3 style={{ fontSize: 19, fontWeight: 800, color: P.slate900, margin: '0 0 6px', letterSpacing: '-0.015em' }}>{title}</h3>
        <p style={{ fontSize: 14.5, color: P.slate500, margin: 0, lineHeight: 1.55, whiteSpace: 'pre-line' }}>{desc}</p>
      </div>
      <div style={{ flex: 1, minHeight: 180, display: 'flex' }}>{mock}</div>
    </article>
  );
}

/* ── Mini mockups ───────────────────────────────────────── */
function WeeklyPlanMock() {
  const P = PALETTE;
  const days = ['P', 'S', 'Ç', 'P', 'C', 'C', 'P'];
  const data = [[1, 1, 1], [1, 1, 0], [1, 1, 1], [1, 0, 0], [1, 1, 0], [0, 0, 0], [0, 0, 0]];
  return (
    <div style={{ width: '100%', background: P.slate50, borderRadius: 12, border: `1px solid ${P.slate200}`, padding: 14, display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 6, alignContent: 'center' }}>
      {data.map((col, i) => (
        <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
          <div style={{ fontSize: 10, fontWeight: 700, color: P.slate500, textAlign: 'center' }}>{days[i]}</div>
          {col.map((v, j) => <div key={j} style={{ height: 22, borderRadius: 4, background: v ? P.blue : '#fff', border: `1px solid ${v ? P.blue : P.slate200}` }} />)}
        </div>
      ))}
    </div>
  );
}
function TrelloMock() {
  const P = PALETTE;
  const cols = [['Biyokimya', ['Farmakokinetik', 'Vitaminler', 'Somatoform']], ['Dahiliye', ['Hematoloji', 'Onkoloji']], ['Stajlar', ['Lenfomalar', 'HT']]];
  return (
    <div style={{ width: '100%', background: '#F0F4F8', borderRadius: 12, padding: 8, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6 }}>
      {cols.map(([t, items]) => (
        <div key={t} style={{ background: '#fff', borderRadius: 8, padding: 8, display: 'grid', gap: 4 }}>
          <div style={{ fontSize: 10, fontWeight: 700, color: P.slate700, display: 'flex', alignItems: 'center', gap: 6 }}>
            <span style={{ width: 6, height: 6, background: P.blue, borderRadius: '50%' }} />{t}
          </div>
          {items.map((c) => <div key={c} style={{ background: P.slate50, borderRadius: 4, padding: '5px 7px', fontSize: 10.5, color: P.slate700, fontWeight: 500 }}>{c}</div>)}
        </div>
      ))}
    </div>
  );
}
function AnkiMock() {
  const P = PALETTE;
  return (
    <div style={{ width: '100%', position: 'relative', minHeight: 160 }}>
      <div style={{ position: 'absolute', inset: '6% 12%', background: '#fff', border: `1px solid ${P.slate200}`, borderRadius: 10, padding: 14, transform: 'rotate(-3deg)', boxShadow: '0 6px 16px rgba(7,46,88,0.06)' }}>
        <div style={{ fontSize: 10, color: P.slate500, fontWeight: 600 }}>Endokrin · Kart 24/40</div>
        <div style={{ fontSize: 13, fontWeight: 700, marginTop: 6, color: P.slate900, lineHeight: 1.35 }}>Cushing sendromunda en sık elektrolit bozukluğu?</div>
        <div style={{ marginTop: 14, display: 'flex', gap: 4 }}>
          {['Tekrar', 'Zor', 'İyi', 'Kolay'].map((l, i) => (
            <span key={l} style={{ flex: 1, fontSize: 9.5, fontWeight: 700, textAlign: 'center', padding: '5px 0', borderRadius: 4,
              background: ['#FEE2E2', '#FED7AA', '#DBEAFE', '#D1FAE5'][i], color: ['#991B1B', '#9A3412', '#1E40AF', '#065F46'][i] }}>{l}</span>
          ))}
        </div>
      </div>
      <div style={{ position: 'absolute', inset: '14% 4% 0', background: P.slate50, border: `1px solid ${P.slate200}`, borderRadius: 10, zIndex: -1, transform: 'rotate(2deg)' }} />
    </div>
  );
}
function GeminiMock() {
  const P = PALETTE;
  return (
    <div style={{ width: '100%', background: P.slate50, borderRadius: 12, border: `1px solid ${P.slate200}`, padding: 12, display: 'grid', gap: 6 }}>
      <div style={{ background: '#fff', borderRadius: 8, padding: '8px 10px', fontSize: 10.5, color: P.slate700, lineHeight: 1.4 }}>
        <span style={{ color: P.slate500, fontWeight: 700 }}>Sen:</span> Amnion sıvı embolisinde klasik bulgular nelerdir?
      </div>
      <div style={{ background: 'linear-gradient(135deg, #DBEAFE, #F0F9FF)', borderRadius: 8, padding: '8px 10px', fontSize: 10.5, color: P.slate700, lineHeight: 1.45 }}>
        <span style={{ color: '#4285F4', fontWeight: 700 }}>Gemini:</span> Hipotansiyon, hipoksi ve DIC görülür.
        <div style={{ marginTop: 6, display: 'flex', gap: 4 }}>
          {['Soru üret', 'Anki kartı', 'Daha kısa'].map((c) => <span key={c} style={{ fontSize: 9.5, padding: '3px 7px', background: '#fff', border: `1px solid ${P.slate200}`, borderRadius: 100, color: P.slate700, fontWeight: 600 }}>{c}</span>)}
        </div>
      </div>
    </div>
  );
}
function DenemeMock() {
  const P = PALETTE;
  const ys = [75, 68, 55, 48, 40, 28, 22, 18];
  return (
    <div style={{ width: '100%', background: P.slate50, borderRadius: 12, border: `1px solid ${P.slate200}`, padding: 12 }}>
      <svg viewBox="0 0 200 90" style={{ width: '100%', height: 70 }} preserveAspectRatio="none">
        <polyline points="0,75 30,68 60,55 90,48 120,40 150,28 180,22 200,18" fill="none" stroke={P.blue} strokeWidth="2.5" />
        {[0, 30, 60, 90, 120, 150, 180, 200].map((x, i) => <circle key={i} cx={x} cy={ys[i]} r="2.5" fill={P.blue} />)}
      </svg>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10.5, color: P.slate500, marginTop: 6 }}><span>Den 01</span><span>Den 08</span></div>
      <div style={{ fontSize: 12, fontWeight: 700, color: P.slate900, marginTop: 4 }}>Net: <span style={{ color: P.blue }}>72 → 91</span></div>
    </div>
  );
}
function CheckupMock() {
  const P = PALETTE;
  return (
    <div style={{ width: '100%', background: P.slate50, borderRadius: 12, border: `1px solid ${P.slate200}`, padding: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{ width: 32, height: 32, borderRadius: '50%', background: P.blueLight, overflow: 'hidden' }}>
          <img src={MASCOT[5]} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top' }} alt="" />
        </div>
        <div>
          <div style={{ fontSize: 11.5, color: P.slate500, fontWeight: 600 }}>Bu hafta · Çarşamba</div>
          <div style={{ fontSize: 13, fontWeight: 700, color: P.slate900 }}>30 dk görüşme · 19:00</div>
        </div>
      </div>
      <div style={{ background: '#fff', borderRadius: 8, padding: '8px 10px', fontSize: 11.5, color: P.slate700, border: `1px solid ${P.slate200}` }}>
        Konuşulacak: Endokrin sonuçları, plan revizyonu, deneme stratejisi.
      </div>
    </div>
  );
}
function DailyQuizMock() {
  const P = PALETTE;
  const items = [['Kardiyoloji', true], ['Endokrin', true], ['Nöroloji', true], ['Patoloji', false], ['Mikrobiyoloji', false]];
  return (
    <div style={{ width: '100%', background: P.slate50, borderRadius: 12, border: `1px solid ${P.slate200}`, padding: 12, display: 'flex', flexDirection: 'column', gap: 6 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 10.5 }}>
        <span style={{ fontWeight: 800, color: P.slate900 }}>Bugünün 5 Sorusu</span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, color: P.blue, fontWeight: 700 }}>
          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></svg>
          18:32 sonra yenilenir
        </span>
      </div>
      {items.map(([t, done], i) => (
        <div key={i} style={{ display: 'grid', gridTemplateColumns: '18px 1fr auto', gap: 8, alignItems: 'center', padding: '5px 8px', background: '#fff', borderRadius: 6, border: `1px solid ${P.slate200}` }}>
          <span style={{ width: 16, height: 16, borderRadius: 4, background: done ? P.blue : '#fff', border: `1.5px solid ${done ? P.blue : P.slate300}`, display: 'grid', placeItems: 'center' }}>{done && <Check size={10} color="#fff" />}</span>
          <span style={{ fontSize: 10.5, color: done ? P.slate500 : P.slate900, textDecoration: done ? 'line-through' : 'none', fontWeight: 500 }}>Soru {i + 1} · {t}</span>
          <span style={{ fontSize: 9, color: P.blueDark, fontWeight: 700, background: P.blueLight, padding: '2px 6px', borderRadius: 100 }}>Açıklamalı</span>
        </div>
      ))}
    </div>
  );
}

/* ── Mentor ─────────────────────────────────────────────── */
function Mentor({ pose = 3 }) {
  const P = PALETTE;
  const stats = [['PM', 'Dünya çapında proje yöneticisi'], ['1:1', 'Kişiye özel süreç yönetimi'], ['Sistem', 'Plan · takip · optimizasyon'], ['Şeffaf', 'Veriyle ilerleme takibi']];
  return (
    <section id="mentor" style={{ padding: '96px 32px', background: '#fff' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '0.7fr 1fr', gap: 56, alignItems: 'center' }}>
        <div style={{ position: 'relative', aspectRatio: '4/5', background: `linear-gradient(180deg, ${P.blueLight}, #fff)`, borderRadius: 20, border: `1px solid ${P.slate200}`, overflow: 'hidden' }}>
          <div style={{ position: 'absolute', inset: '4% 8%', height: '96%' }}><Mascot pose={pose} /></div>
          <div style={{ position: 'absolute', left: 20, bottom: 20, right: 20, background: '#fff', border: `1px solid ${P.slate200}`, borderRadius: 14, padding: 14, boxShadow: '0 10px 30px rgba(7,46,88,0.08)', display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 38, height: 38, borderRadius: 10, background: P.blueLight, color: P.blue, display: 'grid', placeItems: 'center' }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M3 12h4l3 8 4-16 3 8h4" /></svg>
            </div>
            <div>
              <div style={{ fontSize: 11.5, color: P.slate500 }}>Mentor</div>
              <div style={{ fontSize: 13.5, fontWeight: 700, color: P.slate900 }}>● TUS = doğru yönetilen bir proje</div>
            </div>
          </div>
        </div>
        <div>
          <SectionTag>MENTOR</SectionTag>
          <h2 style={{ fontSize: 'clamp(28px, 3.4vw, 44px)', fontWeight: 800, letterSpacing: '-0.025em', margin: '14px 0 16px', lineHeight: 1.1 }}>
            TUS'u bir proje gibi yöneten<br />bir proje yöneticisi.
          </h2>
          <p style={{ fontSize: 17, color: P.slate500, margin: '0 0 28px', lineHeight: 1.6 }}>
            Ben doktor değilim ve TUS'a ben girmedim — dünyanın önde gelen şirketlerinden birinde
            proje yöneticisiyim. TUS'a sevgilim girdi; bu süreçte ona proje yönetimi teknikleriyle eşlik ettim:
            net plan, şeffaf takip, sürekli optimizasyon. Bugün çalışmalarını çok daha kontrollü sürdürüyor.
            Aynı sistemi senin için de kuruyorum — çünkü TUS, doğru yönetilen bir projedir.
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 28 }}>
            {stats.map(([n, l]) => (
              <div key={l} style={{ background: P.slate50, border: `1px solid ${P.slate200}`, borderRadius: 14, padding: '16px 18px' }}>
                <div style={{ fontSize: 24, fontWeight: 800, color: P.blueDark, letterSpacing: '-0.02em', lineHeight: 1 }}>{n}</div>
                <div style={{ fontSize: 13, color: P.slate500, marginTop: 6 }}>{l}</div>
              </div>
            ))}
          </div>
          <Button variant="primary" href="#iletisim">Tanışma görüşmesi planla <ArrowRight /></Button>
        </div>
      </div>
    </section>
  );
}

/* ── Process ────────────────────────────────────────────── */
function Process() {
  const P = PALETTE;
  const steps = [
    ['Onboarding', 'Geçmişin, hedefin, müsait zamanın detaylıca konuşulur.'],
    ['Plan', 'Sınav tarihine göre konu sıralaması ve haftalık hedefler.'],
    ['Uygulama', 'Anki, Trello, Gemini destekli sistematik çalışma.'],
    ['Analiz', 'Deneme & konu verilerle ilerleme şeffaf görünür.'],
    ['Optimize', 'Her hafta plan revize, zaman kaybı azaltılır.'],
  ];
  return (
    <section id="nasil" style={{ padding: '96px 32px', background: P.slate50 }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 56px' }}>
          <SectionTag big>SÜREÇ</SectionTag>
          <h2 style={{ fontSize: 'clamp(32px, 4vw, 52px)', fontWeight: 800, letterSpacing: '-0.025em', margin: '14px 0', lineHeight: 1.05, textWrap: 'balance' }}>
            5 adımda <span style={{ color: P.blue }}>TUS başarısı.</span>
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 16, position: 'relative' }}>
          {steps.map(([t, d], i) => (
            <div key={t} style={{ background: '#fff', border: `1px solid ${P.slate200}`, borderRadius: 16, padding: 22, display: 'flex', flexDirection: 'column', gap: 12, position: 'relative' }}>
              <div style={{ width: 40, height: 40, borderRadius: 10, background: P.blueLight, color: P.blueDark, fontWeight: 800, fontSize: 16, display: 'grid', placeItems: 'center', fontVariantNumeric: 'tabular-nums' }}>{i + 1}</div>
              <div>
                <h4 style={{ fontSize: 16, fontWeight: 800, color: P.slate900, margin: '0 0 6px', letterSpacing: '-0.01em' }}>{t}</h4>
                <p style={{ fontSize: 13.5, color: P.slate500, margin: 0, lineHeight: 1.55 }}>{d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ToolsStrip, Services, ServiceCard, Mentor, Process });
