/* linea-blanca.jsx — Showroom-style ecommerce page */

const LineaBlancaPage = ({ variant = 'showroom', setPage }) => {
  const [activeCat, setActiveCat] = React.useState('Todos');
  return (
    <main className="lb-page">
      <LBHero variant={variant} />
      <LBCategories active={activeCat} onPick={setActiveCat} />
      <LBFeatured />
      <LBProductGrid active={activeCat} variant={variant} />
      <LBBrands />
      <LBWhyBuy />
      <LBCTA setPage={setPage} />
    </main>);

};

const LBHero = ({ variant }) =>
<section className="lb-hero">
    <div className="container-wide">
      <div className="lb-hero-grid">
        <div className="lb-hero-copy">
          <span className="eyebrow">Showroom · Línea Blanca</span>
          <h1>
            Habilitados por <span className="hl">Carrier y Midea</span><br />
            para equipar cada espacio de tu hogar.
          </h1>
          <p className="lede">
            Accedé a productos oficiales con asesoramiento profesional, instalación,
            garantía oficial y servicio postventa especializado. Desde climatización
            hasta línea blanca, te acompañamos con el respaldo de marcas líderes y un
            equipo técnico propio.
          </p>
          <div className="lb-hero-cta">
            <button className="btn btn-primary btn-lg">Ver catálogo</button>
            <button className="btn btn-ghost btn-lg">
              Pedir asesoramiento
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7" /></svg>
            </button>
          </div>
          <div className="lb-hero-badges">
            <div className="lb-badge">
              <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /><path d="M9 22V12h6v10" /></svg>
              <div><strong>Envío e instalación</strong><br /><span>en CABA y GBA</span></div>
            </div>
            <div className="lb-badge">
              <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10" /><path d="M12 6v6l4 2" /></svg>
              <div><strong>Garantía oficial</strong><br /><span>de fábrica</span></div>
            </div>
            <div className="lb-badge">
              <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 11.5V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10" /><path d="M16 21h6M19 18v6" /></svg>
              <div><strong>Cuotas sin interés</strong><br /><span>3 cuotas</span></div>
            </div>
          </div>
        </div>
        <div className="lb-hero-visual">
          {variant === 'modern' ? <LBHeroVisualModern /> : <LBHeroVisualClassic />}
        </div>
      </div>
    </div>
  </section>;


const LBHeroVisualClassic = () =>
<div className="lb-hero-stage">
    <div className="ph ph-warm lb-hero-img">
      <span className="ph-label">cocina premium · línea blanca</span>
      <div className="mock-kitchen">
        <div className="mk-counter" />
        <div className="mk-fridge">
          <div className="mk-fridge-handle" />
          <div className="mk-fridge-line" />
        </div>
        <div className="mk-hob"><i /><i /></div>
        <div className="mk-microwave" />
      </div>
    </div>
    <div className="lb-hero-floater lb-float-1">
      <div className="lbf-tag">Heladera French Door</div>
      <div className="lbf-price">$1.890.000</div>
      <div className="lbf-fine">3 cuotas s/interés</div>
    </div>
    <div className="lb-hero-floater lb-float-2">
      <div className="lbf-icon">★</div>
      <div className="lbf-tag">4.9 / 5</div>
      <div className="lbf-fine">+150 reseñas</div>
    </div>
  </div>;


const LBHeroVisualModern = () =>
<div className="lb-hero-stage lb-hero-stage-modern">
    <div className="lb-modern-grid">
      <div className="ph ph-blue"><span className="ph-label">heladera</span></div>
      <div className="ph ph-warm"><span className="ph-label">cocina</span></div>
      <div className="ph ph-cool"><span className="ph-label">lavarropas</span></div>
      <div className="ph ph-warm"><span className="ph-label">microondas</span></div>
    </div>
  </div>;


