import React from 'react';

interface WelcomeProps {
  onContinue: () => void;
}

const Welcome: React.FC<WelcomeProps> = ({ onContinue }) => {
  return (
    <div style={{
      maxWidth: '1000px',
      margin: '40px auto',
      padding: '40px',
      backgroundColor: 'white',
      borderRadius: '16px',
      boxShadow: '0 20px 50px rgba(0,0,0,0.15)',
      fontFamily: 'system-ui, -apple-system, sans-serif',
      lineHeight: '1.6',
      color: '#333'
    }}>
      <div style={{ display: 'flex', gap: '40px', alignItems: 'flex-start', marginBottom: '40px' }}>
        <img 
          src="/profile.jpg" 
          alt="Frank Chinembiri" 
          style={{ 
            width: '220px', 
            height: '280px', 
            objectFit: 'cover', 
            borderRadius: '12px',
            boxShadow: '0 4px 15px rgba(0,0,0,0.1)'
          }} 
        />
        <div style={{ flex: 1 }}>
          <header style={{ marginBottom: '20px' }}>
            <h1 style={{ margin: 0, fontSize: '36px', color: '#1a73e8', fontWeight: '800' }}>Frank Tadiwanashe Chinembiri</h1>
            <p style={{ margin: '5px 0 0', fontSize: '20px', fontWeight: '600', color: '#5f6368' }}>
              Spatial Data Scientist | Systems Engineer | Geospatial Expert
            </p>
          </header>
          
          <p style={{ fontSize: '16px', color: '#444' }}>
            I am a technical lead and researcher based in <strong>Harare, Zimbabwe</strong>, currently pursuing an <strong>MTech in Data Science and Analytics</strong> at the Harare Institute of Technology. 
            With a background in <strong>Computer Science (BSc Hons)</strong>, my expertise lies in bridging the gap between applied machine learning, complex systems engineering, and real-world agricultural challenges.
          </p>

          <div style={{ marginTop: '25px', display: 'flex', gap: '15px' }}>
            <button 
              onClick={onContinue}
              style={{
                padding: '12px 30px',
                backgroundColor: '#1a73e8',
                color: 'white',
                border: 'none',
                borderRadius: '8px',
                fontSize: '18px',
                fontWeight: 'bold',
                cursor: 'pointer',
                boxShadow: '0 4px 10px rgba(26, 115, 232, 0.3)'
              }}
            >
              Open GeoCrop App →
            </button>
            <a 
              href="https://stagri.techarvest.co.zw" 
              target="_blank" 
              rel="noopener noreferrer"
              style={{
                padding: '12px 25px',
                backgroundColor: '#f8f9fa',
                color: '#1a73e8',
                border: '2px solid #1a73e8',
                borderRadius: '8px',
                fontSize: '16px',
                fontWeight: '600',
                textDecoration: 'none'
              }}
            >
              Stagri Platform
            </a>
          </div>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: '40px', borderTop: '1px solid #eee', paddingTop: '30px' }}>
        <div>
          <h2 style={{ fontSize: '22px', color: '#202124', marginBottom: '15px' }}>💼 Professional Experience</h2>
          <ul style={{ padding: 0, listStyle: 'none', fontSize: '14px', color: '#555' }}>
            <li style={{ marginBottom: '12px' }}>
              <strong>📍 Green Earth Consultants:</strong> Information Systems Expert leading geospatial analytics and Earth Observation workflows.
            </li>
            <li style={{ marginBottom: '12px' }}>
              <strong>💻 ZCHPC:</strong> AI Research Scientist & Systems Engineer. Architected 2.5 PB enterprise storage and precision agriculture ML models.
            </li>
            <li style={{ marginBottom: '12px' }}>
              <strong>🛠️ X-Sys Security & Clencore:</strong> Software Developer building cross-platform ERP modules and robust architectures.
            </li>
          </ul>

          <h2 style={{ fontSize: '22px', color: '#202124', marginTop: '25px', marginBottom: '15px' }}>🚜 Food Security & Impact</h2>
          <p style={{ fontSize: '14px', color: '#555' }}>
            Deeply committed to stabilizing food systems through technology. My work includes the 
            <strong> Stagri Platform</strong> for contract farming compliance and <strong>AUGUST</strong>, 
            an AI robot for plant disease detection.
          </p>
        </div>

        <div style={{ background: '#f8f9fa', padding: '25px', borderRadius: '12px' }}>
          <h2 style={{ fontSize: '20px', color: '#202124', marginBottom: '15px' }}>🛠️ Tech Stack Skills</h2>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '15px' }}>
            <div>
              <h3 style={{ fontSize: '14px', margin: '0 0 5px' }}>🌍 Geospatial</h3>
              <p style={{ fontSize: '12px', color: '#666' }}>Google Earth Engine, OpenLayers, STAC, Sentinel-2</p>
            </div>
            <div>
              <h3 style={{ fontSize: '14px', margin: '0 0 5px' }}>🤖 Machine Learning</h3>
              <p style={{ fontSize: '12px', color: '#666' }}>XGBoost, CatBoost, Scikit-Learn, Computer Vision</p>
            </div>
            <div>
              <h3 style={{ fontSize: '14px', margin: '0 0 5px' }}>⚙️ Infrastructure</h3>
              <p style={{ fontSize: '12px', color: '#666' }}>Kubernetes (K3s), Docker, Linux Admin, MinIO</p>
            </div>
            <div>
              <h3 style={{ fontSize: '14px', margin: '0 0 5px' }}>🚀 Full-Stack</h3>
              <p style={{ fontSize: '12px', color: '#666' }}>FastAPI, React, TypeScript, Flutter, Redis</p>
            </div>
          </div>
          
          <div style={{ marginTop: '20px', fontSize: '13px', color: '#444', borderTop: '1px solid #ddd', paddingTop: '15px' }}>
            <p style={{ margin: 0 }}><strong>🖥️ Server Management:</strong> I maintain a <strong>dedicated homelab</strong> and a <strong>personal cloudlab sandbox</strong> where I experiment with new technologies and grow my skills. This includes managing the cluster running this app, CloudPanel, Email servers, Odoo, and Nextcloud.</p>
          </div>
        </div>
      </div>

      <footer style={{ marginTop: '40px', textAlign: 'center', borderTop: '1px solid #eee', paddingTop: '20px' }}>
        <p style={{ fontSize: '14px', color: '#666' }}>
          Need more credentials or higher compute limits? <br/>
          📧 <strong>frank@techarvest.co.zw</strong> | <strong>fchinembiri24@gmail.com</strong>
        </p>
      </footer>
    </div>
  );
};

export default Welcome;