// Header.jsx - barra superior, cabecera, navegación y última hora
const { useState, useEffect } = React;

function UtilityBar() {
  const { weather, fx } = window.CS_DATA;
  const [time, setTime] = useState(new Date());
  useEffect(() => {
    const t = setInterval(() => setTime(new Date()), 60000);
    return () => clearInterval(t);
  }, []);
  const dateStr = time.toLocaleDateString('es-DO', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
  const timeStr = time.toLocaleTimeString('es-DO', { hour: '2-digit', minute: '2-digit', hour12: false });
  return (
    <div className="cs-utility">
      <div className="cs-utility-inner">
        <div className="cs-util-left">
          <span className="cs-util-date">{dateStr} · {timeStr} AST</span>
        </div>
        <div className="cs-util-right">
          <span className="cs-util-item">
            <span>{weather.icon}</span>
            <span>Sto. Dgo. <b>{weather.tempC}°C</b></span>
          </span>
          {fx.map(f => (
            <span key={f.code} className="cs-util-item">
              <span>{f.code}</span>
              <b>RD$ {f.sell.toFixed(2)}</b>
              <span className={f.delta >= 0 ? 'cs-util-delta-up' : 'cs-util-delta-down'}>
                {f.delta >= 0 ? '▲' : '▼'} {Math.abs(f.delta).toFixed(2)}
              </span>
            </span>
          ))}
          <span className="cs-util-pill">EDICIÓN DIGITAL</span>
        </div>
      </div>
    </div>
  );
}

function Masthead({ savedCount, onNav, onSearch }) {
  return (
    <div className="cs-masthead">
      <div className="cs-masthead-inner">
        <div className="cs-mast-left">
          <button className="cs-search-btn" onClick={onSearch} aria-label="Buscar">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <circle cx="11" cy="11" r="7"/>
              <path d="m21 21-4.3-4.3"/>
            </svg>
          </button>
          <span className="cs-bookmark-pill" onClick={() => onNav({ view: 'search', q: '' })} title="Lectura guardada">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/>
            </svg>
            <b>{savedCount}</b> guardadas
          </span>
        </div>

        <div className="cs-logo" onClick={() => onNav({ view: 'home' })}>
          <div className="cs-logo-row">
            <div className="cs-logo-mark">Conexión Semanal</div>
          </div>
          <div className="cs-logo-tagline">Periodismo Puro · Periodismo Real · República Dominicana</div>
        </div>

        <div className="cs-mast-right">
          <button className="cs-icon-btn" aria-label="Cuenta">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <circle cx="12" cy="8" r="4"/>
              <path d="M4 22v-2a8 8 0 0 1 16 0v2"/>
            </svg>
          </button>
          <button className="cs-subscribe">Suscribirme</button>
        </div>
      </div>
    </div>
  );
}

function Nav({ current, onNav }) {
  const sections = window.CS_DATA.sections;
  return (
    <nav className="cs-nav">
      <div className="cs-nav-inner">
        <button
          className={`cs-nav-item ${current?.view === 'home' ? 'active' : ''}`}
          onClick={() => onNav({ view: 'home' })}
        >Inicio</button>
        {sections.map(s => {
          const active = current?.view === 'category' && current?.slug === s.slug;
          return (
            <button
              key={s.slug}
              className={`cs-nav-item ${s.featured ? 'cs-nav-featured' : ''} ${active ? 'active' : ''}`}
              onClick={() => onNav({ view: 'category', slug: s.slug })}
              style={active ? { color: s.color } : {}}
            >
              {s.featured && <span className="dot" style={{ background: s.color }}></span>}
              {s.name}
            </button>
          );
        })}
        <span className="cs-nav-spacer"></span>
        <span className="cs-nav-live">
          <span className="cs-live-dot"></span>
          En vivo
        </span>
      </div>
    </nav>
  );
}

function BreakingTicker() {
  const items = window.CS_DATA.breaking;
  const stream = [...items, ...items, ...items];
  return (
    <div className="cs-breaking">
      <div className="cs-breaking-label">Última hora</div>
      <div className="cs-breaking-track">
        <div className="cs-breaking-stream">
          {stream.map((t, i) => <span key={i}>{t}</span>)}
        </div>
      </div>
    </div>
  );
}

window.CS_Header = { UtilityBar, Masthead, Nav, BreakingTicker };