/* Category filters */
const LBCategories = ({ active, onPick }) => {
  const cats = [
  'Todos', 'Aires acondicionados', 'Heladeras', 'Lavarropas',
  'Cocinas', 'Hornos eléctricos', 'Anafes', 'Campanas',
  'Microondas', 'Lavavajillas', 'Aspiradoras', 'Pequeños electrodomésticos'];

  return (
    <section className="lb-cats">
      <div className="container">
        <div className="lb-cats-scroll">
          {cats.map((c) =>
          <button key={c}
          className={"lb-chip " + (active === c ? 'is-active' : '')}
          onClick={() => onPick(c)}>
              {c}
            </button>
          )}
        </div>
      </div>
    </section>);

};

/* Featured row — large hero product + 2 stacked */
const LBFeatured = () =>
<section className="section-tight lb-featured">
    <div className="container">
      <div className="section-head" style={{ marginBottom: 'var(--gap-lg)' }}>
        <h2 style={{ fontSize: 'clamp(28px, 2.6vw, 38px)' }}>Destacados de la semana</h2>
        <a className="arrow-link">Ver todos
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7" /></svg>
        </a>
      </div>
      <div className="lb-featured-grid">
        <article className="lb-feat-big">
          <div className="ph ph-blue lb-feat-img">
            <span className="ph-label">aire split inverter · 4500 W</span>
            <span className="lb-feat-badge">– 18% off</span>
          </div>
          <div className="lb-feat-meta">
            <div className="lb-brand">Carrier</div>
            <h3>Split Inverter X-Power 4500 W</h3>
            <p>Inverter clase A+++ · WiFi · Filtro HEPA · Frío/Calor</p>
            <div className="lb-feat-bottom">
              <div>
                <div className="lb-price-was">$1.250.000</div>
                <div className="lb-price">$1.025.000</div>
                <div className="lb-cuotas">3 cuotas s/interés de $341.666</div>
              </div>
              <button className="btn btn-primary">Ver detalle</button>
            </div>
          </div>
        </article>
        <article className="lb-feat-small">
          <div className="ph ph-warm lb-feat-img-sm">
            <span className="ph-label">heladera French Door</span>
          </div>
          <div className="lb-feat-meta-sm">
            <div className="lb-brand">Samsung-style</div>
            <h4>Heladera Midea Combi 300 L</h4>
            <div className="lb-price">$1.100.000</div>
          </div>
        </article>
        <article className="lb-feat-small">
          <div className="ph ph-cool lb-feat-img-sm">
            <span className="ph-label">lavarropas carga frontal</span>
          </div>
          <div className="lb-feat-meta-sm">
            <div className="lb-brand">Premium</div>
            <h4>Lavarropas Carga Frontal 9 kg</h4>
            <div className="lb-price">$890.000</div>
          </div>
        </article>
      </div>
    </div>
  </section>;


