import React, { useState, useEffect } from "react";
import { createRoot } from "react-dom/client";
import {
ShoppingCart,
Menu,
X,
Search,
MapPin,
Phone,
Mail,
Facebook,
Instagram,
Cpu,
Monitor,
Printer,
HardDrive,
Star,
CheckCircle,
ArrowRight
} from "lucide-react";

// --- Types & Interfaces ---

type Category = 'laptop' | 'pc' | 'printer' | 'device';
type Page = 'home' | 'products' | 'about' | 'contact';

interface Product {
id: number;
name: string;
category: Category;
price: number;
oldPrice?: number;
specs: string[];
image: string;
rating: number;
}

interface CartItem extends Product {
quantity: number;
}

// --- Mock Data Generator ---
// Tạo 20 sản phẩm cho mỗi danh mục như yêu cầu
const generateProducts = (): Product[] => {
const products: Product[] = [];
let idCounter = 1;

const categories: { key: Category; label: string; imagePrefix: string }[] = [
{ key: 'laptop', label: 'Laptop', imagePrefix:
'https://images.unsplash.com/photo-1496181133206-80ce9b88a853?auto=format&fit=crop&w=500&q=80' },
{ key: 'pc', label: 'PC Đồng Bộ', imagePrefix:
'https://images.unsplash.com/photo-1587831990711-23ca6441447b?auto=format&fit=crop&w=500&q=80' },
{ key: 'printer', label: 'Máy in', imagePrefix:
'https://images.unsplash.com/photo-1612815154858-60aa4c59eaa6?auto=format&fit=crop&w=500&q=80' },
{ key: 'device', label: 'Thiết bị & Linh kiện', imagePrefix:
'https://images.unsplash.com/photo-1555618568-98e357948b89?auto=format&fit=crop&w=500&q=80' }
];

categories.forEach(cat => {
for (let i = 1; i <= 20; i++) { let specs=[]; let name="" ; let price=0; if (cat.key==='laptop' ) { name=`Laptop Vietech
    ${cat.label} Pro ${i}`; specs=[`Core i${i % 2===0 ? '5' : '7' }`, 'RAM 16GB' , 'SSD 512GB' ]; price=15000000 + (i *
    500000); } else if (cat.key==='pc' ) { name=`PC Gaming Vietech G${i}`; specs=['RTX 3060', 'RAM 32GB' , 'Liquid Cool'
    ]; price=20000000 + (i * 800000); } else if (cat.key==='printer' ) { name=`Máy in Laser Vietech P${i}`; specs=['In 2
    mặt', 'Wifi' , 'Tốc độ cao' ]; price=3000000 + (i * 200000); } else { name=`Chuột/Phím Cơ Vietech K${i}`;
    specs=['RGB Led', 'Wireless' , 'Mechanical' ]; price=500000 + (i * 50000); } products.push({ id: idCounter++, name:
    name, category: cat.key, price: price, oldPrice: i % 3===0 ? price * 1.2 : undefined, // Giả lập giảm giá specs:
    specs, image: cat.imagePrefix, rating: 4 + (i % 2) * 0.5 }); } }); return products; }; const
    ALL_PRODUCTS=generateProducts(); // --- Components --- const Header=({ cartCount, activePage, setPage, toggleCart }:
    { cartCount: number; activePage: Page; setPage: (p: Page)=> void;
    toggleCart: () => void
    }) => {
    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

    const navItems: { id: Page; label: string }[] = [
    { id: 'home', label: 'Trang Chủ' },
    { id: 'products', label: 'Sản Phẩm' },
    { id: 'about', label: 'Vietech Green' },
    { id: 'contact', label: 'Liên hệ' },
    ];

    return (
    <header className="sticky top-0 z-50 bg-white shadow-md">
        {/* Top Bar */}
        <div className="bg-emerald-700 text-white py-1 text-xs md:text-sm">
            <div className="container mx-auto px-4 flex justify-between items-center">
                <span>Hotline: 1900 xxxx - Email: sales@vietechgreen.vn</span>
                <span className="hidden md:inline">Công nghệ xanh cho tương lai số</span>
            </div>
        </div>

        {/* Main Header */}
        <div className="container mx-auto px-4 py-4">
            <div className="flex justify-between items-center">
                {/* Logo */}
                <div className="flex items-center space-x-2 cursor-pointer" onClick={()=> setPage('home')}
                    >
                    <div className="w-10 h-10 bg-emerald-600 rounded-lg flex items-center justify-center">
                        <Cpu className="text-white w-6 h-6" />
                    </div>
                    <div>
                        <h1 className="text-xl md:text-2xl font-bold text-emerald-800 leading-none">VIETECH GREEN</h1>
                        <p className="text-xs text-gray-500 tracking-wider">CÔNG TY TNHH VIETECH GREEN</p>
                    </div>
                </div>

                {/* Desktop Nav */}
                <nav className="hidden md:flex space-x-8">
                    {navItems.map((item) => (
                    <button
                key={item.id}
                onClick={() => setPage(item.id)}
                className={`text-sm font-semibold uppercase tracking-wide transition-colors ${
                  activePage === item.id 
                    ? 'text-emerald-600 border-b-2 border-emerald-600' 
                    : 'text-gray-600 hover:text-emerald-600'
                }`}
              >
                {item.label}
              </button>
                    ))}
                </nav>

                {/* Actions */}
                <div className="flex items-center space-x-4">
                    <button className="hidden md:block text-gray-600 hover:text-emerald-600">
              <Search className="w-5 h-5" />
            </button>
                    <button
              className="relative text-gray-600 hover:text-emerald-600"
              onClick={toggleCart}
            >
              <ShoppingCart className="w-6 h-6" />
              {cartCount > 0 && (
                <span className="absolute -top-2 -right-2 bg-red-600 text-white text-xs font-bold w-5 h-5 rounded-full flex items-center justify-center">
                  {cartCount}
                </span>
              )}
            </button>
                    <button
              className="md:hidden text-gray-600"
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
            >
              {isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
            </button>
                </div>
            </div>
        </div>

        {/* Mobile Menu */}
        {isMobileMenuOpen && (
        <div className="md:hidden bg-white border-t">
            <div className="flex flex-col p-4 space-y-4">
                {navItems.map((item) => (
                <button
                key={item.id}
                onClick={() => {
                  setPage(item.id);
                  setIsMobileMenuOpen(false);
                }}
                className={`text-left font-semibold py-2 ${
                  activePage === item.id ? 'text-emerald-600' : 'text-gray-700'
                }`}
              >
                {item.label}
              </button>
                ))}
            </div>
        </div>
        )}
    </header>
    );
    };

    const Footer = () => {
    return (
    <footer className="bg-gray-900 text-white pt-12 pb-6">
        <div className="container mx-auto px-4">
            <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
                {/* Col 1 */}
                <div>
                    <h3 className="text-xl font-bold text-emerald-500 mb-4">VIETECH GREEN</h3>
                    <p className="text-gray-400 text-sm mb-4">
                        Cung cấp giải pháp công nghệ toàn diện, thiết bị chính hãng và dịch vụ chuyên nghiệp.
                    </p>
                    <div className="flex space-x-4">
                        <a href="#" className="hover:text-emerald-500">
                            <Facebook className="w-5 h-5" />
                        </a>
                        <a href="#" className="hover:text-emerald-500">
                            <Instagram className="w-5 h-5" />
                        </a>
                    </div>
                </div>

                {/* Col 2 */}
                <div>
                    <h4 className="font-bold text-lg mb-4">Liên kết</h4>
                    <ul className="space-y-2 text-sm text-gray-400">
                        <li><a href="#" className="hover:text-white">Về chúng tôi</a></li>
                        <li><a href="#" className="hover:text-white">Chính sách bảo hành</a></li>
                        <li><a href="#" className="hover:text-white">Thanh toán & Vận chuyển</a></li>
                        <li><a href="#" className="hover:text-white">Tuyển dụng</a></li>
                    </ul>
                </div>

                {/* Col 3 */}
                <div>
                    <h4 className="font-bold text-lg mb-4">Sản phẩm</h4>
                    <ul className="space-y-2 text-sm text-gray-400">
                        <li><a href="#" className="hover:text-white">Laptop Cao Cấp</a></li>
                        <li><a href="#" className="hover:text-white">PC Gaming & Đồ họa</a></li>
                        <li><a href="#" className="hover:text-white">Máy in doanh nghiệp</a></li>
                        <li><a href="#" className="hover:text-white">Linh kiện máy tính</a></li>
                    </ul>
                </div>

                {/* Col 4 */}
                <div>
                    <h4 className="font-bold text-lg mb-4">Liên hệ</h4>
                    <ul className="space-y-2 text-sm text-gray-400">
                        <li className="flex items-start space-x-2">
                            <MapPin className="w-4 h-4 mt-1 text-emerald-500" />
                            <span>Số 123, Đường Công Nghệ, Q. Cầu Giấy, Hà Nội</span>
                        </li>
                        <li className="flex items-center space-x-2">
                            <Phone className="w-4 h-4 text-emerald-500" />
                            <span>1900 xxxx</span>
                        </li>
                        <li className="flex items-center space-x-2">
                            <Mail className="w-4 h-4 text-emerald-500" />
                            <span>support@vietechgreen.vn</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div className="border-t border-gray-800 mt-8 pt-6 text-center text-sm text-gray-500">
                © 2023 Công ty TNHH Vietech Green. All rights reserved. Designed for demo.
            </div>
        </div>
    </footer>
    );
    };

    const ProductCard: React.FC<{ product: Product; onAddToCart: (p: Product)=> void }> = ({ product, onAddToCart }) =>
        {
        return (
        <div
            className="bg-white rounded-xl shadow-sm hover:shadow-xl transition-shadow duration-300 border border-gray-100 flex flex-col h-full overflow-hidden group">
            <div className="relative pt-[75%] bg-gray-100 overflow-hidden">
                <img
          src={product.image}
          alt={product.name}
          className="absolute top-0 left-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
        />
        {product.oldPrice && (
                <div className="absolute top-2 left-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded">
                    GIẢM {Math.round(((product.oldPrice - product.price) / product.oldPrice) * 100)}%
                </div>
                )}
            </div>

            <div className="p-4 flex flex-col flex-grow">
                <div className="text-xs text-emerald-600 font-semibold uppercase mb-1">{product.category === 'device' ?
                    'Thiết bị' : product.category}</div>
                <h3 className="font-bold text-gray-800 mb-2 line-clamp-2 min-h-[48px]">{product.name}</h3>

                {/* Specs summary */}
                <div className="flex flex-wrap gap-1 mb-3">
                    {product.specs.slice(0, 2).map((spec, idx) => (
                    <span key={idx} className="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded">
              {spec}
            </span>
                    ))}
                </div>

                <div className="flex items-center mb-4">
                    {[...Array(5)].map((_, i) => (
                    <Star key={i} className={`w-3 h-3 ${i < Math.floor(product.rating)
                        ? 'text-yellow-400 fill-yellow-400' : 'text-gray-300' }`} />
                    ))}
                    <span className="text-xs text-gray-400 ml-2">({Math.floor(Math.random() * 50) + 1} đánh giá)</span>
                </div>

                <div className="mt-auto">
                    <div className="flex items-end space-x-2 mb-3">
                        <span className="text-red-600 font-bold text-lg">
              {product.price.toLocaleString('vi-VN')}đ
            </span>
                        {product.oldPrice && (
                        <span className="text-gray-400 text-sm line-through decoration-red-400">
                {product.oldPrice.toLocaleString('vi-VN')}đ
              </span>
                        )}
                    </div>

                    <button
            onClick={() => onAddToCart(product)}
            className="w-full bg-emerald-600 hover:bg-emerald-700 text-white py-2 rounded-lg font-semibold flex items-center justify-center gap-2 transition-colors"
          >
            <ShoppingCart className="w-4 h-4" />
            Thêm vào giỏ
          </button>
                </div>
            </div>
        </div>
        );
        };

        // --- Views ---

        const HomeView = ({ setPage, onAddToCart }: { setPage: (p: Page) => void; onAddToCart: (p: Product) => void })
        => {
        const featuredProducts = ALL_PRODUCTS.filter(p => p.id % 5 === 0).slice(0, 8); // Lấy ngẫu nhiên vài sản phẩm

        return (
        <div className="space-y-12">
            {/* Hero Banner */}
            <section className="relative bg-emerald-900 text-white overflow-hidden">
                <div
                    className="absolute inset-0 opacity-20 bg-[url('https://images.unsplash.com/photo-1519389950473-47ba0277781c?auto=format&fit=crop&w=1920&q=80')] bg-cover bg-center">
                </div>
                <div className="container mx-auto px-4 py-20 md:py-32 relative z-10">
                    <div className="max-w-2xl">
                        <span className="inline-block bg-red-600 text-white text-xs font-bold px-3 py-1 rounded-full mb-4 animate-pulse">
              KHUYẾN MÃI MÙA HÈ
            </span>
                        <h2 className="text-4xl md:text-6xl font-bold mb-6 leading-tight">
                            Công Nghệ Đỉnh Cao <br/>
                            <span className="text-emerald-400">Nâng Tầm Cuộc Sống</span>
                        </h2>
                        <p className="text-lg text-gray-300 mb-8">
                            Vietech Green mang đến các giải pháp Laptop, PC, Máy in và Thiết bị văn phòng chính hãng với
                            giá tốt nhất thị trường.
                        </p>
                        <div className="flex flex-col sm:flex-row gap-4">
                            <button
                onClick={() => setPage('products')}
                className="bg-emerald-500 hover:bg-emerald-600 text-white px-8 py-3 rounded-lg font-bold text-lg transition-transform hover:-translate-y-1 shadow-lg shadow-emerald-500/30"
              >
                Xem Sản Phẩm
              </button>
                            <button
                onClick={() => setPage('contact')}
                className="bg-transparent border-2 border-white hover:bg-white hover:text-emerald-900 text-white px-8 py-3 rounded-lg font-bold text-lg transition-colors"
              >
                Liên Hệ Ngay
              </button>
                        </div>
                    </div>
                </div>
            </section>

            {/* Benefits */}
            <section className="container mx-auto px-4">
                <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                    {[
                    { icon: CheckCircle, title: "Sản phẩm chính hãng", desc: "Cam kết 100% hàng chính hãng, bảo hành đầy
                    đủ." },
                    { icon: TruckIcon, title: "Giao hàng toàn quốc", desc: "Vận chuyển nhanh chóng, an toàn đến tận tay
                    bạn." },
                    { icon: HeadsetIcon, title: "Hỗ trợ 24/7", desc: "Đội ngũ kỹ thuật viên giàu kinh nghiệm luôn sẵn
                    sàng." }
                    ].map((item, idx) => (
                    <div key={idx}
                        className="bg-white p-6 rounded-xl shadow-sm border border-emerald-100 flex items-start space-x-4">
                        <div className="bg-emerald-100 p-3 rounded-lg text-emerald-600">
                            <item.icon className="w-6 h-6" />
                        </div>
                        <div>
                            <h3 className="font-bold text-lg mb-2">{item.title}</h3>
                            <p className="text-gray-500 text-sm">{item.desc}</p>
                        </div>
                    </div>
                    ))}
                </div>
            </section>

            {/* Featured Products */}
            <section className="container mx-auto px-4 pb-12">
                <div className="flex justify-between items-end mb-8">
                    <div>
                        <h2 className="text-3xl font-bold text-gray-800">Sản Phẩm Nổi Bật</h2>
                        <div className="h-1 w-20 bg-emerald-500 mt-2 rounded-full"></div>
                    </div>
                    <button onClick={() => setPage('products')} className="text-emerald-600 font-semibold flex items-center hover:underline">
            Xem tất cả <ArrowRight className="w-4 h-4 ml-1" />
          </button>
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                    {featuredProducts.map(p => (
                    <ProductCard key={p.id} product={p} onAddToCart={onAddToCart} />
                    ))}
                </div>
            </section>

            {/* Banner Sales */}
            <section className="bg-emerald-50 py-16">
                <div className="container mx-auto px-4 text-center">
                    <h2 className="text-3xl md:text-4xl font-bold text-emerald-800 mb-4">Đối Tác Của Vietech Green</h2>
                    <p className="text-gray-600 max-w-2xl mx-auto mb-12">
                        Chúng tôi tự hào là đối tác chiến lược của các thương hiệu công nghệ hàng đầu thế giới.
                    </p>
                    <div
                        className="flex flex-wrap justify-center gap-8 md:gap-16 opacity-60 grayscale hover:grayscale-0 transition-all duration-500">
                        {['DELL', 'HP', 'ASUS', 'CANON', 'LOGITECH'].map(brand => (
                        <div key={brand}
                            className="text-2xl font-black text-gray-400 hover:text-emerald-600 cursor-default">{brand}
                        </div>
                        ))}
                    </div>
                </div>
            </section>
        </div>
        );
        };

        const ProductsView = ({ onAddToCart }: { onAddToCart: (p: Product) => void }) => {
        const [filter, setFilter] = useState<Category | 'all'>('all');

            const categories = [
            { id: 'all', label: 'Tất cả', icon: Monitor }, // Generic icon for all
            { id: 'laptop', label: 'Laptop', icon: LaptopIcon },
            { id: 'pc', label: 'PC Đồng Bộ', icon: Monitor },
            { id: 'printer', label: 'Máy in', icon: Printer },
            { id: 'device', label: 'Thiết bị', icon: HardDrive },
            ];

            const filteredProducts = filter === 'all'
            ? ALL_PRODUCTS
            : ALL_PRODUCTS.filter(p => p.category === filter);

            return (
            <div className="container mx-auto px-4 py-8">
                {/* Page Title */}
                <div className="text-center mb-10">
                    <h2 className="text-3xl font-bold text-gray-800">Danh Mục Sản Phẩm</h2>
                    <p className="text-gray-500 mt-2">Lựa chọn thiết bị phù hợp nhất với nhu cầu của bạn</p>
                </div>

                {/* Filters */}
                <div className="flex flex-wrap justify-center gap-4 mb-10">
                    {categories.map((cat) => (
                    <button
            key={cat.id}
            onClick={() => setFilter(cat.id as Category | 'all')}
            className={`flex items-center space-x-2 px-6 py-3 rounded-full border transition-all ${
              filter === cat.id
                ? 'bg-emerald-600 text-white border-emerald-600 shadow-lg scale-105'
                : 'bg-white text-gray-600 border-gray-200 hover:border-emerald-500 hover:text-emerald-500'
            }`}
          >
            <cat.icon className="w-5 h-5" />
            <span className="font-semibold">{cat.label}</span>
          </button>
                    ))}
                </div>

                {/* Product Grid */}
                <div className="mb-4 text-gray-500 text-sm">
                    Hiển thị {filteredProducts.length} sản phẩm
                </div>
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                    {filteredProducts.map(p => (
                    <ProductCard key={p.id} product={p} onAddToCart={onAddToCart} />
                    ))}
                </div>
            </div>
            );
            };

            const AboutView = () => {
            return (
            <div className="bg-white">
                {/* Intro Header */}
                <div className="bg-emerald-50 py-16">
                    <div className="container mx-auto px-4 text-center">
                        <h1 className="text-4xl font-bold text-emerald-800 mb-4">Về Vietech Green</h1>
                        <p className="text-xl text-gray-600 max-w-3xl mx-auto">
                            Công ty TNHH Vietech Green - Tiên phong trong lĩnh vực cung cấp giải pháp công nghệ xanh và
                            bền vững.
                        </p>
                    </div>
                </div>

                {/* Main Content */}
                <div className="container mx-auto px-4 py-16">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
                        <div className="space-y-6">
                            <h2 className="text-3xl font-bold text-gray-800">Câu chuyện của chúng tôi</h2>
                            <p className="text-gray-600 leading-relaxed">
                                Thành lập với sứ mệnh mang công nghệ đến gần hơn với mọi người, Vietech Green không chỉ
                                bán sản phẩm, chúng tôi cung cấp giải pháp. Chúng tôi tin rằng công nghệ là chìa khóa để
                                tối ưu hóa hiệu suất làm việc và nâng cao chất lượng cuộc sống.
                            </p>
                            <p className="text-gray-600 leading-relaxed">
                                Với đội ngũ kỹ sư và tư vấn viên giàu kinh nghiệm, chúng tôi cam kết mang đến những sản
                                phẩm chất lượng cao nhất từ các thương hiệu hàng đầu thế giới như Dell, HP, Asus,
                                Canon...
                            </p>

                            <div className="grid grid-cols-2 gap-6 mt-8">
                                <div className="border-l-4 border-emerald-500 pl-4">
                                    <div className="text-3xl font-bold text-emerald-600">10+</div>
                                    <div className="text-sm text-gray-500">Năm kinh nghiệm</div>
                                </div>
                                <div className="border-l-4 border-emerald-500 pl-4">
                                    <div className="text-3xl font-bold text-emerald-600">5000+</div>
                                    <div className="text-sm text-gray-500">Khách hàng hài lòng</div>
                                </div>
                            </div>
                        </div>
                        <div className="relative h-96 rounded-2xl overflow-hidden shadow-2xl">
                            <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=800&q=80" alt="Team" className="absolute inset-0 w-full h-full object-cover" />
                        </div>
                    </div>

                    {/* Vision/Mission */}
                    <div className="mt-20 grid grid-cols-1 md:grid-cols-3 gap-8">
                        <div className="p-8 bg-gray-50 rounded-xl text-center hover:bg-emerald-50 transition-colors">
                            <div
                                className="w-16 h-16 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mx-auto mb-6">
                                <Star className="w-8 h-8" />
                            </div>
                            <h3 className="text-xl font-bold mb-3">Tầm Nhìn</h3>
                            <p className="text-gray-600">Trở thành nhà cung cấp giải pháp IT hàng đầu Việt Nam với hệ
                                sinh thái xanh.</p>
                        </div>
                        <div className="p-8 bg-gray-50 rounded-xl text-center hover:bg-emerald-50 transition-colors">
                            <div
                                className="w-16 h-16 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mx-auto mb-6">
                                <HeartIcon className="w-8 h-8" />
                            </div>
                            <h3 className="text-xl font-bold mb-3">Sứ Mệnh</h3>
                            <p className="text-gray-600">Tối ưu hóa quy trình làm việc của doanh nghiệp thông qua công
                                nghệ hiện đại.</p>
                        </div>
                        <div className="p-8 bg-gray-50 rounded-xl text-center hover:bg-emerald-50 transition-colors">
                            <div
                                className="w-16 h-16 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mx-auto mb-6">
                                <ShieldCheckIcon className="w-8 h-8" />
                            </div>
                            <h3 className="text-xl font-bold mb-3">Giá Trị Cốt Lõi</h3>
                            <p className="text-gray-600">Uy tín - Tận tâm - Chuyên nghiệp - Sáng tạo.</p>
                        </div>
                    </div>
                </div>
            </div>
            );
            };

            const ContactView = () => {
            return (
            <div className="container mx-auto px-4 py-12">
                <h1 className="text-3xl font-bold text-center text-gray-800 mb-12">Liên Hệ Với Chúng Tôi</h1>

                <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
                    {/* Contact Info */}
                    <div className="space-y-8">
                        <h2 className="text-2xl font-semibold text-emerald-700">Thông tin liên lạc</h2>
                        <p className="text-gray-600">
                            Hãy liên hệ với Vietech Green để được tư vấn miễn phí về các giải pháp công nghệ cho doanh
                            nghiệp và cá nhân.
                        </p>

                        <div className="space-y-6">
                            <div className="flex items-start space-x-4">
                                <div className="bg-emerald-100 p-3 rounded-full text-emerald-600">
                                    <MapPin className="w-6 h-6" />
                                </div>
                                <div>
                                    <h4 className="font-bold text-gray-800">Địa chỉ</h4>
                                    <p className="text-gray-600">Số 123, Đường Công Nghệ, Quận Cầu Giấy, Thành phố Hà
                                        Nội, Việt Nam.</p>
                                </div>
                            </div>

                            <div className="flex items-start space-x-4">
                                <div className="bg-emerald-100 p-3 rounded-full text-emerald-600">
                                    <Phone className="w-6 h-6" />
                                </div>
                                <div>
                                    <h4 className="font-bold text-gray-800">Điện thoại</h4>
                                    <p className="text-gray-600">Hotline: 1900 xxxx</p>
                                    <p className="text-gray-600">Kinh doanh: 0912 xxx xxx</p>
                                </div>
                            </div>

                            <div className="flex items-start space-x-4">
                                <div className="bg-emerald-100 p-3 rounded-full text-emerald-600">
                                    <Mail className="w-6 h-6" />
                                </div>
                                <div>
                                    <h4 className="font-bold text-gray-800">Email</h4>
                                    <p className="text-gray-600">contact@vietechgreen.vn</p>
                                    <p className="text-gray-600">support@vietechgreen.vn</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Contact Form */}
                    <div className="bg-white p-8 rounded-xl shadow-lg border border-gray-100">
                        <h2 className="text-2xl font-semibold text-gray-800 mb-6">Gửi tin nhắn</h2>
                        <form className="space-y-4" onSubmit={(e)=> e.preventDefault()}>
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label className="block text-sm font-medium text-gray-700 mb-1">Họ tên</label>
                                    <input type="text" className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-transparent outline-none" placeholder="Nguyễn Văn A" />
                                </div>
                                <div>
                                    <label className="block text-sm font-medium text-gray-700 mb-1">Số điện thoại</label>
                                    <input type="tel" className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-transparent outline-none" placeholder="0912..." />
                                </div>
                            </div>
                            <div>
                                <label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
                                <input type="email" className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-transparent outline-none" placeholder="email@example.com" />
                            </div>
                            <div>
                                <label className="block text-sm font-medium text-gray-700 mb-1">Nội dung</label>
                                <textarea rows={4} className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-transparent outline-none" placeholder="Bạn cần tư vấn sản phẩm gì?"></textarea>
                            </div>
                            <button className="w-full bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-3 rounded-lg transition-colors shadow-lg">
              Gửi Tin Nhắn
            </button>
                        </form>
                    </div>
                </div>
            </div>
            );
            };

            const CartModal = ({ isOpen, onClose, items, onRemove }: { isOpen: boolean; onClose: () => void; items:
            CartItem[]; onRemove: (id: number) => void }) => {
            if (!isOpen) return null;
            const total = items.reduce((sum, item) => sum + (item.price * item.quantity), 0);

            return (
            <div className="fixed inset-0 z-[60] flex justify-end">
                <div className="absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity" onClick={onClose}>
                </div>
                <div
                    className="relative w-full max-w-md bg-white h-full shadow-2xl flex flex-col animate-slide-in-right">
                    <div className="p-4 border-b flex justify-between items-center bg-emerald-50">
                        <h2 className="text-xl font-bold text-emerald-800">Giỏ hàng của bạn</h2>
                        <button onClick={onClose} className="p-2 hover:bg-gray-200 rounded-full">
            <X className="w-6 h-6 text-gray-600" />
          </button>
                    </div>

                    <div className="flex-1 overflow-y-auto p-4 space-y-4">
                        {items.length === 0 ? (
                        <div className="flex flex-col items-center justify-center h-full text-gray-500">
                            <ShoppingCart className="w-16 h-16 mb-4 text-gray-300" />
                            <p>Giỏ hàng đang trống</p>
                        </div>
                        ) : (
                        items.map(item => (
                        <div key={item.id} className="flex gap-4 border-b pb-4">
                            <img src={item.image} alt={item.name} className="w-20 h-20 object-cover rounded-md border" />
                            <div className="flex-1">
                                <h4 className="font-semibold text-sm line-clamp-2">{item.name}</h4>
                                <div className="text-red-600 font-bold text-sm my-1">
                                    {item.price.toLocaleString('vi-VN')}đ</div>
                                <div className="flex justify-between items-center text-sm text-gray-500">
                                    <span>SL: {item.quantity}</span>
                                    <button onClick={() => onRemove(item.id)} className="text-red-500 hover:text-red-700">Xóa</button>
                                </div>
                            </div>
                        </div>
                        ))
                        )}
                    </div>

                    <div className="p-4 border-t bg-gray-50">
                        <div className="flex justify-between items-center mb-4 text-lg font-bold">
                            <span>Tổng tiền:</span>
                            <span className="text-red-600">{total.toLocaleString('vi-VN')}đ</span>
                        </div>
                        <button className="w-full bg-emerald-600 hover:bg-emerald-700 text-white py-3 rounded-lg font-bold transition-colors">
            Tiến hành thanh toán
          </button>
                    </div>
                </div>
            </div>
            );
            };

            // Helper components for Icons used only in JSX logic above
            const LaptopIcon = ({ className }: {className?: string}) =>
            <Cpu className={className} />;
            const TruckIcon = ({ className }: {className?: string}) => <svg xmlns="http://www.w3.org/2000/svg"
                width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
                strokeLinecap="round" strokeLinejoin="round" className={className}>
                <rect width="16" height="13" x="1" y="3" rx="2" />
                <polygon points="16 8 20 8 23 11 23 16 16 16 16 8" />
                <circle cx="5.5" cy="18.5" r="2.5" />
                <circle cx="18.5" cy="18.5" r="2.5" />
            </svg>;
            const HeadsetIcon = ({ className }: {className?: string}) => <svg xmlns="http://www.w3.org/2000/svg"
                width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
                strokeLinecap="round" strokeLinejoin="round" className={className}>
                <path
                    d="M3 11h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5Zm0 0a9 9 0 1 1 18 0m0 0v5a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3Z" />
                <path d="M21 16v2a4 4 0 0 1-4 4h-5" />
            </svg>;
            const HeartIcon = ({ className }: {className?: string}) => <svg xmlns="http://www.w3.org/2000/svg"
                width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
                strokeLinecap="round" strokeLinejoin="round" className={className}>
                <path
                    d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
            </svg>;
            const ShieldCheckIcon = ({ className }: {className?: string}) => <svg xmlns="http://www.w3.org/2000/svg"
                width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
                strokeLinecap="round" strokeLinejoin="round" className={className}>
                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" />
                <path d="m9 12 2 2 4-4" />
            </svg>;


            // --- Main App ---

            const App = () => {
            const [activePage, setActivePage] = useState<Page>('home');
                const [cart, setCart] = useState<CartItem[]>([]);
                    const [isCartOpen, setIsCartOpen] = useState(false);

                    // Load cart from local storage simulation
                    useEffect(() => {
                    // In a real app, load from localStorage here
                    }, []);

                    const addToCart = (product: Product) => {
                    setCart(prev => {
                    const existing = prev.find(item => item.id === product.id);
                    if (existing) {
                    return prev.map(item =>
                    item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item
                    );
                    }
                    return [...prev, { ...product, quantity: 1 }];
                    });
                    setIsCartOpen(true); // Open cart to confirm
                    };

                    const removeFromCart = (id: number) => {
                    setCart(prev => prev.filter(item => item.id !== id));
                    };

                    const cartCount = cart.reduce((acc, item) => acc + item.quantity, 0);

                    return (
                    <div className="min-h-screen flex flex-col font-sans">
                        <Header cartCount={cartCount} activePage={activePage} setPage={(p)=> {
                            window.scrollTo(0,0);
                            setActivePage(p);
                            }}
                            toggleCart={() => setIsCartOpen(true)}
                            />

                            <main className="flex-grow">
                                {activePage === 'home' && <HomeView setPage={(p)=> { window.scrollTo(0,0);
                                    setActivePage(p); }} onAddToCart={addToCart} />}
                                    {activePage === 'products' &&
                                    <ProductsView onAddToCart={addToCart} />}
                                    {activePage === 'about' &&
                                    <AboutView />}
                                    {activePage === 'contact' &&
                                    <ContactView />}
                            </main>

                            <Footer />

                            <CartModal isOpen={isCartOpen} onClose={()=> setIsCartOpen(false)}
                                items={cart}
                                onRemove={removeFromCart}
                                />
                    </div>
                    );
                    };

                    const root = createRoot(document.getElementById("root")!);
                    root.render(
                    <App />);