$page_title = "Yapay Zeka (AI) Tasarım Mimarı";
$extra_css = '
    <style>
        .ai-container { max-width: 1200px; margin: 40px auto; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; padding: 0 20px; align-items: start; }
        @media (max-width: 900px) { .ai-container { grid-template-columns: 1fr; } }
        
        .ai-box { background: var(--now-dark); padding: 40px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.05); box-shadow: 0 20px 50px rgba(0,0,0,0.5); position: relative; overflow: hidden; }
        .ai-box::before { content:\'\'; position:absolute; top:0; left:0; width:100%; height:4px; background: linear-gradient(90deg, #8b5cf6, #3b82f6); }
        
        .ai-title { font-size: 28px; font-weight: 900; color: #fff; margin-bottom: 15px; }
        .ai-title span { background: -webkit-linear-gradient(45deg, #8b5cf6, #3b82f6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        
        textarea.prompt-input { width: 100%; background: #121212; border: 2px solid #333; border-radius: 12px; padding: 20px; color: #fff; font-size: 16px; font-family: inherit; resize: vertical; min-height: 150px; outline: none; transition: 0.3s; margin-bottom: 20px; }
        textarea.prompt-input:focus { border-color: #8b5cf6; box-shadow: 0 0 20px rgba(139,92,246,0.2); }
        
        .btn-generate { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: linear-gradient(45deg, #8b5cf6, #3b82f6); color: #fff; border: none; padding: 20px; border-radius: 12px; font-size: 18px; font-weight: 800; cursor: pointer; transition: 0.3s; box-shadow: 0 10px 30px rgba(59,130,246,0.3); }
        .btn-generate:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(59,130,246,0.5); }
        
        /* Sağ Taraf - Sonuç Alanı */
        .result-box { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 500px; background: #0a0a0a; border-radius: 16px; border: 2px dashed #333; position: relative; padding: 30px; }
        
        .loader { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
        .spinner { width: 60px; height: 60px; border: 5px solid rgba(139,92,246,0.2); border-top-color: #8b5cf6; border-radius: 50%; animation: spin 1s linear infinite; }
        @keyframes spin { to { transform: rotate(360deg); } }
        
        .generated-img-container { display: none; text-align: center; width: 100%; }
        .generated-img { max-width: 100%; max-height: 500px; border-radius: 12px; box-shadow: 0 20px 40px rgba(0,0,0,0.8); border: 2px solid #8b5cf6; object-fit: contain; }
        
        .btn-buy { display: inline-block; background: var(--now-red); color: #fff; padding: 15px 30px; border-radius: 30px; font-weight: 800; text-decoration: none; margin-top: 25px; transition: 0.3s; }
        .btn-buy:hover { background: #d4002a; transform: translateY(-2px); }
        
        .suggestions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 25px; }
        .suggestion-pill { background: #1a1a1a; border: 1px solid #333; color: #a3a3a3; padding: 8px 15px; border-radius: 20px; font-size: 13px; cursor: pointer; transition: 0.2s; }
        .suggestion-pill:hover { background: #8b5cf6; color: #fff; border-color: #8b5cf6; }
    </style>
';
require_once 'inc/header.php';

    <div class="ai-container">
        
        <!-- Sol: Prompt Girişi -->
        <div class="ai-box">
            <h1 class="ai-title">Hayal Et, <span>Yapay Zeka Çizsin.</span></h1>
            <p style="color:#a3a3a3; line-height:1.6; margin-bottom:25px;">Davetiyenizi kelimelerle tarif edin. Yapay zeka mimarımız (AI) sizin için saniyeler içinde benzersiz bir arka plan çizimi yapsın. Gelin ve damat isimleriniz bizim tarafımızdan bu özel tasarıma eklenecektir.</p>
            
            <div class="suggestions">
                <div class="suggestion-pill" onclick="fillPrompt('Bozcaada sahilinde, gün batımı renklerinde şık ve minimalist deniz kabuklu bir tasarım.')">Deniz & Sahil</div>
                <div class="suggestion-pill" onclick="fillPrompt('Siyah zemin üzerine altın yaldızlı geometrik çizgiler barındıran asil bir tasarım.')">Lüks & Altın</div>
                <div class="suggestion-pill" onclick="fillPrompt('Pastel yeşili ve pudra pembesi güllerle donatılmış romantik vintage bir tasarım.')">Romantik Gül</div>
            </div>
            
            <textarea id="aiPrompt" class="prompt-input" placeholder="Örn: Koyu lacivert gökyüzü altında, yıldızlarla parlayan gümüş renkli ağaç dalları içeren zarif bir tasarım..."></textarea>
            
            <button id="btnGenerate" class="btn-generate">
                <i class="fa-solid fa-wand-magic-sparkles"></i> Mimar'ı Başlat ve Tasarla
            </button>
            
                        <div style="margin-top:20px; font-size:12px; color:#f59e0b; text-align:center;">
                <i class="fa-solid fa-triangle-exclamation"></i> API Anahtarı girilmediği için sistem şu an MOCK (Simülasyon) modunda çalışmaktadır.
            </div>
                    </div>
        
        <!-- Sağ: Sonuç Ekranı -->
        <div class="result-box" id="resultArea">
            
            <!-- Bekleme Ekranı -->
            <div id="defaultState" style="text-align:center; color:#555;">
                <i class="fa-solid fa-robot" style="font-size:80px; margin-bottom:20px; opacity:0.5;"></i>
                <h2>AI Mimar Bekliyor</h2>
                <p>Tasarımınız burada belirecek.</p>
            </div>
            
            <!-- Yükleniyor -->
            <div id="loader" class="loader">
                <div class="spinner"></div>
                <h3 style="color:#8b5cf6;">Tasarımınız Üretiliyor...</h3>
                <p style="color:#a3a3a3; font-size:14px; text-align:center;">Yapay zeka milyonlarca pikseli sizin için boyuyor. Lütfen bekleyin.</p>
            </div>
            
            <!-- Sonuç -->
            <div id="resultImgContainer" class="generated-img-container">
                <h3 style="color:#10b981; margin-bottom:20px;"><i class="fa-solid fa-circle-check"></i> Şaheseriniz Hazır!</h3>
                <img id="generatedImg" src="" class="generated-img" alt="Yapay Zeka Tasarımı">
                
                <!-- Bu özel tasarım için sahte bir ürün ID (veya özel fiyat) ile siparişe başlatıyoruz -->
                <form action="urun.php" method="GET" style="margin-top:20px;">
                    <input type="hidden" name="ai_tasarim" value="1">
                    <input type="hidden" name="ai_gorsel" id="formAiGorsel" value="">
                    <button type="submit" class="btn-buy"><i class="fa-solid fa-cart-shopping"></i> Bu Tasarımla Sipariş Ver (Sihirbaza Git)</button>
                </form>
            </div>
            
        </div>
        
    </div>

    <style>
        footer { padding: 50px 20px; text-align: center; color: var(--text-gray); font-size: 14px; background: #000; border-top: 1px solid #222; margin-top: 50px; }
        .footer-links { display:flex; justify-content:center; gap:20px; flex-wrap:wrap; margin-bottom:20px; }
        .footer-links a { color: var(--text-gray); text-decoration:none; font-weight:600; transition:0.3s; }
        .footer-links a:hover { color: var(--now-red); }
    </style>
    </main>
    </div> <!-- .global-wrapper bitişi -->

    <footer>
        <div class="footer-links">
            <a href="hakkimizda.php"><i class="fa-solid fa-building"></i> Hakkımızda</a>
            <a href="iletisim.php"><i class="fa-solid fa-headset"></i> İletişim / Destek</a>
            <a href="kvkk.php"><i class="fa-solid fa-shield-halved"></i> KVKK ve Gizlilik</a>
            <a href="mesafeli_satis.php"><i class="fa-solid fa-file-contract"></i> Mesafeli Satış Sözleşmesi</a>
        </div>
        &copy; 2026 Hızlı Davetiye Platformu. Tüm Hakları Saklıdır.<br>
        <small style="margin-top:10px; display:block;">Ortak Karar & Paylaşımlı Beğeni Altyapısı</small>
    </footer>

    <!-- Ortak Scriptler -->
    <script>
        // Tema Değiştirici
        const themeBtn = document.getElementById('themeToggleBtn');
        const rootElement = document.documentElement;
        
        if(localStorage.getItem('hizli_theme') === 'light') {
            rootElement.setAttribute('data-theme', 'light');
            if(themeBtn) themeBtn.innerHTML = '<i class="fa-solid fa-moon"></i>';
        }
        
        if(themeBtn) {
            themeBtn.addEventListener('click', () => {
                if(rootElement.getAttribute('data-theme') === 'light') {
                    rootElement.removeAttribute('data-theme');
                    localStorage.setItem('hizli_theme', 'dark');
                    themeBtn.innerHTML = '<i class="fa-solid fa-sun"></i>';
                } else {
                    rootElement.setAttribute('data-theme', 'light');
                    localStorage.setItem('hizli_theme', 'light');
                    themeBtn.innerHTML = '<i class="fa-solid fa-moon"></i>';
                }
            });
        }

        // Scroll Navbar Effect
        window.addEventListener('scroll', () => {
            const navbar = document.getElementById('navbar');
            if (navbar) {
                if (window.scrollY > 50) navbar.classList.add('scrolled');
                else navbar.classList.remove('scrolled');
            }
        });

        // Mobile Sidebar Toggle
        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
        const globalSidebar = document.getElementById('globalSidebar');
        if(mobileMenuBtn && globalSidebar) {
            mobileMenuBtn.addEventListener('click', () => {
                globalSidebar.classList.toggle('show');
            });
        }
    </script>
    
    <!-- Sayfaya Özel Ek Scriptler -->
    
    <script>
        function fillPrompt(text) {
            document.getElementById('aiPrompt').value = text;
        }
        
        document.getElementById('btnGenerate').addEventListener('click', async function() {
            const prompt = document.getElementById('aiPrompt').value.trim();
            if(!prompt) {
                alert('Lütfen davetiyenizi tarif edin.');
                return;
            }
            
            // UI Geçişleri
            document.getElementById('defaultState').style.display = 'none';
            document.getElementById('resultImgContainer').style.display = 'none';
            document.getElementById('loader').style.display = 'flex';
            this.disabled = true;
            this.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Üretiliyor...';
            
            try {
                const formData = new FormData();
                formData.append('action', 'generate_design');
                formData.append('prompt', prompt);
                
                const response = await fetch('ai_tasarim.php', {
                    method: 'POST',
                    body: formData
                });
                
                const data = await response.json();
                
                if(data.status === 'success') {
                    document.getElementById('generatedImg').src = data.image_url;
                    document.getElementById('formAiGorsel').value = data.image_url; // Siparişe taşı
                    
                    document.getElementById('loader').style.display = 'none';
                    document.getElementById('resultImgContainer').style.display = 'block';
                } else {
                    alert('Hata: ' + data.message);
                    document.getElementById('loader').style.display = 'none';
                    document.getElementById('defaultState').style.display = 'block';
                }
            } catch (error) {
                alert('Sistemsel bir hata oluştu.');
                document.getElementById('loader').style.display = 'none';
                document.getElementById('defaultState').style.display = 'block';
            } finally {
                this.disabled = false;
                this.innerHTML = '<i class="fa-solid fa-wand-magic-sparkles"></i> Mimar\'ı Başlat ve Tasarla';
            }
        });
    </script>
</body>
</html>