/* Orkestra — Landing I: "Harita + Karşılaştırma + Editöryal mix"
 *
 * Editöryal omurga (E): bölüm numaraları, pull-quote'lar, margin notları.
 * Harita motifi (B): hero'da küçük harita + ortada portföy haritası.
 * Karşılaştırma (F): bina özelinde Geleneksel vs Orkestra timeline + table.
 */

const LandingI = () => {
  const {
    ArrowRight, Phone, Building2, Users, ShieldCheck, Scale, FileText,
    Hammer, Eye, Network, Sparkles, MapPin, Calendar, Clock, X,
    CheckCircle, AlertCircle, Compass, MessageSquare, Bell,
  } = window.OrkIcons;
  const Nav = window.OrkNav;
  const StatBar = window.OrkStatBar;
  const ProcessLine = window.OrkProcessLine;
  const LeadBlock = window.OrkLeadBlock;
  const Footer = window.OrkFooter;
  const TrustStrip = window.OrkTrustStrip;
  const FAQ = window.OrkFAQ;
  const LeadSuccessModal = window.OrkLeadSuccessModal;
  const { submitLead } = window;

  const [modalOpen, setModalOpen] = React.useState(false);
  React.useEffect(() => {
    const onLead = () => setModalOpen(true);
    window.addEventListener('ork-lead-submit', onLead);
    return () => window.removeEventListener('ork-lead-submit', onLead);
  }, []);

  return (
    <div className="ork-page" data-screen-label="I — Harita + Karşılaştırma + Editöryal">
      <Nav />

      {/* HERO — editorial header + small map detail */}
      <header className="ork-edit-hero" style={{ paddingBottom: 0 }}>
        <div className="ork-edit-meta">
          <span className="ork-edit-meta-dot" />
          KADIKÖY · MAYIS 2026
          <span className="ork-edit-divider" />
          DOSYA · ADA 1204 / PARSEL 7
        </div>

        <div style={{ marginBottom: 64 }}>
          <h1 className="ork-edit-h1" style={{ marginBottom: 32, maxWidth: 'none' }}>
            Binanızın kentsel<br />
            dönüşüm potansiyelini<br />
            <span className="accent">tek kapıdan</span> öğrenin.
          </h1>

          <p className="ork-edit-sub" style={{ marginBottom: 32, maxWidth: 760 }}>
            Tespit'ten teslime sekiz aşama, tek koordinatör. Aşağıda
            Caferağa'da gerçek bir binanın iki olası hikâyesini yan yana
            karşılaştırıyoruz —
            {' '}<strong>aynı sekiz malik, çok farklı iki yol.</strong>
          </p>

          <div style={{ display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap' }}>
            <button
              type="button"
              className="ork-btn ork-btn-primary ork-btn-xl"
              onClick={() => submitLead('hero-i')}
            >
              Binanızın hikayesini başlat <ArrowRight size={18} />
            </button>
            <span style={{
              fontFamily: 'var(--font-mono)', fontSize: 12,
              color: 'var(--fg-3)', letterSpacing: '0.02em',
            }}>
              ücretsiz · bağlayıcı değil · 48s dönüş
            </span>
          </div>
        </div>
      </header>

      {/* CHAPTER 01 — İki sürüm yan yana (karşılaştırma) */}
      <section className="ork-edit-chapter">
        <div>
          <div className="ork-edit-chapter-num">
            Bölüm
            <em>01</em>
          </div>
          <div className="ork-edit-marg">
            <strong>YÖNTEM:</strong> Bağdat Cd. 142 için iki ayrı zaman
            çizelgesi. Geleneksel yolun zamanlaması başka pilot binalardan,
            Orkestra'nın kendi panel verisinden.
          </div>
        </div>
        <div>
          <h3>Bir bina, iki sürüm.</h3>
          <p>
            Caferağa'da 1987 yapımı bir apartman. Sekiz malik, dört farklı
            şehir, altı aydır askıda bir süreç. Birinde bir malik komşularıyla
            ilk teklifi tartışıyor; diğerinde saha temsilcimiz aynı maliklerle
            birebir görüşüp imzayı topluyor. Her iki sürümde de bina aynı;
            insan aynı. Aradaki fark: <strong>koordinasyon.</strong>
          </p>
        </div>
      </section>

      {/* VS TIMELINE + KARAR NOKTALARI — sayfa ortasında, sakin tasarım */}
      <section className="ork-col" style={{ marginTop: 8 }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1.4fr 1fr',
          gap: 20,
          alignItems: 'stretch',
        }}>
          {/* TIMELINE CARD */}
          <div style={{
            background: 'rgba(255,255,255,0.025)',
            border: '1px solid var(--border-subtle)',
            borderRadius: 18,
            padding: 28,
            boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.04)',
          }}>
            <div style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
              marginBottom: 22,
            }}>
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: 10,
                letterSpacing: '0.14em', color: 'var(--fg-3)',
                fontWeight: 600, textTransform: 'uppercase',
              }}>
                / iki yolun takvimi
              </span>
              <div style={{ display: 'flex', gap: 16, fontSize: 11, color: 'var(--fg-3)', fontFamily: 'var(--font-mono)' }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--red-500)' }} />
                  Eski yöntem
                </span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--brand-primary)' }} />
                  Orkestra
                </span>
              </div>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0 }}>
              {/* Eski yol */}
              <div style={{ paddingRight: 18, borderRight: '1px solid var(--border-subtle)' }}>
                <h4 style={{
                  fontSize: 14, fontWeight: 600,
                  letterSpacing: '-0.005em', margin: '0 0 4px',
                  color: 'var(--fg-1)',
                }}>Eski yöntem</h4>
                <p style={{
                  fontSize: 11, color: 'var(--fg-3)',
                  fontFamily: 'var(--font-mono)', letterSpacing: '0.04em',
                  margin: '0 0 20px',
                }}>
                  HAFTA 0 → 96+
                </p>
                {[
                  { w: '0',   d: 'İlk teklif. Üç malik kabul, beşi düşünmek istiyor.' },
                  { w: '4',   d: 'Yurtdışındaki malike ulaşılamıyor. Süreç durur.' },
                  { w: '12',  d: 'Aile içi tartışmalar; komşuluk gerginleşiyor.' },
                  { w: '24',  d: 'Teklif eskidi; kabul edenler dağılıyor.' },
                  { w: '96+', d: 'Süreç sıfırlanır.', accent: 'red' },
                ].map((row, i) => (
                  <div key={i} style={{
                    display: 'grid',
                    gridTemplateColumns: '48px 1fr',
                    gap: 12,
                    padding: '8px 0',
                    fontSize: 13, color: 'var(--fg-2)',
                    lineHeight: 1.5,
                    borderTop: i === 0 ? 'none' : '1px solid var(--border-subtle)',
                  }}>
                    <span style={{
                      fontFamily: 'var(--font-mono)', fontSize: 11,
                      color: row.accent === 'red' ? 'var(--red-500)' : 'var(--fg-3)',
                      letterSpacing: '0.04em',
                      fontWeight: row.accent ? 700 : 500,
                    }}>H. {row.w}</span>
                    <span style={{ color: row.accent === 'red' ? 'var(--fg-1)' : 'var(--fg-2)' }}>
                      {row.d}
                    </span>
                  </div>
                ))}
              </div>

              {/* Orkestra */}
              <div style={{ paddingLeft: 18 }}>
                <h4 style={{
                  fontSize: 14, fontWeight: 600,
                  letterSpacing: '-0.005em', margin: '0 0 4px',
                  color: 'var(--fg-1)',
                }}>Orkestra</h4>
                <p style={{
                  fontSize: 11, color: 'var(--fg-3)',
                  fontFamily: 'var(--font-mono)', letterSpacing: '0.04em',
                  margin: '0 0 20px',
                }}>
                  HAFTA 0 → 11
                </p>
                {[
                  { w: '0',  d: 'Malik başvuruyor. 48 saatte mühendis görüşmesi.' },
                  { w: '1',  d: 'Bağımsız fizibilite raporu hazır.' },
                  { w: '2',  d: 'Tüm maliklerle birebir görüşmeler.' },
                  { w: '4',  d: 'Mutabakat tamam (8/8). Üç müteahhit teklifi.' },
                  { w: '11', d: 'Sözleşme imzalandı. %18 daha iyi teklif.', accent: 'blue' },
                ].map((row, i) => (
                  <div key={i} style={{
                    display: 'grid',
                    gridTemplateColumns: '48px 1fr',
                    gap: 12,
                    padding: '8px 0',
                    fontSize: 13, color: 'var(--fg-2)',
                    lineHeight: 1.5,
                    borderTop: i === 0 ? 'none' : '1px solid var(--border-subtle)',
                  }}>
                    <span style={{
                      fontFamily: 'var(--font-mono)', fontSize: 11,
                      color: row.accent === 'blue' ? 'var(--brand-primary)' : 'var(--fg-3)',
                      letterSpacing: '0.04em',
                      fontWeight: row.accent ? 700 : 500,
                    }}>H. {row.w}</span>
                    <span style={{ color: row.accent === 'blue' ? 'var(--fg-1)' : 'var(--fg-2)' }}>
                      {row.d}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* KARAR NOKTALARI CARD */}
          <div style={{
            background: 'rgba(255,255,255,0.025)',
            border: '1px solid var(--border-subtle)',
            borderRadius: 18,
            padding: 28,
            boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.04)',
            display: 'flex',
            flexDirection: 'column',
          }}>
            <div style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
              marginBottom: 22,
            }}>
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: 10,
                letterSpacing: '0.14em', color: 'var(--fg-3)',
                fontWeight: 600, textTransform: 'uppercase',
              }}>
                / karar noktalari
              </span>
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: 11,
                color: 'var(--fg-3)', letterSpacing: '0.04em',
              }}>
                7 boyut
              </span>
            </div>

            <ul style={{
              listStyle: 'none', margin: 0, padding: 0,
              display: 'flex', flexDirection: 'column',
              flex: 1,
            }}>
              {[
                { l: 'Komşu mutabakatı',  old: '6-12 ay askıda',  v: '28 gün' },
                { l: 'Hukuki temsil',     old: 'Müteahhit avk.',  v: 'Bağımsız' },
                { l: 'Müteahhit seçimi',  old: 'İlk gelen',       v: '+%18 teklif' },
                { l: 'İnşaat denetimi',   old: 'Müteahhit kendi', v: 'Bağımsız mühendis' },
                { l: 'Hakediş onayı',     old: 'Şeffaflık yok',   v: 'Bağımsız onay' },
                { l: 'Süreç görünürlüğü', old: 'Telefon trafiği', v: 'Tek panel' },
                { l: 'Malik komisyonu',   old: 'Belirsiz',        v: 'Yok' },
              ].map((row, i) => (
                <li key={i} style={{
                  display: 'grid',
                  gridTemplateColumns: '1fr',
                  gap: 4,
                  padding: '11px 0',
                  borderTop: i === 0 ? 'none' : '1px solid var(--border-subtle)',
                }}>
                  <div style={{
                    fontSize: 13, fontWeight: 600,
                    color: 'var(--fg-1)', letterSpacing: '-0.005em',
                  }}>
                    {row.l}
                  </div>
                  <div style={{
                    display: 'flex', alignItems: 'center', gap: 10,
                    fontSize: 12, color: 'var(--fg-2)',
                  }}>
                    <span style={{ color: 'var(--fg-3)' }}>{row.old}</span>
                    <span style={{ color: 'var(--fg-3)', fontFamily: 'var(--font-mono)' }}>›</span>
                    <span style={{ color: 'var(--brand-primary)', fontWeight: 600 }}>{row.v}</span>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      {/* PULL QUOTE */}
      <section className="ork-col ork-block" style={{ textAlign: 'center' }}>
        <p className="ork-edit-pull">
          <span className="ork-edit-pull-l">/ T espit</span>
          24 hafta yerine 11 hafta.<br />
          Aynı bina,<br />
          <span className="grad">sadece doğru orkestre.</span>
        </p>
      </section>

      {/* CHAPTER 02 — Kadıköy haritası, portfolio */}
      <section className="ork-edit-chapter" id="harita">
        <div>
          <div className="ork-edit-chapter-num">
            Bölüm
            <em>02</em>
          </div>
          <div className="ork-edit-marg">
            <strong>VERİ:</strong> Mayıs 2026 itibarıyla Orkestra portföyü.
            Kadıköy pilotu; Üsküdar ve Beşiktaş Q3'te.
          </div>
        </div>
        <div>
          <h3>Bağdat Cd. 142 yalnız değil.</h3>
          <p>
            Kadıköy'de şu anda <strong>24 bina</strong> sürecimizde.
            Bağdat Cd.'den Yeldeğirmeni'ne, Fenerbahçe sahilinden
            Erenköy iç sokaklarına. Bazısı yeni tespit, bazısı inşaatta.
            Her pin bir hikâye.
          </p>
        </div>
      </section>

      {/* WIDE PORTFOLIO MAP — full bleed */}
      <div className="ork-col" style={{ marginTop: 24 }}>
        <div className="ork-map" style={{ height: 480 }} role="img" aria-label="Kadıköy portföy haritası">
          <svg viewBox="0 0 880 480" preserveAspectRatio="xMidYMid slice">
            <defs>
              <pattern id="iPortGrid" width="44" height="44" patternUnits="userSpaceOnUse">
                <path d="M 44 0 L 0 0 0 44" fill="none" stroke="rgba(255,255,255,0.04)" strokeWidth="1" />
              </pattern>
              <linearGradient id="iSea" x1="0" x2="1" y1="0" y2="1">
                <stop offset="0" stopColor="#0b1a3a" />
                <stop offset="1" stopColor="#0a0f1f" />
              </linearGradient>
            </defs>
            <path d="M 880,260 C 800,290 700,330 600,380 C 500,430 380,480 240,480 L 880,480 Z" fill="url(#iSea)" />
            <rect width="880" height="480" fill="url(#iPortGrid)" />
            <g stroke="rgba(255,255,255,0.08)" strokeWidth="1.2" fill="none">
              <path d="M 0,260 Q 240,250 480,280 T 880,250" />
              <path d="M 0,140 Q 280,130 540,160 T 880,140" />
              <path d="M 240,0 Q 260,200 300,400 T 320,480" />
              <path d="M 540,0 Q 560,180 600,360 T 620,480" />
            </g>
            <path d="M 880,260 C 800,290 700,330 600,380 C 500,430 380,480 240,480"
                  fill="none" stroke="rgba(96,165,250,0.30)" strokeWidth="1.3" strokeDasharray="3 5" />
            <text x="40" y="80" fill="rgba(255,255,255,0.32)" fontFamily="var(--font-mono)" fontSize="12" letterSpacing="0.18em" fontWeight="600">
              KADIKÖY · 24 BİNA · MAY 2026
            </text>
            <text x="700" y="450" fill="rgba(96,165,250,0.42)" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.20em">
              MARMARA
            </text>
            <text x="120" y="160" fill="rgba(255,255,255,0.22)" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.18em">
              YELDEĞİRMENİ
            </text>
            <text x="100" y="320" fill="rgba(255,255,255,0.28)" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em" fontWeight="600">
              CAFERAĞA
            </text>
            <text x="380" y="380" fill="rgba(255,255,255,0.24)" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em">
              FENERBAHÇE
            </text>
            <text x="600" y="160" fill="rgba(255,255,255,0.24)" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="0.18em">
              GÖZTEPE
            </text>
            <text x="720" y="80" fill="rgba(255,255,255,0.24)" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="0.18em">
              ERENKÖY
            </text>
          </svg>

          {/* Pins distributed by district */}
          {[
            // Caferağa
            { x: 18, y: 60, c: 'is-blue'   },
            { x: 22, y: 64, c: 'is-blue'   },
            { x: 16, y: 70, c: 'is-blue'   },
            { x: 20, y: 76, c: 'is-purple' },
            { x: 24, y: 80, c: 'is-orange' },
            { x: 30, y: 70, c: 'is-purple' },
            { x: 28, y: 64, c: 'is-blue'   },
            { x: 26, y: 56, c: 'is-blue'   },
            // Bağdat axis
            { x: 36, y: 58, c: 'is-blue'   },
            { x: 44, y: 60, c: 'is-purple' },
            { x: 52, y: 64, c: 'is-purple' },
            { x: 60, y: 66, c: 'is-orange' },
            { x: 70, y: 60, c: 'is-orange' },
            // Yeldeğirmeni
            { x: 14, y: 28, c: 'is-blue'   },
            { x: 18, y: 34, c: 'is-blue'   },
            // Fenerbahçe
            { x: 50, y: 80, c: 'is-purple' },
            { x: 54, y: 86, c: 'is-orange' },
            { x: 58, y: 78, c: 'is-purple' },
            // Göztepe
            { x: 62, y: 34, c: 'is-blue'   },
            { x: 68, y: 38, c: 'is-purple' },
            { x: 56, y: 30, c: 'is-blue'   },
            // Erenköy
            { x: 76, y: 22, c: 'is-orange' },
            { x: 82, y: 28, c: 'is-orange' },
            // Suadiye
            { x: 88, y: 50, c: 'is-orange' },
          ].map((p, i) => (
            <span key={i} className={`ork-map-pin ${p.c}`}
                  style={{ left: `${p.x}%`, top: `${p.y}%`, animationDelay: `${i * 0.07}s` }} />
          ))}

          {/* Featured callout — Bağdat Cd. 142 */}
          <div className="ork-map-tooltip" style={{ left: '36%', top: '54%' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12, marginBottom: 8 }}>
              <div>
                <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg-1)' }}>
                  Bağdat Cd. No:142
                </div>
                <div className="ork-preview-sub" style={{ marginTop: 2 }}>
                  ADA 1204 · PARSEL 7
                </div>
              </div>
              <span className="ork-tag ork-tag-warm">Mutabakat · H.4</span>
            </div>
            <div style={{ display: 'flex', gap: 14, fontSize: 12, color: 'var(--fg-2)' }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                <Users size={13} /> 8 malik
              </span>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                <CheckCircle size={13} /> 5/8 onay
              </span>
            </div>
          </div>

          {/* Legend */}
          <div className="ork-map-overlay">
            <div className="ork-map-legend">
              <span className="ork-map-legend-item">
                <span className="ork-map-legend-dot" style={{ background: 'var(--blue-500)' }} />
                Tespit / mutabakat
              </span>
              <span className="ork-map-legend-item">
                <span className="ork-map-legend-dot" style={{ background: 'var(--purple-500)' }} />
                Sözleşme / ruhsat
              </span>
              <span className="ork-map-legend-item">
                <span className="ork-map-legend-dot" style={{ background: 'var(--orange-500)' }} />
                İnşaat / teslim
              </span>
            </div>
          </div>

          {/* Stats float */}
          <div style={{
            position: 'absolute',
            bottom: 20, right: 20,
            display: 'flex',
            gap: 12,
            background: 'rgba(14, 20, 39, 0.85)',
            backdropFilter: 'blur(16px)',
            border: '1px solid var(--border-default)',
            borderRadius: 12,
            padding: '12px 18px',
          }}>
            {[
              { l: 'Aktif', v: '24', c: 'var(--brand-primary)' },
              { l: 'Süreçte', v: '11', c: 'var(--purple-400)' },
              { l: 'İnşaatta', v: '4', c: 'var(--brand-secondary)' },
            ].map((s, i) => (
              <React.Fragment key={s.l}>
                {i > 0 && <span style={{ width: 1, alignSelf: 'stretch', background: 'var(--border-default)' }} />}
                <div>
                  <div style={{ fontSize: 22, fontWeight: 700, color: s.c, lineHeight: 1, letterSpacing: '-0.02em' }}>{s.v}</div>
                  <div style={{ fontSize: 10, color: 'var(--fg-3)', fontFamily: 'var(--font-mono)', letterSpacing: '0.04em', marginTop: 2 }}>
                    {s.l.toUpperCase()}
                  </div>
                </div>
              </React.Fragment>
            ))}
          </div>
        </div>
        <p style={{
          marginTop: 16, fontSize: 12,
          color: 'var(--fg-3)', fontFamily: 'var(--font-mono)',
          letterSpacing: '0.04em', textAlign: 'center',
        }}>
          ŞEKİL 03 · Kadıköy portföy haritası — pin rengi sürecin aşamasını yansıtır.
        </p>
      </div>

      {/* STAT BAR */}
      <div className="ork-col" style={{ marginTop: 88 }}>
        <StatBar items={[
          { icon: <Building2 size={22} />, value: '24',  label: 'Aktif bina (Kadıköy)' },
          { icon: <Clock size={22} />,     value: '11h', label: 'Sözleşmeye kadar süre' },
          { icon: <Scale size={22} />,     value: '%18', label: 'Daha iyi müteahhit teklifi' },
          { icon: <ShieldCheck size={22} />, value: '%0', label: 'Malik komisyonu' },
        ]} />
      </div>

      {/* TRUST STRIP */}
      <TrustStrip />

      {/* CHAPTER 03 — Ne görüyorum + Mutabakat paneli */}
      <section className="ork-col ork-block">
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1.1fr',
          gap: 56,
          alignItems: 'start',
        }}>
          <div>
            <span className="ork-eyebrow">/ ne g örüyorum</span>
            <h2 style={{
              fontSize: 'clamp(28px, 3.4vw, 38px)', fontWeight: 700,
              letterSpacing: '-0.02em', lineHeight: 1.15,
              margin: '0 0 20px', color: 'var(--fg-1)', textWrap: 'balance',
            }}>
              Tek ekrandan,<br />binanızın canlı durumu.
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--fg-2)', margin: '0 0 28px' }}>
              Süreç ne kadar ilerledi, hangi malikler onayladı, hangi belge
              eksik, hangi rol sıradaki adımı bekletiyor — hepsi malik
              panelinizde. Tahmin yok, telefon trafiği yok.
            </p>
            <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
              <li style={{ display: 'flex', gap: 12, alignItems: 'center', fontSize: 14, color: 'var(--fg-2)' }}>
                <CheckCircle size={18} style={{ color: 'var(--brand-primary)', flex: 'none' }} />
                Her aşamanın sorumlusu rol bazlı görünür.
              </li>
              <li style={{ display: 'flex', gap: 12, alignItems: 'center', fontSize: 14, color: 'var(--fg-2)' }}>
                <Bell size={18} style={{ color: 'var(--brand-primary)', flex: 'none' }} />
                Onay bekleyen adımlar bildirimle düşer.
              </li>
              <li style={{ display: 'flex', gap: 12, alignItems: 'center', fontSize: 14, color: 'var(--fg-2)' }}>
                <Eye size={18} style={{ color: 'var(--brand-primary)', flex: 'none' }} />
                Belge ve sözleşme erişimi rolünüze göre.
              </li>
            </ul>
          </div>

          {/* MUTABAKAT DETAY — sağa taşındı */}
          <div className="ork-preview-card">
            <div className="ork-preview-head">
              <div>
                <h3 className="ork-preview-title">Bağdat Cd. No:142</h3>
                <div className="ork-preview-sub" style={{ marginTop: 4 }}>
                  CAFERAĞA MAH · ADA 1204 / PARSEL 7 · KADIKÖY
                </div>
              </div>
              <span className="ork-tag ork-tag-warm">Mutabakat aşaması</span>
            </div>

            <div style={{ margin: '12px -4px 28px' }}>
              <ProcessLine activeIdx={1} doneThrough={1} showMeta={false} />
            </div>

            <div className="ork-preview-row">
              <div className="ork-preview-row-l">
                <Users size={16} />
                <span>Malik onayı</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <span className="ork-dotbar">
                  <i className="on" /><i className="on" /><i className="on" /><i className="on" /><i className="on" />
                  <i className="pending" /><i className="pending" /><i className="pending" />
                </span>
                <span className="ork-preview-row-r" style={{ minWidth: 36, textAlign: 'right' }}>5 / 8</span>
              </div>
            </div>
            <div className="ork-preview-row">
              <div className="ork-preview-row-l">
                <FileText size={16} />
                <span>Tapu fotokopisi</span>
              </div>
              <div className="ork-preview-row-r" style={{ color: 'var(--green-500)' }}>
                ✓ yüklendi
              </div>
            </div>
            <div className="ork-preview-row">
              <div className="ork-preview-row-l">
                <FileText size={16} />
                <span>Riskli yapı raporu</span>
              </div>
              <div className="ork-preview-row-r" style={{ color: 'var(--brand-secondary)' }}>
                bekleniyor
              </div>
            </div>
            <div className="ork-preview-row">
              <div className="ork-preview-row-l">
                <Compass size={16} />
                <span>Saha temsilcisi</span>
              </div>
              <div className="ork-preview-row-r">T. Kaya</div>
            </div>
            <div className="ork-preview-row">
              <div className="ork-preview-row-l">
                <Scale size={16} />
                <span>Muameleci</span>
              </div>
              <div className="ork-preview-row-r" style={{ color: 'var(--fg-3)' }}>
                atanmadı
              </div>
            </div>

            <div style={{
              marginTop: 24, display: 'flex', gap: 10,
              padding: '14px 16px',
              background: 'rgba(249,115,22,0.08)',
              border: '1px solid rgba(249,115,22,0.25)',
              borderRadius: 12,
              fontSize: 13, color: 'var(--orange-300)',
              alignItems: 'flex-start',
            }}>
              <Bell size={16} style={{ color: 'var(--brand-secondary)', flex: 'none', marginTop: 1 }} />
              <span>
                <strong style={{ color: 'var(--fg-1)', fontWeight: 600 }}>3 malik onayı bekleniyor.</strong>
                {' '}M. Demir, S. Polat ve E. Aksoy'a hatırlatma planlandı (yarın 10:30).
              </span>
            </div>
          </div>
        </div>
      </section>

      {/* PROCESS */}
      <section className="ork-col ork-block">
        <div className="ork-block-head">
          <div className="ork-block-head-text">
            <span className="ork-eyebrow">/ y öntem</span>
            <h2>Her hikâye aynı sekiz aşamadan geçer.</h2>
            <p>
              Bağdat Cd. 142'nin yolunda, Moda Cd. 8'in yolunda, Fener
              Kalamış 44'ün yolunda — bina değişir, sıralama aynı.
            </p>
          </div>
        </div>
        <div style={{
          background: 'rgba(255,255,255,0.02)',
          border: '1px solid var(--border-subtle)',
          borderRadius: 24,
          padding: '48px 36px 36px',
        }}>
          <ProcessLine activeIdx={3} doneThrough={3} />
        </div>
      </section>

      {/* PULL QUOTE 2 */}
      <section className="ork-col ork-block" style={{ textAlign: 'center' }}>
        <p className="ork-edit-pull">
          <span className="ork-edit-pull-l">/ Da vet</span>
          Sizin binanız da<br />
          haritada bir pin,<br />
          <span className="grad">bir hikaye olabilir.</span>
        </p>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 14, marginTop: 40 }}>
          <button
            type="button"
            className="ork-btn ork-btn-primary ork-btn-xl"
            onClick={() => submitLead('mid-i-cta')}
          >
            Hikayemi başlat <ArrowRight size={18} />
          </button>
          <button type="button" className="ork-btn ork-btn-secondary ork-btn-lg">
            <Phone size={15} /> Önce konuşalım
          </button>
        </div>
      </section>

      {/* SSS */}
      <FAQ />

      {/* LEAD BLOCK */}
      <LeadBlock variant="I" />

      <Footer />

      <LeadSuccessModal open={modalOpen} onClose={() => setModalOpen(false)} />
    </div>
  );
};

window.OrkLandingI = LandingI;