import Link from 'next/link'

export function ComingSoon({ title, description }: { title: string; description: string }) {
  return (
    <div className="bleed" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 'calc(100vh - 64px)', textAlign: 'center' }}>
      <div style={{ maxWidth: 460 }}>
        <div className="mono uppercase-wide" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.18em' }}>
          <span style={{ color: 'var(--accent)' }}>▣</span> Portal Minería
        </div>
        <h1 className="display" style={{ fontSize: 'clamp(32px, 5vw, 48px)', fontWeight: 600, letterSpacing: '-0.03em', marginTop: 14 }}>
          {title}
        </h1>
        <p style={{ margin: '12px auto 0', maxWidth: 380, color: 'var(--muted)', lineHeight: 1.6 }}>{description}</p>
        <div style={{ marginTop: 22, display: 'flex', gap: 10, justifyContent: 'center', flexWrap: 'wrap' }}>
          <Link href="/marketplace" className="btn accent">Explorar activos</Link>
          <Link href="/" className="btn ghost" style={{ border: '1px solid var(--line-soft)' }}>Volver al inicio</Link>
        </div>
      </div>
    </div>
  )
}