const AppConfig = {
  brand: {
    name: "港曲粤语AI",
    slogan: "聽歌學粵語，AI 助你掌握港樂精髓"
  },
  
  navigation: [
    { label: "主頁", href: "home.html", id: "home" },
    { label: "學習功能", href: "features.html", id: "features" },
    { label: "關於我們", href: "about_us.html", id: "about" },
    { label: "聯繫我們", href: "contact_us.html", id: "contact" }
  ],
  
  socialLinks: [
    { icon: "share", label: "Share", href: "#" },
    { icon: "mail", label: "Email", href: "#" }
  ],
  
  footerLinks: {
    explore: [
      { label: "Features", href: "features.html" },
      { label: "Community Guide", href: "#" },
      { label: "AI Ethics", href: "#" }
    ],
    legal: [
      { label: "Privacy Policy", href: "#" },
      { label: "Terms of Service", href: "#" }
    ]
  },
  
  downloadModal: {
    title: "下載 港曲粤语AI App",
    description: "立即體驗 AI 粵語私教，掌握地道港樂發音",
    platforms: [
      { name: "iOS App Store", icon: "phone_iphone", url: "#" },
      { name: "Android Google Play", icon: "android", url: "#" },
      { name: "Windows Desktop", icon: "desktop_windows", url: "#" },
      { name: "macOS Desktop", icon: "desktop_mac", url: "#" }
    ]
  }
};

const TailwindConfig = {
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        "secondary-fixed-dim": "#b0c6ff",
        "inverse-primary": "#6833ea",
        "inverse-on-surface": "#303035",
        "surface-dim": "#131318",
        "inverse-surface": "#e4e1e9",
        "surface-container": "#1f1f24",
        "surface-container-high": "#2a292f",
        "secondary": "#b0c6ff",
        "surface-container-low": "#1b1b20",
        "outline-variant": "#494456",
        "error-container": "#93000a",
        "surface-container-highest": "#35343a",
        "tertiary-fixed": "#ffdf9e",
        "secondary-fixed": "#d9e2ff",
        "on-primary-fixed-variant": "#4f00d0",
        "on-primary": "#370096",
        "primary-fixed": "#e8deff",
        "on-surface": "#e4e1e9",
        "on-primary-container": "#cebfff",
        "surface-variant": "#35343a",
        "on-primary-fixed": "#20005f",
        "surface-bright": "#39383e",
        "secondary-container": "#0068ed",
        "on-error": "#690005",
        "outline": "#948da2",
        "primary-fixed-dim": "#cdbdff",
        "on-tertiary-container": "#fcbe00",
        "on-error-container": "#ffdad6",
        "on-surface-variant": "#cbc3d9",
        "on-secondary-fixed": "#001945",
        "background": "#131318",
        "surface-container-lowest": "#0e0e13",
        "error": "#ffb4ab",
        "on-secondary-container": "#f2f3ff",
        "on-secondary": "#002d6e",
        "primary": "#cdbdff",
        "tertiary": "#fabd00",
        "surface": "#131318",
        "on-tertiary-fixed-variant": "#5b4300",
        "on-secondary-fixed-variant": "#00429b",
        "tertiary-fixed-dim": "#fabd00",
        "on-tertiary": "#3f2e00",
        "primary-container": "#5d21df",
        "surface-tint": "#cdbdff",
        "on-tertiary-fixed": "#261a00",
        "on-background": "#e4e1e9",
        "tertiary-container": "#6b4f00"
      },
      borderRadius: {
        "DEFAULT": "0.25rem",
        "lg": "0.5rem",
        "xl": "0.75rem",
        "full": "9999px"
      },
      fontFamily: {
        "headline": ["Epilogue", "sans-serif"],
        "body": ["Manrope", "sans-serif"],
        "label": ["Space Grotesk", "sans-serif"]
      }
    }
  }
};

