const Features = () => {
    const featureList = [
        {
            title: "Real-time Tracking",
            desc: "Monitor OR workflow status in real-time with automated updates and bottleneck detection.",
            icon: "Activity"
        },
        {
            title: "Role-based Dashboards",
            desc: "Custom views for surgeons, nursing managers, and hospital administrators.",
            icon: "Layout"
        }
    ];

    return (
        <section style={{ padding: '6rem 2rem', background: 'rgba(15, 17, 23, 0.5)' }}>
            <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
                <div style={{ textAlign: 'center', marginBottom: '4rem' }}>
                    <h2 style={{ fontSize: '2.5rem', marginBottom: '1rem' }}>Engineered for Efficiency</h2>
                    <p style={{ color: 'var(--text-dim)', maxWidth: '600px', margin: '0 auto' }}>Powerful tools designed specifically for the high-stakes environment of perioperative care.</p>
                </div>
                <div className="features-grid">
                    {featureList.map(f => (
                        <div key={f.title} className="feature-card">
                            <div className="feature-icon">
                                <i data-lucide={f.icon.toLowerCase()}></i>
                            </div>
                            <h3>{f.title}</h3>
                            <p>{f.desc}</p>
                        </div>
                    ))}
                </div>
                
                <div style={{ marginTop: '8rem', textAlign: 'center' }}>
                    <h2 style={{ fontSize: '2.5rem', marginBottom: '4rem' }}>How It Works</h2>
                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '3rem' }}>
                        {[
                            { step: '01', title: 'Input Workflow', desc: 'Sync your existing staffing program and scheduling data seamlessly.' },
                            { step: '02', title: 'Visualize Gaps', desc: 'Instantly see where bottlenecks and delays are occurring.' },
                            { step: '03', title: 'Improve Throughput', desc: 'Optimize staffing and OR turnover for maximum revenue.' }
                        ].map(s => (
                            <div key={s.step} style={{ textAlign: 'left', borderLeft: '1px solid var(--border)', paddingLeft: '2rem' }}>
                                <div style={{ fontSize: '3rem', fontWeight: 900, color: 'rgba(74, 222, 128, 0.2)', fontFamily: 'Syne' }}>{s.step}</div>
                                <h3 style={{ margin: '1rem 0' }}>{s.title}</h3>
                                <p style={{ color: 'var(--text-dim)' }}>{s.desc}</p>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
            
            {/* Initialize Lucide icons */}
            <script dangerouslySetInnerHTML={{ __html: 'lucide.createIcons();' }} />
        </section>
    );
};

window.Features = Features;