const { useState, useEffect, useRef } = React;

const CATS = ["Tudo", "Uniformes", "Treino", "Acessórios", "Promoções"];

const HERO_SLIDES = [
  { img: "BANNER1.jpeg", cat: "Uniformes" },
  { img: "BANNER2.jpeg", cat: "Treino" }
];

const darkenColor = (hex, percent) => {
  let num = parseInt(hex.replace("#",""), 16),
      amt = Math.round(2.55 * percent),
      R = (num >> 16) + amt,
      G = (num >> 8 & 0x00FF) + amt,
      B = (num & 0x0000FF) + amt;
  return "#" + (0x1000000 + (R<255?R<0?0:R:255)*0x10000 + (G<255?G<0?0:G:255)*0x100 + (B<255?B<0?0:B:255)).toString(16).slice(1);
};

const Icon = ({ name, size = 20 }) => {
  const icons = {
    search: <><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></>,
    heart: <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>,
    shoppingBag: <><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/></>,
    menu: <><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></>,
    x: <><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></>,
    minus: <line x1="5" y1="12" x2="19" y2="12"/>,
    plus: <><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></>,
    trash: <><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></>,
    user: <><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></>,
    star: <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>,
    fileText: <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></>,
    whatsapp: <path d="M12.012 2c-5.506 0-9.989 4.478-9.99 9.984a9.96 9.96 0 0 0 1.335 4.963L2 22l5.233-1.372a9.948 9.948 0 0 0 4.78 1.217h.004c5.502 0 9.985-4.479 9.986-9.987a9.987 9.987 0 0 0-9.99-9.987m4.57 14.113c-.25.707-1.405 1.31-1.988 1.393-.503.072-1.16.13-3.4-.797-2.865-1.185-4.69-4.108-4.833-4.298-.143-.19-1.143-1.52-1.143-2.9 0-1.38.713-2.057 1.01-2.361.25-.256.666-.384 1.06-.384.127 0 .243.006.348.01.306.014.46.033.662.518.25.6.86 2.086.934 2.238.074.152.124.33.024.528-.1.198-.15.33-.298.502-.148.17-.31.383-.443.513-.148.14-.302.294-.13.589.171.295.762 1.257 1.636 2.033.91.81 1.68 1.061 2.022 1.202.342.14.542.118.746-.118.204-.236.877-1.019 1.11-1.37.232-.352.464-.294.78-.176.315.117 2.002.94 2.344 1.11.341.171.57.256.653.397.085.14.085.814-.165 1.52" fill="currentColor"/>,
    truck: <><rect x="1" y="3" width="15" height="13"/><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"/></>,
    copy: <><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></>,
    check: <polyline points="20 6 9 17 4 12"/>,
    arrowLeft: <><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></>,
    arrowRight: <><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></>,
    ticket: <><path d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z"/><path d="M9 5v14"/><path d="M15 5v14"/></>,
    mail: <><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></>,
    phone: <><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></>,
    users: <><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></>,
    shield: <><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></>,
    hanger: <><path d="M2 19h20M12 5V2m0 3a3 3 0 0 1 3 3v2H9V8a3 3 0 0 1 3-3zm-6 9l-4 5h20l-4-5H6z"/></>
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ display: 'inline-block', verticalAlign: 'middle' }}>
      {icons[name] || null}
    </svg>
  );
};

const AnnouncementBar = ({ text }) => (
  <div className="announcement">
    <div className="marquee-track">
      {[...Array(6)].map((_, i) => (
        <span key={i} className="marquee-item">
          <Icon name="star" size={13} />
          <span>{text}</span>
        </span>
      ))}


          
    </div>
  </div>
);

const Header = ({ cartCount, onCartClick, onMenuToggle, activeCat, onCatSelect, onSearchChange, searchVal, onUserClick, loggedInUser, categories = ["Uniformes", "Treino", "Acessórios"] }) => (
  <header className="header">
    <div className="header-inner">
      <button className="menu-btn" onClick={onMenuToggle}>
        <Icon name="menu" size={24} />
      </button>

      <a className="logo" onClick={() => onCatSelect("Tudo")} style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
        <img src="logo.png" alt="Genio Imports Logo" className="logo-img" style={{ width: '44px', height: '44px', objectFit: 'contain' }} />
        <div className="logo-text" style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
          <span className="logo-main" style={{ lineHeight: 1 }}>GENIO<span style={{ color: 'var(--accent-gold)' }}>IMPORTS</span></span>
        </div>
      </a>

      <nav className="header-nav">
        <button className={`nav-link ${activeCat === "Tudo" ? "active" : ""}`} onClick={() => onCatSelect("Tudo")}>Tudo</button>
        {categories.map(c => (
          <button key={c} className={`nav-link ${activeCat === c ? "active" : ""}`} onClick={() => onCatSelect(c)}>{c}</button>
        ))}
        <button className={`nav-link ${activeCat === "Lançamentos" ? "active" : ""}`} onClick={() => onCatSelect("Lançamentos")}>Lançamentos</button>
        <button className={`nav-link ${activeCat === "Promoções" ? "active" : ""}`} onClick={() => onCatSelect("Promoções")}>Promoções</button>
      </nav>

      <div className="header-icons">
        <button className="icon-btn" onClick={onUserClick} title="Minha Conta">
          <Icon name="user" size={22} />
          {loggedInUser && <span className="badge" style={{ background: '#25D366', top: 0, right: 0, width: 8, height: 8 }} />}
        </button>
        <button className="icon-btn" onClick={onCartClick}>
          <Icon name="shoppingBag" size={22} />
          {cartCount > 0 && <span className="badge">{cartCount}</span>}
        </button>
      </div>
    </div>
  </header>
);

const HeroCarousel = ({ onCatSelect, banners: propBanners }) => {
  const [current, setCurrent] = useState(0);
  const [fade, setFade] = useState(true);
  const [slides, setSlides] = useState(HERO_SLIDES);
  const timerRef = useRef(null);

  useEffect(() => {
    if (propBanners && propBanners.length > 0) {
      setSlides(propBanners.map(b => ({ img: b.image, cat: b.ctaLink || "Tudo", title: b.title, subtitle: b.subtitle, ctaText: b.ctaText })));
    }
  }, [propBanners]);

  const startTimer = () => {
    timerRef.current = setInterval(() => {
      setFade(false);
      setTimeout(() => {
        setCurrent(c => (c + 1) % slides.length);
        setFade(true);
      }, 400);
    }, 5500);
  };

  useEffect(() => {
    startTimer();
    return () => clearInterval(timerRef.current);
  }, [slides.length]);

  const handleDotClick = (index) => {
    clearInterval(timerRef.current);
    setFade(false);
    setTimeout(() => {
      setCurrent(index);
      setFade(true);
      startTimer();
    }, 400);
  };

  return (
    <div className="hero">
      <div className="hero-slider">
        {slides.map((slide, i) => (
          <div key={i} className={`hero-slide ${i === current ? 'active' : ''}`} style={{ transition: 'opacity 0.4s ease' }}>
            <div className="hero-slide-bg-blur" style={{ backgroundImage: `url(${slide.img})` }}></div>
            <img src={slide.img} alt="" className="hero-bg-img" />
            <div className="hero-overlay"></div>
            {slide.title && (
              <div style={{ position: 'absolute', bottom: 80, left: 0, right: 0, textAlign: 'center', zIndex: 2 }}>
                <h2 style={{ color: '#fff', fontSize: 28, fontWeight: 800, textShadow: '0 2px 12px rgba(0,0,0,0.6)' }}>{slide.title}</h2>
                {slide.subtitle && <p style={{ color: 'rgba(255,255,255,0.9)', fontSize: 16, marginTop: 6 }}>{slide.subtitle}</p>}
              </div>
            )}
          </div>
        ))}
      </div>
      <div className="hero-dots">
        {slides.map((_, i) => (
          <button
            key={i}
            onClick={() => handleDotClick(i)}
            className={`dot ${i === current ? 'dot-active' : ''}`}
          />
        ))}
        </div>
      </div>
  );
};

const ProductCard = ({ product, onAdd, onQuickView, isUserAtacado }) => {
  const [selectedSize, setSelectedSize] = useState(null);
  const [wiggle, setWiggle] = useState(false);
  
  const discount = product.originalPrice ? Math.round((1 - product.price / product.originalPrice) * 100) : 0;
  
  const activePrice = isUserAtacado ? product.atacadoPrice : product.price;

  const handleAddClick = (e) => {
    e.stopPropagation();
    if (product.sizes && product.sizes.length > 0 && !selectedSize && product.sizes[0] !== "Único") {
      setWiggle(true);
      setTimeout(() => setWiggle(false), 500);
      onAdd(null); // Triggers missing size validation in main
      return;
    }
    onAdd({ ...product, selectedSize });
  };

  return (
    <div className="card">
      <div className="card-img-wrap" onClick={() => onQuickView(product)}>
        <img src={product.img} alt={product.name} className="card-img" />
        {product.tag && (
          <span className="tag" style={{ background: product.tag === "Sale" || product.tag === "Oferta" ? "#C04040" : "var(--accent-gold)" }}>{product.tag}</span>
        )}
        {discount > 0 && !isUserAtacado && (
          <span className="type-tag" style={{ background: "#C04040" }}>-{discount}%</span>
        )}
        {isUserAtacado && (
          <span className="type-tag" style={{ background: "#25D366", color: "#000", fontWeight: 900 }}>ATACADO</span>
        )}
      </div>
      <div className="card-body">
        <p className="card-cat">{product.cat}</p>
        <h3 className="card-name" onClick={() => onQuickView(product)}>{product.name}</h3>
        
        <div className="card-prices">
          <span className="card-price">R$ {activePrice.toFixed(2).replace('.', ',')}</span>
          {!isUserAtacado && product.originalPrice && (
            <span className="card-old-price">R$ {product.originalPrice.toFixed(2).replace('.', ',')}</span>
          )}
          {isUserAtacado && (
            <span className="card-old-price" style={{ textDecoration: 'none', color: '#25D366' }}>P. Atacado</span>
          )}
        </div>

        {product.sizes && product.sizes.length > 0 && product.sizes[0] !== "Único" && (
          <div className={`sizes-row ${wiggle ? 'size-btn-error' : ''}`}>
            {product.sizes.map(size => (
              <button
                key={size}
                onClick={(e) => { e.stopPropagation(); setSelectedSize(size === selectedSize ? null : size); }}
                className={`size-btn ${selectedSize === size ? 'size-btn-active' : ''}`}
              >
                {size}
              </button>
            ))}
          </div>
        )}

        <div className="card-actions">
          <button className="card-view-btn" onClick={() => onQuickView(product)}>Ver Detalhes</button>
          <button className="card-add-btn" onClick={handleAddClick}>Adicionar</button>
        </div>
      </div>
    </div>
  );
};

const SizeGuideModal = ({ isOpen, onClose }) => {
  if (!isOpen) return null;

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="qv-modal" style={{ maxWidth: 500 }} onClick={e => e.stopPropagation()}>
        <button className="qv-close-btn" onClick={onClose}><Icon name="x" /></button>
        <div className="qv-content" style={{ padding: 32 }}>
          <h3 className="section-title" style={{ fontSize: 24, textAlign: 'center', marginBottom: 6 }}>Tabela de Medidas</h3>
          <div className="section-line" style={{ width: 40 }}></div>
          <p style={{ color: 'var(--text-muted)', fontSize: 13, textAlign: 'center', marginBottom: 20 }}>
            Utilize uma fita métrica para comparar as medidas de uma camisa sua com as medidas da nossa tabela oficial.
          </p>
          <table className="guide-table">
            <thead>
              <tr>
                <th>Tamanho</th>
                <th>Largura (cm)</th>
                <th>Altura (cm)</th>
                <th>Manga (cm)</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><b>P</b></td>
                <td>50</td>
                <td>69</td>
                <td>22</td>
              </tr>
              <tr>
                <td><b>M</b></td>
                <td>52</td>
                <td>71</td>
                <td>23</td>
              </tr>
              <tr>
                <td><b>G</b></td>
                <td>54</td>
                <td>73</td>
                <td>24</td>
              </tr>
              <tr>
                <td><b>GG</b></td>
                <td>57</td>
                <td>76</td>
                <td>25</td>
              </tr>
              <tr>
                <td><b>XG</b></td>
                <td>60</td>
                <td>79</td>
                <td>26</td>
              </tr>
            </tbody>
          </table>
          <button className="checkout-trigger-btn" style={{ marginTop: 24 }} onClick={onClose}>Fechar Guia</button>
        </div>
      </div>
    </div>
  );
};

