export default function HookdPage() {
  return (
    <div style={{ 
      minHeight: '100vh', 
      background: 'linear-gradient(135deg, #0f172a 0%, #1e293b 100%)',
      color: '#fff',
      padding: '2rem',
      fontFamily: 'system-ui, sans-serif'
    }}>
      <div style={{ maxWidth: '800px', margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: '2rem' }}>
          <div style={{ fontSize: '64px', marginBottom: '1rem' }}>📌</div>
          <h1 style={{ fontSize: '2.5rem', marginBottom: '0.5rem' }}>Hookd</h1>
          <p style={{ color: '#94a3b8', fontSize: '1.1rem' }}>
            Save, organize and AI-sort your X content
          </p>
        </div>
        
        <div style={{ 
          background: 'rgba(79, 70, 229, 0.1)', 
          border: '1px solid rgba(79, 70, 229, 0.3)',
          borderRadius: '12px', 
          padding: '1.5rem',
          marginBottom: '2rem',
          textAlign: 'center'
        }}>
          <p style={{ marginBottom: '1rem' }}>Download the Hookd Chrome Extension</p>
          <a 
            href="/hookd.zip" 
            download="hookd.zip"
            style={{
              display: 'inline-block',
              background: 'linear-gradient(135deg, #4F46E5, #7C3AED)',
              color: 'white',
              padding: '12px 32px',
              borderRadius: '8px',
              textDecoration: 'none',
              fontWeight: 'bold',
              fontSize: '1rem'
            }}
          >
            ⬇️ Download Hookd.zip
          </a>
        </div>
        
        <h2 style={{ marginBottom: '1rem' }}>Features</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '1rem' }}>
          {[
            { icon: '📥', title: 'DM Organizer', desc: 'Extract and categorize your X DMs' },
            { icon: '🐦', title: 'Feed Saver', desc: 'Checkmark posts to save in bulk' },
            { icon: '🤖', title: 'AI Processing', desc: 'Connect to OpenClaw for auto-categorization' },
            { icon: '👥', title: 'Contact Lists', desc: 'Share to Dev Friends, Meme Buddies & more' },
          ].map((f, i) => (
            <div key={i} style={{ 
              background: 'rgba(255,255,255,0.05)',
              border: '1px solid rgba(255,255,255,0.1)',
              borderRadius: '8px',
              padding: '1rem'
            }}>
              <div style={{ fontSize: '1.5rem', marginBottom: '0.5rem' }}>{f.icon}</div>
              <h3 style={{ fontSize: '0.9rem', marginBottom: '0.25rem' }}>{f.title}</h3>
              <p style={{ color: '#94a3b8', fontSize: '0.8rem' }}>{f.desc}</p>
            </div>
          ))}
        </div>
        
        <h2 style={{ marginTop: '2rem', marginBottom: '1rem' }}>Installation</h2>
        <ol style={{ color: '#94a3b8', paddingLeft: '1.5rem', lineHeight: '1.8' }}>
          <li>Download the extension (button above)</li>
          <li>Unzip the downloaded file</li>
          <li>Open Chrome → <code style={{ background: '#334155', padding: '2px 6px', borderRadius: '4px' }}>chrome://extensions/</code></li>
          <li>Enable <strong>Developer mode</strong> (top right toggle)</li>
          <li>Click <strong>Load unpacked</strong></li>
          <li>Select the <code>hookd</code> folder (the folder, not individual files)</li>
          <li>Pin 📌 Hookd to your toolbar!</li>
        </ol>
        
        <div style={{ marginTop: '2rem', padding: '1rem', background: 'rgba(239, 68, 68, 0.1)', borderRadius: '8px' }}>
          <p style={{ fontSize: '0.9rem', color: '#94a3b8' }}>
            <strong>Note:</strong> Version 1.0.5 - CSP compliant, requires Chrome 88+
          </p>
        </div>
      </div>
    </div>
  )
}