// agilEspresso v2 — Hero, Manifesto, Subscribe, Archive, Footer, MaturityBleed

const { useState: useS3, useEffect: useE3, useRef: useR3 } = React;

// ===== HERO =====
function V2Hero() {
  const titleRef = useR3(null);
  return (
    <section className="v2-hero" id="top">
      <div className="v2-hero-left">
        <div className="v2-hero-eyebrow">
          <span className="v2-hero-eyebrow-dot" />
          <span>Haftada bir shot · salı 09:00 · 60 saniye</span>
        </div>
        <h1 className="v2-hero-title" ref={titleRef}>
          <span className="v2-line"><span className="v2-line-inner"><em>agile</em>,</span></span>
          <span className="v2-line"><span className="v2-line-inner"><em>proje</em>,</span></span>
          <span className="v2-line"><span className="v2-line-inner"><em>AI</em> — bir shot.</span></span>
        </h1>
        <p className="v2-hero-desc">
          Karmaşık iş dünyasını 60 saniyelik pratik shot'lara indirgiyoruz.
          Teoriyi azalt, sprint'e geri dön.
        </p>
        <div className="v2-hero-ctas">
          <a href="#shots" className="v2-btn v2-btn-primary" data-cursor="hover">
            Bu haftanın shot'u
            <svg className="v2-btn-arrow" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8m-3-3l3 3-3 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </a>
          <a href="#maturity" className="v2-btn v2-btn-ghost" data-cursor="hover">
            olgunluk testi
            <svg className="v2-btn-arrow" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8m-3-3l3 3-3 3" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </a>
        </div>
      </div>
      <div className="v2-hero-right">
        <V2Cup />
      </div>
      <a href="#shots" className="v2-hero-scroll" aria-label="aşağı">
        <span>scroll</span>
        <span className="v2-hero-scroll-line" />
      </a>
    </section>
  );
}

// ===== MATURITY BLEED =====
function V2MaturityBleed() {
  const ref = useR3(null);
  useE3(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => e.isIntersecting && e.target.classList.add('in'));
    }, { threshold: 0.15 });
    ref.current.querySelectorAll('.v2-reveal').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <section className="v2-maturity-bleed" id="maturity" ref={ref}>
      <span className="v2-maturity-bg-letters">olgun</span>
      <div className="v2-maturity-inner">
        <h2 className="v2-maturity-giant v2-reveal">
          takımın<br/><em>nerede?</em>
        </h2>
        <div className="v2-maturity-right v2-reveal">
          <div className="v2-section-label">olgunluk testi</div>
          <h3>5 boyut, 15 soru. Yaklaşık 4 dakika.</h3>
          <p>
            Takımının agile olgunluğunu ölç; AI özetli, kişiselleştirilmiş
            bir rapor al. Anonim. Hiçbir yere kayıt olmuyor.
          </p>
          <a href="#maturity-full" className="v2-btn v2-btn-primary" data-cursor="hover" onClick={(e) => {
            e.preventDefault();
            document.getElementById('maturity-full')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
          }}>
            Teste başla
            <svg className="v2-btn-arrow" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8m-3-3l3 3-3 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </a>
        </div>
      </div>
      <div id="maturity-full" style={{ paddingTop: 80 }}>
        {typeof MaturitySection !== 'undefined' && <MaturitySection />}
      </div>
    </section>
  );
}

// ===== MANIFESTO =====
function V2Manifesto() {
  const ref = useR3(null);
  useE3(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => e.isIntersecting && e.target.classList.add('in'));
    }, { threshold: 0.2 });
    ref.current.querySelectorAll('.v2-reveal').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
  return (
    <section className="v2-manifesto" id="manifesto" ref={ref}>
      <div className="v2-section-label v2-reveal">manifesto</div>
      <p className="v2-manifesto-body v2-reveal">
        Kısa yazılar, <em>net örnekler</em>. <span className="v2-muted">Buzz word yok,
        danışman jargonu yok.</span> Sadece <em>işe yarayan şey</em> —
        kahve soğumadan. <span className="v2-muted">Haftada bir kez, salı 09:00, posta kutunda.</span>
      </p>
      <div className="v2-manifesto-sig">
        <span>agilEspresso</span>
        <span className="v2-manifesto-sig-line" />
        <span>2026 · v2</span>
      </div>
    </section>
  );
}

// ===== SUBSCRIBE =====
function V2Subscribe() {
  const [email, setEmail] = useS3('');
  const [submitted, setSubmitted] = useS3(false);
  return (
    <section className="v2-subscribe" id="subscribe">
      <div className="v2-section-label" style={{ justifyContent: 'center', display: 'inline-flex' }}>bülten</div>
      <h2>
        Salı 09:00.<br/><em>Bir shot.</em>
      </h2>
      <form className="v2-subscribe-form" onSubmit={(e) => { e.preventDefault(); if (email) setSubmitted(true); }}>
        <input
          type="email"
          placeholder="mail@örnek.com"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
        <button type="submit" data-cursor="hover">
          {submitted ? '✓ eklendi' : 'abone ol'}
        </button>
      </form>
      <p className="v2-subscribe-note">
        2.4k+ takım lideri · spam yok · tek tıkla çık
      </p>
    </section>
  );
}

// ===== ARCHIVE =====
function V2Archive({ onOpen }) {
  const list = typeof SHOTS !== 'undefined' ? [...SHOTS].reverse() : [];
  const ref = useR3(null);
  useE3(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => e.isIntersecting && e.target.classList.add('in'));
    }, { threshold: 0.05 });
    ref.current.querySelectorAll('.v2-reveal').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
  return (
    <section className="v2-section" id="archive" ref={ref}>
      <div className="v2-section-head v2-reveal">
        <div>
          <div className="v2-section-label">arşiv</div>
          <h2 className="v2-section-title">Tüm <em>shot</em>'lar.</h2>
        </div>
        <p className="v2-section-sub">
          09 hafta, 09 shot. En yeniler üstte.
        </p>
      </div>
      <div className="v2-archive-list v2-reveal">
        {list.map((s) => (
          <div key={s.id} className="v2-archive-row" onClick={() => onOpen(s)} data-cursor="hover">
            <span className="v2-archive-num">{s.number}</span>
            <span className="v2-archive-title">{s.title}</span>
            <span className="v2-archive-cat">{s.category}</span>
            <span className="v2-archive-date">{s.readSec}sn</span>
          </div>
        ))}
      </div>
    </section>
  );
}

// ===== FOOTER =====
function V2Footer() {
  return (
    <footer className="v2-footer">
      <div className="v2-footer-top">
        <h3 className="v2-footer-brand">
          agil<em>Espresso</em>
        </h3>
        <div className="v2-footer-col">
          <h4>sayfalar</h4>
          <a href="#shots">shots</a>
          <a href="#maturity">olgunluk</a>
          <a href="#manifesto">manifesto</a>
          <a href="#archive">arşiv</a>
        </div>
        <div className="v2-footer-col">
          <h4>sosyal</h4>
          <a href="#">linkedin</a>
          <a href="#">x / twitter</a>
          <a href="#">rss</a>
          <a href="#subscribe">bülten</a>
        </div>
      </div>
      <div className="v2-footer-bottom">
        <span>© 2026 · created by @korayatessonmez</span>
        <span>All rights reserved.</span>
      </div>
    </footer>
  );
}

Object.assign(window, {
  V2Hero, V2MaturityBleed, V2Manifesto, V2Subscribe, V2Archive, V2Footer,
});