import React from 'react';
import './App.css';

interface Experience {
  title: string;
  company: string;
  location: string;
  period: string;
  achievements: string[];
}

const App: React.FC = () => {
  const profile = {
    name: "Francis Penetrante",
    role: "Senior Software Engineer",
    experience: 13,
    email: "me@kikopenetrante.com",
    phone: "+63 917 512 3972",
    location: "Taguig City, PH"
  };

  const skills = [
    "React", "Node.js", "TypeScript", "Python",
    "GCP", "AWS", "Azure", "Airflow",
    "BigQuery", "Snowflake", "Docker", "Terraform"
  ];

  const achievements = [
    { metric: "75%", desc: "Reduction in processing time" },
    { metric: "90%", desc: "On-time delivery rate" },
    { metric: "Zero", desc: "Manual deployments" },
    { metric: "13+", desc: "Years of experience" }
  ];

  return (
    <div className="app">
      <header className="header">
        <h1>{profile.name}</h1>
        <h2>{profile.role}</h2>
      </header>
      <main className="content">
        {/* Rendered component will show here */}
      </main>
    </div>
  );
};

export default App;