// site/widget-mock.jsx — small Setly widget mockups for use in features + lockscreen

function WidgetTrend({ surface = "clay" }) {
  const sColor = { hard: "#4E98FF", clay: "#FF6B30", grass: "#5AE860", indoor: "#A78BFA" }[surface];
  return (
    <div className="widget" style={{ background: `linear-gradient(140deg, #14141E 0%, #0A0A10 100%)` }}>
      <div className="widget-row">
        <div className="widget-mono">TREND · 7D</div>
        <div className="widget-pill"><span className="dot" style={{background: sColor}}></span>{surface.toUpperCase()}</div>
      </div>
      <div style={{ marginTop: 14 }}>
        <div className="widget-title" style={{ fontSize: 22 }}>SINNER</div>
        <div className="widget-sub">↑ 2 ranking · #1 ATP</div>
      </div>
      <svg viewBox="0 0 200 60" style={{ width: '100%', marginTop: 16, overflow: 'visible' }}>
        <defs>
          <linearGradient id={`tg-${surface}`} x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor={sColor} stopOpacity="0.5"/>
            <stop offset="100%" stopColor={sColor} stopOpacity="0"/>
          </linearGradient>
        </defs>
        <path d="M0,40 L25,38 L50,32 L75,28 L100,30 L125,20 L150,15 L175,10 L200,5 L200,60 L0,60 Z" fill={`url(#tg-${surface})`}/>
        <path d="M0,40 L25,38 L50,32 L75,28 L100,30 L125,20 L150,15 L175,10 L200,5" fill="none" stroke={sColor} strokeWidth="2.2"/>
        <circle cx="200" cy="5" r="3.5" fill="#fff" stroke={sColor} strokeWidth="2"/>
      </svg>
      <div className="widget-row" style={{ marginTop: 12 }}>
        <div style={{ fontSize: 11, opacity: 0.6, letterSpacing: '0.1em' }}>WIN%</div>
        <div className="widget-mono" style={{ color: sColor, fontSize: 14 }}>87%</div>
      </div>
    </div>
  );
}

function WidgetSeason() {
  const tournaments = [
    { name: "MELBOURNE", date: "JAN", color: "#4E98FF", status: "past" },
    { name: "INDIAN W.", date: "MAR", color: "#4E98FF", status: "past" },
    { name: "MONTE-C.", date: "APR", color: "#FF6B30", status: "past" },
    { name: "ROMA", date: "MAY", color: "#FF6B30", status: "live" },
    { name: "PARIS", date: "JUN", color: "#FF6B30", status: "next" },
    { name: "WIMBLEDON", date: "JUN", color: "#5AE860", status: "soon" },
  ];
  return (
    <div className="widget large">
      <div className="widget-row">
        <div className="widget-mono">ATP SEASON · 2026</div>
        <div className="widget-pill live"><span className="dot"></span>ROMA LIVE</div>
      </div>
      <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
        {tournaments.map((t, i) => (
          <div key={i} style={{
            flex: 1, padding: '10px 8px', borderRadius: 12,
            background: t.status === 'live' ? t.color : 'rgba(255,255,255,0.06)',
            opacity: t.status === 'past' ? 0.45 : 1,
            border: t.status === 'next' ? `1.5px solid ${t.color}` : 'none',
            position: 'relative'
          }}>
            <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 9, letterSpacing: '0.12em', opacity: 0.7 }}>{t.date}</div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, lineHeight: 1, marginTop: 4 }}>{t.name}</div>
            <div style={{ width: 18, height: 2, background: t.color, marginTop: 6 }}></div>
          </div>
        ))}
      </div>
    </div>
  );
}

function WidgetLive({ accent = "#FF6B30" }) {
  return (
    <div className="widget" style={{ background: `linear-gradient(155deg, ${accent} 0%, #4A1900 110%)` }}>
      <div className="widget-row">
        <div className="widget-mono" style={{ opacity: 0.85 }}>INTERNAZIONALI · ROMA</div>
        <div className="widget-pill live"><span className="dot"></span>LIVE</div>
      </div>
      <div style={{ marginTop: 12 }}>
        <div style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', opacity: 0.8 }}>QUARTERFINAL · SET 3</div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 14 }}>
          <div>
            <div className="widget-title" style={{ fontSize: 22 }}>ALCARAZ</div>
            <div style={{ display: 'flex', gap: 12, marginTop: 8, fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 28, lineHeight: 1 }}>
              <span>6</span><span>4</span><span style={{ color: '#fff' }}>4</span>
            </div>
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 12 }}>
          <div>
            <div className="widget-title" style={{ fontSize: 22, opacity: 0.7 }}>DRAPER</div>
            <div style={{ display: 'flex', gap: 12, marginTop: 8, fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 28, lineHeight: 1, opacity: 0.7 }}>
              <span>3</span><span>6</span><span>3</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function WidgetCountdown({ accent = "#196B1E" }) {
  return (
    <div className="widget" style={{ background: `linear-gradient(135deg, ${accent} 0%, #082B0B 100%)` }}>
      <div className="widget-row">
        <div className="widget-mono">NEXT SLAM</div>
        <div className="widget-pill"><span className="dot" style={{ background: '#5AE860' }}></span>GRASS</div>
      </div>
      <div style={{ marginTop: 14 }}>
        <div className="widget-title">WIMBLEDON</div>
        <div className="widget-sub">29 Jun — All England Club</div>
      </div>
      <div style={{ display: 'flex', gap: 6, marginTop: 18 }}>
        {[52, 11, 38, 14].map((n, i) => (
          <div key={i} style={{ flex: 1, textAlign: 'center', padding: '10px 4px', background: 'rgba(255,255,255,0.1)', borderRadius: 10 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, lineHeight: 1 }}>{String(n).padStart(2, '0')}</div>
            <div style={{ fontSize: 8, letterSpacing: '0.16em', textTransform: 'uppercase', opacity: 0.7, marginTop: 4 }}>{['days','hrs','min','sec'][i]}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { WidgetTrend, WidgetSeason, WidgetLive, WidgetCountdown });