// 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>
  );
}

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">
          Elige un combo o arma el tuyo con <b>frutas, verduras y proteínas</b> lavadas y
          porcionadas. Vas viendo tu pedido <b>a la derecha</b> en todo momento.
        </p>
        <div className="hero-trust">
          <span><Icon name="Truck" size={18}/> Envíos todos los días</span>
          <span><Icon name="Clock" size={18}/> Pedido el mismo día</span>
          <span><Icon name="Leaf" size={18}/> Se conserva ~15 días</span>
        </div>
      </div>
      <div className="hero-art">
        <img src={window.EO_DATA.ASSET + '/jar-melon.png'} className="hero-jar j1" alt=""/>
        <img src={window.EO_DATA.ASSET + '/jar-uvas.png'} className="hero-jar j2" alt=""/>
        <img src={window.EO_DATA.ASSET + '/jar-maracuya.png'} className="hero-jar j3" alt=""/>
        <span className="hero-badge"><Icon name="Truck" size={15}/> Mismo día · Cali</span>
        <img src={window.EO_DATA.ASSET + '/mascot-blueberry-cut.png'} className="hero-mascot" alt=""/>
      </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}/> Pedidos todos los días</span>
        </div>
      </div>
    </footer>
  );
}

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