/*
Theme Name: كانا للتطوير العقارى - Cana Theme (Elementor Ready)
Theme URI: https://cana.free.site.pro/
Author: Cana For Development Engineering
Author URI: https://cana.free.site.pro/
Description: قالب ووردبريس هندسي احترافي متكامل لشركة كانا للتطوير العقارى، متوافق 100% مع أداة التصميم والتعديل Elementor وElementor Pro، ويدعم محرر Gutenberg وجميع إصدارات ووردبريس وPHP الحديثة (7.4 إلى 8.3+).
Version: 2.6.0
Requires at least: 5.8
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: cana-theme
Domain Path: /languages
Tags: real-estate, construction, rtl-support, custom-colors, custom-menu, featured-images, full-site-editing, elementor-ready, translation-ready
*/

:root {
  --cana-primary: #0f172a;
  --cana-accent: #d97706;
  --cana-font: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --e-global-color-primary: #d97706;
  --e-global-color-secondary: #f8fafc;
  --e-global-color-text: #cbd5e1;
  --e-global-color-accent: #d97706;
}

body {
  font-family: var(--cana-font);
  background-color: #020617;
  color: #f8fafc;
  direction: rtl;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Interactive elements & utility classes */
.cana-btn-primary {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  color: #ffffff !important;
  padding: 12px 28px;
  border-radius: 9999px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 10px 25px -5px rgba(217, 119, 6, 0.4);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  cursor: pointer;
  box-sizing: border-box;
}

.cana-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px -5px rgba(217, 119, 6, 0.6);
  color: #ffffff !important;
}

.cana-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  backdrop-filter: blur(12px);
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.cana-card:hover {
  border-color: rgba(217, 119, 6, 0.4);
  transform: translateY(-4px);
}

