'use client'

import { useState } from 'react'
import { Icon } from './Icon'

export function ContactPublisher({
  company,
  title,
  email,
}: {
  company: string
  title: string
  email?: string | null
}) {
  const [msg, setMsg] = useState(
    `Hola, estoy interesado/a en el activo "${title}". Me gustaría conocer más sobre la documentación técnica y condiciones.`,
  )
  const to = email || 'ventas.terraworks@gmail.com'
  const mailto = `mailto:${to}?subject=${encodeURIComponent(`Consulta Portal Minería — ${title}`)}&body=${encodeURIComponent(msg)}`

  return (
    <div style={{ background: 'var(--bg-elev)', border: '1px solid var(--line)', padding: 20 }}>
      <div className="mono uppercase-wide" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.1em' }}>Publicador</div>
      <div className="display" style={{ fontSize: 16, fontWeight: 600, marginTop: 6, lineHeight: 1.3 }}>{company}</div>

      <div style={{ marginTop: 16 }}>
        <div className="mono uppercase-wide" style={{ fontSize: 9, color: 'var(--muted)', letterSpacing: '0.1em', marginBottom: 4 }}>Mensaje</div>
        <textarea
          value={msg}
          onChange={(e) => setMsg(e.target.value)}
          rows={4}
          className="input"
          style={{ height: 'auto', padding: 10, fontFamily: 'var(--f-body)', lineHeight: 1.4, resize: 'vertical' }}
        />
      </div>
      <a href={mailto} className="btn accent" style={{ width: '100%', marginTop: 10 }}>
        Enviar mensaje <Icon name="arrow-right" size={12} />
      </a>
      <a href={mailto} className="btn ghost" style={{ width: '100%', marginTop: 6, border: '1px solid var(--line-soft)' }}>
        Solicitar visita a terreno
      </a>

      <div style={{ marginTop: 16, paddingTop: 16, borderTop: '1px solid var(--line-softer)' }}>
        <div className="mono uppercase-wide" style={{ fontSize: 9, color: 'var(--muted)', letterSpacing: '0.1em' }}>Fuentes de referencia</div>
        <div style={{ marginTop: 8, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {['SERNAGEOMIN', 'Conservador de Minas', 'SII'].map((s) => (
            <span key={s} className="mono" style={{ fontSize: 10, padding: '3px 6px', border: '1px solid var(--line-soft)', background: 'var(--bg)', color: 'var(--ink-2)' }}>
              {s}
            </span>
          ))}
        </div>
      </div>
    </div>
  )
}