// Clock Section — featured artifact: live work-day dial

const ClockDial = () => {
  const [now, setNow] = React.useState(new Date());
  React.useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);

  // Mock workday: 09:02 entry, currently at simulated 13:45 (live tick).
  // We base the "live" pointer on real seconds, looping inside the 9-hour window
  const SHIFT_START = 9 * 60;   // 09:00
  const SHIFT_END = 18 * 60;    // 18:00
  // worked = 04:43:s (counter)
  const baseSec = 4 * 3600 + 43 * 60;
  const tickSec = (now.getSeconds() + now.getMilliseconds() / 1000);
  const workedSec = baseSec + Math.floor(tickSec * 5) % 60; // gently advances
  const workedH = Math.floor(workedSec / 3600);
  const workedM = Math.floor((workedSec % 3600) / 60);
  const workedS = workedSec % 60;

  // Segments [startMin, endMin, type]
  const segs = [
    { s: 9 * 60 + 2,  e: 11 * 60 + 15, type: 'work' },
    { s: 11 * 60 + 15, e: 11 * 60 + 27, type: 'pause' },
    { s: 11 * 60 + 27, e: 14 * 60,     type: 'work' },
    { s: 14 * 60,     e: 14 * 60 + 45, type: 'meal' },
    { s: 14 * 60 + 45, e: 18 * 60,     type: 'work' },
  ];

  const colors = {
    work:  '#3B82F6',
    pause: '#F59E0B',
    meal:  '#A78BFA',
  };

  const R = 150, cx = 190, cy = 190;
  const SHIFT_LEN = SHIFT_END - SHIFT_START;

  // Convert minutes (from shift start) → angle. 0 = top, clockwise.
  const minToAngle = (m) => ((m - SHIFT_START) / SHIFT_LEN) * 360 - 90;
  const angleToXY = (a, r) => [cx + Math.cos(a * Math.PI / 180) * r, cy + Math.sin(a * Math.PI / 180) * r];

  const arcPath = (s, e, r) => {
    const a1 = minToAngle(s);
    const a2 = minToAngle(e);
    const [x1, y1] = angleToXY(a1, r);
    const [x2, y2] = angleToXY(a2, r);
    const large = (a2 - a1) > 180 ? 1 : 0;
    return `M ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2}`;
  };

  // Current position (live) — sweep around the dial slowly for visual life
  const currentMin = 13 * 60 + 45 + Math.floor(tickSec * 2);
  const currentAngle = minToAngle(currentMin);
  const [px, py] = angleToXY(currentAngle, R);

  return (
    <div className="clock-dial">
      <div className="clock-glow"/>
      <svg viewBox="0 0 380 380" width="380" height="380" style={{ position: 'relative', zIndex: 2 }}>
        {/* outer ring track */}
        <circle cx={cx} cy={cy} r={R} stroke="rgba(255,255,255,0.08)" strokeWidth="22" fill="none"/>

        {/* segments */}
        {segs.map((s, i) => (
          <path key={i} d={arcPath(s.s, s.e, R)} stroke={colors[s.type]} strokeWidth="22" strokeLinecap="butt" fill="none" opacity={s.e <= currentMin ? 1 : 0.25}/>
        ))}

        {/* hour ticks */}
        {Array.from({ length: 10 }, (_, i) => {
          const mins = SHIFT_START + i * 60;
          const a = minToAngle(mins);
          const [x1, y1] = angleToXY(a, R - 14);
          const [x2, y2] = angleToXY(a, R - 6);
          return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="rgba(255,255,255,0.4)" strokeWidth="2" strokeLinecap="round"/>;
        })}

        {/* hour labels */}
        {[9, 12, 15, 18].map(h => {
          const a = minToAngle(h * 60);
          const [x, y] = angleToXY(a, R + 22);
          return <text key={h} x={x} y={y + 4} fill="rgba(255,255,255,0.55)" fontSize="13" fontWeight="700" textAnchor="middle" fontFamily="JetBrains Mono">{String(h).padStart(2,'0')}</text>;
        })}

        {/* live needle */}
        <line x1={cx} y1={cy} x2={px} y2={py} stroke="#fff" strokeWidth="3" strokeLinecap="round" opacity="0.9"/>
        <circle cx={px} cy={py} r="10" fill="#fff"/>
        <circle cx={px} cy={py} r="16" fill="#fff" opacity="0.25"/>

        {/* center dot */}
        <circle cx={cx} cy={cy} r="6" fill="#fff"/>
      </svg>

      {/* Center counter */}
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        pointerEvents: 'none',
      }}>
        <div style={{ fontSize: 10.5, fontWeight: 700, color: 'rgba(255,255,255,0.55)', textTransform: 'uppercase', letterSpacing: '.14em' }}>Trabajado hoy</div>
        <div className="mono tnum" style={{ fontSize: 44, fontWeight: 700, color: '#fff', letterSpacing: '-0.03em', marginTop: 4, textShadow: '0 4px 24px rgba(59,130,246,0.6)' }}>
          {String(workedH).padStart(2,'0')}:{String(workedM).padStart(2,'0')}:{String(workedS).padStart(2,'0')}
        </div>
        <div style={{ marginTop: 6, fontSize: 12, color: 'rgba(255,255,255,0.55)' }}>de <span className="mono" style={{ color: 'rgba(255,255,255,0.85)' }}>08:00</span> previstas</div>
      </div>
    </div>
  );
};

