Silos/frontend/src/components/Features.tsx

import { motion } from 'framer-motion'
import { features } from '../data/landingData'

function FeaturePreview({ type }: { type: string }) {
  switch (type) {
    case 'editor':
      return (
        <div className="rounded-lg border border-silos-cream-dark bg-white p-3">
          <div className="flex gap-1.5 border-b border-silos-cream-dark pb-2">
            {['H1', 'H2', 'B', '•'].map((btn) => (
              <span
                key={btn}
                className="rounded px-2 py-0.5 text-[10px] font-medium text-silos-muted bg-silos-cream"
              >
                {btn}
              </span>
            ))}
          </div>
          <div className="mt-2 space-y-1.5">
            <div className="h-2 w-3/4 rounded bg-silos-text/20" />
            <div className="h-1.5 w-full rounded bg-silos-muted/20" />
            <div className="h-1.5 w-5/6 rounded bg-silos-muted/20" />
          </div>
        </div>
      )
    case 'database':
      return (
        <div className="rounded-lg border border-silos-cream-dark bg-white p-3">
          <div className="grid grid-cols-3 gap-1 text-[9px] font-medium text-silos-muted">
            <span>Name</span>
            <span>Status</span>
            <span>Owner</span>
          </div>
          {[1, 2, 3].map((row) => (
            <div key={row} className="mt-1 grid grid-cols-3 gap-1">
              <div className="h-1.5 rounded bg-silos-cream" />
              <div className="h-1.5 rounded bg-silos-tan/30" />
              <div className="h-1.5 rounded bg-silos-cream" />
            </div>
          ))}
        </div>
      )
    case 'whiteboard':
      return (
        <div className="rounded-lg border border-silos-cream-dark bg-white p-3">
          <svg viewBox="0 0 120 60" className="w-full">
            <rect x="10" y="10" width="30" height="20" rx="3" fill="#C17D65" opacity="0.3" stroke="#6B3A2C" strokeWidth="1" />
            <rect x="50" y="25" width="30" height="20" rx="3" fill="#6B3A2C" opacity="0.2" stroke="#6B3A2C" strokeWidth="1" />
            <line x1="40" y1="20" x2="50" y2="35" stroke="#C17D65" strokeWidth="1.5" strokeDasharray="3 2" />
            <circle cx="90" cy="20" r="8" fill="#C17D65" opacity="0.3" stroke="#6B3A2C" strokeWidth="1" />
          </svg>
        </div>
      )
    case 'kanban':
      return (
        <div className="rounded-lg border border-silos-cream-dark bg-white p-3">
          <div className="flex gap-2">
            {['To Do', 'In Progress', 'Done'].map((col, i) => (
              <div key={col} className="flex-1">
                <p className="text-[8px] font-medium text-silos-muted">{col}</p>
                <div className="mt-1 space-y-1">
                  {Array.from({ length: i === 1 ? 2 : 1 }).map((_, j) => (
                    <div
                      key={j}
                      className={`h-4 rounded ${i === 2 ? 'bg-silos-tan/30' : 'bg-silos-cream'}`}
                    />
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      )
    case 'integrations':
      return (
        <div className="flex items-center justify-center gap-4 rounded-lg border border-silos-cream-dark bg-white p-4">
          {['Slack', 'GitHub', 'Drive'].map((name) => (
            <div
              key={name}
              className="flex h-8 w-8 items-center justify-center rounded-lg bg-silos-cream text-[8px] font-bold text-silos-muted"
            >
              {name[0]}
            </div>
          ))}
        </div>
      )
    case 'collaboration':
      return (
        <div className="flex items-center justify-center gap-2 rounded-lg border border-silos-cream-dark bg-white p-4">
          <div className="flex -space-x-2">
            {['#C17D65', '#6B3A2C', '#8B4D3B'].map((color, i) => (
              <div
                key={i}
                className="flex h-7 w-7 items-center justify-center rounded-full border-2 border-white text-[9px] font-medium text-white"
                style={{ backgroundColor: color }}
              >
                {['S', 'M', 'A'][i]}
              </div>
            ))}
          </div>
          <span className="rounded-full bg-silos-cream px-2 py-0.5 text-[9px] text-silos-muted">
            +3 people editing
          </span>
        </div>
      )
    default:
      return null
  }
}

export default function Features() {
  return (
    <section id="features" className="bg-white px-4 py-20 sm:px-6 lg:px-8">
      <div className="mx-auto max-w-7xl">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5 }}
          className="text-center"
        >
          <h2 className="font-display text-3xl font-bold text-silos-text sm:text-4xl">
            Everything your team needs to work better
          </h2>
          <p className="mx-auto mt-4 max-w-2xl text-silos-muted">
            From documents to databases, whiteboards to boards — all in one connected workspace.
          </p>
        </motion.div>

        <div className="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {features.map((feature, i) => (
            <motion.div
              key={feature.title}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: i * 0.08 }}
              whileHover={{ y: -4, transition: { duration: 0.2 } }}
              className="group rounded-2xl border border-silos-cream-dark bg-silos-cream/50 p-6 transition-shadow hover:shadow-lg"
            >
              <FeaturePreview type={feature.preview} />
              <h3 className="mt-4 text-lg font-semibold text-silos-text group-hover:text-silos-brown">
                {feature.title}
              </h3>
              <p className="mt-2 text-sm text-silos-muted">{feature.description}</p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  )
}