/* global React */
// LineModal — mock "LINEで無料相談" dialog (interactive CTA target).

function LineModal({ open, onClose }) {
  const { Button } = window.AIDesignSystem_dabded;
  const { Icon } = window;
  const { lineTemplate, contact } = window.LP;
  const [copied, setCopied] = React.useState(false);
  React.useEffect(() => { if (!open) setCopied(false); }, [open]);
  if (!open) return null;

  const copy = () => {
    try { navigator.clipboard.writeText(lineTemplate); } catch (e) {}
    setCopied(true);
  };

  return (
    <div className="lp-modal" onClick={onClose}>
      <div className="lp-modal__card" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true">
        <button className="lp-modal__x" onClick={onClose} aria-label="閉じる"><Icon name="x" size={18} /></button>
        <span className="lp-modal__chip"><Icon name="message-circle" size={22} color="#fff" /></span>
        <h3 className="lp-modal__title">LINEで無料相談する</h3>
        <p className="lp-modal__lead">下のテンプレートをコピーして、LINEで送ってください。初回30分・無理な営業はありません。</p>
        <pre className="lp-modal__template">{lineTemplate}</pre>
        <div className="lp-modal__actions">
          <Button variant="outline" size="md" onClick={copy} startIcon={<Icon name={copied ? "check" : "copy"} size={16} />}>
            {copied ? "コピーしました" : "テンプレートをコピー"}
          </Button>
          <Button variant="line" size="md" href={contact.LINE_URL} startIcon={<Icon name="external-link" size={16} />}>LINEを開く</Button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { LineModal });