const QuickViewModal = ({ product, isOpen, onClose, onAdd, onSizeGuideOpen, isUserAtacado }) => {
  if (!isOpen || !product) return null;
  
  const [selectedSize, setSelectedSize] = useState(null);
  const [customEnabled, setCustomEnabled] = useState(false);
  const [customName, setCustomName] = useState("");
  const [customNumber, setCustomNumber] = useState("");
  const [wiggle, setWiggle] = useState(false);

  const activePrice = isUserAtacado ? product.atacadoPrice : product.price;
  const isJersey = product.cat === "Uniformes" || product.cat === "Treino";

  const handleAddClick = () => {
    if (product.sizes && product.sizes.length > 0 && !selectedSize && product.sizes[0] !== "Único") {
      setWiggle(true);
      setTimeout(() => setWiggle(false), 500);
      onAdd(null); // Triggers main toast error
      return;
    }

    onAdd({
      ...product,
      selectedSize: selectedSize || (product.sizes[0] === "Único" ? "Único" : null),
      personalized: customEnabled && (customName || customNumber),
      customName: customEnabled ? customName.toUpperCase().slice(0, 12) : "",
      customNumber: customEnabled ? customNumber.slice(0, 2) : ""
    });
    onClose();
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="qv-modal" onClick={e => e.stopPropagation()}>
        <button className="qv-close-btn" onClick={onClose}><Icon name="x" /></button>
        <div className="qv-grid">
          <div className="qv-img-container">
            <img src={product.img} alt={product.name} className="qv-img" />
            {product.tag && (
              <span className="tag" style={{ background: product.tag === "Sale" || product.tag === "Oferta" ? "#C04040" : "var(--accent-gold)" }}>{product.tag}</span>
            )}
          </div>
          <div className="qv-content">
            <p className="qv-cat">{product.cat}</p>
            <h2 className="qv-name">{product.name}</h2>
            
            <div className="qv-prices">
              <span className="qv-price">R$ {activePrice.toFixed(2).replace('.', ',')}</span>
              {!isUserAtacado && product.originalPrice && (
                <span className="card-old-price" style={{ fontSize: 16 }}>R$ {product.originalPrice.toFixed(2).replace('.', ',')}</span>
              )}
              {isUserAtacado && (
                <span className="card-old-price" style={{ textDecoration: 'none', color: '#25D366', fontSize: 15 }}>Atacado Ativo</span>
              )}
            </div>

            <p className="qv-desc">{product.desc}</p>

            {product.sizes && product.sizes.length > 0 && product.sizes[0] !== "Único" && (
              <div style={{ marginBottom: 20 }}>
                <div className="size-guide-row">
                  <span style={{ fontSize: 12, fontWeight: 700, textTransform: 'uppercase' }}>Tamanho</span>
                  <button className="size-guide-btn" onClick={onSizeGuideOpen}>Guia de Tamanhos</button>
                </div>
                <div className={`sizes-row ${wiggle ? 'size-btn-error' : ''}`}>
                  {product.sizes.map(size => (
                    <button
                      key={size}
                      onClick={() => setSelectedSize(size === selectedSize ? null : size)}
                      className={`size-btn ${selectedSize === size ? 'size-btn-active' : ''}`}
                      style={{ height: 34, minWidth: 38 }}
                    >
                      {size}
                    </button>
                  ))}
                </div>
              </div>
            )}

            {isJersey && (
              <div className="personalization-box">
                <label className="pers-toggle">
                  <input
                    type="checkbox"
                    checked={customEnabled}
                    onChange={(e) => setCustomEnabled(e.target.checked)}
                  />
                  <span>Personalizar Camisa (+ R$ 25,00)</span>
                </label>
                {customEnabled && (
                  <div className="pers-inputs">
                    <div className="pers-input-group">
                      <label htmlFor="pers-name">Nome (Máx. 12 letras)</label>
                      <input
                        id="pers-name"
                        type="text"
                        className="pers-field"
                        placeholder="EX: NEYMAR JR"
                        value={customName}
                        maxLength={12}
                        onChange={(e) => setCustomName(e.target.value.toUpperCase())}
                      />
                    </div>
                    <div className="pers-input-group">
                      <label htmlFor="pers-number">Número</label>
                      <input
                        id="pers-number"
                        type="text"
                        className="pers-field"
                        placeholder="10"
                        value={customNumber}
                        maxLength={2}
                        onChange={(e) => setCustomNumber(e.target.value.replace(/\D/g, ""))}
                      />
                    </div>
                  </div>
                )}
              </div>
            )}

            <button className="checkout-trigger-btn" style={{ marginTop: 'auto' }} onClick={handleAddClick}>
              Adicionar ao Carrinho
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

const CartDrawer = ({ isOpen, items, onRemove, onUpdateQty, onClose, onCheckout, couponCode, onApplyCoupon, onRemoveCoupon, appliedCoupon, isUserAtacado }) => {
  const [couponInput, setCouponInput] = useState("");
  const totalItemsCount = items.reduce((acc, item) => acc + item.qty, 0);
  
  const isWholesaleActive = isUserAtacado || totalItemsCount >= 6;

  const baseSubtotal = items.reduce((acc, item) => {
    const itemUnitPrice = item.price + (item.personalized ? 25.00 : 0);
    return acc + (itemUnitPrice * item.qty);
  }, 0);

  const wholesaleDiscount = (totalItemsCount >= 6 && !isUserAtacado) ? baseSubtotal * 0.2 : 0;
  const subtotalAfterWholesale = baseSubtotal - wholesaleDiscount;

  let couponDiscount = 0;
  if (appliedCoupon) {
    if (appliedCoupon.code === "IMPORT10") {
      couponDiscount = subtotalAfterWholesale * 0.1;
    } else if (appliedCoupon.code === "BEMVINDO") {
      couponDiscount = subtotalAfterWholesale >= 100 ? 20.00 : 0;
    }
  }

  const finalTotal = subtotalAfterWholesale - couponDiscount;

  const handleApplyCoupon = () => {
    if (!couponInput.trim()) return;
    onApplyCoupon(couponInput.toUpperCase().trim());
    setCouponInput("");
  };

  return (
    <div className={`modal-overlay`} style={{ display: isOpen ? 'flex' : 'none', background: 'rgba(0,0,0,0.5)', justifyContent: 'flex-end', padding: 0 }} onClick={onClose}>
      <div className={`cart-drawer ${isOpen ? 'open' : ''}`} onClick={e => e.stopPropagation()}>
        <div className="cart-header">
          <h2>Sacola de Compras</h2>
          <button onClick={onClose} className="qv-close-btn" style={{ position: 'static' }}><Icon name="x" /></button>
        </div>

        {items.length === 0 ? (
          <div className="cart-empty">
            <Icon name="shoppingBag" size={54} />
            <p style={{ fontSize: 16, fontWeight: 600, color: 'var(--text-main)', marginTop: 8 }}>Sua sacola está vazia</p>
            <p style={{ fontSize: 13, color: 'var(--text-muted)', marginTop: 4 }}>Adicione itens oficiais do Import Atacado e Varejo para começar.</p>
          </div>
        ) : (
          <>
            <div className="cart-items">
              {items.map(item => {
                const itemUnitPrice = item.price + (item.personalized ? 25.00 : 0);
                return (
                  <div key={item.cartId} className="cart-item">
                    <img src={item.img} alt={item.name} className="cart-item-img" />
                    <div className="cart-item-info">
                      <p className="cart-item-name">{item.name}</p>
                      
                      <div className="cart-item-meta">
                        <span>Tam: {item.selectedSize}</span>
                        {item.personalized && (
                          <span style={{ borderColor: 'var(--accent-gold)', color: 'var(--accent-gold)' }}>
                            Personalizado: {item.customName} ({item.customNumber})
                          </span>
                        )}
                      </div>

                      <div className="cart-item-price-row">
                        <span className="cart-item-price">R$ {(itemUnitPrice * item.qty).toFixed(2).replace('.', ',')}</span>
                        
                        <div className="qty-row">
                          <button onClick={() => onUpdateQty(item.cartId, -1)} className="qty-btn"><Icon name="minus" size={12} /></button>
                          <span className="qty-num">{item.qty}</span>
                          <button onClick={() => onUpdateQty(item.cartId, 1)} className="qty-btn"><Icon name="plus" size={12} /></button>
                          <button onClick={() => onRemove(item.cartId)} className="remove-btn" style={{ marginLeft: 6 }}><Icon name="trash" size={14} /></button>
                        </div>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>

            <div className="cart-footer">
              {/* Wholesale info */}
              <div className="wholesale-progress-box">
                {isUserAtacado ? (
                  <p style={{ fontSize: 12, color: '#25d366', fontWeight: 600, margin: 0 }}>
                    🔥 CONTA ATACADO ATIVA: Preços reduzidos de atacado aplicados automaticamente!
                  </p>
                ) : (
                  <>
                    <div className="wp-text">
                      <span>Preço de Atacado (6+ peças)</span>
                      <span>{totalItemsCount}/6</span>
                    </div>
                    <div className="wp-bar">
                      <div className="wp-bar-fill" style={{ width: `${Math.min((totalItemsCount / 6) * 100, 100)}%` }}></div>
                    </div>
                    <p style={{ fontSize: 11, color: totalItemsCount >= 6 ? '#25d366' : 'var(--text-muted)', marginTop: 8, fontWeight: 600 }}>
                      {totalItemsCount >= 6 ? "🔥 Desconto de 20% aplicado em todos os produtos!" : `Adicione mais ${6 - totalItemsCount} peças para ativar 20% de desconto.`}
                    </p>
                  </>
                )}
              </div>

              {/* Coupon inputs */}
              {!appliedCoupon ? (
                <div className="coupon-section">
                  <input
                    type="text"
                    className="coupon-input"
                    placeholder="CUPOM DE DESCONTO"
                    value={couponInput}
                    onChange={(e) => setCouponInput(e.target.value)}
                  />
                  <button className="coupon-btn" onClick={handleApplyCoupon}>Aplicar</button>
                </div>
              ) : (
                <div className="coupon-applied-tag">
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                    <Icon name="ticket" size={14} />
                    <span>Cupom <b>{appliedCoupon.code}</b> ativo</span>
                  </div>
                  <button className="coupon-remove" onClick={onRemoveCoupon}>&times;</button>
                </div>
              )}

              {/* Price Breakdown */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginBottom: 14 }}>
                <div className="totals-row">
                  <span>Subtotal</span>
                  <span>R$ {baseSubtotal.toFixed(2).replace('.', ',')}</span>
                </div>
                {!isUserAtacado && totalItemsCount >= 6 && (
                  <div className="totals-row" style={{ color: '#25d366', fontWeight: 600 }}>
                    <span>Desconto Atacado (20%)</span>
                    <span>- R$ {wholesaleDiscount.toFixed(2).replace('.', ',')}</span>
                  </div>
                )}
                {appliedCoupon && couponDiscount > 0 && (
                  <div className="totals-row" style={{ color: '#25d366', fontWeight: 600 }}>
                    <span>Cupom ({appliedCoupon.code})</span>
                    <span>- R$ {couponDiscount.toFixed(2).replace('.', ',')}</span>
                  </div>
                )}
                <div className="totals-row final">
                  <span>Total</span>
                  <span style={{ color: 'var(--accent-gold)' }}>R$ {finalTotal.toFixed(2).replace('.', ',')}</span>
                </div>
              </div>

              <button className="checkout-trigger-btn" onClick={onCheckout}>Finalizar Compra</button>
            </div>
          </>
        )}
      </div>
    </div>
  );
};

const UserModal = ({ isOpen, onClose, loggedInUser, onLogin, onRegister, onLogout, notifications, orders, showToast, loadOrders }) => {

  const [isLoginView, setIsLoginView] = useState(true);
  const [activeTab, setActiveTab] = useState("profile"); // profile, notifications, orders

  useEffect(() => {
    if (isOpen && loggedInUser) {
      if (loadOrders) loadOrders();
    }
  }, [isOpen]);

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [name, setName] = useState("");
  const [phone, setPhone] = useState("");
  const [regType, setRegType] = useState("varejo"); // varejo, atacado

  const handlePhoneInputChange = (val) => {
    let numbers = val.replace(/\D/g, "");
    if (numbers.length > 11) numbers = numbers.slice(0, 11);
    let formatted = "";
    if (numbers.length > 0) {
      formatted = `(${numbers.slice(0, 2)}`;
      if (numbers.length > 2) formatted += `) ${numbers.slice(2, 7)}`;
      if (numbers.length > 7) formatted += `-${numbers.slice(7, 11)}`;
    }
    setPhone(formatted);
  };

  const handleLoginSubmit = (e) => {
    e.preventDefault();
    if (!email || !password) {
      showToast("Preencha todos os campos.", "error");
      return;
    }
    
    fetch('api.php?action=login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, password })
    })
    .then(r => {
      const contentType = r.headers.get("content-type");
      if (contentType && contentType.indexOf("application/json") !== -1) {
        return r.json();
      }
      throw new Error("API not JSON");
    })
    .then(data => {
      if (data.error) {
        showToast(data.error, "error");
      } else {
        if (data.status === 'Pendente') {
          showToast("Seu cadastro ainda está pendente de aprovação pelo administrador.", "error");
        } else if (data.status === 'Bloqueado') {
          showToast("Esta conta foi bloqueada pelo administrador.", "error");
        } else {
          onLogin(data);
          showToast(`Bem-vindo, ${data.name}!`);
          onClose();
        }
      }
    })
    .catch(() => {
      showToast("Erro de conexão com o servidor. Tente novamente.", "error");
    });
  };

  const handleRegisterSubmit = (e) => {
    e.preventDefault();
    if (!name || !email || !password || !phone) {
      showToast("Preencha todos os campos obrigatórios.", "error");
      return;
    }
    if (phone.length < 14) {
      showToast("Por favor, insira um WhatsApp válido com DDD.", "error");
      return;
    }

    fetch('api.php?action=register', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name, email, password, phone, type: regType })
    })
    .then(r => {
      const contentType = r.headers.get("content-type");
      if (contentType && contentType.indexOf("application/json") !== -1) {
        return r.json();
      }
      throw new Error("API not JSON");
    })
    .then(data => {
      if (data.error) {
        showToast(data.error, "error");
      } else {
        if (data.status === 'Aprovado') {
          showToast("Cadastro realizado com sucesso! Você já pode fazer login.");
        } else {
          showToast("Cadastro realizado! Aguarde a aprovação do admin para acessar.");
        }
        setIsLoginView(true);
        setEmail(email);
        setPassword("");
      }
    })
    .catch(() => {
      showToast("Erro de conexão com o servidor. Tente novamente.", "error");
    });
  };

  const [pushSupported, setPushSupported] = useState(false);
  const [pushSubscribed, setPushSubscribed] = useState(false);
  const [installAvailable, setInstallAvailable] = useState(false);
  const [deferredPrompt, setDeferredPrompt] = useState(null);

  const [selectedOrder, setSelectedOrder] = useState(null);

  useEffect(() => {
    if ('Notification' in window && 'serviceWorker' in navigator) {
      setPushSupported(true);
      navigator.serviceWorker.ready.then(reg => {
        reg.pushManager.getSubscription().then(sub => {
          if (sub) setPushSubscribed(true);
        });
      }).catch(() => {});
    }
    const handler = (e) => {
      e.preventDefault();
      setDeferredPrompt(e);
      setInstallAvailable(true);
    };
    window.addEventListener('beforeinstallprompt', handler);
    if (window.matchMedia('(display-mode: standalone)').matches) {
      setInstallAvailable(false);
    }
    window.addEventListener('appinstalled', () => {
      setDeferredPrompt(null);
      setInstallAvailable(false);
    });
    return () => window.removeEventListener('beforeinstallprompt', handler);
  }, []);

  const handleInstallPwa = async () => {
    if (!deferredPrompt) return;
    deferredPrompt.prompt();
    await deferredPrompt.userChoice;
    setDeferredPrompt(null);
    setInstallAvailable(false);
  };

  const handleRequestPush = async () => {
    try {
      const permission = await Notification.requestPermission();
      if (permission === 'granted') {
        const reg = await navigator.serviceWorker.ready;
        const settingsRes = await fetch('api.php?action=settings').then(r => r.json()).catch(() => ({}));
        let vapidKey = null;
        if (settingsRes.vapid && settingsRes.vapid.publicKey) {
          try {
            vapidKey = Uint8Array.from(atob(settingsRes.vapid.publicKey.replace(/-/g,'+').replace(/_/g,'/')), c => c.charCodeAt(0));
          } catch(e) {}
        }
        
        const sub = await reg.pushManager.subscribe({
          userVisibleOnly: true,
          applicationServerKey: vapidKey
        }).catch(() => null);
        
        if (sub) {
          setPushSubscribed(true);
          fetch('api.php?action=save_push_subscription', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
              email: loggedInUser?.email || 'guest',
              subscription: JSON.stringify(sub)
            })
          }).catch(() => {});
          showToast("Notificações ativadas! ✅");
        } else {
          showToast("Notificações ativadas! (sem push server)", "success");
        }
      } else {
        showToast("Permissão de notificações negada.", "error");
      }
    } catch(e) {
      showToast("Erro ao ativar notificações.", "error");
    }
  };

  const userNotifs = loggedInUser
    ? notifications.filter(n => n.target === "all" || n.target === loggedInUser.type || n.target === loggedInUser.email)
    : [];

  const userOrders = loggedInUser
    ? orders.filter(o => {
        const cId = (o.customerId || '').toString();
        const uId = (loggedInUser.id || '').toString();
        const uEmail = (loggedInUser.email || '').toLowerCase();
        return cId === uId || cId === uEmail;
      })
    : [];
  if (!isOpen) return null;
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="checkout-modal" onClick={e => e.stopPropagation()}>
        <button className="qv-close-btn" onClick={onClose}><Icon name="x" /></button>

        {loggedInUser ? (
          <div style={{ padding: '0 2px' }}>
            {/* User Header */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 20 }}>
              <div style={{ width: 52, height: 52, borderRadius: '50%', background: 'linear-gradient(135deg, var(--accent-gold), var(--accent-cyan, #00E5FF))', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 22, fontWeight: 800, color: '#fff', flexShrink: 0 }}>
                {loggedInUser.name.charAt(0).toUpperCase()}
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <h3 style={{ margin: 0, fontSize: 18, fontWeight: 800, color: '#fff', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{loggedInUser.name}</h3>
                <p style={{ margin: '2px 0 0', fontSize: 12, color: 'var(--text-muted)' }}>{loggedInUser.email}</p>
              </div>
            </div>

            {/* Tabs */}
            <div className="account-tabs">
              <button className={`account-tab-btn ${activeTab === 'profile' ? 'active' : ''}`} onClick={() => setActiveTab("profile")}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                Perfil
              </button>
              <button className={`account-tab-btn ${activeTab === 'notifications' ? 'active' : ''}`} onClick={() => setActiveTab("notifications")}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
                Notificações {userNotifs.length > 0 && <span style={{ background: 'var(--accent-gold)', color: '#000', borderRadius: 10, padding: '1px 7px', fontSize: 11, fontWeight: 800 }}>{userNotifs.length}</span>}
              </button>
              <button className={`account-tab-btn ${activeTab === 'orders' ? 'active' : ''}`} onClick={() => setActiveTab("orders")}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                Pedidos {userOrders.length > 0 && <span style={{ background: 'var(--accent-gold)', color: '#000', borderRadius: 10, padding: '1px 7px', fontSize: 11, fontWeight: 800 }}>{userOrders.length}</span>}
              </button>
            </div>

            <div className="account-box" style={{ marginTop: 16 }}>
              {/* PROFILE TAB */}
              {activeTab === "profile" && (
                <div>
                  {/* Instalar App PWA */}
                  {installAvailable && (
                    <div style={{
                      background: 'linear-gradient(135deg, rgba(56,182,255,0.12), rgba(0,229,255,0.04))',
                      border: '1px solid rgba(56,182,255,0.25)',
                      borderRadius: 12, padding: '12px 16px', marginBottom: 16
                    }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 10, justifyContent: 'space-between' }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                          <span style={{ fontSize: 20 }}>📲</span>
                          <div>
                            <span style={{ fontWeight: 700, fontSize: 13, color: '#fff' }}>Instalar App</span>
                            <p style={{ margin: '2px 0 0', fontSize: 11, color: 'var(--text-muted)' }}>
                              Adicione à tela inicial para acesso rápido
                            </p>
                          </div>
                        </div>
                        <button onClick={handleInstallPwa} style={{
                          padding: '8px 18px', borderRadius: 8, border: 'none',
                          background: 'var(--accent-gold)',
                          color: '#000', fontWeight: 800, fontSize: 12, cursor: 'pointer',
                          whiteSpace: 'nowrap', transition: 'all 0.2s'
                        }}>
                          📲 Instalar
                        </button>
                      </div>
                    </div>
                  )}
                  {/* Push notification toggle diretamente no Perfil */}
                  {pushSupported && (
                    <div style={{
                      background: 'linear-gradient(135deg, rgba(37,211,102,0.1), rgba(37,211,102,0.03))',
                      border: '1px solid rgba(37,211,102,0.25)',
                      borderRadius: 12, padding: '12px 16px', marginBottom: 16
                    }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 10, justifyContent: 'space-between' }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                          <span style={{ fontSize: 20 }}>🔔</span>
                          <div>
                            <span style={{ fontWeight: 700, fontSize: 13, color: '#fff' }}>Notificações Push</span>
                            <p style={{ margin: '2px 0 0', fontSize: 11, color: 'var(--text-muted)' }}>
                              Receba alertas de pedidos e promoções
                            </p>
                          </div>
                        </div>
                        <button onClick={handleRequestPush} style={{
                          padding: '8px 18px', borderRadius: 8, border: 'none',
                          background: pushSubscribed ? '#25D366' : 'var(--accent-gold)',
                          color: '#000', fontWeight: 800, fontSize: 12, cursor: 'pointer',
                          whiteSpace: 'nowrap', transition: 'all 0.2s'
                        }}>
                          {pushSubscribed ? '✅ Ativado' : '🔔 Ativar'}
                        </button>
                      </div>
                    </div>
                  )}
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 16 }}>
                    <div style={{ background: 'var(--bg-tertiary)', border: '1px solid var(--border-color)', borderRadius: 10, padding: 14, textAlign: 'center' }}>
                      <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--accent-gold)' }}>{userOrders.length}</div>
                      <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>Pedidos</div>
                    </div>
                    <div style={{ background: 'var(--bg-tertiary)', border: '1px solid var(--border-color)', borderRadius: 10, padding: 14, textAlign: 'center' }}>
                      <div style={{ fontSize: 22, fontWeight: 800, color: '#25D366' }}>{userNotifs.length}</div>
                      <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>Notificações</div>
                    </div>
                  </div>

                  <div style={{ background: 'var(--bg-tertiary)', border: '1px solid var(--border-color)', borderRadius: 10, padding: 16 }}>
                    <h4 style={{ margin: '0 0 12px', fontSize: 14, fontWeight: 700, color: '#fff' }}>Dados Pessoais</h4>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 13 }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                        <span style={{ color: 'var(--text-muted)' }}>Nome</span>
                        <span style={{ fontWeight: 600, color: '#e2e8f0' }}>{loggedInUser.name}</span>
                      </div>
                      <div style={{ height: 1, background: 'var(--border-color)' }}></div>
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                        <span style={{ color: 'var(--text-muted)' }}>E-mail</span>
                        <span style={{ fontWeight: 600, color: '#e2e8f0' }}>{loggedInUser.email}</span>
                      </div>
                      <div style={{ height: 1, background: 'var(--border-color)' }}></div>
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                        <span style={{ color: 'var(--text-muted)' }}>WhatsApp</span>
                        <span style={{ fontWeight: 600, color: '#e2e8f0' }}>{loggedInUser.phone || 'Não informado'}</span>
                      </div>
                      <div style={{ height: 1, background: 'var(--border-color)' }}></div>
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                        <span style={{ color: 'var(--text-muted)' }}>Tipo de Conta</span>
                        <span style={{
                          background: loggedInUser.type === 'atacado' ? 'rgba(37,211,102,0.15)' : 'rgba(56,182,255,0.15)',
                          color: loggedInUser.type === 'atacado' ? '#25D366' : 'var(--accent-gold)',
                          padding: '2px 10px',
                          borderRadius: 6,
                          fontSize: 11,
                          fontWeight: 800,
                          textTransform: 'uppercase'
                        }}>{loggedInUser.type === 'atacado' ? 'Parceiro Atacado' : 'Varejo'}</span>
                      </div>
                    </div>
                  </div>

                  <button onClick={onLogout} style={{ width: '100%', marginTop: 16, padding: '12px', background: 'rgba(220,38,38,0.15)', border: '1px solid rgba(220,38,38,0.3)', color: '#ef4444', borderRadius: 10, fontWeight: 700, fontSize: 14, cursor: 'pointer', transition: 'all 0.2s' }}>
                    Sair da Conta
                  </button>
                </div>
              )}

              {/* NOTIFICATIONS TAB */}
              {activeTab === "notifications" && (
                <div style={{ maxHeight: '380px', overflowY: 'auto' }}>
                  {/* PWA Install banner */}
                  {installAvailable && (
                    <div style={{
                      background: 'linear-gradient(135deg, rgba(56,182,255,0.12), rgba(0,229,255,0.04))',
                      border: '1px solid rgba(56,182,255,0.25)',
                      borderRadius: 12, padding: 16, marginBottom: 14
                    }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                        <div style={{
                          width: 40, height: 40, borderRadius: 10,
                          background: 'rgba(56,182,255,0.2)',
                          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0
                        }}>
                          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--accent-gold)" strokeWidth="2">
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
                          </svg>
                        </div>
                        <div style={{ flex: 1, minWidth: 0 }}>
                          <span style={{ fontWeight: 800, fontSize: 14, color: '#fff' }}>Instalar App</span>
                          <p style={{ margin: '2px 0 0', fontSize: 11, color: 'var(--text-muted)' }}>
                            📲 Adicione à tela inicial para acesso rápido
                          </p>
                        </div>
                        <button onClick={handleInstallPwa} style={{
                          padding: '10px 20px', borderRadius: 10, border: 'none',
                          background: 'var(--accent-gold)',
                          color: '#000', fontWeight: 800, fontSize: 13, cursor: 'pointer', whiteSpace: 'nowrap',
                          boxShadow: '0 4px 12px rgba(56,182,255,0.3)',
                          transition: 'all 0.2s'
                        }}>
                          📲 Instalar
                        </button>
                      </div>
                    </div>
                  )}
                  {/* Push notification toggle */}
                  {/* Push notification banner - destaque */}
                  {pushSupported && (
                    <div style={{
                      background: pushSubscribed
                        ? 'linear-gradient(135deg, rgba(37,211,102,0.12), rgba(37,211,102,0.04))'
                        : 'linear-gradient(135deg, rgba(56,182,255,0.12), rgba(56,182,255,0.04))',
                      border: `1px solid ${pushSubscribed ? 'rgba(37,211,102,0.3)' : 'rgba(56,182,255,0.3)'}`,
                      borderRadius: 12, padding: 16, marginBottom: 14
                    }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                        <div style={{
                          width: 40, height: 40, borderRadius: 10,
                          background: pushSubscribed ? 'rgba(37,211,102,0.2)' : 'rgba(56,182,255,0.2)',
                          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0
                        }}>
                          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={pushSubscribed ? '#25D366' : 'var(--accent-gold)'} strokeWidth="2">
                            <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>
                          </svg>
                        </div>
                        <div style={{ flex: 1, minWidth: 0 }}>
                          <span style={{ fontWeight: 800, fontSize: 14, color: '#fff' }}>Notificações Push</span>
                          <p style={{ margin: '2px 0 0', fontSize: 11, color: 'var(--text-muted)' }}>
                            {pushSubscribed
                              ? '✅ Ativadas — você receberá alertas mesmo fora do site'
                              : '🔔 Ative para receber avisos de pedidos e promoções'}
                          </p>
                        </div>
                        <button onClick={handleRequestPush} style={{
                          padding: '10px 20px', borderRadius: 10, border: 'none',
                          background: pushSubscribed ? '#25D366' : 'var(--accent-gold)',
                          color: pushSubscribed ? '#000' : '#000',
                          fontWeight: 800, fontSize: 13, cursor: 'pointer', whiteSpace: 'nowrap',
                          boxShadow: pushSubscribed ? '0 4px 12px rgba(37,211,102,0.3)' : '0 4px 12px rgba(56,182,255,0.3)',
                          transition: 'all 0.2s'
                        }}>
                          {pushSubscribed ? '✅ Ativo' : 'Ativar Agora'}
                        </button>
                      </div>
                    </div>
                  )}

                  {userNotifs.length === 0 ? (
                    <div style={{ textAlign: 'center', padding: 40 }}>
                      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" strokeWidth="1.5" style={{ opacity: 0.5, marginBottom: 10 }}><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
                      <p style={{ color: 'var(--text-muted)', fontSize: 13 }}>Nenhuma notificação recebida.</p>
                    </div>
                  ) : (
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                      {userNotifs.map(notif => (
                        <div key={notif.id} style={{ background: 'var(--bg-tertiary)', border: '1px solid var(--border-color)', borderRadius: 10, padding: 14 }}>
                          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 6 }}>
                            <span style={{ fontWeight: 700, fontSize: 13, color: '#fff' }}>{notif.title}</span>
                            <span style={{ fontSize: 10, color: 'var(--text-muted)', whiteSpace: 'nowrap', marginLeft: 8 }}>{notif.date}</span>
                          </div>
                          <p style={{ margin: 0, fontSize: 12, color: 'var(--text-muted)', lineHeight: 1.5 }}>{notif.message}</p>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              )}

              {/* ORDERS TAB */}
              {activeTab === "orders" && (
                <div style={{ maxHeight: '380px', overflowY: 'auto' }}>
                  {userOrders.length === 0 ? (
                    <div style={{ textAlign: 'center', padding: 40 }}>
                      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" strokeWidth="1.5" style={{ opacity: 0.5, marginBottom: 10 }}><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                      <p style={{ color: 'var(--text-muted)', fontSize: 13 }}>Nenhum pedido realizado ainda.</p>
                      <p style={{ color: 'var(--text-muted)', fontSize: 11, marginTop: 4 }}>Seus pedidos aparecerão aqui após a compra.</p>
                    </div>
                  ) : (
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                      {userOrders.map(order => (
                        <button
                          key={order.id}
                          onClick={() => setSelectedOrder(order)}
                          style={{
                            width: '100%', textAlign: 'left', cursor: 'pointer',
                            background: 'var(--bg-tertiary)', border: '1px solid var(--border-color)',
                            borderRadius: 10, padding: 14, transition: 'all 0.2s',
                            fontFamily: 'inherit', fontSize: 'inherit', color: 'inherit'
                          }}
                        >
                          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
                            <span style={{ fontWeight: 800, fontSize: 14, color: 'var(--accent-gold)' }}>{order.id}</span>
                            <span style={{
                              background: order.status === 'Cancelado' ? 'rgba(239,68,68,0.15)' :
                                order.status === 'Entregue' ? 'rgba(37,211,102,0.15)' :
                                order.status === 'Enviado' ? 'rgba(37,211,102,0.15)' :
                                order.status === 'Processando' ? 'rgba(37,211,102,0.15)' : 'rgba(251,191,36,0.15)',
                              color: order.status === 'Cancelado' ? '#ef4444' :
                                order.status === 'Entregue' ? '#25D366' :
                                order.status === 'Enviado' ? '#25D366' :
                                order.status === 'Processando' ? '#25D366' : '#fbbf24',
                              padding: '2px 10px',
                              borderRadius: 6,
                              fontSize: 10,
                              fontWeight: 800,
                              textTransform: 'uppercase'
                            }}>{order.status === 'Pendente' ? 'Aguardando' : order.status === 'Processando' ? 'Pago / Processando' : order.status}</span>
                          </div>

                          <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 6 }}>
                            {order.date ? order.date.substring(0, 19).replace('T', ' ') : order.date}
                          </div>

                          <div style={{ background: 'rgba(0,0,0,0.2)', borderRadius: 8, padding: 10, marginBottom: 10 }}>
                            {(order.items || []).map((it, idx) => {
                              const itemName = typeof it === 'string' ? it : (it.name || 'Item');
                              const itemQty = it.qty || 1;
                              const itemSize = it.size ? ` (${it.size})` : '';
                              return (
                                <div key={idx} style={{ fontSize: 12, color: '#e2e8f0', padding: '3px 0', display: 'flex', justifyContent: 'space-between' }}>
                                  <span>{itemName}{itemSize}</span>
                                  <span>x{itemQty}</span>
                                </div>
                              );
                            })}
                          </div>

                          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                            <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>Total</span>
                            <span style={{ fontSize: 16, fontWeight: 800, color: '#fff' }}>R$ {(order.pricing ? order.pricing.total : (order.total || 0)).toFixed(2).replace('.', ',')}</span>
                          </div>
                          <div style={{ marginTop: 8, fontSize: 11, color: 'var(--accent-gold)', fontWeight: 600 }}>
                            👁️ Ver detalhes completos
                          </div>
                        </button>
                      ))}
                    </div>
                  )}
                </div>
              )}
            </div>
          </div>
        ) : (
          <div>
            {isLoginView ? (
              <form onSubmit={handleLoginSubmit}>
                <h3 className="checkout-title">Acessar Conta</h3>
                <div className="form-group">
                  <label>E-mail*</label>
                  <input
                    type="email"
                    placeholder="EX: joao@gmail.com"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                  />
                </div>
                <div className="form-group">
                  <label>Senha*</label>
                  <input
                    type="password"
                    placeholder="Digite sua senha"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                  />
                </div>
                <button type="submit" className="checkout-trigger-btn" style={{ marginTop: 14 }}>Entrar</button>
                <p style={{ textAlign: 'center', marginTop: 16, fontSize: 13, color: 'var(--text-muted)' }}>
                  Não tem uma conta? <button type="button" className="size-guide-btn" onClick={() => setIsLoginView(false)}>Cadastre-se</button>
                </p>
              </form>
            ) : (
              <form onSubmit={handleRegisterSubmit}>
                <h3 className="checkout-title">Criar Conta</h3>
                <div className="form-group">
                  <label>Nome Completo*</label>
                  <input
                    type="text"
                    placeholder="EX: João Silva"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                  />
                </div>
                <div className="form-group">
                  <label>E-mail*</label>
                  <input
                    type="email"
                    placeholder="EX: joao@gmail.com"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                  />
                </div>
                <div className="form-group">
                  <label>Senha*</label>
                  <input
                    type="password"
                    placeholder="Crie uma senha forte"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                  />
                </div>
                <div className="form-group">
                  <label>WhatsApp com DDD*</label>
                  <input
                    type="text"
                    placeholder="EX: (11) 98888-8888"
                    value={phone}
                    onChange={(e) => handlePhoneInputChange(e.target.value)}
                  />
                </div>
                <div className="form-group">
                  <label>Tipo de Cliente</label>
                  <select value={regType} onChange={(e) => setRegType(e.target.value)}>
                    <option value="varejo">Varejo (Comprar normal)</option>
                    <option value="atacado">Atacado (Parceiro Distribuidor)</option>
                  </select>
                </div>
                <button type="submit" className="checkout-trigger-btn" style={{ marginTop: 14 }}>Registrar Conta</button>
                <p style={{ textAlign: 'center', marginTop: 16, fontSize: 13, color: 'var(--text-muted)' }}>
                  Já tem conta? <button type="button" className="size-guide-btn" onClick={() => setIsLoginView(true)}>Fazer Login</button>
                </p>
              </form>
            )}
          </div>
        )}
      </div>
{/* Order Detail Modal */}
          {selectedOrder && (
            <div
              className="modal-overlay"
              onClick={() => setSelectedOrder(null)}
              style={{ position: 'fixed', inset: 0, zIndex: 9999, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
            >
              <div
                onClick={e => e.stopPropagation()}
                style={{
                  background: '#1e293b', borderRadius: 16, maxWidth: 480, width: '92%',
                  maxHeight: '85vh', overflowY: 'auto',
                  padding: '28px 24px', boxShadow: '0 20px 60px rgba(0,0,0,0.5)',
                  border: '1px solid rgba(255,255,255,0.08)'
                }}
              >
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
                  <h3 style={{ margin: 0, fontSize: 18, fontWeight: 800, color: '#fff' }}>📦 {selectedOrder.id}</h3>
                  <button onClick={() => setSelectedOrder(null)} style={{ background: 'none', border: 'none', color: '#94a3b8', cursor: 'pointer', fontSize: 22, padding: 0 }}>&times;</button>
                </div>

                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16, gap: 10, flexWrap: 'wrap' }}>
                  <span style={{
                    background: selectedOrder.status === 'Enviado' ? 'rgba(37,211,102,0.15)' :
                      selectedOrder.status === 'Processando' ? 'rgba(37,211,102,0.15)' :
                      selectedOrder.status === 'Entregue' ? 'rgba(37,211,102,0.15)' :
                      selectedOrder.status === 'Cancelado' ? 'rgba(239,68,68,0.15)' : 'rgba(251,191,36,0.15)',
                    color: selectedOrder.status === 'Enviado' ? '#25D366' :
                      selectedOrder.status === 'Processando' ? '#25D366' :
                      selectedOrder.status === 'Entregue' ? '#25D366' :
                      selectedOrder.status === 'Cancelado' ? '#ef4444' : '#fbbf24',
                    padding: '4px 14px', borderRadius: 8, fontSize: 12, fontWeight: 800
                  }}>
                    {selectedOrder.status === 'Pendente' ? 'Aguardando' : selectedOrder.status === 'Processando' ? 'Pago / Processando' : selectedOrder.status}
                  </span>
                  <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>
                    {selectedOrder.date ? selectedOrder.date.substring(0, 19).replace('T', ' ') : selectedOrder.date}
                  </span>
                </div>

                <div style={{ background: 'rgba(0,0,0,0.12)', borderRadius: 10, padding: 14, marginBottom: 12 }}>
                  <h4 style={{ margin: '0 0 10px', fontSize: 13, fontWeight: 700, color: '#e2e8f0' }}>👤 Cliente</h4>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '4px 0', gap: 10 }}>
                    <span style={{ fontSize: 12, color: '#94a3b8' }}>E-mail / ID</span>
                    <span style={{ fontSize: 13, color: '#e2e8f0', fontWeight: 600, textAlign: 'right', wordBreak: 'break-word' }}>{selectedOrder.customerId || '-'}</span>
                  </div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '4px 0', gap: 10 }}>
                    <span style={{ fontSize: 12, color: '#94a3b8' }}>Entrega</span>
                    <span style={{ fontSize: 13, color: '#e2e8f0', fontWeight: 600, textAlign: 'right', wordBreak: 'break-word' }}>{selectedOrder.shipping?.address || selectedOrder.shipping?.method || '-'}</span>
                  </div>
                </div>

                <div style={{ background: 'rgba(0,0,0,0.12)', borderRadius: 10, padding: 14, marginBottom: 12 }}>
                  <h4 style={{ margin: '0 0 10px', fontSize: 13, fontWeight: 700, color: '#e2e8f0' }}>💳 Pagamento</h4>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '4px 0', gap: 10 }}>
                    <span style={{ fontSize: 12, color: '#94a3b8' }}>Método</span>
                    <span style={{
                      background: (selectedOrder.payment?.method || '').includes('Cupom') ? 'rgba(245,158,11,0.15)' : 'rgba(37,211,102,0.15)',
                      color: (selectedOrder.payment?.method || '').includes('Cupom') ? '#f59e0b' : '#25D366',
                      padding: '2px 10px', borderRadius: 6, fontSize: 12, fontWeight: 700
                    }}>
                      {selectedOrder.payment?.method || '-'}
                    </span>
                  </div>
                  {selectedOrder.payment?.couponCode && (
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '4px 0', gap: 10 }}>
                      <span style={{ fontSize: 12, color: '#94a3b8' }}>🎟️ Cupom</span>
                      <span style={{ fontSize: 13, color: '#f59e0b', fontWeight: 800 }}>{selectedOrder.payment.couponCode}</span>
                    </div>
                  )}
                  {selectedOrder.payment?.payment_id && selectedOrder.payment?.payment_id !== 'Cupom 100%' && (
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '4px 0', gap: 10 }}>
                      <span style={{ fontSize: 12, color: '#94a3b8' }}>ID Transa\u00e7\u00e3o</span>
                      <span style={{ fontSize: 11, fontFamily: 'monospace', color: '#e2e8f0', fontWeight: 600, textAlign: 'right', wordBreak: 'break-word' }}>{selectedOrder.payment.payment_id}</span>
                    </div>
                  )}
                </div>

                <div style={{ background: 'rgba(0,0,0,0.12)', borderRadius: 10, padding: 14, marginBottom: 12 }}>
                  <h4 style={{ margin: '0 0 10px', fontSize: 13, fontWeight: 700, color: '#e2e8f0' }}>🛒 Itens</h4>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                    {(selectedOrder.items || []).map((it, idx) => {
                      const itemName = typeof it === 'string' ? it : (it.name || 'Item');
                      const itemQty = it.qty || 1;
                      const itemSize = it.size ? '(' + it.size + ')' : '';
                      const itemPrice = it.price || 0;
                      return (
                        <div key={idx} style={{
                          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                          padding: '8px 10px', background: 'rgba(0,0,0,0.15)', borderRadius: 8,
                          fontSize: 13, color: '#e2e8f0'
                        }}>
                          <span>{itemName} {itemSize} <b>x{itemQty}</b></span>
                          <span>R$ {(itemPrice * itemQty).toFixed(2).replace('.', ',')}</span>
                        </div>
                      );
                    })}
                  </div>
                </div>

                <div style={{ background: 'rgba(0,0,0,0.12)', borderRadius: 10, padding: 14, marginBottom: 12 }}>
                  <h4 style={{ margin: '0 0 10px', fontSize: 13, fontWeight: 700, color: '#e2e8f0' }}>💰 Resumo Financeiro</h4>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '4px 0', gap: 10 }}>
                    <span style={{ fontSize: 12, color: '#94a3b8' }}>Subtotal</span>
                    <span style={{ fontSize: 13, color: '#e2e8f0', fontWeight: 600, textAlign: 'right' }}>R$ {(selectedOrder.pricing?.subtotal || 0).toFixed(2).replace('.', ',')}</span>
                  </div>
                  {selectedOrder.pricing?.discount > 0 && (
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '4px 0', gap: 10 }}>
                      <span style={{ fontSize: 12, color: '#94a3b8' }}>Desconto</span>
                      <span style={{ fontSize: 13, color: '#25D366', fontWeight: 600 }}>- R$ {(selectedOrder.pricing?.discount || 0).toFixed(2).replace('.', ',')}</span>
                    </div>
                  )}
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '4px 0', gap: 10, borderTop: '1px solid rgba(255,255,255,0.1)', paddingTop: 10, marginTop: 6 }}>
                    <span style={{ fontWeight: 800, color: '#fff', fontSize: 13 }}>Total</span>
                    <span style={{ fontSize: 22, fontWeight: 900, color: 'var(--accent-gold)' }}>R$ {(selectedOrder.pricing?.total || 0).toFixed(2).replace('.', ',')}</span>
                  </div>
                </div>

                {(selectedOrder.history || []).length > 0 && (
                  <div style={{ background: 'rgba(0,0,0,0.12)', borderRadius: 10, padding: 14, marginBottom: 12 }}>
                    <h4 style={{ margin: '0 0 10px', fontSize: 13, fontWeight: 700, color: '#e2e8f0' }}>📋 Rastreador do Pedido</h4>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                      {(selectedOrder.history || []).map((h, idx) => {
                        const statusText = h.status === 'Pendente' ? '⏳ Aguardando' :
                          h.status === 'Processando' ? '✅ Pago / Processando' :
                          h.status === 'Enviado' ? '🚚 Enviado' :
                          h.status === 'Entregue' ? '📦 Entregue' :
                          h.status === 'Cancelado' ? '❌ Cancelado' : h.status;
                        return (
                          <div key={idx} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                              <div style={{
                                width: 12, height: 12, borderRadius: '50%', flexShrink: 0,
                                background: h.status === 'Cancelado' ? '#ef4444' :
                                  h.status === 'Entregue' || h.status === 'Enviado' ? '#25D366' : '#fbbf24',
                                border: '2px solid ' + (h.status === 'Cancelado' ? '#ef4444' :
                                  h.status === 'Entregue' || h.status === 'Enviado' ? '#25D366' : '#fbbf24')
                              }}></div>
                              {idx < (selectedOrder.history || []).length - 1 && (
                                <div style={{ width: 2, height: 20, background: 'rgba(255,255,255,0.1)' }}></div>
                              )}
                            </div>
                            <div style={{ flex: 1, paddingBottom: idx < (selectedOrder.history || []).length - 1 ? 8 : 0 }}>
                              <span style={{
                                color: h.status === 'Cancelado' ? '#ef4444' :
                                  h.status === 'Entregue' || h.status === 'Enviado' ? '#25D366' : '#fbbf24',
                                fontWeight: 700, fontSize: 12
                              }}>{statusText}</span>
                              <span style={{ display: 'block', fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>
                                {h.date ? h.date.substring(0, 19).replace('T', ' ') : h.date}
                              </span>
                            </div>
                          </div>
                        );
                      })}
                    </div>
                  </div>
                )}

                <button
                  onClick={() => setSelectedOrder(null)}
                  className="checkout-trigger-btn"
                  style={{ width: '100%', marginTop: 8 }}
                >
                  Fechar Detalhes
                </button>
              </div>
            </div>
          )}

    </div>
  );


};