.cana-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.cana-menu-list {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.cana-menu-list a {
  color: #cbd5e1;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}

.cana-menu-list a:hover {
  color: #f59e0b;
}

/* ===================================================
   ELEMENTOR FULL COMPATIBILITY & STYLING INTEGRATION
=================================================== */
.elementor-page .site-main {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 1280px;
}

.elementor-widget-heading .elementor-heading-title {
  font-family: var(--cana-font) !important;
}

.elementor-widget-text-editor {
  color: #cbd5e1;
  font-family: var(--cana-font) !important;
}

.elementor-button {
  font-family: var(--cana-font) !important;
  border-radius: 9999px !important;
}

/* Elementor dark theme container adjustments */
.cana-elementor-content {
  width: 100%;
  box-sizing: border-box;
}

.cana-elementor-canvas {
  background-color: #020617;
  color: #f8fafc;
}
import React, { useState, useEffect } from 'react';
import {
  PageId,
  AppViewMode,
  SiteMetadata,
  StatItem,
  ProjectItem,
  StudioGalleryItem,
  PriceServiceItem,
  TeamMember,
  AboutSectionData
} from './types';
import {
  initialSiteMetadata,
  initialStats,
  initialProjects,
  initialStudioGalleries,
  initialPriceServices,
  initialTeamMembers,
  initialAboutData
} from './data/canaSiteData';
import { WordPressAdminBar } from './components/WordPressAdminBar';
import { WordPressHeader } from './components/WordPressHeader';
import { WordPressFooter } from './components/WordPressFooter';
import { HomePage } from './components/pages/HomePage';
import { ProjectsPage } from './components/pages/ProjectsPage';
import { StudioPage } from './components/pages/StudioPage';
import { PricesPage } from './components/pages/PricesPage';
import { TeamPage } from './components/pages/TeamPage';
import { AboutPage } from './components/pages/AboutPage';
import { ContactPage } from './components/pages/ContactPage';
import { ProjectDetailModal } from './components/ProjectDetailModal';
import { PriceCalculatorModal } from './components/PriceCalculatorModal';
import { CartDrawer, CartItem } from './components/CartDrawer';
import { WordPressCustomizer } from './components/WordPressCustomizer';
import { WordPressBlockEditor } from './components/WordPressBlockEditor';
import { WordPressCliTerminal } from './components/WordPressCliTerminal';
import { ElementorThemeFilesModal } from './components/ElementorThemeFilesModal';
import { createAndDownloadWordPressThemeZip } from './utils/wordPressThemeExporter';

export default function App() {
  // Navigation & View Mode State
  const [currentPage, setCurrentPage] = useState<PageId>('home');
  const [viewMode, setViewMode] = useState<AppViewMode>('site');

  // WordPress Editable Data State
  const [metadata, setMetadata] = useState<SiteMetadata>(initialSiteMetadata);
  const [stats, setStats] = useState<StatItem[]>(initialStats);
  const [projects, setProjects] = useState<ProjectItem[]>(initialProjects);
  const [studioGalleries, setStudioGalleries] = useState<StudioGalleryItem[]>(initialStudioGalleries);
  const [priceServices, setPriceServices] = useState<PriceServiceItem[]>(initialPriceServices);
  const [teamMembers, setTeamMembers] = useState<TeamMember[]>(initialTeamMembers);
  const [aboutData, setAboutData] = useState<AboutSectionData>(initialAboutData);

  // Modals & Drawers State
  const [selectedProject, setSelectedProject] = useState<ProjectItem | null>(null);
  const [isCalculatorOpen, setIsCalculatorOpen] = useState(false);
  const [isCartOpen, setIsCartOpen] = useState(false);
  const [isCustomizerOpen, setIsCustomizerOpen] = useState(false);
  const [isElementorFilesOpen, setIsElementorFilesOpen] = useState(false);
  const [cartItems, setCartItems] = useState<CartItem[]>([
    {
      id: 'default-service-1',
      title: 'إصدار رخصة بناء بالقاهرة الجديدة والمحافظات',
      price: 6250,
      details: 'أعمال إدارية - رسوم المعاملة الإدارية الشاملة'
    }
  ]);

  // Sync customizer modal with viewMode
  useEffect(() => {
    if (viewMode === 'customizer') {
      setIsCustomizerOpen(true);
    }
  }, [viewMode]);

  const handleAddToCart = (service: { id: string; title: string; price: number; details: string }) => {
    setCartItems((prev) => [
      ...prev,
      {
        id: `${service.id}-${Date.now()}-${Math.random().toString(36).substring(2, 7)}`,
        title: service.title,
        price: service.price,
        details: service.details
      }
    ]);
    setIsCartOpen(true);
  };

  const handleRemoveCartItem = (id: string) => {
    setCartItems((prev) => prev.filter((item) => item.id !== id));
  };

  const handleClearCart = () => {
    setCartItems([]);
  };

  const handleExportThemeZip = async () => {
    try {
      await createAndDownloadWordPressThemeZip({
        metadata,
        stats,
        projects,
        studioGalleries,
        priceServices,
        teamMembers,
        aboutData
      });
    } catch (err) {
      console.error('Error generating WordPress theme ZIP:', err);
    }
  };

  return (
    <div
      className="min-h-screen bg-slate-950 text-slate-100 flex flex-col font-cairo selection:bg-amber-500 selection:text-slate-950"
      style={{ fontFamily: metadata.fontFamily || 'Cairo' }}
      dir="rtl"
    >
      {/* 1. TOP WORDPRESS ADMIN BAR */}
      <WordPressAdminBar
        currentViewMode={viewMode}
        setCurrentViewMode={(mode) => {
          setViewMode(mode);
          if (mode === 'customizer') setIsCustomizerOpen(true);
        }}
        currentPage={currentPage}
        setCurrentPage={setCurrentPage}
        onExportThemeZip={handleExportThemeZip}
        onOpenElementorFiles={() => setIsElementorFilesOpen(true)}
        siteTitle={metadata.siteTitle}
      />

      {/* 2. MAIN APP CONTENT ACCORDING TO VIEW MODE */}
      {viewMode === 'block-editor' ? (
        <main className="flex-1 bg-slate-900/50">
          <WordPressBlockEditor
            currentPage={currentPage}
            metadata={metadata}
            projects={projects}
            onClose={() => setViewMode('site')}
          />
        </main>
      ) : viewMode === 'wp-cli' ? (
        <main className="flex-1 bg-slate-950">
          <WordPressCliTerminal
            metadata={metadata}
            setMetadata={setMetadata}
            stats={stats}
            setStats={setStats}
            projects={projects}
            onExportThemeZip={handleExportThemeZip}
            onClose={() => setViewMode('site')}
          />
        </main>
      ) : (
        <>
          {/* Main WordPress Site Header */}
          <WordPressHeader
            currentPage={currentPage}
            setCurrentPage={setCurrentPage}
            metadata={metadata}
            cartCount={cartItems.length}
            onOpenCart={() => setIsCartOpen(true)}
            onOpenQuickCustomizer={() => setIsCustomizerOpen(true)}
          />

          {/* Page Routing Body */}
          <main className="flex-1">
            {currentPage === 'home' && (
              <HomePage
                metadata={metadata}
                stats={stats}
                projects={projects}
                studioGalleries={studioGalleries}
                priceServices={priceServices}
                setCurrentPage={setCurrentPage}
                onOpenProjectModal={(p) => setSelectedProject(p)}
                onOpenCalculator={() => setIsCalculatorOpen(true)}
                onOpenElementorModal={() => setIsElementorFilesOpen(true)}
              />
            )}

            {currentPage === 'projects' && (
              <ProjectsPage
                projects={projects}
                stats={stats}
                metadata={metadata}
                onOpenProjectModal={(p) => setSelectedProject(p)}
                onOpenCalculator={() => setIsCalculatorOpen(true)}
              />
            )}

            {currentPage === 'studio' && (
              <StudioPage
                studioGalleries={studioGalleries}
                metadata={metadata}
                onAddToCart={handleAddToCart}
              />
            )}

            {currentPage === 'prices' && (
              <PricesPage
                priceServices={priceServices}
                metadata={metadata}
                onOpenCalculator={() => setIsCalculatorOpen(true)}
                onAddToCart={handleAddToCart}
              />
            )}

            {currentPage === 'teamwork' && (
              <TeamPage teamMembers={teamMembers} metadata={metadata} />
            )}

            {currentPage === 'about' && (
              <AboutPage aboutData={aboutData} metadata={metadata} />
            )}

            {currentPage === 'contact' && <ContactPage metadata={metadata} />}
          </main>

          {/* Main WordPress Site Footer */}
          <WordPressFooter
            metadata={metadata}
            setCurrentPage={setCurrentPage}
          />
        </>
      )}

      {/* 3. MODALS & INTERACTIVE OVERLAYS */}
      
      {/* Project Details / Blueprints / Licenses Modal */}
      <ProjectDetailModal
        project={selectedProject}
        onClose={() => setSelectedProject(null)}
        metadata={metadata}
      />

      {/* Price Calculator Modal */}
      <PriceCalculatorModal
        isOpen={isCalculatorOpen}
        onClose={() => setIsCalculatorOpen(false)}
        metadata={metadata}
        onAddToCart={handleAddToCart}
      />

      {/* Services Shopping Cart Drawer */}
      <CartDrawer
        isOpen={isCartOpen}
        onClose={() => setIsCartOpen(false)}
        items={cartItems}
        onRemoveItem={handleRemoveCartItem}
        onClearCart={handleClearCart}
        metadata={metadata}
      />

      {/* WordPress Live Customizer Side Panel */}
      <WordPressCustomizer
        isOpen={isCustomizerOpen}
        onClose={() => {
          setIsCustomizerOpen(false);
          if (viewMode === 'customizer') setViewMode('site');
        }}
        metadata={metadata}
        setMetadata={setMetadata}
        stats={stats}
        setStats={setStats}
        onExportTheme={handleExportThemeZip}
      />

      {/* Elementor Theme Files & Template Kit Explorer Modal */}
      <ElementorThemeFilesModal
        isOpen={isElementorFilesOpen}
        onClose={() => setIsElementorFilesOpen(false)}
        exportData={{
          metadata,
          stats,
          projects,
          studioGalleries,
          priceServices,
          teamMembers,
          aboutData
        }}
      />
    </div>
  );
}