/* global React, IconSparkles, IconShieldCheck, IconArrowUpRight, IconTarget, IconLayers, SITE */

// Animated counselling preview — the floating product UI card in the hero.

const PROBABILITY_BARS = SITE.preview.bars;

const toneStyle = (tone) => {
  switch (tone) {
    case 'reach':  return { color: '#C99A3F', dot: '#C99A3F' };
    case 'target': return { color: 'var(--color-primary)', dot: 'var(--color-primary)' };
    case 'match':  return { color: '#4F7C5A', dot: '#4F7C5A' };
    case 'safe':   return { color: '#4F7C5A', dot: '#4F7C5A' };
    default:       return { color: 'var(--color-body)', dot: 'var(--color-muted)' };
  }
};

const Bar = ({ pct, delay = 0, tone }) => {
  const [w, setW] = React.useState(0);
  React.useEffect(() => {
    const t = setTimeout(() => setW(pct), delay);
    return () => clearTimeout(t);
  }, [pct, delay]);
  return (
    <div style={{
      position: 'relative',
      height: 6,
      background: 'var(--color-surface-strong)',
      borderRadius: 100,
      overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', top: 0, left: 0, bottom: 0,
        width: `${w}%`,
        background: tone === 'safe' || tone === 'match'
          ? 'linear-gradient(90deg, #6E9B79, #4F7C5A)'
          : tone === 'reach'
          ? 'linear-gradient(90deg, #E0B96A, #C99A3F)'
          : 'linear-gradient(90deg, #D67B47, var(--color-primary))',
        borderRadius: 100,
        transition: 'width 1400ms cubic-bezier(0.22, 0.61, 0.36, 1)',
      }} />
    </div>
  );
};