const CheckoutModal = ({ isOpen, onClose, cartItems, appliedCoupon, onClearCart, showToast, loggedInUser, settings }) => {
  if (!isOpen) return null;

  const [step, setStep] = useState(1);
  const [formData, setFormData] = useState({
    name: loggedInUser ? loggedInUser.name : "",
    phone: loggedInUser ? loggedInUser.phone : "",
    email: loggedInUser ? loggedInUser.email : "",
    deliveryMethod: "pickup",
    zipCode: "",
    street: "",
    number: "",
    neighborhood: "",
    complement: "",
    cityState: "",
    paymentMethod: "pix"
  });

  const [copiedKey, setCopiedKey] = useState(false);
  const [mpPayment, setMpPayment] = useState(null); // { payment_id, qr_code_base64, ticket_url, status }
  const [mpLoading, setMpLoading] = useState(false);
  const [mpChecking, setMpChecking] = useState(false);
  const [paymentSuccess, setPaymentSuccess] = useState(false);
  const [orderId, setOrderId] = useState(null);

  const [shippingOptions, setShippingOptions] = useState([]);
  const [shippingLoading, setShippingLoading] = useState(false);
  const [selectedShippingOption, setSelectedShippingOption] = useState(null);
  const [shippingError, setShippingError] = useState("");

  useEffect(() => {
    if (loggedInUser) {
      setFormData(prev => ({
        ...prev,
        name: loggedInUser.name,
        phone: loggedInUser.phone,
        email: loggedInUser.email
      }));
    }
  }, [loggedInUser]);

  console.log("CheckoutModal settings:", settings);

  const settingsLoading = settings === null;
  const siteSettings = settings || {};
  const pixKey = siteSettings.pixKey || "0536412589000185";
  const mpToken = siteSettings.mercadopagoToken || "";

  const totalItemsCount = cartItems.reduce((acc, item) => acc + item.qty, 0);
  const isUserAtacado = loggedInUser && loggedInUser.type === "atacado";

  const baseSubtotal = cartItems.reduce((acc, item) => {
    const itemUnitPrice = item.price + (item.personalized ? 25.00 : 0);
    return acc + (itemUnitPrice * item.qty);
  }, 0);

  const wholesaleDiscount = (totalItemsCount >= 6 && !isUserAtacado) ? baseSubtotal * 0.2 : 0;
  const subtotalAfterWholesale = baseSubtotal - wholesaleDiscount;

  let couponDiscount = 0;
  if (appliedCoupon) {
    if (appliedCoupon.type === 'percent') {
      couponDiscount = subtotalAfterWholesale * (appliedCoupon.value / 100);
    } else if (appliedCoupon.type === 'fixed') {
      couponDiscount = Math.min(appliedCoupon.value, subtotalAfterWholesale);
    }
  }

  const isFreeOrder = subtotalAfterWholesale - couponDiscount <= 0;

  // Free shipping threshold check
  const freeThreshold = parseFloat(siteSettings.freeShippingThreshold || 250);
  const isFreeShippingEligible = (subtotalAfterWholesale - couponDiscount) >= freeThreshold;

  let deliveryFee = 0;
  if (formData.deliveryMethod === "delivery" && !isFreeOrder) {
    if (siteSettings.superfrete?.enabled) {
      if (selectedShippingOption) {
        deliveryFee = isFreeShippingEligible ? 0 : selectedShippingOption.price;
      } else {
        deliveryFee = isFreeShippingEligible ? 0 : 15.00; // robust fallback to default fee
      }
    } else {
      deliveryFee = isFreeShippingEligible ? 0 : 15.00;
    }
  }

  const finalTotal = subtotalAfterWholesale - couponDiscount + deliveryFee;

  const calculateSuperFrete = (zip) => {
    if (!siteSettings.superfrete?.enabled) return;
    setShippingLoading(true);
    setShippingError("");
    setShippingOptions([]);
    setSelectedShippingOption(null);

    fetch('api.php?action=calculate_shipping', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        cep: zip,
        items: cartItems.map(item => ({ id: item.id, qty: item.qty }))
      })
    })
    .then(r => r.json())
    .then(data => {
      if (data.success && Array.isArray(data.services)) {
        const validServices = data.services
          .filter(s => !s.has_error && s.price !== undefined)
          .map(s => ({
            id: s.id,
            name: s.name,
            price: parseFloat(s.price),
            discount: parseFloat(s.discount || 0),
            deliveryTime: s.delivery_time,
            company: s.company?.name || 'Transportadora'
          }));
        setShippingOptions(validServices);
        if (validServices.length > 0) {
          setSelectedShippingOption(validServices[0]);
        }
      } else {
        setShippingError(data.error || "Erro ao calcular frete.");
      }
    })
    .catch(() => {
      setShippingError("Erro de conexão ao calcular frete.");
    })
    .finally(() => {
      setShippingLoading(false);
    });
  };

  const handleInputChange = (field, val) => {
    setFormData(prev => ({ ...prev, [field]: val }));
  };

  const handlePhoneChange = (val) => {
    let numbers = val.replace(/\D/g, "");
    if (numbers.length > 11) numbers = numbers.slice(0, 11);
    let formatted = "";
    if (numbers.length > 0) {
      formatted = `(${numbers.slice(0, 2)}`;
      if (numbers.length > 2) formatted += `) ${numbers.slice(2, 7)}`;
      if (numbers.length > 7) formatted += `-${numbers.slice(7, 11)}`;
    }
    handleInputChange("phone", formatted);
  };

  const handleZipChange = (val) => {
    let numbers = val.replace(/\D/g, "");
    if (numbers.length > 8) numbers = numbers.slice(0, 8);
    let formatted = numbers;
    if (numbers.length > 5) formatted = `${numbers.slice(0, 5)}-${numbers.slice(5, 8)}`;
    handleInputChange("zipCode", formatted);

    if (numbers.length === 8) {
      fetch(`api.php?action=viacep&cep=${numbers}`)
        .then(r => r.json())
        .then(data => {
          if (data.success) {
            setFormData(prev => ({
              ...prev,
              street: data.logradouro,
              neighborhood: data.bairro,
              cityState: `${data.cidade} - ${data.uf}`
            }));
            if (siteSettings.superfrete?.enabled) {
              calculateSuperFrete(numbers);
            }
          }
        })
        .catch(() => {});
    }
  };
  const handleNext = () => {
    if (step === 1) {
      if (!formData.name.trim() || formData.phone.length < 14) {
        showToast("Preencha Nome e WhatsApp com DDD.", "error");
        return;
      }
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!formData.email.trim() || !emailRegex.test(formData.email.trim())) {
        showToast("Por favor, insira um e-mail válido (obrigatório para pagamento Pix).", "error");
        return;
      }
      setStep(2);
    } else if (step === 2) {
      if (formData.deliveryMethod === "delivery") {
        if (!formData.zipCode || !formData.street || !formData.number || !formData.neighborhood || !formData.cityState) {
          showToast("Preencha todos os campos de endereço.", "error");
          return;
        }
        if (siteSettings.superfrete?.enabled && !selectedShippingOption && !shippingLoading && !shippingError) {
          showToast("Aguarde o cálculo ou selecione uma opção de frete.", "error");
          return;
        }
      }
      if (isFreeOrder) {
        createOrderInDB('Cupom 100%', 'Cupom 100%').then(() => {
          setPaymentSuccess(true);
          showToast("🎉 Pedido realizado com sucesso! Cupom de 100% aplicado.");
        });
      } else {
        setStep(3);
      }
    } else if (step === 3) {
      setStep(4);
    }
  };

  const handleBack = () => {
    if (step > 1) setStep(step - 1);
  };

  const handleCopyPixKey = () => {
    navigator.clipboard.writeText(pixKey).then(() => {
      setCopiedKey(true);
      showToast("Chave Pix copiada!");
      setTimeout(() => setCopiedKey(false), 3000);
    });
  };

  const createOrderInDB = async (paymentId, paymentMethod) => {
    const orderData = {
      customerId: loggedInUser ? (loggedInUser.id || loggedInUser.email) : 'Guest',
      items: cartItems.map(item => ({
        id: item.id,
        name: item.name,
        qty: item.qty,
        size: item.selectedSize,
        price: item.price
      })),
      shipping: {
        method: formData.deliveryMethod === "delivery"
          ? (selectedShippingOption ? `${selectedShippingOption.name} (${selectedShippingOption.company})` : 'Correios')
          : 'Retirada',
        address: formData.deliveryMethod === "delivery"
          ? `${formData.street}, Nº ${formData.number}, Bairro ${formData.neighborhood}, CEP ${formData.zipCode}, ${formData.cityState}`
          : 'Retirada'
      },
      payment: { method: paymentMethod, payment_id: paymentId, couponCode: appliedCoupon?.code || '' },
      pricing: { subtotal: baseSubtotal, discount: baseSubtotal - finalTotal, total: finalTotal }
    };

    try {
      const res = await fetch('api.php?action=create_order', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(orderData)
      });
      const data = await res.json();
      if (data && data.id) {
        setOrderId(data.id);
        
        if (window.trackPurchase) {
          window.trackPurchase(data.id, cartItems.map(item => ({ id: item.id, name: item.name, price: item.price, qty: item.qty })), finalTotal);
        }
        
        return data.id;
      }
    } catch (e) {}

    const fallbackId = "ORD-" + Date.now().toString(36).toUpperCase();
    setOrderId(fallbackId);
    return fallbackId;
  };

  const handleGeneratePix = async () => {
    if (!mpToken) {
      showToast("Token do Mercado Pago não configurado. Configure no Admin.", "error");
      return;
    }

    setMpLoading(true);
    try {
      const generatedOrderId = await createOrderInDB('Gerando...', 'Mercado Pago Pix');

      const res = await fetch('api.php?action=mp_create_payment', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          amount: finalTotal,
          description: `Pedido Import FC - ${generatedOrderId}`,
          payerEmail: formData.email,
          payerName: formData.name,
          orderId: generatedOrderId
        })
      });
      const data = await res.json();

      if (data.success) {
        setMpPayment({
          payment_id: data.payment_id,
          qr_code_base64: data.qr_code_base64,
          qr_code: data.qr_code,
          ticket_url: data.ticket_url,
          status: data.status
        });
        showToast("QR Code gerado! Pague com Pix.");
      } else {
        showToast(data.error || "Erro ao gerar QR Code.", "error");
      }
    } catch (e) {
      showToast("Erro de conexão com Mercado Pago.", "error");
    }
    setMpLoading(false);
  };

  const handleCheckPayment = async () => {
    if (!mpPayment || !mpPayment.payment_id) return;

    setMpChecking(true);
    try {
      const res = await fetch('api.php?action=mp_check_payment', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          paymentId: mpPayment.payment_id
        })
      });
      const data = await res.json();

      if (data.success) {
        if (data.status === 'approved') {
          setPaymentSuccess(true);
          showToast("Pagamento confirmado! Pedido realizado com sucesso!");
        } else if (data.status === 'pending') {
          showToast("Pagamento ainda pendente. Aguarde a confirmação ou tente novamente.", "error");
        } else if (data.status === 'cancelled' || data.status === 'rejected') {
          showToast("Pagamento não foi realizado. Tente novamente.", "error");
        } else {
          showToast(`Status: ${data.status}. Aguarde a confirmação.`);
        }
      } else {
        showToast(data.error || "Erro ao verificar pagamento.", "error");
      }
    } catch (e) {
      showToast("Erro ao verificar pagamento.", "error");
    }
    setMpChecking(false);
  };

  if (paymentSuccess) {
    const isFree = (appliedCoupon && couponDiscount > 0 && (subtotalAfterWholesale - couponDiscount <= 0)) || false;
    return (
      <div className="modal-overlay" onClick={onClose}>
        <div className="checkout-modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 440 }}>
          <div style={{ textAlign: 'center', padding: '36px 24px' }}>
            {/* Animated checkmark */}
            <div style={{
              width: 88, height: 88, borderRadius: '50%',
              background: isFree ? 'linear-gradient(135deg, #f59e0b, #f97316)' : 'linear-gradient(135deg, #22c55e, #16a34a)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              margin: '0 auto 18px',
              boxShadow: isFree ? '0 0 40px rgba(249,115,22,0.3)' : '0 0 40px rgba(34,197,94,0.3)',
              animation: 'pulse 2s infinite'
            }}>
              <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                {isFree ? (
                  <>
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                  </>
                ) : (
                  <polyline points="20 6 9 17 4 12"/>
                )}
              </svg>
            </div>
            
            <h2 style={{ color: isFree ? '#f59e0b' : '#22c55e', fontSize: 24, fontWeight: 900, marginBottom: 6 }}>
              {isFree ? '🎉 Pedido Confirmado!' : '✅ Pagamento Confirmado!'}
            </h2>
            
            <p style={{ color: 'var(--text-muted)', fontSize: 14, marginBottom: 4 }}>
              Pedido <b style={{ color: 'var(--accent-gold)' }}>{orderId}</b>
            </p>
            
            {isFree ? (
              <div style={{ background: 'rgba(245,158,11,0.1)', border: '1px solid rgba(245,158,11,0.25)', borderRadius: 10, padding: '14px 18px', margin: '16px 0', textAlign: 'center' }}>
                <p style={{ color: '#f59e0b', fontSize: 14, fontWeight: 700, margin: 0 }}>🎟️ Cupom de 100% aplicado!</p>
                <p style={{ color: 'var(--text-muted)', fontSize: 12, margin: '4px 0 0' }}>Seu pedido foi registrado sem custos.</p>
              </div>
            ) : (
              <div style={{ background: 'rgba(34,197,94,0.1)', border: '1px solid rgba(34,197,94,0.25)', borderRadius: 10, padding: '14px 18px', margin: '16px 0', textAlign: 'center' }}>
                <p style={{ color: '#22c55e', fontSize: 14, fontWeight: 700, margin: 0 }}>💰 Pagamento aprovado com sucesso!</p>
              </div>
            )}
            
            <p style={{ color: 'var(--text-muted)', fontSize: 12, marginBottom: 22 }}>Você pode acompanhar o status em <b>Minha Conta {'>'} Pedidos</b>.</p>
            
            <button className="checkout-trigger-btn" style={{ background: 'var(--accent-gold)', color: '#000', fontWeight: 800, fontSize: 15 }} onClick={() => { onClearCart(); onClose(); }}>
              {isFree ? '🎊 Continuar Comprando' : '🛒 Continuar Comprando'}
            </button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="checkout-modal" onClick={e => e.stopPropagation()}>
        <button className="qv-close-btn" onClick={onClose}><Icon name="x" /></button>
        
        <div className="checkout-steps">
          <div className={`step-indicator ${step === 1 ? 'active' : ''} ${step > 1 ? 'completed' : ''}`}>1</div>
          <div className={`step-indicator ${step === 2 ? 'active' : ''} ${step > 2 ? 'completed' : ''}`}>2</div>
          <div className={`step-indicator ${step === 3 ? 'active' : ''}`}>3</div>
        </div>

        {step === 1 && (
          <div>
            <h3 className="checkout-title">1. Dados de Contato</h3>
            <div className="form-group">
              <label>Nome Completo*</label>
              <input type="text" placeholder="EX: João da Silva" value={formData.name} onChange={(e) => handleInputChange("name", e.target.value)} />
            </div>
            <div className="form-group">
              <label>WhatsApp com DDD*</label>
              <input type="text" placeholder="EX: (11) 99999-9999" value={formData.phone} onChange={(e) => handlePhoneChange(e.target.value)} />
            </div>
            <div className="form-group">
              <label>E-mail*</label>
              <input type="email" placeholder="EX: joao@gmail.com" value={formData.email} onChange={(e) => handleInputChange("email", e.target.value)} />
            </div>
          </div>
        )}

        {step === 2 && (
          <div>
            <h3 className="checkout-title">2. Método de Envio</h3>
            <div className="delivery-options">
              <div className={`delivery-option-card ${formData.deliveryMethod === 'pickup' ? 'selected' : ''}`} onClick={() => handleInputChange("deliveryMethod", "pickup")}>
                <input type="radio" name="deliv" checked={formData.deliveryMethod === 'pickup'} readOnly />
                <div className="doc-info">
                  <div className="doc-title">Retirar no Ninho do Import</div>
                  <div className="doc-desc">Disponível em 24h úteis</div>
                </div>
                <div className="doc-price">Grátis</div>
              </div>
              <div className={`delivery-option-card ${formData.deliveryMethod === 'delivery' ? 'selected' : ''}`} onClick={() => handleInputChange("deliveryMethod", "delivery")}>
                <input type="radio" name="deliv" checked={formData.deliveryMethod === 'delivery'} readOnly />
                <div className="doc-info">
                  <div className="doc-title">Entrega via Motoboy ou Correios</div>
                  <div className="doc-desc">Entrega rápida para o seu endereço</div>
                </div>
                <div className="doc-price">
                  {isFreeShippingEligible ? 'Grátis' : (
                    siteSettings.superfrete?.enabled 
                      ? (selectedShippingOption ? `R$ ${selectedShippingOption.price.toFixed(2).replace('.', ',')}` : 'A calcular') 
                      : 'R$ 15,00'
                  )}
                </div>
              </div>
            </div>

            {formData.deliveryMethod === "delivery" && (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 12 }}>
                <div className="form-row zip-num">
                  <div className="form-group">
                    <label>CEP*</label>
                    <input type="text" placeholder="01001-000" value={formData.zipCode} onChange={(e) => handleZipChange(e.target.value)} />
                  </div>
                  <div className="form-group">
                    <label>Número*</label>
                    <input type="text" placeholder="123" value={formData.number} onChange={(e) => handleInputChange("number", e.target.value)} />
                  </div>
                </div>
                <div className="form-group">
                  <label>Rua/Avenida*</label>
                  <input type="text" placeholder="Rua..." value={formData.street} onChange={(e) => handleInputChange("street", e.target.value)} />
                </div>
                <div className="form-row two-cols">
                  <div className="form-group">
                    <label>Bairro*</label>
                    <input type="text" placeholder="Bairro" value={formData.neighborhood} onChange={(e) => handleInputChange("neighborhood", e.target.value)} />
                  </div>
                  <div className="form-group">
                    <label>Complemento</label>
                    <input type="text" placeholder="Apto, Bloco..." value={formData.complement} onChange={(e) => handleInputChange("complement", e.target.value)} />
                  </div>
                </div>
                <div className="form-group">
                  <label>Cidade - Estado*</label>
                  <input type="text" placeholder="Cidade - UF" value={formData.cityState} onChange={(e) => handleInputChange("cityState", e.target.value)} />
                </div>

                {/* SuperFrete Options Select */}
                {siteSettings.superfrete?.enabled && formData.zipCode.replace(/\D/g, "").length === 8 && (
                  <div style={{ marginTop: 8, borderTop: '1px solid var(--border-color)', paddingTop: 12 }}>
                    <span style={{ fontSize: 13, fontWeight: '700', color: 'var(--accent-gold)', display: 'block', marginBottom: 8 }}>🚚 Opções de Envio Disponíveis</span>
                    
                    {shippingLoading && (
                      <p style={{ color: 'var(--text-muted)', fontSize: 12, margin: '6px 0' }}>Calculando frete com a SuperFrete...</p>
                    )}
                    
                    {shippingError && (
                      <div style={{ marginTop: 8, background: 'rgba(239,68,68,0.05)', border: '1px solid rgba(239,68,68,0.2)', borderRadius: 8, padding: 10 }}>
                        <p style={{ color: '#ef4444', fontSize: 12, margin: 0, fontWeight: 'bold' }}>⚠️ Erro ao calcular com SuperFrete: {shippingError}</p>
                        <p style={{ color: 'var(--text-muted)', fontSize: 11, margin: '4px 0 0' }}>Utilizando taxa fixa padrão de R$ 15,00 para prosseguir com a entrega.</p>
                      </div>
                    )}
                    
                    {!shippingLoading && !shippingError && shippingOptions.length === 0 && (
                      <p style={{ color: 'var(--text-muted)', fontSize: 12, margin: '6px 0' }}>Digite um CEP válido para calcular as opções de frete.</p>
                    )}
                    
                    {!shippingLoading && shippingOptions.length > 0 && (
                      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                        {shippingOptions.map(opt => {
                          const isSelected = selectedShippingOption?.id === opt.id;
                          return (
                            <div
                              key={opt.id}
                              style={{
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'space-between',
                                padding: '10px 14px',
                                background: isSelected ? 'rgba(56,182,255,0.05)' : 'var(--bg-tertiary)',
                                border: isSelected ? '1px solid var(--accent-gold)' : '1px solid var(--border-color)',
                                borderRadius: 8,
                                cursor: 'pointer',
                                transition: 'all 0.2s'
                              }}
                              onClick={() => setSelectedShippingOption(opt)}
                            >
                              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                                <input type="radio" checked={isSelected} readOnly />
                                <div>
                                  <span style={{ fontSize: 13, fontWeight: '700', display: 'block' }}>{opt.name} ({opt.company})</span>
                                  <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>Prazo estimado: {opt.deliveryTime} {opt.deliveryTime === 1 ? 'dia útil' : 'dias úteis'}</span>
                                </div>
                              </div>
                              <span style={{ fontSize: 13, fontWeight: '800', color: isFreeShippingEligible ? '#22c55e' : 'var(--accent-gold)' }}>
                                {isFreeShippingEligible ? 'Grátis' : `R$ ${opt.price.toFixed(2).replace('.', ',')}`}
                              </span>
                            </div>
                          );
                        })}
                      </div>
                    )}
                  </div>
                )}
              </div>
            )}
          </div>
        )}

        {step === 3 && (
          <div style={{ textAlign: 'center' }}>
            <h3 className="checkout-title" style={{ border: 'none', marginBottom: 6 }}>3. Pagamento via Pix</h3>
            
            {settingsLoading && (
              <p style={{ color: 'var(--text-muted)', padding: 20 }}>Carregando dados de pagamento...</p>
            )}

            {!settingsLoading && !mpToken && (
              <div style={{ background: 'rgba(239,68,68,0.1)', border: '1px solid rgba(239,68,68,0.3)', borderRadius: 8, padding: 20, marginBottom: 20 }}>
                <p style={{ color: '#ef4444', fontSize: 14, fontWeight: 600, marginBottom: 4 }}>Token do Mercado Pago não configurado</p>
                <p style={{ color: 'var(--text-muted)', fontSize: 12 }}>Configure o Access Token do Mercado Pago no painel Admin para gerar QR Codes de pagamento reais.</p>
              </div>
            )}

            {!settingsLoading && mpToken && !mpPayment && (
              <div>
                <p style={{ color: 'var(--text-muted)', fontSize: 13, marginBottom: 20 }}>
                  Clique abaixo para gerar o QR Code Pix via Mercado Pago.
                </p>
                <div style={{ background: 'var(--bg-tertiary)', border: '1px solid var(--border-color)', borderRadius: 8, padding: 16, marginBottom: 20, textAlign: 'left' }}>
                  <div className="totals-row final" style={{ padding: '8px 0 0', marginTop: 0, fontSize: 18 }}>
                    <span>Total a Pagar</span>
                    <span style={{ color: 'var(--accent-gold)' }}>R$ {finalTotal.toFixed(2).replace('.', ',')}</span>
                  </div>
                </div>
                <button className="checkout-trigger-btn" style={{ background: 'var(--accent-gold)', color: '#000', fontSize: 16, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }} onClick={handleGeneratePix} disabled={mpLoading}>
                  {mpLoading ? "Gerando QR Code..." : "Gerar QR Code Pix"}
                </button>
              </div>
            )}

            {mpPayment && (
              <div>
                <p style={{ color: 'var(--text-muted)', fontSize: 13, marginBottom: 16 }}>
                  Escaneie o QR Code abaixo ou copie a chave Pix.
                </p>

                {mpPayment.qr_code_base64 && (
                  <div className="pix-container">
                    <div className="pix-qr-placeholder">
                      <img src={`data:image/png;base64,${mpPayment.qr_code_base64}`} alt="QR Code Pix" className="pix-qr-img" />
                    </div>
                  </div>
                )}

                {mpPayment.qr_code && (
                  <div className="pix-key-box" style={{ marginTop: 12 }}>
                    <span className="pix-key-text" style={{ fontSize: 11, wordBreak: 'break-all' }}>{mpPayment.qr_code}</span>
                    <button className="pix-copy-btn" onClick={() => { navigator.clipboard.writeText(mpPayment.qr_code); showToast("Código Pix copiado!"); }}>
                      Copiar
                    </button>
                  </div>
                )}

                {mpPayment.ticket_url && (
                  <a href={mpPayment.ticket_url} target="_blank" rel="noopener" style={{ display: 'inline-block', marginTop: 12, color: 'var(--accent-gold)', fontSize: 13 }}>
                    Abrir no Mercado Pago
                  </a>
                )}

                <div style={{ background: 'var(--bg-tertiary)', border: '1px solid var(--border-color)', borderRadius: 8, padding: 16, marginTop: 16, marginBottom: 20, textAlign: 'left' }}>
                  <div className="totals-row final" style={{ padding: '8px 0 0', marginTop: 0, fontSize: 18 }}>
                    <span>Total a Pagar</span>
                    <span style={{ color: 'var(--accent-gold)' }}>R$ {finalTotal.toFixed(2).replace('.', ',')}</span>
                  </div>
                </div>

                <button className="checkout-trigger-btn" style={{ background: '#22c55e', color: '#fff', fontSize: 16, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }} onClick={handleCheckPayment} disabled={mpChecking}>
                  {mpChecking ? "Verificando..." : "Verificar Pagamento"}
                </button>
              </div>
            )}
          </div>
        )}

        <div className="checkout-actions">
          {step > 1 && (
            <button className="btn-back" onClick={handleBack}>Voltar</button>
          )}
          {step < 3 && (
            <button className="btn-next" style={{ marginLeft: 'auto' }} onClick={handleNext}>Continuar</button>
          )}
        </div>
      </div>
    </div>
  );
};