/* Full product grid */
const PRODUCTS = [
{ cat: 'Aires acondicionados', name: 'Split Inverter X-Power 4500 W', brand: 'Carrier', price: 1025000, was: 1250000, img: 'ph-blue', tag: 'Bestseller' },
{ cat: 'Aires acondicionados', name: 'Split Frío/Calor 3200 W', brand: 'Toshiba', price: 720000, img: 'ph-cool' },
{ cat: 'Aires acondicionados', name: 'Sistema VRF Multi 8 zonas', brand: 'Carrier', price: 8900000, img: 'ph-dark', tag: 'Pro' },
{ cat: 'Heladeras', name: 'French Door 580 L No Frost', brand: 'Premium', price: 1890000, img: 'ph-warm', tag: 'Nuevo' },
{ cat: 'Heladeras', name: 'No Frost 432 L · Inverter', brand: 'Standard', price: 980000, img: 'ph-blue' },
{ cat: 'Heladeras', name: 'Side-by-Side 620 L', brand: 'Premium', price: 2350000, img: 'ph-cool' },
{ cat: 'Lavarropas', name: 'Carga Frontal 9 kg · A+++', brand: 'Premium', price: 890000, img: 'ph-cool' },
{ cat: 'Lavarropas', name: 'Lavasecarropas 10/7 kg', brand: 'Premium', price: 1450000, img: 'ph-warm' },
{ cat: 'Cocinas', name: 'Cocina 4 hornallas · multigas', brand: 'Standard', price: 580000, img: 'ph-warm' },
{ cat: 'Hornos eléctricos', name: 'Horno eléctrico empotrable 60L', brand: 'Premium', price: 720000, img: 'ph-warm' },
{ cat: 'Anafes', name: 'Anafe eléctrico vitrocerámico', brand: 'Premium', price: 480000, img: 'ph-cool' },
{ cat: 'Campanas', name: 'Campana extractora 90 cm', brand: 'Premium', price: 320000, img: 'ph-dark' },
{ cat: 'Microondas', name: 'Microondas Digital 28 L', brand: 'Standard', price: 285000, img: 'ph-cool' },
{ cat: 'Lavavajillas', name: 'Lavavajillas 14 cubiertos', brand: 'Premium', price: 1180000, img: 'ph-blue' },
{ cat: 'Aspiradoras', name: 'Robot aspirador con mapeo', brand: 'Standard', price: 380000, img: 'ph-cool' },
{ cat: 'Pequeños electrodomésticos', name: 'Cafetera espresso automática', brand: 'Premium', price: 540000, img: 'ph-warm' }];


const LBProductGrid = ({ active, variant }) => {
  const filtered = active === 'Todos' ? PRODUCTS : PRODUCTS.filter((p) => p.cat === active);
  const items = filtered.length ? filtered : PRODUCTS;
  return (
    <section className="section-tight lb-grid">
      <div className="container">
        <div className="section-head" style={{ marginBottom: 'var(--gap-lg)' }}>
          <h2 style={{ fontSize: 'clamp(28px, 2.6vw, 38px)' }}>
            {active === 'Todos' ? 'Catálogo completo' : active}
          </h2>
          <div className="lb-grid-meta">
            <span className="muted">{items.length} productos</span>
            <select className="lb-sort">
              <option>Más relevantes</option>
              <option>Menor precio</option>
              <option>Mayor precio</option>
              <option>Más nuevos</option>
            </select>
          </div>
        </div>
        <div className={"lb-products lb-products-" + variant}>
          {items.map((p, i) => <ProductCard key={i} p={p} />)}
        </div>
      </div>
    </section>);

};

const ProductCard = ({ p }) => {
  const [hover, setHover] = React.useState(false);
  const fmt = (n) => '$' + n.toLocaleString('es-AR');
  return (
    <article className="prod-card"
    onMouseEnter={() => setHover(true)}
    onMouseLeave={() => setHover(false)}>
      <div className={"ph " + p.img + " prod-img"}>
        <span className="ph-label">{p.cat.toLowerCase()}</span>
        {p.tag && <span className="prod-tag">{p.tag}</span>}
        {p.was && <span className="prod-off">– {Math.round((1 - p.price / p.was) * 100)}%</span>}
        <button className={"prod-fav " + (hover ? 'is-hover' : '')}>
          <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2">
            <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" />
          </svg>
        </button>
      </div>
      <div className="prod-meta">
        <div className="prod-brand">{p.brand}</div>
        <h4 className="prod-name">{p.name}</h4>
        <div className="prod-price-row">
          {p.was && <div className="prod-was">{fmt(p.was)}</div>}
          <div className="prod-price">{fmt(p.price)}</div>
        </div>
        <div className="prod-cuotas">3 cuotas s/interés</div>
        <button className="prod-cta">
          Ver detalle
          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7" /></svg>
        </button>
      </div>
    </article>);

};

