// Circular sticker label (the brand's signature device) — used as product art.
function LidLabel({ name, color, size = 116 }) {
  const words = name.trim().split(/\s+/);
  const longest = words.reduce((m, w) => Math.max(m, w.length), 0);
  const lines = words.length;
  const innerW = size - 24;
  const innerH = size * 0.56;
  const byWidth = innerW / (longest * 0.60);
  const byHeight = innerH / (lines * 0.96);
  const fontSize = Math.max(8, Math.min(23, byWidth, byHeight));
  return (
    <div className="lid" style={{ width: size, height: size, background: color }}>
      <span className="lid-name" style={{ fontSize }}>{name}</span>
      <span className="lid-handle">@ESPACIOORDENADO</span>
    </div>
  );
}

// Photo well: real cutout image when available, else a tinted well with the lid label
function PhotoWell({ product, size = 116 }) {
  if (product.img) {
    return (
      <div className="well">
        <img src={product.img} alt={product.name} />
      </div>
    );
  }
  return (
    <div className="well" style={{ background: `color-mix(in srgb, ${product.color} 14%, white)` }}>
      <LidLabel name={product.name} color={product.color} size={size} />
    </div>
  );
}

function Header({ count, total, city, onCityChange, query, onQuery, showSearch, onCartClick, step }) {
  const [openCity, setOpenCity] = React.useState(false);
  const { CITIES } = window.EO_DATA;
  return (
    <header className="hdr">
      <div className="hdr-inner">
        <a className="brand" href="#" onClick={(e) => e.preventDefault()}>
          <span className="brand-eo">EO.</span>
          <span className="brand-stack">
            <span className="brand-name">Market</span>
            <span className="brand-tag">Espacio Ordenado</span>
          </span>
        </a>

        {showSearch && (
          <div className="search">
            <Icon name="Search" size={19} />
            <input
              placeholder="Buscar fruta, verdura, proteína…"
              value={query}
              onChange={(e) => onQuery(e.target.value)}
            />
          </div>
        )}

        <div className="hdr-right">
          <div className="city-wrap">
            <button className="city-btn" onClick={() => setOpenCity((v) => !v)}>
              <Icon name="MapPin" size={18} />
              <span>{city}</span>
              <Icon name="ChevronDown" size={16} />
            </button>
            {openCity && (
              <React.Fragment>
                <div className="city-scrim" onClick={() => setOpenCity(false)}></div>
                <div className="city-menu">
                  {CITIES.map((c) => (
                    <button
                      key={c}
                      className={'city-item' + (c === city ? ' on' : '')}
                      onClick={() => { onCityChange(c); setOpenCity(false); }}
                    >
                      {c}{c === city && <Icon name="Check" size={16} />}
                    </button>
                  ))}
                </div>
              </React.Fragment>
            )}
          </div>

          <button className="cart-pill" onClick={onCartClick} aria-label="Ver mi pedido">
            <span className="cart-pill-ic">
              <Icon name="ShoppingBag" size={19} />
              {count > 0 && <span className="cart-count">{count}</span>}
            </span>
            <span className="cart-pill-txt">
              <span className="cart-pill-label">Mi pedido</span>
              <span className="cart-pill-total">{window.eoMoney(total)}</span>
            </span>
          </button>
        </div>
      </div>
    </header>
  );
}