function NovaStore() {
  const [cat, setCat] = useState("Tudo");
  const [cart, setCart] = useState([]);
  const [searchVal, setSearchVal] = useState("");
  const [sortBy, setSortBy] = useState("default");

  const [products, setProducts] = useState([]);
  const [settings, setSettings] = useState(null);
  const [notifications, setNotifications] = useState([]);
  const [orders, setOrders] = useState([]);
  const [banners, setBanners] = useState([]);

  const [loggedInUser, setLoggedInUser] = useState(null);

  const [showCart, setShowCart] = useState(false);
  const [showMenu, setShowMenu] = useState(false);
  const [quickViewProduct, setQuickViewProduct] = useState(null);
  const [showSizeGuide, setShowSizeGuide] = useState(false);
  const [showCheckout, setShowCheckout] = useState(false);
  const [showUserModal, setShowUserModal] = useState(false);

  const [appliedCoupon, setAppliedCoupon] = useState(null);

  const [toast, setToast] = useState({ show: false, message: '', type: 'success' });

  const showToastMsg = (message, type = 'success') => {
    setToast({ show: true, message, type });
    setTimeout(() => {
      setToast(prev => ({ ...prev, show: false }));
    }, 3500);
  };

  const syncStoreData = () => {
    fetch('api.php?action=products')
      .then(r => r.json())
      .then(data => {
        if (Array.isArray(data) && data.length > 0) {
          const storeProducts = data.map(p => ({
            id: p.id,
            name: p.name,
            price: p.price,
            originalPrice: p.oldPrice,
            cat: p.category,
            img: p.images && p.images.length > 0 ? p.images[0] : '',
            tag: '',
            sizes: p.sizes || ['P', 'M', 'G', 'GG', 'XG'],
            type: 'atacado_varejo',
            atacadoPrice: (p.wholesaleTiers && p.wholesaleTiers.length > 1) ? p.wholesaleTiers[1].price : p.price,
            desc: p.description || ''
          }));
          setProducts(storeProducts);
        }
      })
      .catch(() => {});

    fetch('api.php?action=settings')
      .then(r => r.json())
      .then(data => {
        if (data && !data.error) {
          const merged = {
            accentColor: '#38B6FF',
            announcementText: '',
            pixKey: '',
            phone: '',
            mercadopagoToken: ''
          };
          if (data.general) Object.assign(merged, data.general);
          if (data.apiKeys) {
            if (data.apiKeys.mercadopagoToken) merged.mercadopagoToken = data.apiKeys.mercadopagoToken;
          }
          if (data.payments) Object.assign(merged, data.payments);
          if (data.superfrete) merged.superfrete = data.superfrete;
          setSettings(merged);
          if (merged.accentColor) {
            document.documentElement.style.setProperty('--accent-gold', merged.accentColor);
            document.documentElement.style.setProperty('--accent-gold-hover', darkenColor(merged.accentColor, -10));
          }
        }
      })
      .catch(() => {});

    fetch('api.php?action=notifications')
      .then(r => r.json())
      .then(data => {
        if (Array.isArray(data)) setNotifications(data);
      })
      .catch(() => {});

    fetch('api.php?action=banners')
      .then(r => r.json())
      .then(data => {
        if (Array.isArray(data) && data.length > 0) setBanners(data);
      })
      .catch(() => {});
  };
  useEffect(() => {
    syncStoreData();
    loadOrders();

    try {
      const savedCart = sessionStorage.getItem("import_cart");
      if (savedCart) setCart(JSON.parse(savedCart));
    } catch(e) {}

    try {
      const savedCoupon = sessionStorage.getItem("import_coupon");
      if (savedCoupon) setAppliedCoupon(JSON.parse(savedCoupon));
    } catch(e) {}

    fetch('api.php?action=session')
      .then(r => r.json())
      .then(user => { if (user) setLoggedInUser(user); })
      .catch(() => {});

    fetch('api.php?action=products')
      .then(r => r.json())
      .then(data => {
        if (Array.isArray(data) && data.length > 0) {
          const storeProducts = data.map(p => ({
            id: p.id, name: p.name, price: p.price, originalPrice: p.oldPrice,
            cat: p.category, img: p.images && p.images.length > 0 ? p.images[0] : '',
            tag: p.brand || '', sizes: p.sizes || ['P', 'M', 'G', 'GG', 'XG'],
            type: 'atacado_varejo',
            atacadoPrice: (p.wholesaleTiers && p.wholesaleTiers.length > 1) ? p.wholesaleTiers[1].price : p.price,
            desc: p.description || ''
          }));
          setProducts(storeProducts);
        }
      })
      .catch(() => {});
  }, []);
  const saveCartToStorage = (newCart) => {
    setCart(newCart);
    sessionStorage.setItem("import_cart", JSON.stringify(newCart));
  };

  const addToCart = (product) => {
    if (product === null) {
      showToastMsg("Selecione um tamanho antes de adicionar!", "error");
      return;
    }

    const isUserAtacado = loggedInUser && loggedInUser.type === "atacado";
    const cartPrice = isUserAtacado ? product.atacadoPrice : product.price;

    const customKey = `${product.id}_${product.selectedSize}_${product.customName || ''}_${product.customNumber || ''}`;

    const exists = cart.find(item => item.cartId === customKey);
    let newCart;
    if (exists) {
      newCart = cart.map(item => item.cartId === customKey ? { ...item, qty: item.qty + 1 } : item);
      showToastMsg(`Quantidade de ${product.name} atualizada na sacola!`);
    } else {
      newCart = [...cart, { ...product, price: cartPrice, cartId: customKey, qty: 1 }];
      showToastMsg(`${product.name} adicionado à sacola!`);
    }

    saveCartToStorage(newCart);
    setShowCart(true);

    if (window.trackAddToCart) {
      window.trackAddToCart({
        id: product.id,
        name: product.name,
        category: product.cat,
        price: cartPrice,
        selectedColor: product.selectedColor || '',
        selectedSize: product.selectedSize || ''
      }, 1);
    }
    if (window.fbq) {
      fbq('track', 'AddToCart', {
        content_name: product.name,
        content_ids: [product.id],
        content_type: 'product',
        value: cartPrice,
        currency: 'BRL'
      });
    }
  };

  const removeFromCart = (cartId) => {
    const item = cart.find(i => i.cartId === cartId);
    if (item) {
      showToastMsg(`${item.name} removido.`);
      if (window.trackRemoveFromCart) {
        window.trackRemoveFromCart({ id: item.id, name: item.name, price: item.price });
      }
    }
    saveCartToStorage(cart.filter(i => i.cartId !== cartId));
  };

  const updateQty = (cartId, delta) => {
    const newCart = cart.map(item => {
      if (item.cartId !== cartId) return item;
      const newQty = item.qty + delta;
      return newQty > 0 ? { ...item, qty: newQty } : item;
    }).filter(item => item.qty > 0);
    saveCartToStorage(newCart);
  };

  const checkPendingOrders = (fetchedOrders) => {
    fetchedOrders.forEach(ord => {
      if (ord.status === 'Pendente' || ord.status === 'Pending') {
        let paymentInfo = null;
        try {
          paymentInfo = typeof ord.payment === 'string' ? JSON.parse(ord.payment) : ord.payment;
        } catch(e) {}
        
        if (paymentInfo && paymentInfo.payment_id && paymentInfo.payment_id !== 'Cupom 100%' && paymentInfo.payment_id !== 'Gerando...') {
          fetch('api.php?action=mp_check_payment', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
              paymentId: paymentInfo.payment_id
            })
          })
          .then(r => r.json())
          .then(res => {
            if (res.status === 'approved') {
              showToastMsg("🎉 Pagamento aprovado! Seu pedido já está sendo processado.");
              fetch('api.php?action=my_orders')
                .then(r => r.json())
                .then(updatedData => { if (Array.isArray(updatedData)) setOrders(updatedData); })
                .catch(() => {});
            }
          }).catch(() => {});
        }
      }
    });
  };

  function loadOrders() {
    fetch('api.php?action=my_orders')
      .then(r => r.json())
      .then(data => { 
        if (Array.isArray(data)) {
          setOrders(data);
          checkPendingOrders(data);
        }
      })
      .catch(() => {});
  }

  const clearCart = () => {
    saveCartToStorage([]);
    setAppliedCoupon(null);
    sessionStorage.removeItem("import_coupon");
    loadOrders();
  };

  const handleUserLogin = (user) => {
    setLoggedInUser(user);
    loadOrders();
    
    if (user.type === "atacado") {
      const updatedCart = cart.map(item => {
        const matchingProduct = products.find(p => p.id === item.id);
        if (matchingProduct) {
          return { ...item, price: matchingProduct.atacadoPrice };
        }
        return item;
      });
      saveCartToStorage(updatedCart);
    }
  };

  const handleUserLogout = () => {
    setLoggedInUser(null);
    showToastMsg("Você saiu da conta.");
    setShowUserModal(false);

    const updatedCart = cart.map(item => {
      const matchingProduct = products.find(p => p.id === item.id);
      if (matchingProduct) {
        return { ...item, price: matchingProduct.price };
      }
      return item;
    });
    saveCartToStorage(updatedCart);
  };

  const applyCoupon = (code) => {
    const uppercase = code.toUpperCase().trim();
    fetch('api.php?action=coupons')
      .then(r => r.json())
      .then(activeCoupons => {
        if (Array.isArray(activeCoupons)) {
          const found = activeCoupons.find(c => c.code.toUpperCase() === uppercase);
          if (found) {
            if (found.maxUses > 0 && (found.timesUsed || 0) >= found.maxUses) {
              showToastMsg("Este cupom já atingiu o limite de usos.", "error");
              return;
            }
            if (found.targetUserType && found.targetUserType !== 'all') {
              const userType = loggedInUser ? loggedInUser.type : 'varejo';
              if (found.targetUserType !== userType) {
                showToastMsg(`Este cupom é exclusivo para clientes de ${found.targetUserType === 'atacado' ? 'Atacado' : 'Varejo'}.`, "error");
                return;
              }
            }
            setAppliedCoupon(found);
            sessionStorage.setItem("import_coupon", JSON.stringify(found));
            showToastMsg(`🎟️ Cupom ${found.code} aplicado!`);
          }
          else { showToastMsg("Cupom inválido ou expirado.", "error"); }
        } else { showToastMsg("Cupom inválido ou expirado.", "error"); }
      })
      .catch(() => { showToastMsg("Erro ao validar cupom.", "error"); });
  };
  const removeCoupon = () => { setAppliedCoupon(null); showToastMsg("Cupom removido do carrinho."); };
  let filtered = cat === "Tudo" ? products
    : cat === "Promoções" ? products.filter(p => p.tag === "Sale" || p.tag === "Oferta" || p.originalPrice > p.price)
    : cat === "Lançamentos" ? products.filter(p => p.tag === "Lançamento" || p.tag === "Lançamentos")
    : products.filter(p => p.cat === cat);

  if (searchVal.trim() !== "") {
    const q = searchVal.toLowerCase();
    filtered = filtered.filter(p => p.name.toLowerCase().includes(q) || p.cat.toLowerCase().includes(q) || p.desc.toLowerCase().includes(q));
  }

  if (sortBy === "price_asc") {
    filtered = [...filtered].sort((a, b) => {
      const pA = loggedInUser && loggedInUser.type === "atacado" ? a.atacadoPrice : a.price;
      const pB = loggedInUser && loggedInUser.type === "atacado" ? b.atacadoPrice : b.price;
      return pA - pB;
    });
  } else if (sortBy === "price_desc") {
    filtered = [...filtered].sort((a, b) => {
      const pA = loggedInUser && loggedInUser.type === "atacado" ? a.atacadoPrice : a.price;
      const pB = loggedInUser && loggedInUser.type === "atacado" ? b.atacadoPrice : b.price;
      return pB - pA;
    });
  }

  const cartCount = cart.reduce((s, item) => s + item.qty, 0);
  const sectionTitle = cat === "Tudo" ? "TODOS OS PRODUTOS" : cat === "Promoções" ? "OFERTAS ESPECIAIS" : cat === "Lançamentos" ? "NOVIDADES / LANÇAMENTOS" : cat.toUpperCase();

  const announcementText = settings ? settings.announcementText : "🔥 PROMOÇÃO DE LANÇAMENTO: USE O CUPOM IMPORT10 E GANHE 10% OFF!";

  const availableCategories = settings && Array.isArray(settings.categories) 
    ? settings.categories 
    : ["Seleções", "Brasileiros", "Internacional", "Kit Completo", "Kit Infantil"];
  const catsList = ["Tudo", ...availableCategories, "Lançamentos", "Promoções"];

  return (
    <div>
      <AnnouncementBar text={announcementText} />
      <Header
        cartCount={cartCount}
        onCartClick={() => setShowCart(true)}
        onMenuToggle={() => setShowMenu(!showMenu)}
        activeCat={cat}
        onCatSelect={(category) => { setCat(category); window.scrollTo({ top: 500, behavior: 'smooth' }); }}
        searchVal={searchVal}
        onSearchChange={(e) => setSearchVal(e.target.value)}
        onUserClick={() => setShowUserModal(true)}
        loggedInUser={loggedInUser}
        categories={availableCategories}
      />

      {/* Mobile Menu */}
      <div className={`mobile-menu ${showMenu ? 'open' : ''}`}>
        {catsList.map(c => (
          <button key={c} onClick={() => { setCat(c); setShowMenu(false); window.scrollTo({ top: 500, behavior: 'smooth' }); }} className="mobile-menu-item">{c}</button>
        ))}
        {!loggedInUser ? (
          <button onClick={() => { setShowUserModal(true); setShowMenu(false); }} className="mobile-menu-item" style={{ borderColor: 'var(--accent-gold)', color: 'var(--accent-gold)' }}>Acessar Conta</button>
        ) : (
          <button onClick={() => { setShowUserModal(true); setShowMenu(false); }} className="mobile-menu-item" style={{ borderColor: '#25D366', color: '#25D366' }}>Minha Conta ({loggedInUser.name})</button>
        )}
      </div>

      <HeroCarousel onCatSelect={(category) => { setCat(category); window.scrollTo({ top: 560, behavior: 'smooth' }); }} banners={banners} />

      <div className="section-title-wrap">
        <h2 className="section-title">{sectionTitle}</h2>
        <div className="section-line"></div>
        <p className="section-sub">Produtos oficiais do Import Atacado e Varejo com acabamento premium e tecnologia esportiva.</p>
      </div>

      {/* Store Controls */}
      <div className="store-controls">
        <div className="cat-bar">
          {catsList.map(c => (
            <button
              key={c}
              onClick={() => setCat(c)}
              className={`cat-btn ${cat === c ? 'cat-btn-active' : ''}`}
            >
              {c}
            </button>
          ))}
        </div>

        <div className="search-sort-bar">
          <div className="search-wrap">
            <input
              type="text"
              className="search-input"
              placeholder="Buscar no Manto..."
              value={searchVal}
              onChange={(e) => {
                setSearchVal(e.target.value);
                if (e.target.value.length > 2 && window.trackSearch) {
                  window.trackSearch(e.target.value);
                }
              }}
            />
            <span className="search-icon-pos"><Icon name="search" size={16} /></span>
          </div>
          <select className="sort-select" value={sortBy} onChange={(e) => setSortBy(e.target.value)}>
            <option value="default">Relevância</option>
            <option value="price_asc">Menor Preço</option>
            <option value="price_desc">Maior Preço</option>
          </select>
        </div>
      </div>

      <main className="main-content">
        <div className="products-grid">
          {filtered.map(p => (
            <ProductCard
              key={p.id}
              product={p}
              onAdd={addToCart}
              onQuickView={(prod) => {
                setQuickViewProduct(prod);
                if (window.trackProductView) {
                  window.trackProductView({
                    id: prod.id, name: prod.name, category: prod.cat, price: prod.price
                  });
                }
                if (window.fbq) {
                  fbq('track', 'ViewContent', {
                    content_name: prod.name,
                    content_ids: [prod.id],
                    content_type: 'product',
                    value: prod.price,
                    currency: 'BRL'
                  });
                }
              }}
              isUserAtacado={loggedInUser && loggedInUser.type === "atacado"}
            />
          ))}
        </div>
        {filtered.length === 0 && (
          <div style={{ textAlign: 'center', color: 'var(--text-muted)', padding: '80px 20px' }}>
            <Icon name="search" size={40} />
            <p style={{ marginTop: 12, fontWeight: 600 }}>Nenhum item oficial encontrado.</p>
            <p style={{ fontSize: 13, marginTop: 4 }}>Tente pesquisar com outro termo ou selecione outra categoria.</p>
          </div>
        )}
      </main>

      {/* Benefits */}
      <div className="section-title-wrap" style={{ padding: '20px 20px 10px' }}>
        <h2 className="section-title" style={{ fontSize: 28 }}>BENEFÍCIOS EXCLUSIVOS</h2>
        <div className="section-line" style={{ width: 40 }}></div>
      </div>
      <div className="benefits">
        <div className="benefit-card">
          <div className="benefit-icon"><Icon name="truck" size={26} /></div>
          <h4 className="benefit-title">Envio Rápido</h4>
          <p className="benefit-desc">Frete grátis acima de R$ 250 ou taxa fixa de R$ 15 para todo o Brasil.</p>
        </div>
        <div className="benefit-card">
          <div className="benefit-icon"><Icon name="star" size={26} /></div>
          <h4 className="benefit-title">Qualidade Premium</h4>
          <p className="benefit-desc">Escudos bordados de alta definição e tecidos Dry-Fit oficiais.</p>
        </div>
        <div className="benefit-card">
          <div className="benefit-icon"><Icon name="heart" size={26} /></div>
          <h4 className="benefit-title">Satisfação Garantida</h4>
          <p className="benefit-desc">Troca facilitada sem burocracia ou suporte dedicado via chat.</p>
        </div>
      </div>

      {/* Footer */}
      <footer className="footer">
        <div className="footer-inner">
          {/* Coluna 1: Logo, Descrição e Selos */}
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '15px' }}>
              <img src="logo.png" alt="Genio Imports Logo" style={{ width: '44px', height: '44px', objectFit: 'contain' }} />
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
                <span style={{ fontSize: '20px', fontWeight: '800', fontFamily: 'var(--font-heading)', color: 'var(--accent-gold)', letterSpacing: '1px', lineHeight: 1 }}>GENIO IMPORTS</span>
                <span style={{ fontSize: '11px', fontWeight: '700', color: 'var(--text-muted)', letterSpacing: '2px', marginTop: '2px' }}>ATACADO & VAREJO</span>
              </div>
            </div>
            <p className="footer-desc-custom">
              {settings && settings.storeDesc ? settings.storeDesc : "Camisas de futebol no atacado e varejo com qualidade premium e o melhor preço pra você revender e lucrar."}
            </p>
            <div className="footer-badge-custom">
              <Icon name="hanger" size={14} />
              <span>{settings && settings.badgeHanger ? settings.badgeHanger : "VAREJO E ATACADO A PARTIR DE 2 PEÇAS"}</span>
            </div>
            <div className="footer-badge-custom footer-badge-pix">
              <span className="footer-badge-pix-tag">PIX</span>
              <span>{settings && settings.badgePix ? settings.badgePix : "Pagamento - aprovação na hora"}</span>
            </div>
            <div className="footer-badge-custom">
              <Icon name="shield" size={14} />
              <span>{settings && settings.badgeSecurity ? settings.badgeSecurity : "Ambiente 100% seguro - compra protegida"}</span>
            </div>
          </div>

          {/* Coluna 2: Navegação */}
          <div>
            <div className="footer-title-wrap">
              <div className="footer-vertical-line"></div>
              <span className="footer-title-text">Navegação</span>
            </div>
            <ul className="footer-bullet-list">
              <li className="footer-bullet-item">
                <div className="footer-bullet-dot"></div>
                <a href="#" onClick={(e) => { e.preventDefault(); setCat("Tudo"); window.scrollTo({ top: 500, behavior: 'smooth' }); }} className="footer-bullet-link">Início</a>
              </li>
              {availableCategories.map(c => (
                <li key={c} className="footer-bullet-item">
                  <div className="footer-bullet-dot"></div>
                  <a href="#" onClick={(e) => { e.preventDefault(); setCat(c); window.scrollTo({ top: 500, behavior: 'smooth' }); }} className="footer-bullet-link">{c}</a>
                </li>
              ))}
            </ul>
          </div>

          {/* Coluna 3: Atendimento */}
          <div>
            <div className="footer-title-wrap">
              <div className="footer-vertical-line"></div>
              <span className="footer-title-text">Atendimento</span>
            </div>
            <p style={{ color: 'var(--text-muted)', fontSize: '10px', fontWeight: '700', textTransform: 'uppercase', letterSpacing: '1px', marginBottom: '4px' }}>Horário de Atendimento</p>
            <p style={{ color: 'var(--text-main)', fontSize: '15px', fontWeight: '800', marginBottom: '20px', lineHeight: '1.4' }}>
              {settings && settings.workingHours ? settings.workingHours.split('/')[0].trim() : "Segunda a Sábado"}<br />
              <span style={{ color: 'var(--accent-gold)' }}>{settings && settings.workingHours && settings.workingHours.includes('/') ? settings.workingHours.split('/')[1].trim() : "09h às 19h"}</span>
            </p>
            <ul className="footer-bullet-list">
              <li className="footer-bullet-item">
                <div className="footer-bullet-dot"></div>
                <a href="#" onClick={(e) => { e.preventDefault(); showToastMsg("Política de Privacidade disponível no checkout."); }} className="footer-bullet-link">Política de Privacidade</a>
              </li>
              <li className="footer-bullet-item">
                <div className="footer-bullet-dot"></div>
                <a href="#" onClick={(e) => { e.preventDefault(); showToastMsg("Dúvidas? Entre em contato via WhatsApp!"); }} className="footer-bullet-link">Perguntas Frequentes</a>
              </li>
            </ul>
          </div>

          {/* Coluna 4: Contato */}
          <div>
            <div className="footer-title-wrap">
              <div className="footer-vertical-line"></div>
              <span className="footer-title-text">Contato</span>
            </div>
            
            <div className="footer-contact-card">
              <div className="footer-contact-icon">
                <Icon name="mail" size={18} />
              </div>
              <div className="footer-contact-info">
                <span className="footer-contact-label">E-mail</span>
                <a href={`mailto:${settings && settings.contactEmail ? settings.contactEmail : "leocosta1103@yahoo.com.br"}`} className="footer-contact-value">
                  {settings && settings.contactEmail ? settings.contactEmail : "leocosta1103@yahoo.com.br"}
                </a>
              </div>
            </div>

            <div className="footer-contact-card">
              <div className="footer-contact-icon">
                <Icon name="whatsapp" size={18} />
              </div>
              <div className="footer-contact-info">
                <span className="footer-contact-label">WhatsApp</span>
                <a href={`https://api.whatsapp.com/send?phone=${settings && settings.phone ? settings.phone : "557398487799"}&text=Olá!%20Vim%20pelo%20site%20da%20Genio%20Imports%20e%20preciso%20de%20suporte.`} target="_blank" className="footer-contact-value">
                  +{settings && settings.phone ? settings.phone : "557398487799"}
                </a>
              </div>
            </div>

            <a href={settings && settings.vipGroupLink ? settings.vipGroupLink : "#"} target="_blank" className="footer-contact-card" style={{ textDecoration: 'none' }}>
              <div className="footer-contact-icon">
                <Icon name="users" size={18} />
              </div>
              <div className="footer-contact-info">
                <span className="footer-contact-label">Grupo VIP</span>
                <span className="footer-contact-value-link">Clique aqui para fazer parte do nosso grupo VIP</span>
              </div>
            </a>
          </div>
        </div>
        <div className="footer-bottom">
          &copy; {new Date().getFullYear()} Genio Imports. Desenvolvido para campeões. Todos os direitos reservados.
        </div>
      </footer>

      {/* Cart Drawer */}
      <CartDrawer
        isOpen={showCart}
        items={cart}
        onRemove={removeFromCart}
        onUpdateQty={updateQty}
        onClose={() => setShowCart(false)}
        onCheckout={() => { setShowCart(false); setShowCheckout(true); }}
        appliedCoupon={appliedCoupon}
        onApplyCoupon={applyCoupon}
        onRemoveCoupon={removeCoupon}
        isUserAtacado={loggedInUser && loggedInUser.type === "atacado"}
      />

      {/* Quick View Modal */}
      <QuickViewModal
        product={quickViewProduct}
        isOpen={quickViewProduct !== null}
        onClose={() => setQuickViewProduct(null)}
        onAdd={addToCart}
        onSizeGuideOpen={() => setShowSizeGuide(true)}
        isUserAtacado={loggedInUser && loggedInUser.type === "atacado"}
      />

      {/* Size Guide Modal */}
      <SizeGuideModal
        isOpen={showSizeGuide}
        onClose={() => setShowSizeGuide(false)}
      />

      {/* Checkout Modal */}
      <CheckoutModal
        isOpen={showCheckout}
        onClose={() => setShowCheckout(false)}
        cartItems={cart}
        appliedCoupon={appliedCoupon}
        onClearCart={clearCart}
        showToast={showToastMsg}
        loggedInUser={loggedInUser}
        settings={settings}
      />

      {/* User Auth/Dashboard Modal */}
      <UserModal
        isOpen={showUserModal}
        onClose={() => setShowUserModal(false)}
        loggedInUser={loggedInUser}
        onLogin={handleUserLogin}
        onRegister={() => {}}
        onLogout={handleUserLogout}
        notifications={notifications}
        orders={orders}
        showToast={showToastMsg}
        loadOrders={loadOrders}
      />

      {/* Toast Notification Container */}
      {toast.show && (
        <div className={`toast ${toast.type === 'error' ? 'error' : 'success'}`}>
          <Icon name={toast.type === 'error' ? 'x' : 'check'} size={16} />
          <span>{toast.message}</span>
        </div>
      )}

      {/* Floating Buttons */}
      <a href="#" className="floating-btn" onClick={(e) => { e.preventDefault(); setShowSizeGuide(true); }}>
        <Icon name="fileText" size={18} />
        <span>GUIA DE MEDIDAS</span>
      </a>

      <a href={`https://api.whatsapp.com/send?phone=${settings && settings.phone ? settings.phone : '557398487799'}&text=Olá!%20Vim%20pelo%20site%20da%20Genio%20Imports%20e%20preciso%20de%20suporte.`} target="_blank" className="whatsapp-btn">
        <Icon name="whatsapp" size={26} />
      </a>
    </div>
  );
}