const LBBrands = () => {
  const brands = [
  { name: 'Carrier', sub: 'Factory Authorized Dealer' },
  { name: 'Midea', sub: 'Distribuidor oficial' },
  { name: 'Schneider', sub: 'Partner técnico' },
  { name: 'Honeywell', sub: 'Partner' },
  { name: 'AmCham', sub: 'Argentina' }];

  return (
    <section className="section-tight lb-brands">
      <div className="container">
        <div className="center">
          <span className="eyebrow" style={{ justifyContent: 'center' }}>Distribuidores oficiales</span>
          <h3 style={{ marginTop: 12 }}>Respaldo de marcas líderes mundiales</h3>
        </div>
        <div className="lb-brands-grid">
          {brands.map((b, i) =>
          <div key={i} className="lb-brand-item">
            <div className="lb-brand-name">{b.name}</div>
            <div className="lb-brand-sub">{b.sub}</div>
          </div>
          )}
        </div>
      </div>
    </section>);

};

const LBWhyBuy = () => {
  const reasons = [
  { i: 'truck', t: 'Envío e instalación', d: 'Coordinamos entrega e instalación profesional sin que muevas un dedo.' },
  { i: 'shield', t: 'Garantía oficial', d: 'Todos nuestros productos cuentan con garantía oficial de fábrica.' },
  { i: 'card', t: 'Cuotas sin interés', d: 'Financiación con todas las tarjetas. Hasta 3 cuotas sin interés.' },
  { i: 'wrench', t: 'Servicio técnico propio', d: '35 años de respaldo técnico. Mantenimiento y service nacional.' }];

  const Icon = ({ i }) => {
    const c = "currentColor";
    if (i === 'truck') return <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.7"><rect x="1" y="5" width="14" height="11" rx="1" /><path d="M15 9h4l3 3v4h-7z" /><circle cx="6" cy="19" r="2" /><circle cx="18" cy="19" r="2" /></svg>;
    if (i === 'shield') return <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.7"><path d="M12 2l9 4v6c0 5-3.5 9-9 10-5.5-1-9-5-9-10V6z" /><path d="M9 12l2 2 4-4" /></svg>;
    if (i === 'card') return <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.7"><rect x="2" y="5" width="20" height="14" rx="2" /><path d="M2 10h20M6 15h4" /></svg>;
    return <svg viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="1.7"><path d="M14.7 6.3a4 4 0 0 0 5 5L21 12l-9 9-9-9 .7-.7a4 4 0 0 0 5-5L9 5l4-4z" /></svg>;
  };
  return (
    <section className="section lb-why">
      <div className="container">
        <div className="lb-why-grid">
          {reasons.map((r, i) =>
          <div key={i} className="lb-why-item">
              <div className="lb-why-icon"><Icon i={r.i} /></div>
              <h3>{r.t}</h3>
              <p>{r.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

};

const LBCTA = ({ setPage }) =>
<section className="section lb-cta-section">
    <div className="container">
      <div className="lb-cta-card">
        <div className="lb-cta-bg" />
        <div className="lb-cta-content">
          <span className="eyebrow" style={{ color: 'rgba(255,255,255,.9)' }}>Asesoramiento personalizado</span>
          <h2 style={{ color: '#fff' }}>¿No sabés qué necesitás?</h2>
          <p className="lede" style={{ color: 'rgba(255,255,255,.85)', maxWidth: '52ch' }}>
            Nuestro equipo te ayuda a elegir el equipo correcto según tu espacio,
            consumo y presupuesto. Asesoramiento sin cargo.
          </p>
          <div className="lb-cta-actions">
            <button className="btn btn-secondary btn-lg" style={{ background: '#fff' }}
          onClick={() => setPage && setPage('home')}>
              Hablar con un asesor
            </button>
            <button className="btn btn-ghost btn-lg" style={{ color: '#fff', borderColor: 'rgba(255,255,255,.3)' }}>
              Ver catálogo PDF
            </button>
          </div>
        </div>
      </div>
    </div>
  </section>;


window.LineaBlancaPage = LineaBlancaPage;