const ClockSection = () => (
  <section className="section-tinted-dark" style={{ padding: '120px 0' }}>
    <div className="container-wide" style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 80, alignItems: 'center', position: 'relative', zIndex: 1 }}>
      <div>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '7px 14px', borderRadius: 999,
          background: 'rgba(59,130,246,0.15)', color: '#93C5FD',
          fontSize: 13, fontWeight: 700,
          border: '1px solid rgba(59,130,246,0.25)',
        }}><ITimer size={14}/> Control horario en tiempo real</div>

        <h2 style={{ fontSize: 56, lineHeight: 1.05, letterSpacing: '-0.035em', fontWeight: 800, margin: '24px 0 0', color: '#fff' }}>
          Tu jornada<br/>al <span style={{ background: 'linear-gradient(135deg, #60A5FA, #A78BFA)', WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>segundo exacto</span>.
        </h2>

        <p style={{ fontSize: 18, color: 'rgba(255,255,255,0.75)', lineHeight: 1.6, marginTop: 24, maxWidth: 460 }}>
          Cada entrada, pausa y comida se registra al milisegundo. El cronómetro corre en vivo, los segmentos del día se dibujan a medida que avanza tu jornada y los reportes están siempre listos para auditoría.
        </p>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 18, marginTop: 36 }}>
          {[
            { v: '5h 17m', l: 'Restantes hoy', c: '#60A5FA' },
            { v: '57 min', l: 'Pausas + comida', c: '#FCD34D' },
            { v: '+1h 14m', l: 'Saldo semana', c: '#34D399' },
          ].map((s, i) => (
            <div key={i} style={{ padding: 18, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 14, backdropFilter: 'blur(8px)' }}>
              <div className="mono tnum" style={{ fontSize: 22, fontWeight: 700, color: s.c, letterSpacing: '-0.02em' }}>{s.v}</div>
              <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)', marginTop: 4, fontWeight: 500 }}>{s.l}</div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 12 }}>
          {[
            { c: '#3B82F6', l: 'Tiempo de trabajo efectivo', v: '4h 31m' },
            { c: '#F59E0B', l: 'Pausa café', v: '12 min' },
            { c: '#A78BFA', l: 'Comida', v: '45 min' },
          ].map((row, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 14 }}>
              <span style={{ width: 12, height: 12, borderRadius: 3, background: row.c, boxShadow: `0 0 12px ${row.c}` }}/>
              <span style={{ flex: 1, color: 'rgba(255,255,255,0.85)' }}>{row.l}</span>
              <span className="mono tnum" style={{ fontWeight: 700, color: '#fff' }}>{row.v}</span>
            </div>
          ))}
        </div>
      </div>

      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'relative' }}>
        <ClockDial/>
        {/* floating accents around clock */}
        <div style={{
          position: 'absolute', top: 20, right: 20,
          padding: '12px 16px',
          background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.14)',
          borderRadius: 14, backdropFilter: 'blur(12px)',
          display: 'flex', alignItems: 'center', gap: 10,
          animation: 'float 4s ease-in-out infinite',
        }}>
          <div style={{ width: 8, height: 8, borderRadius: 999, background: '#34D399', boxShadow: '0 0 12px #34D399', animation: 'pulse-dot 1.5s ease-in-out infinite' }}/>
          <span style={{ fontSize: 13, fontWeight: 700, color: '#fff' }}>EN VIVO</span>
        </div>
        <div style={{
          position: 'absolute', bottom: 30, left: 0,
          padding: '12px 16px',
          background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.14)',
          borderRadius: 14, backdropFilter: 'blur(12px)',
          display: 'flex', alignItems: 'center', gap: 10,
          animation: 'float 5s ease-in-out infinite .8s',
        }}>
          <IShield size={16} style={{ color: '#60A5FA' }}/>
          <span style={{ fontSize: 13, color: 'rgba(255,255,255,0.85)' }}>Cumple <strong style={{ color: '#fff' }}>RDL 8/2019</strong></span>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { ClockSection });