`kalshi-dash/src/setup/steps/Welcome.jsx`

70 lines
import React from 'react';

const FEATURES = [
  { title: 'Event Contracts', desc: 'Betting on weather like a person who never learned to just look outside. CFTC-regulated, at least.', icon: 'M13 7h8m0 0v8m0-8l-8 8-4-4-6 6' },
  { title: 'Weather Intelligence', desc: 'We schlepp forecast data from the government so you don\'t have to read the almanac yourself.', icon: 'M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z' },
  { title: 'Automated Execution', desc: 'The machine places your bets so your hands stay clean. Safe mode included, because I worry.', icon: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z' },
];

const PIPELINE = [
  'Hook up to Ken (demo first, like a sensible person)',
  'Snoop around the weather contracts',
  'Schlep in the NWS settlement data',
  'Let the computer do the math you were too lazy to learn',
  'Set some limits so you don\'t lose your shirt',
  'Place the bets (on paper first, God willing)',
];

export default function Welcome({ next }) {
  return (
    <div className="space-y-8">
      <div className="text-center">
        <h1 className="text-4xl font-bold kalshi-gradient mb-3">Oy, Look Who Finally Showed Up</h1>
        <p className="text-gray-400 text-lg">So you want to bet on the weather? Your mother would be so proud.</p>
      </div>

      <div className="grid grid-cols-3 gap-4">
        {FEATURES.map(f => (
          <div key={f.title} className="card text-center">
            <div className="w-10 h-10 rounded-lg bg-amber-500/10 flex items-center justify-center mx-auto mb-3">
              <svg className="w-5 h-5 text-amber-400" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" d={f.icon} />
              </svg>
            </div>
            <h3 className="font-semibold text-sm mb-1">{f.title}</h3>
            <p className="text-xs text-gray-500 leading-relaxed">{f.desc}</p>
          </div>
        ))}
      </div>

      <div className="card">
        <h3 className="font-semibold text-sm mb-3">Listen, this is how it works</h3>
        <div className="grid grid-cols-2 gap-2">
          {PIPELINE.map((p, i) => (
            <div key={i} className="flex items-center gap-3 py-1.5">
              <span className="w-6 h-6 rounded-full bg-amber-500/15 text-amber-400 flex items-center justify-center text-xs font-bold flex-shrink-0">{i + 1}</span>
              <span className="text-sm text-gray-300">{p}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="card bg-green-500/5 border-green-500/20">
        <div className="flex items-start gap-3">
          <svg className="w-5 h-5 text-green-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
          </svg>
          <div>
            <p className="text-sm font-medium text-green-400">At least it's legal, thank God</p>
            <p className="text-xs text-gray-400 mt-1">Ken is a real CFTC-regulated exchange, not some offshore mishegoss. You'll need an account with API access. Go make one already, I'll wait.</p>
          </div>
        </div>
      </div>

      <div className="flex justify-center">
        <button onClick={next} className="btn btn-p px-8 py-3 text-base font-bold rounded-xl">Nu, Let's Go Already</button>
      </div>
    </div>
  );
}