// ========= ModoLar — View: Home =========
/* global React, MODOLAR_DATA, Icon, Stars, Logo, fmtBRL */
const { useState: useStateH, useEffect: useEffectH } = React;

function Hero({ layout }) {
  // layouts: split, fullbleed, carousel
  if (layout === 'fullbleed') {
    return (
      <section className="hero">
        <div className="hero-fullbleed fade-up">
          <img className="bg" src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=1800&q=80&auto=format&fit=crop" alt=""/>
          <div style={{maxWidth: 760}}>
            <span className="hero-eyebrow" style={{color:'#fff'}}>
              <span className="capsule" style={{background:'#fff'}}/> Novidade ModoLar
            </span>
            <h1 className="hero-title" style={{margin:'16px 0'}}>
              Frete grátis<br/>em toda <span className="cap cap-pulse"/>Campinas
            </h1>
            <p className="hero-sub" style={{margin:'0 auto', maxWidth: 520}}>
              Pagamento na entrega, em até 3 dias úteis. Tecnologia brasileira, garantia de 1 ano.
            </p>
            <div className="hero-cta-row" style={{justifyContent:'center'}}>
              <button className="btn btn-orange btn-lg">Ver catálogo <Icon.Arrow size={18}/></button>
              <button className="btn btn-ghost btn-lg" style={{color:'#fff', borderColor:'rgba(255,255,255,.5)'}}>Falar no WhatsApp</button>
            </div>
          </div>
        </div>
        <DiffStrip/>
      </section>
    );
  }

  if (layout === 'carousel') {
    return (
      <section className="hero">
        <HeroCarousel/>
        <DiffStrip/>
      </section>
    );
  }

  // split (default)
  return (
    <section className="hero">
      <div className="hero-grid">
        <div className="hero-left fade-up">
          <div>
            <span className="hero-eyebrow">
              <span className="capsule" style={{background:'#fff'}}/> Só em Campinas
            </span>
            <h1 className="hero-title">
              Frete<br/>
              grátis<br/>
              <span style={{color:'#1A1A1A'}}>em toda<br/>a região.</span>
            </h1>
            <p className="hero-sub">
              Pagamento na entrega • até 3 dias úteis<br/>
              Tecnologia brasileira • garantia de 1 ano
            </p>
          </div>
          <div className="hero-cta-row">
            <button className="btn btn-dark btn-lg">Ver catálogo <Icon.Arrow size={18}/></button>
            <button className="btn btn-ghost btn-lg" style={{color:'#fff', borderColor:'rgba(255,255,255,.5)'}}>
              <Icon.WhatsApp size={16}/> WhatsApp
            </button>
          </div>
        </div>
        <div className="hero-right fade-up d1">
          <img src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=1400&q=80&auto=format&fit=crop" alt=""/>
          <div className="hero-price-card fade-up d3">
            <span className="tag tag-orange" style={{marginBottom: 10}}>Oferta</span>
            <div className="label">Modular Orla</div>
            <div className="strike">De R$ 5.390,00</div>
            <div className="price">R$ 3.890</div>
            <div className="install">12x de R$ 324,16 sem juros</div>
          </div>
        </div>
      </div>
      <DiffStrip/>
    </section>
  );
}

function HeroCarousel() {
  const slides = [
    {
      bg: 'https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=1800&q=80&auto=format&fit=crop',
      eyebrow: 'Festival ModoLar',
      title: 'Frete grátis',
      titleLine2: 'em toda Campinas',
      sub: 'Pagamento na entrega. Entrega em até 3 dias úteis.'
    },
    {
      bg: 'https://images.unsplash.com/photo-1540574163026-643ea20ade25?w=1800&q=80&auto=format&fit=crop',
      eyebrow: 'Coleção Bouclê',
      title: 'Sofás prensados',
      titleLine2: 'que duram uma vida',
      sub: 'Tecnologia brasileira, garantia de 1 ano.'
    },
    {
      bg: 'https://images.unsplash.com/photo-1519947486511-46149fa0a254?w=1800&q=80&auto=format&fit=crop',
      eyebrow: 'Novidade',
      title: 'Poltrona Arya',
      titleLine2: 'chegou à ModoLar',
      sub: 'Design autoral, entrega imediata.'
    }
  ];
  const [i, setI] = useStateH(0);
  useEffectH(() => {
    const t = setInterval(() => setI(x => (x + 1) % slides.length), 5500);
    return () => clearInterval(t);
  }, []);
  const s = slides[i];
  return (
    <div className="hero-fullbleed fade-up" key={i}>
      <img className="bg" src={s.bg} alt=""/>
      <div style={{maxWidth: 760}}>
        <span className="hero-eyebrow" style={{color:'#fff'}}>
          <span className="capsule" style={{background:'var(--orange)'}}/> {s.eyebrow}
        </span>
        <h1 className="hero-title" style={{margin:'16px 0'}}>
          {s.title}<br/>{s.titleLine2}
        </h1>
        <p className="hero-sub" style={{margin:'0 auto', maxWidth: 520}}>{s.sub}</p>
        <div className="hero-cta-row" style={{justifyContent:'center'}}>
          <button className="btn btn-orange btn-lg">Ver catálogo <Icon.Arrow size={18}/></button>
        </div>
      </div>
      <div style={{position:'absolute', bottom: 20, left:'50%', transform:'translateX(-50%)', display:'flex', gap: 8, zIndex: 3}}>
        {slides.map((_, idx) => (
          <button key={idx} onClick={() => setI(idx)} style={{
            width: idx === i ? 32 : 10, height: 6, borderRadius: 99,
            background: idx === i ? 'var(--orange)' : 'rgba(255,255,255,0.5)',
            transition: 'all .3s'
          }}/>
        ))}
      </div>
    </div>
  );
}

