/* eslint-disable react/prop-types */
/* TUS Mentor — UI Kit · Nav + Hero (with dashboard mockup) */

function Nav() {
  const P = PALETTE;
  const links = [['Hizmetler', '#hizmetler'], ['Süreç', '#nasil'], ['Anki', 'Anki.html']];
  return (
    <nav style={{ position: 'sticky', top: 0, zIndex: 30,
      background: 'rgba(255,255,255,0.86)', backdropFilter: 'saturate(140%) blur(10px)',
      WebkitBackdropFilter: 'saturate(140%) blur(10px)', borderBottom: `1px solid ${P.slate200}` }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 32px', height: 68,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 40 }}>
          <LogoMark size={34} />
          <ul style={{ display: 'flex', gap: 24, listStyle: 'none', margin: 0, padding: 0 }}>
            {links.map(([t, h]) => (
              <li key={t}><a href={h} style={{ color: P.slate700, fontSize: 14, fontWeight: 500, textDecoration: 'none' }}>{t}</a></li>
            ))}
          </ul>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <Button variant="nav" href="#iletisim">İletişime geç →</Button>
        </div>
      </div>
    </nav>
  );
}

function GridBg({ dark = false }) {
  const line = dark ? 'rgba(255,255,255,0.06)' : PALETTE.slate200;
  return (
    <div style={{ position: 'absolute', inset: 0, zIndex: 0, opacity: 0.5,
      backgroundImage: `linear-gradient(${line} 1px, transparent 1px), linear-gradient(90deg, ${line} 1px, transparent 1px)`,
      backgroundSize: dark ? '40px 40px' : '48px 48px',
      maskImage: 'radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 80%)',
      WebkitMaskImage: 'radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 80%)' }} />
  );
}

/* Hero mascot — placement is configurable so it never covers the headline.
   placement: 'hidden' | 'cornerRight' | 'speech' | 'leftLarge' */
function HeroMascot({ pose = 1, placement = 'cornerRight' }) {
  const P = PALETTE;
  if (placement === 'hidden') return null;

  if (placement === 'leftLarge') {
    return (
      <div style={{ position: 'absolute', left: -30, bottom: -40, width: 280, height: 440, zIndex: 2, pointerEvents: 'none' }}>
        <Mascot pose={pose} drift />
      </div>
    );
  }

  if (placement === 'speech') {
    return (
      <div style={{ position: 'absolute', right: 24, bottom: 0, zIndex: 4, display: 'flex', alignItems: 'flex-end', gap: 10, pointerEvents: 'none' }}>
        <div style={{ position: 'relative', background: '#fff', border: `1px solid ${P.slate200}`, borderRadius: 16,
          padding: '12px 16px', fontSize: 13.5, fontWeight: 600, lineHeight: 1.45, color: P.ink, maxWidth: 220,
          boxShadow: '0 8px 24px rgba(7,46,88,0.10)', marginBottom: 70 }}>
          Hadi, sınavı bir proje gibi yönetelim! 👋
          <span style={{ position: 'absolute', right: -7, bottom: 16, width: 13, height: 13, background: '#fff',
            borderRight: `1px solid ${P.slate200}`, borderBottom: `1px solid ${P.slate200}`, transform: 'rotate(-45deg)' }} />
        </div>
        <div style={{ width: 150, height: 230 }}><Mascot pose={pose} drift /></div>
      </div>
    );
  }

  /* cornerRight (default): small friendly peek tucked into the bottom-right corner */
  return (
    <div style={{ position: 'absolute', right: -6, bottom: 0, width: 150, height: 215, zIndex: 4, pointerEvents: 'none',
      filter: 'drop-shadow(0 12px 24px rgba(7,46,88,0.18))' }}>
      <Mascot pose={pose} drift />
    </div>
  );
}

function Hero({ pose = 1, mascot = 'cornerRight' }) {
  const P = PALETTE;
  return (
    <section style={{ position: 'relative', padding: '64px 32px 96px',
      background: `linear-gradient(180deg, ${P.slate50} 0%, #fff 100%)`, overflow: 'hidden' }}>
      <GridBg />
      <HeroMascot pose={pose} placement={mascot} />
      <div style={{ position: 'relative', zIndex: 1, maxWidth: 1280, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '0.95fr 1.1fr', gap: 56, alignItems: 'center' }}>
        <div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10,
            background: P.blueLight, color: P.blueDark, fontSize: 13, fontWeight: 700,
            padding: '6px 16px 6px 6px', borderRadius: 100, border: `1px solid ${P.blueMid}55` }}>
            <span style={{ width: 26, height: 26, borderRadius: '50%', background: P.blue, color: '#fff',
              display: 'grid', placeItems: 'center', boxShadow: `0 4px 10px ${P.blue}55` }}>
              <StethoMark size={15} />
            </span>
            Kişiselleştirilmiş TUS Koçu
          </div>
          <h1 style={{ fontSize: 'clamp(40px, 5.2vw, 72px)', fontWeight: 800, lineHeight: 1.0,
            letterSpacing: '-0.035em', margin: '20px 0 18px', color: P.slate900, textWrap: 'balance' }}>
            TUS hazırlığı için<br />
            <span style={{ background: `linear-gradient(90deg, ${P.blueDark}, ${P.blue})`,
              WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
              kişisel operasyon
            </span>
          </h1>
          <p style={{ color: P.slate500, maxWidth: 520, margin: '0 0 14px', lineHeight: 1.55, fontSize: 22 }}>
            Sınavı bir proje gibi yönet. Sistemli çalış, geç!
          </p>
          <p style={{ color: P.slate500, maxWidth: 520, margin: '0 0 32px', lineHeight: 1.5, fontSize: 14, fontWeight: 500 }}>
            Dünyanın en büyük şirketlerinden birinde çalışan bir proje yöneticisinin kullandığı yöntemlerden ve tavsiyelerinden oluşturulmuş sistemler.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 24 }}>
            <Button variant="primary" href="#nasil">Sistemin Nasıl Çalıştığını Keşfet <ArrowRight /></Button>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, color: P.slate500, fontSize: 13 }}>
            <div style={{ width: 36, height: 36, borderRadius: '50%', background: P.slate100,
              border: '2px solid #fff', overflow: 'hidden', boxShadow: '0 2px 6px rgba(7,46,88,0.10)' }}>
              <img src={MASCOT[4]} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top' }} alt="" />
            </div>
            TUS sınavından anlayan biriyle — sürekli iletişim, şeffaf takip.
          </div>
        </div>
        <DashboardPreview />
      </div>
    </section>
  );
}