const UIComponents = {
  renderNavbar(activePageId) {
    const navItems = AppConfig.navigation.map(item => {
      const isActive = item.id === activePageId;
      const activeClass = isActive 
        ? 'text-amber-400 font-bold border-b-2 border-amber-400 pb-1' 
        : 'text-neutral-300 font-medium hover:text-violet-200 transition-colors';
      return `<a data-nav-item href="${item.href}" class="${activeClass} font-label">${item.label}</a>`;
    }).join('');

    return `
      <nav class="fixed top-0 w-full z-50 bg-neutral-950/60 backdrop-blur-3xl shadow-[0_40px_40px_0_rgba(0,0,0,0.06)] h-20">
        <div class="flex justify-between items-center max-w-7xl mx-auto px-8 h-full">
          <a href="home.html" class="text-2xl font-black tracking-tighter text-transparent bg-clip-text bg-gradient-to-r from-violet-300 to-blue-500 font-headline">
            ${AppConfig.brand.name}
          </a>
          <div class="hidden md:flex items-center space-x-10">
            ${navItems}
          </div>
          <button class="bg-gradient-to-r from-primary to-primary-container text-on-primary-fixed font-bold px-8 py-3 rounded-full hover:shadow-[0_0_8px_rgba(250,189,0,0.5)] transition-all duration-300 scale-100 active:scale-95 font-label launch-app-btn">
            開始學習
          </button>
        </div>
      </nav>
    `;
  },

  renderFooter() {
    const exploreLinks = AppConfig.footerLinks.explore.map(link => 
      `<li><a class="text-neutral-500 hover:text-neutral-300 transition-colors text-sm" href="${link.href}">${link.label}</a></li>`
    ).join('');

    const legalLinks = AppConfig.footerLinks.legal.map(link => 
      `<li><a class="text-neutral-500 hover:text-neutral-300 transition-colors text-sm" href="${link.href}">${link.label}</a></li>`
    ).join('');

    const socialIcons = AppConfig.socialLinks.map(link => 
      `<a class="w-10 h-10 rounded-full bg-surface-container-high flex items-center justify-center hover:text-amber-400 transition-colors" href="${link.href}">
        <span class="material-symbols-outlined text-lg" data-icon="${link.icon}">${link.icon}</span>
      </a>`
    ).join('');

    return `
      <footer class="w-full border-t border-white/10 bg-neutral-900">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-12 max-w-7xl mx-auto px-8 py-16">
          <div class="col-span-1 md:col-span-1">
            <div class="text-xl font-bold text-amber-400 mb-6 font-headline">${AppConfig.brand.name}</div>
            <p class="text-neutral-500 text-sm leading-relaxed">
              © 2024 ${AppConfig.brand.name}. Preserving the Neon Lyricist Legacy.
            </p>
          </div>
          <div>
            <h5 class="text-violet-300 font-label text-xs uppercase tracking-widest mb-6">Explore</h5>
            <ul class="space-y-4">${exploreLinks}</ul>
          </div>
          <div>
            <h5 class="text-violet-300 font-label text-xs uppercase tracking-widest mb-6">Legal</h5>
            <ul class="space-y-4">${legalLinks}</ul>
          </div>
          <div>
            <h5 class="text-violet-300 font-label text-xs uppercase tracking-widest mb-6">Connect</h5>
            <div class="flex gap-4">${socialIcons}</div>
          </div>
        </div>
      </footer>
    `;
  },

  renderHead(title) {
    return `
      <meta charset="utf-8"/>
      <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
      <title>${title} - ${AppConfig.brand.name}</title>
      
      <link href="https://fonts.googleapis.com/css2?family=Epilogue:wght@700;800;900&amp;family=Manrope:wght@400;500;600&amp;family=Space+Grotesk:wght@400;700&amp;display=swap" rel="stylesheet"/>
      <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
      
      <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
      <link rel="stylesheet" href="styles/common.css"/>
      <script src="scripts/common.js"></script>
    `;
  },

  renderSectionTitle(label, title, description) {
    return `
      <div class="mb-20">
        <span class="font-label text-tertiary uppercase tracking-widest text-sm mb-4 block">${label}</span>
        <h2 class="text-4xl md:text-6xl font-bold font-headline mb-4">${title}</h2>
        <p class="text-on-surface-variant text-lg max-w-2xl">${description}</p>
      </div>
    `;
  },

  renderFeatureCard(icon, title, description, options = {}) {
    const { variant = 'default', size = 'normal' } = options;
    const bgClass = variant === 'high' ? 'bg-surface-container-high' : 
                    variant === 'highest' ? 'bg-surface-container-highest' : 
                    'bg-surface-container-low';
    
    return `
      <div class="${bgClass} rounded-[2rem] p-10 flex flex-col ${size === 'large' ? 'md:col-span-2' : ''}">
        <span class="material-symbols-outlined text-5xl text-${options.color || 'primary'} mb-8" data-icon="${icon}">${icon}</span>
        <h3 class="text-${size === 'large' ? '3xl' : '2xl'} font-bold font-headline mb-4">${title}</h3>
        <p class="text-on-surface-variant">${description}</p>
      </div>
    `;
  },

  renderButton(text, options = {}) {
    const { variant = 'primary', size = 'normal', icon = null } = options;
    
    if (variant === 'primary') {
      return `
        <button class="bg-gradient-to-r from-primary to-primary-container text-on-primary-fixed font-bold ${size === 'large' ? 'px-10 py-5 text-lg' : 'px-8 py-3'} rounded-full hover:shadow-[0_0_12px_rgba(250,189,0,0.6)] transition-all duration-300 scale-100 active:scale-95 font-label">
          ${icon ? `<span class="material-symbols-outlined mr-2">${icon}</span>` : ''}${text}
        </button>
      `;
    } else {
      return `
        <button class="glass-panel text-on-surface font-bold ${size === 'large' ? 'px-10 py-5 text-lg' : 'px-8 py-3'} rounded-full hover:bg-surface-container-highest transition-all duration-300 border border-white/5 font-label">
          ${icon ? `<span class="material-symbols-outlined mr-2">${icon}</span>` : ''}${text}
        </button>
      `;
    }
  },

  renderDownloadModal() {
    const platforms = AppConfig.downloadModal.platforms.map(platform => 
      `<a href="${platform.url}" class="flex items-center gap-4 p-4 bg-surface-container-high rounded-xl hover:bg-surface-container-highest transition-colors group">
        <span class="material-symbols-outlined text-2xl text-primary">${platform.icon}</span>
        <div>
          <div class="font-bold text-on-surface">${platform.name}</div>
          <div class="text-xs text-on-surface-variant group-hover:text-primary transition-colors">點擊下載</div>
        </div>
      </a>`
    ).join('');

    return `
      <div id="download-modal" class="fixed inset-0 z-50 hidden">
        <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" data-modal-close></div>
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-md">
          <div class="bg-surface-container-low rounded-3xl p-8 mx-4 shadow-2xl border border-white/10">
            <div class="flex justify-between items-center mb-6">
              <h3 class="text-2xl font-bold font-headline">${AppConfig.downloadModal.title}</h3>
              <button class="text-on-surface-variant hover:text-on-surface transition-colors" data-modal-close>
                <span class="material-symbols-outlined">close</span>
              </button>
            </div>
            <p class="text-on-surface-variant mb-6">${AppConfig.downloadModal.description}</p>
            <div class="space-y-3">
              ${platforms}
            </div>
          </div>
        </div>
      </div>
    `;
  }
};