// Carrusel del hero: imagen + mensaje rotan sincronizados cada 4s.
function HeroShowcase() {
  const ASSET = window.EO_DATA.ASSET;
  const MESSAGES = [
    { icon: 'Scale',    text: 'Peso aprox. 300g / 400g' },
    { icon: 'Leaf',     text: 'No contiene conservantes' },
    { icon: 'Sparkles', text: 'Limpio y desinfectado' },
    { icon: 'Heart',    text: 'Tú escoges las que más te gusten' },
  ];
  // Carrusel con las imágenes 1..7 de assets; los mensajes rotan entre las frases.
  const SLIDES = [1, 2, 3, 4, 5, 6, 7].map((n, idx) => ({
    img: `${ASSET}/${n}.png`,
    ...MESSAGES[idx % MESSAGES.length],
  }));
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setI((v) => (v + 1) % SLIDES.length), 4000);
    return () => clearInterval(t);
  }, []);
  const s = SLIDES[i];
  return (
    <div className="hero-art">
      <div className="hero-stage">
        {SLIDES.map((sl, idx) => (
          <img key={idx} src={sl.img} alt="" aria-hidden="true"
               className={'hero-slide' + (idx === i ? ' on' : '')} />
        ))}
      </div>
      <div className="hero-ticker" aria-live="polite">
        <span key={i} className="hero-ticker-item">
          <Icon name={s.icon} size={17} />
          {s.text}
        </span>
      </div>
    </div>
  );
}

function Hero({ onShop }) {
  return (
    <section className="hero">
      <div className="hero-copy">
        <div className="eyebrow">
          Limpio<i></i>Fresco<i></i>Natural<i></i>Organizado
        </div>
        <h1 className="hero-title">Arma tu mercado.<br/>Nosotros lo dejamos listo.</h1>
        <p className="hero-lead">
          Todo lo preparamos <b>el mismo día de entrega</b>. Programa tu pedido con <b>frutas, verduras y proteínas</b> lavadas y porcionadas.
        </p>
        <div className="hero-trust">
          <span><Icon name="Truck" size={18}/> Envíos mar · jue · sáb</span>
          <span><Icon name="Clock" size={18}/> Ahorra tiempo</span>
          <span><Icon name="Leaf" size={18}/> Se conserva mucho mejor</span>
        </div>
      </div>
      <HeroShowcase />
    </section>
  );
}

// Onboarding band — explica el proceso en 3 pasos a quien llega por primera vez.
function HowItWorks() {
  const steps = [
    { n: 1, icon: 'ShoppingBag', title: 'Elige o arma',       desc: 'Escoge un combo listo o arma tu mercado con frutas, verduras, proteínas, jugos verdes y complementos.' },
    { n: 2, icon: 'User',        title: 'Déjanos tus datos',  desc: 'Nombre, cédula, dirección y WhatsApp. Sin crear cuenta.' },
    { n: 3, icon: 'Truck',       title: 'Recíbelo en casa',   desc: 'Te escribimos por WhatsApp y pagas al recibir. ¡Listo!' },
  ];
  return (
    <section className="hiw" aria-label="Cómo funciona">
      <div className="hiw-inner">
        <div className="hiw-head">
          <span className="hiw-eyebrow">¿Primera vez? Así de fácil funciona</span>
        </div>
        <div className="hiw-steps">
          {steps.map((s, i) => (
            <React.Fragment key={s.n}>
              <div className="hiw-step">
                <span className="hiw-ic">
                  <Icon name={s.icon} size={24}/>
                  <span className="hiw-num">{s.n}</span>
                </span>
                <div className="hiw-txt">
                  <h3 className="hiw-title">{s.title}</h3>
                  <p className="hiw-desc">{s.desc}</p>
                </div>
              </div>
              {i < steps.length - 1 && (
                <span className="hiw-arrow" aria-hidden="true"><Icon name="ArrowRight" size={22}/></span>
              )}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="ftr">
      <div className="ftr-inner">
        <div className="ftr-brand">
          <span className="brand-eo" style={{ fontSize: 34 }}>EO.</span>
          <p>Mercados saludables preorganizados.<br/>Cali · Jamundí · Palmira · Yumbo</p>
          <div className="eyebrow">Limpio<i></i>Fresco<i></i>Natural<i></i>Organizado</div>
        </div>
        <div className="ftr-links">
          <span><Icon name="Instagram" size={18}/> @espacioordenado</span>
          <span><Icon name="Truck" size={18}/> Envíos a todo Cali y cercanías</span>
          <span><Icon name="Clock" size={18}/> Entregas martes, jueves y sábados</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { LidLabel, PhotoWell, Header, Hero, Footer });