function DiffStrip() {
  return (
    <div className="diff-strip fade-up d2">
      <div className="diff-item"><Icon.Truck size={22}/><div><strong style={{display:'block'}}>Frete grátis</strong>toda Campinas</div></div>
      <div className="diff-item"><Icon.Wallet size={22}/><div><strong style={{display:'block'}}>Pagamento na entrega</strong>sem burocracia</div></div>
      <div className="diff-item"><Icon.Box size={22}/><div><strong style={{display:'block'}}>Até 3 dias úteis</strong>entrega expressa</div></div>
      <div className="diff-item"><Icon.Shield size={22}/><div><strong style={{display:'block'}}>Garantia 1 ano</strong>tecnologia brasileira</div></div>
    </div>
  );
}

function CategoryGrid({ navigate }) {
  return (
    <section>
      <div className="section-head">
        <div>
          <span className="section-eyebrow"><span className="capsule"/> Nossas linhas</span>
          <h2 className="section-title">Escolha seu <em>estilo</em></h2>
        </div>
        <button className="btn btn-ghost" onClick={() => navigate({view:'category', catId:'sofa-modular'})}>Ver tudo <Icon.Arrow size={16}/></button>
      </div>
      <div className="cats-grid">
        {MODOLAR_DATA.categories.map((c, i) => (
          <div key={c.id} className={`cat-card fade-up d${i+1}`} onClick={() => navigate({view:'category', catId:c.id})}>
            <img src={c.cover} alt={c.name}/>
            <div className="cat-card-body">
              <div>
                <span className="tag tag-outline">{c.tag}</span>
                <h3 style={{marginTop: 10}}>{c.name}</h3>
                <p>{c.tagline}</p>
              </div>
              <div className="cat-arrow"><Icon.Arrow size={20}/></div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function ProductCard({ product, onClick, onAdd, cardStyle }) {
  const discount = product.discount;
  return (
    <div className="product" data-card={cardStyle} onClick={() => onClick(product)}>
      <div className="product-img">
        <img src={product.images[0]} alt={product.name}/>
        <div className="product-badges">
          {discount > 0 && <span className="tag tag-green">{discount}% OFF</span>}
          {product.badges.map((b, i) => <span key={i} className={`tag tag-${b.type}`}>{b.label}</span>)}
        </div>
        <div className="product-fav"><Icon.Heart size={16}/></div>
      </div>
      <div className="product-body">
        <div className="product-title">{product.name}</div>
        <div className="product-swatches">
          {product.colors.slice(0, 5).map((c, i) => (
            <span key={i} className="swatch" style={{background: c.hex}} title={c.name}/>
          ))}
        </div>
        <div className="product-price-row">
          {product.priceOld && <span className="product-strike">R$ {fmtBRL(product.priceOld)}</span>}
          <span className="product-price">R$ {fmtBRL(product.price).replace(',00','')}<span className="cents">,{fmtBRL(product.price).split(',')[1]}</span></span>
          <span className="product-install">{product.installments}x de R$ {fmtBRL(product.installmentValue)} sem juros</span>
        </div>
        <button className="product-cta" onClick={(e) => { e.stopPropagation(); onAdd(product); }}>
          <Icon.Cart size={14}/> Adicionar ao carrinho
        </button>
      </div>
    </div>
  );
}

function OfferTabs({ navigate, onAdd, cardStyle }) {
  const tabs = [
    { id: 'all', label: 'Ofertas' },
    { id: 'sofa-modular', label: 'Sofás Modulares' },
    { id: 'sofa-cama', label: 'Sofás-Cama' },
    { id: 'poltrona', label: 'Poltronas' },
  ];
  const [active, setActive] = useStateH('all');
  const products = active === 'all' ? MODOLAR_DATA.products : MODOLAR_DATA.getByCategory(active);

  return (
    <section>
      <div className="section-head">
        <div>
          <span className="section-eyebrow"><span className="capsule"/> Ofertas exclusivas</span>
          <h2 className="section-title">Direto da <em>fábrica</em>, pra você</h2>
        </div>
      </div>
      <div className="tabs">
        {tabs.map(t => (
          <button key={t.id} className={`tab ${active === t.id ? 'active' : ''}`} onClick={() => setActive(t.id)}>
            {t.label}
          </button>
        ))}
      </div>
      <div className="products-grid">
        {products.slice(0, 8).map(p => (
          <ProductCard key={p.id} product={p} cardStyle={cardStyle}
            onClick={() => navigate({view:'product', productId: p.id})} onAdd={onAdd}/>
        ))}
      </div>
    </section>
  );
}

function Compare({ onAdd, navigate }) {
  const [type, setType] = useStateH('sofa');
  const list = type === 'sofa'
    ? [
        MODOLAR_DATA.getById('cama-bloom'),
        MODOLAR_DATA.getById('mod-orla-3l'),
        MODOLAR_DATA.getById('mod-pelion-4l'),
      ]
    : [
        MODOLAR_DATA.getById('polt-arya'),
        MODOLAR_DATA.getById('polt-ipe'),
        MODOLAR_DATA.getById('polt-nova'),
      ];

  return (
    <section>
      <div className="section-head" style={{justifyContent:'center', flexDirection:'column', textAlign:'center'}}>
        <span className="section-eyebrow" style={{justifyContent:'center'}}><span className="capsule"/> Comparador</span>
        <h2 className="section-title">Compare e escolha seu <em>móvel ideal</em></h2>
      </div>
      <div style={{display:'flex', justifyContent:'center'}}>
        <div className="compare-toggle">
          <button className={type === 'sofa' ? 'active' : ''} onClick={() => setType('sofa')}>
            <Icon.Box size={16}/> Sofás
          </button>
          <button className={type === 'poltrona' ? 'active' : ''} onClick={() => setType('poltrona')}>
            <Icon.Sparkle size={16}/> Poltronas
          </button>
        </div>
      </div>
      <div className="compare-grid">
        {list.map((p, idx) => (
          <div key={p.id} className={`compare-card fade-up d${idx+1}`}>
            <div className="compare-card-img">
              <img src={p.images[0]} alt={p.name}/>
              {p.badges[0] && <span className="tag tag-orange" style={{position:'absolute', bottom: 16, right: 16}}>{p.badges[0].label}</span>}
            </div>
            <div className="compare-card-body">
              <div>
                <Stars value={p.rating} size={14}/>
                <span style={{fontSize: 13, color:'var(--ink-500)', marginLeft: 8}}>{p.reviews} avaliações</span>
              </div>
              <h3 style={{fontSize: 22}} onClick={() => navigate({view:'product', productId: p.id})} style={{cursor:'pointer', fontSize: 22}}>{p.shortName}</h3>
              <p style={{fontSize: 13, color:'var(--ink-500)', margin: 0, lineHeight: 1.5}}>{p.tagline}</p>
              <div style={{display:'flex', flexDirection:'column', gap: 8, marginTop: 4}}>
                {Object.entries(p.ratings).map(([k, v]) => (
                  <div key={k} className="rating-bar">
                    <span style={{textTransform: 'capitalize'}}>{k}</span>
                    <div className="rating-dots">
                      {Array.from({length: 5}).map((_, i) => (
                        <span key={i} className={`dot ${i < v ? 'filled' : ''}`}/>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
              <ul className="compare-features">
                {p.features.slice(0, 3).map((f, i) => (
                  <li key={i}><Icon.Check size={14}/>{f}</li>
                ))}
              </ul>
              <div className="compare-price-row">
                <div>
                  <div className="lbl">A partir de</div>
                  <div className="val">R$ {fmtBRL(p.price).replace(',00','')}</div>
                </div>
                <button className="btn btn-wa" onClick={() => onAdd(p)}>
                  <Icon.Cart size={14}/> Comprar
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function HomeView({ navigate, onAdd, heroLayout, cardStyle }) {
  return (
    <>
      <Hero layout={heroLayout}/>
      <div className="shell">
        <CategoryGrid navigate={navigate}/>
        <OfferTabs navigate={navigate} onAdd={onAdd} cardStyle={cardStyle}/>
        <Compare onAdd={onAdd} navigate={navigate}/>
      </div>
    </>
  );
}

Object.assign(window, { HomeView, ProductCard });