/* Browser-window dashboard mockup — the hero's hero. */
function DashboardPreview() {
  const P = PALETTE;
  const days = ['Pzt', 'Sal', 'Çar', 'Per', 'Cum', 'Cmt', 'Pzr'];
  const today = 2;
  const nav = [['Bu hafta', true], ['Trello Ders Panosu', false], ['Anki Desteleri', false], ['Gemini Ders Özetleri', false], ['Denemelerim', false]];
  const tasks = [
    ['Endokrin · Tiroid bezi konu özeti', true, '45 dk'],
    ['Anki tekrar (Tiroid kartları · 24 adet)', true, '20 dk'],
    ['Romatoloji · SLE kriterleri', false, '40 dk'],
    ['Mini deneme · 30 soru', false, '45 dk'],
  ];
  return (
    <div style={{ position: 'relative' }}>
      <div style={{ background: '#fff', borderRadius: 16, border: `1px solid ${P.slate200}`,
        boxShadow: '0 30px 60px -20px rgba(7,46,88,0.18), 0 12px 30px -10px rgba(7,46,88,0.10)', overflow: 'hidden' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '12px 16px',
          background: P.slate50, borderBottom: `1px solid ${P.slate200}` }}>
          <div style={{ display: 'flex', gap: 6 }}>
            {['#FF5F57', '#FEBC2E', '#28C840'].map((c) => <span key={c} style={{ width: 11, height: 11, borderRadius: '50%', background: c }} />)}
          </div>
          <div style={{ flex: 1, marginLeft: 16, height: 22, borderRadius: 6, background: '#fff',
            border: `1px solid ${P.slate200}`, display: 'flex', alignItems: 'center', padding: '0 10px', fontSize: 11, color: P.slate500 }}>
            tusmentor.app/dashboard
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '180px 1fr', minHeight: 380 }}>
          <aside style={{ background: P.slate50, borderRight: `1px solid ${P.slate200}`, padding: '20px 14px' }}>
            <div style={{ fontSize: 10.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: P.slate500, fontWeight: 700, marginBottom: 10 }}>Çalışma</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 4 }}>
              {nav.map(([t, active]) => (
                <li key={t} style={{ padding: '8px 10px', borderRadius: 7, background: active ? '#fff' : 'transparent',
                  fontSize: 13, fontWeight: active ? 700 : 500, color: active ? P.blueDark : P.slate700,
                  display: 'flex', alignItems: 'center', gap: 8, border: active ? `1px solid ${P.slate200}` : '1px solid transparent' }}>
                  <span style={{ width: 6, height: 6, borderRadius: '50%', background: active ? P.blue : P.slate300 }} />
                  {t}
                </li>
              ))}
            </ul>
            <div style={{ fontSize: 10.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: P.slate500, fontWeight: 700, marginTop: 20, marginBottom: 10 }}>Mentor</div>
            <div style={{ background: '#fff', border: `1px solid ${P.slate200}`, borderRadius: 10, padding: 10, display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{ width: 28, height: 28, 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: 12, fontWeight: 700, color: P.slate900 }}>TUS Mentor</div>
                <div style={{ fontSize: 10, color: P.slate500 }}>● çevrimiçi</div>
              </div>
            </div>
          </aside>
          <div style={{ padding: 20 }}>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 14 }}>
              <div>
                <h3 style={{ fontSize: 17, fontWeight: 800, margin: 0, letterSpacing: '-0.01em', color: P.slate900 }}>Bu hafta — 18. hafta</h3>
                <div style={{ fontSize: 12.5, color: P.slate500, marginTop: 2 }}>Endokrin & Romatoloji</div>
              </div>
              <div style={{ background: P.blueLight, color: P.blueDark, padding: '4px 10px', borderRadius: 100, fontSize: 11.5, fontWeight: 700 }}>12 / 18 görev</div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 6, marginBottom: 14 }}>
              {days.map((d, i) => (
                <div key={d} style={{ background: i === today ? P.blueDark : '#fff', color: i === today ? '#fff' : P.slate700,
                  border: i === today ? 'none' : `1px solid ${P.slate200}`, borderRadius: 8, padding: '8px 4px', textAlign: 'center' }}>
                  <div style={{ fontSize: 10, opacity: 0.7, fontWeight: 600 }}>{d}</div>
                  <div style={{ fontSize: 14, fontWeight: 800, marginTop: 1 }}>{18 + i}</div>
                </div>
              ))}
            </div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 6 }}>
              {tasks.map(([t, done, dur]) => (
                <li key={t} style={{ display: 'grid', gridTemplateColumns: '20px 1fr auto', gap: 10, alignItems: 'center',
                  padding: '10px 12px', background: '#fff', border: `1px solid ${P.slate200}`, borderRadius: 9 }}>
                  <span style={{ width: 16, height: 16, borderRadius: 5, background: done ? P.blue : '#fff',
                    border: `1.5px solid ${done ? P.blue : P.slate300}`, display: 'grid', placeItems: 'center', color: '#fff' }}>
                    {done && <Check size={10} color="#fff" />}
                  </span>
                  <span style={{ fontSize: 13, color: done ? P.slate500 : P.slate900, textDecoration: done ? 'line-through' : 'none', fontWeight: 500 }}>{t}</span>
                  <span style={{ fontSize: 11, color: P.slate500, fontVariantNumeric: 'tabular-nums' }}>{dur}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Nav, Hero, DashboardPreview, GridBg });