Modern Timeline

"use client"

import React from "react"
import { Timeline } from "@/components/ui/modern-timeline"
import { TimelineItem } from "@/components/ui/timeline"

const timelineItems: TimelineItem[] = [
  {
    title: "Company Founded",
    description: "Started our journey with a simple idea: to revolutionize how teams collaborate. Founded by our CEO with a vision to build the ultimate productivity platform for modern businesses.",
    date: "2024-01-15",
    category: "Foundation",
    image: "https://cdn.21st.dev/assets/mirror/d8/d8e0b55ba06cb79571a9d9eec1fe7c784fe0a180438410700bbc6f24a7ff8c76.jpg",
    status: "completed"
  },
  {
    title: "MVP Launch & First Customers",
    description: "Successfully launched our minimum viable product after 6 months of development. Onboarded our first 100 customers and achieved product-market fit with 95% user satisfaction.",
    date: "2024-03-20",
    category: "Product",
    image: "https://cdn.21st.dev/assets/mirror/d8/d8e0b55ba06cb79571a9d9eec1fe7c784fe0a180438410700bbc6f24a7ff8c76.jpg",
    status: "completed"
  },
  {
    title: "Series A Funding",
    description: "Raised $5M in Series A funding led by top-tier VCs. This milestone enables us to scale our team, enhance our product, and expand into new markets globally.",
    date: "2024-06-10",
    category: "Funding",
    image: "https://cdn.21st.dev/assets/mirror/ad/adf63af8a991aa82fc7bc0b822f223842c22d4b6386fbd927575f34f5eb4abef.jpg",
    status: "completed"
  },
  {
    title: "Global Team Expansion",
    description: "Expanded our team to 50+ talented individuals across 12 countries. Built diverse engineering, design, and sales teams to support our growing customer base and product development.",
    date: "2024-09-15",
    category: "Team",
    image: "https://cdn.21st.dev/assets/mirror/96/966f29c63764a4003893329a1fdeb568fdbe0185949f0be799f4d376e6bafb85.jpg",
    status: "completed"
  },
  {
    title: "Enterprise Platform Launch",
    description: "Launching our enterprise-grade platform with advanced security, SSO integration, and enterprise-level support. Currently in beta with 25+ Fortune 500 companies testing the platform.",
    date: "2024-12-01",
    category: "Product",
    image: "https://cdn.21st.dev/assets/mirror/3d/3d64b9d7add7cb63c450083d08cdd3124e5390daf2ede9bd75f84670266b35de.jpg",
    status: "current"
  },
  {
    title: "AI Integration & Automation",
    description: "Implementing cutting-edge AI features including smart task automation, predictive analytics, and intelligent insights to help teams work more efficiently and make better decisions.",
    date: "2025-03-01",
    category: "Innovation",
    image: "https://cdn.21st.dev/assets/mirror/b5/b5e0a51f3f066510ff95875091d4de806e305cccf601826efce880394443ab2c.jpg",
    status: "upcoming"
  },
  {
    title: "International Market Expansion",
    description: "Expanding operations to European and Asian markets with localized products, dedicated support teams, and partnerships with regional technology leaders.",
    date: "2025-06-01",
    category: "Growth",
    image: "https://cdn.21st.dev/assets/mirror/bb/bba7fe34f6367afb53bf99c6029fbfcfa0751b033c180c93d543c2dda2be6ea1.jpg",
    status: "upcoming"
  },
  {
    title: "IPO Preparation",
    description: "Begin preparations for initial public offering with financial audits, compliance frameworks, and strategic partnerships to position the company for public markets.",
    date: "2025-10-01",
    category: "Milestone",
    image: "https://cdn.21st.dev/assets/mirror/b6/b6dda538feb3388f4b421016ee940a3e7d8e74dbdf973e9e3415b2e25bf89847.jpg",
    status: "upcoming"
  }
]

export default function TimelineDemo() {
  return (
    <div className="min-h-screen bg-background">
      <header className="text-center py-16 px-6">
        <h1 className="text-4xl sm:text-5xl font-bold text-foreground mb-4">
          Our Journey
        </h1>
        <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
          From a simple idea to a global platform serving thousands of teams worldwide. 
          Follow our story of innovation, growth, and the amazing people who made it possible.
        </p>
      </header>

      <main>
        <Timeline items={timelineItems} />
      </main>

      <footer className="text-center py-12 px-6 border-t bg-muted/20">
        <p className="text-muted-foreground">
          Ready to be part of our next chapter? <span className="text-primary font-medium">Join our team</span>
        </p>
      </footer>
    </div>
  )
}