const HeroPreview = () => {
  const PULSES = SITE.preview.pulses;
  const [pulseIdx, setPulseIdx] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setPulseIdx((i) => (i + 1) % PULSES.length), 3200);
    return () => clearInterval(t);
  }, []);

  return (
    <div className="hero-preview-wrap" style={{ position: 'relative', width: '100%', maxWidth: 520 }}>
      {/* Back card — small mini, peeking */}
      <div style={{
        position: 'absolute',
        top: -18,
        right: -18,
        width: 220,
        background: 'var(--color-surface-dark-elevated)',
        color: 'var(--color-on-dark)',
        borderRadius: 20,
        padding: '18px 20px',
        transform: 'rotate(3deg)',
        boxShadow: '0 18px 40px rgba(26,24,20,0.18)',
        zIndex: 1,
      }}>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          marginBottom: 14,
        }}>
          <span style={{
            fontFamily: 'var(--font-sans)', fontSize: 10, fontWeight: 600,
            letterSpacing: '0.12em', textTransform: 'uppercase',
            color: 'var(--color-on-dark-soft)',
          }}>Profile</span>
          <IconShieldCheck size={14} style={{ color: 'var(--color-on-dark-soft)' }} />
        </div>
        <div style={{
          fontFamily: 'var(--font-mono)', fontWeight: 500, fontSize: 22,
          color: 'var(--color-on-dark)', letterSpacing: '-0.5px',
        }}>
          {SITE.preview.profile.percentile}<span style={{ color: 'var(--color-on-dark-soft)', fontSize: 14, marginLeft: 4 }}>%ile</span>
        </div>
        <div style={{
          fontFamily: 'var(--font-sans)', fontSize: 11, color: 'var(--color-on-dark-soft)',
          marginTop: 4,
        }}>
          JEE Main · CRL {SITE.preview.profile.crlRank}
        </div>
        <div style={{
          marginTop: 16, paddingTop: 12, borderTop: '1px solid rgba(247,242,232,0.08)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        }}>
          <div>
            <div style={{ fontSize: 10, color: 'var(--color-on-dark-soft)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>BITSAT</div>
            <div className="mono" style={{ fontSize: 15, marginTop: 4, color: 'var(--color-on-dark)' }}>{SITE.preview.profile.bitsat}</div>
          </div>
          <div>
            <div style={{ fontSize: 10, color: 'var(--color-on-dark-soft)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>Advanced</div>
            <div className="mono" style={{ fontSize: 15, marginTop: 4, color: 'var(--color-on-dark)' }}>{SITE.preview.profile.advanced}</div>
          </div>
        </div>
      </div>

      {/* Front card — the main recommendations panel */}
      <div style={{
        position: 'relative',
        background: 'var(--color-canvas)',
        border: '1px solid var(--color-hairline)',
        borderRadius: 24,
        padding: 24,
        boxShadow: '0 28px 80px rgba(26,24,20,0.10), 0 4px 12px rgba(26,24,20,0.04)',
        zIndex: 2,
      }}>
        {/* Header */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span className="badge badge-accent">
              <IconSparkles size={11} />
              College guidance
            </span>
          </div>
          <span className="mono" style={{ fontSize: 11, color: 'var(--color-muted)' }}>
            DRAFT · v3
          </span>
        </div>

        <div style={{ marginTop: 18, marginBottom: 22 }}>
          <div className="title-lg" style={{ fontSize: 22, lineHeight: 1.25, letterSpacing: '-0.3px' }}>
            Your strongest 5 choices,
            <br />
            <span className="serif-italic" style={{ color: 'var(--color-primary)' }}>ranked by likelihood.</span>
          </div>
        </div>

        {/* Probability list */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {PROBABILITY_BARS.map((row, i) => {
            const t = toneStyle(row.tone);
            return (
              <div key={row.college}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
                    <span style={{
                      width: 6, height: 6, borderRadius: 100, background: t.dot, flexShrink: 0,
                    }} />
                    <span style={{
                      fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 13,
                      color: 'var(--color-ink)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                    }}>{row.college}</span>
                    <span style={{
                      fontFamily: 'var(--font-sans)', fontSize: 11, color: 'var(--color-muted)',
                    }}>· {row.branch}</span>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
                    <span style={{
                      fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 10,
                      letterSpacing: '0.08em', textTransform: 'uppercase',
                      color: t.color,
                    }}>{row.label}</span>
                    <span className="mono" style={{
                      fontSize: 13, fontWeight: 500, color: 'var(--color-ink)', minWidth: 30, textAlign: 'right',
                    }}>{row.score}%</span>
                  </div>
                </div>
                <Bar pct={row.score} delay={400 + i * 180} tone={row.tone} />
              </div>
            );
          })}
        </div>

        {/* Status footer */}
        <div style={{
          marginTop: 22, paddingTop: 18, borderTop: '1px solid var(--color-hairline-soft)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
            <span style={{
              display: 'inline-block', width: 6, height: 6, borderRadius: 100,
              background: 'var(--color-primary)',
              animation: 'pulse 1.4s ease-in-out infinite',
              flexShrink: 0,
            }} />
            <span key={pulseIdx} className="fade-up" style={{
              fontFamily: 'var(--font-sans)', fontSize: 12, color: 'var(--color-body)',
              whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
            }}>
              {PULSES[pulseIdx]}
            </span>
          </div>
          <span className="mono" style={{ fontSize: 11, color: 'var(--color-muted)', flexShrink: 0 }}>
            21 / 24
          </span>
        </div>
      </div>

      {/* Small floating chip — counsellor */}
      <div style={{
        position: 'absolute',
        bottom: -22,
        left: -22,
        background: 'var(--color-canvas)',
        border: '1px solid var(--color-hairline)',
        borderRadius: 100,
        padding: '8px 14px 8px 8px',
        boxShadow: '0 8px 24px rgba(26,24,20,0.10)',
        display: 'flex', alignItems: 'center', gap: 10,
        zIndex: 3,
      }}>
        <div style={{
          width: 26, height: 26, borderRadius: 100,
          background: 'linear-gradient(135deg, #C99A3F, var(--color-primary))',
          color: 'white', fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 11,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        }}>{SITE.preview.reviewer.initials}</div>
        <div>
          <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 12, color: 'var(--color-ink)' }}>
            {SITE.preview.reviewer.name}
          </div>
          <div style={{ fontFamily: 'var(--font-sans)', fontSize: 10, color: 'var(--color-muted)' }}>
            {SITE.preview.reviewer.tag}
          </div>
        </div>
      </div>

      <style>{`
        @keyframes pulse {
          0%, 100% { transform: scale(1); opacity: 1; }
          50%      { transform: scale(1.6); opacity: 0.5; }
        }
      `}</style>
    </div>
  );
};

window.HeroPreview = HeroPreview;