import { useNavigate } from 'react-router-dom';
import { ShieldIcon, ZapIcon, GlobeIcon } from '../components/Icons';

const VALUES = [
  { icon: <ZapIcon size={22} />, title: 'Speed over ceremony', desc: 'File sharing should take seconds, not minutes. We remove every unnecessary step between your file and your recipient.' },
  { icon: <ShieldIcon size={22} />, title: 'Expiry by default', desc: "Files that live forever are a liability. Every link on CShare expires. That's not a limitation — it's the point." },
  { icon: <GlobeIcon size={22} />, title: 'No walls', desc: "Recipients shouldn't need an account to download a file you sent them. We refuse to add sign-up friction to the receiving end." },
];

export default function AboutPage() {
  const navigate = useNavigate();

  return (
    <div className="page-enter" style={{ minHeight: '100vh' }}>
      {/* Hero */}
      <section style={{ padding: 'clamp(72px, 10vh, 120px) 24px 64px', maxWidth: '760px', margin: '0 auto' }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: '8px', marginBottom: '24px' }}>
          <span style={{ color: 'var(--accent)', fontFamily: 'var(--font-heading)', fontWeight: 700 }}>//</span>
          <span style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: '0.75rem', letterSpacing: '0.12em', textTransform: 'uppercase' }}>About</span>
        </div>
        <h1 style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 700, fontSize: 'clamp(2.25rem, 4vw, 3.5rem)', letterSpacing: '-0.02em', lineHeight: 1.1, marginBottom: '28px' }}>
          Built by someone who got tired of WeTransfer links that live forever.
        </h1>
        <p style={{ color: 'var(--text-secondary)', fontSize: '1.0625rem', lineHeight: 1.8, marginBottom: '20px' }}>
          CShare started as a weekend project. The problem was simple: every file-sharing service either requires the recipient to sign up, charges too much, or keeps files around indefinitely with no way to clean up.
        </p>
        <p style={{ color: 'var(--text-secondary)', fontSize: '1.0625rem', lineHeight: 1.8, marginBottom: '20px' }}>
          The idea was to build the opposite — dead simple to use, zero friction for recipients, and files that disappear when they're supposed to.
        </p>
        <p style={{ color: 'var(--text-secondary)', fontSize: '1.0625rem', lineHeight: 1.8 }}>
          CShare is currently in public beta. It's a real product with real infrastructure, built carefully and maintained actively. No VC funding, no growth hacking, no dark patterns.
        </p>
      </section>

      {/* Values */}
      <section style={{ padding: '0 24px 80px', maxWidth: '1080px', margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '32px' }}>
          <span style={{ color: 'var(--accent)', fontFamily: 'var(--font-heading)', fontWeight: 700 }}>//</span>
          <span style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-heading)', fontWeight: 600, fontSize: '0.75rem', letterSpacing: '0.12em', textTransform: 'uppercase' }}>What we believe</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '20px' }}>
          {VALUES.map((v) => (
            <div key={v.title} className="card" style={{ padding: '28px' }}>
              <div style={{ width: '44px', height: '44px', borderRadius: 'var(--radius-md)', background: 'var(--accent-muted)', border: '1px solid var(--accent-border)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--accent)', marginBottom: '16px' }}>
                {v.icon}
              </div>
              <h3 className="heading-sm" style={{ marginBottom: '8px' }}>{v.title}</h3>
              <p style={{ color: 'var(--text-secondary)', fontSize: '0.9375rem', lineHeight: 1.7 }}>{v.desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding: '0 24px 80px', maxWidth: '760px', margin: '0 auto' }}>
        <div className="card" style={{ padding: '40px', textAlign: 'center', position: 'relative', overflow: 'hidden', border: '1px solid var(--accent-border)' }}>
          <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: '2px', background: 'linear-gradient(90deg, transparent, var(--accent), transparent)' }} />
          <h2 className="heading-md" style={{ marginBottom: '16px' }}>Give it a try.</h2>
          <p style={{ color: 'var(--text-secondary)', marginBottom: '28px', lineHeight: 1.7 }}>
            No account needed to start. Upload a file right now and see how it feels.
          </p>
          <button className="btn btn-primary btn-lg" onClick={() => navigate('/upload')}>
            Start Sharing Free
          </button>
        </div>
      </section>
    </div>
  );
}