const PageUtils = {
  init() {
    if (typeof tailwind !== 'undefined') {
      tailwind.config = TailwindConfig;
    }
  },

  renderPage(activePageId, navbarContainerId = 'navbar-container', footerContainerId = 'footer-container') {
    this.init();
    
    const navbarEl = document.getElementById(navbarContainerId);
    const footerEl = document.getElementById(footerContainerId);
    
    if (navbarEl) {
      navbarEl.innerHTML = UIComponents.renderNavbar(activePageId);
    }
    
    if (footerEl) {
      footerEl.innerHTML = UIComponents.renderFooter();
    }
    
    this.renderDownloadModal();
    this.setupEventListeners();
  },

  renderDownloadModal() {
    let modalContainer = document.getElementById('download-modal-container');
    if (!modalContainer) {
      modalContainer = document.createElement('div');
      modalContainer.id = 'download-modal-container';
      document.body.appendChild(modalContainer);
    }
    modalContainer.innerHTML = UIComponents.renderDownloadModal();
  },

  setupEventListeners() {
    const launchButtons = document.querySelectorAll('.launch-app-btn');
    launchButtons.forEach(button => {
      button.addEventListener('click', () => {
        this.showDownloadModal();
      });
    });

    const modal = document.getElementById('download-modal');
    if (modal) {
      const closeButtons = modal.querySelectorAll('[data-modal-close]');
      closeButtons.forEach(button => {
        button.addEventListener('click', () => {
          this.hideDownloadModal();
        });
      });

      modal.addEventListener('click', (e) => {
        if (e.target === modal || e.target.hasAttribute('data-modal-close')) {
          this.hideDownloadModal();
        }
      });

      document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
          this.hideDownloadModal();
        }
      });
    }
  },

  showDownloadModal() {
    const modal = document.getElementById('download-modal');
    if (modal) {
      modal.classList.remove('hidden');
      document.body.style.overflow = 'hidden';
    }
  },

  hideDownloadModal() {
    const modal = document.getElementById('download-modal');
    if (modal) {
      modal.classList.add('hidden');
      document.body.style.overflow = '';
    }
  }
};

document.addEventListener('DOMContentLoaded', () => {
  PageUtils.init();
});

window.AppConfig = AppConfig;
window.TailwindConfig = TailwindConfig;
window.UIComponents = UIComponents;
window.PageUtils = PageUtils;