'use client';

import Image from 'next/image';
import {ArrowUpLeft,ArrowUpRight,Headphones,MessagesSquare,Phone,Sparkles} from 'lucide-react';
import {useSite} from './site-shell';
import {AssistantMark} from './assistant-mark';
import {n} from '@/lib/catalog';
import {ContactDetails} from './contact-details';
import {PLANCK_PHONE, PLANCK_PHONE_HREF as supportPhoneHref, contactDigits} from '@/lib/planck-contact';

export function PlanckSupport({reducedMotion=false}:{reducedMotion?:boolean}){
 const {locale,openAssistant}=useSite();
 const say=(fa:string,en:string,ar:string)=>locale==='en'?en:locale==='ar'?ar:fa;
 const phone=contactDigits(PLANCK_PHONE,locale);
 const Arrow=locale==='en'?ArrowUpRight:ArrowUpLeft;
 return <section id="planck-support" className="planck-support" aria-labelledby="support-title" data-reduced-motion={reducedMotion||undefined}>
  <div className="ps-eyebrow"><span>{n(4,locale).padStart(2,locale==='fa'?'۰':locale==='ar'?'٠':'0')}</span><Headphones size={14}/>{say('همراه شما، در هر قدم','WITH YOU, AT EVERY STEP','معك في كل خطوة')}</div>
  <div className="ps-surface">
   <div className="ps-row ps-contact-row">
    <div className="ps-copy">
     <span className="ps-overline">{say('یک ارتباط، هزار راه‌حل','A CONVERSATION OPENS POSSIBILITIES','تواصل يفتح آفاقاً')}</span>
     <h2 id="support-title">{say('با پشتیبانی پلانک،','With Planck support,','مع دعم بلانك،')}<br/><span>{say('تنها نیستید.','you’re not alone.','لست وحدك.')}</span></h2>
     <p>{say('از اولین سؤال تا قدم بعدی؛ برای آشنایی با خدمات و پیگیری پرسش‌ها، با ما در ارتباط باشید.','From your first question to your next step. Connect with us to explore our services and find your way forward.','من سؤالك الأول إلى خطوتك التالية؛ تواصل معنا للتعرّف على خدماتنا ومتابعة استفساراتك.')}</p>
     <div className="ps-actions">
      <a className="ps-action" href={supportPhoneHref} aria-label={`${say('تماس با پلانک','Call Planck','اتصل ببلانك')} ${phone}`}><span className="ps-action-icon"><Phone size={22} strokeWidth={1.6}/></span><span className="ps-action-copy"><strong>{say('ارتباط با مرکز تماس','Call our team','التواصل مع مركز الاتصال')}</strong><span className="ps-phone" dir="ltr">{phone}</span></span><Arrow className="ps-action-arrow" size={17}/></a>
      <button type="button" className="ps-action" onClick={()=>openAssistant()}><span className="ps-action-icon"><MessagesSquare size={22} strokeWidth={1.6}/></span><span className="ps-action-copy"><strong>{say('گفت‌وگوی آنلاین','Chat online','محادثة عبر الإنترنت')}</strong><small>{say('پرسش از دستیار پلانک','Ask the Planck assistant','اسأل مساعد بلانك')}</small></span><Arrow className="ps-action-arrow" size={17}/></button>
     </div>
     <ContactDetails locale={locale} showPhone={false}/>
    </div>
    <div className="ps-art ps-headset-art" aria-hidden="true"><span className="ps-art-halo"/><span className="ps-orbit ps-orbit-one"/><span className="ps-orbit ps-orbit-two"/><Image className="ps-render" src="/images/planck-support-headset.png" alt="" width={1254} height={1254} sizes="(max-width: 680px) 230px, (max-width: 1100px) 300px, 370px" loading="lazy"/><span className="ps-art-label"><span/><Headphones size={13}/>PLANCK SUPPORT</span></div>
   </div>
   <div className="ps-divider" aria-hidden="true"><span/><Sparkles size={14}/><span/></div>
   <div className="ps-row ps-assistant-row">
    <div className="ps-copy">
     <span className="ps-overline">{say('از سؤال، به شناخت','FROM QUESTIONS TO CLARITY','من السؤال إلى المعرفة')}</span>
     <h3>{say('هر سؤالی دارید،','Whatever your question,','مهما كان سؤالك،')}<br/><span>{say('از دستیار پلانک بپرسید.','ask the Planck assistant.','اسأل مساعد بلانك.')}</span></h3>
     <p>{say('درباره دارایی‌ها، سرمایه‌گذاری و توکنایزیشن بیشتر بدانید؛ با راهنمایی روشن، مسیرتان را پیدا کنید.','Explore assets, investing and tokenization. Find your path with clear, accessible guidance.','تعرّف أكثر على الأصول والاستثمار والترميز، وحدّد مسارك بإرشادات واضحة.')}</p>
     <div className="ps-actions">
      <button type="button" className="ps-action" onClick={()=>openAssistant(say('درباره سرمایه‌گذاری و توکنایزیشن در پلانک راهنمایی می‌خواهم.','I would like guidance on investing and tokenization with Planck.','أرغب في إرشادات عن الاستثمار والترميز مع بلانك.'))}><span className="ps-action-icon"><AssistantMark/></span><span className="ps-action-copy"><strong>{say('شروع گفت‌وگو با دستیار','Chat with the assistant','ابدأ المحادثة مع المساعد')}</strong><small>{say('راهنمای خدمات و دارایی‌ها','Explore services and assets','دليل الخدمات والأصول')}</small></span><Arrow className="ps-action-arrow" size={17}/></button>
      <a className="ps-action" href={supportPhoneHref} aria-label={`${say('دریافت مشاوره تلفنی پلانک','Call Planck for guidance','اتصل ببلانك للاستشارة')} ${phone}`}><span className="ps-action-icon"><Headphones size={22} strokeWidth={1.6}/></span><span className="ps-action-copy"><strong>{say('دریافت مشاوره','Get guidance','الحصول على استشارة')}</strong><small>{say('ارتباط تلفنی با پلانک','Speak with Planck by phone','تواصل هاتفياً مع بلانك')}</small></span><Arrow className="ps-action-arrow" size={17}/></a>
     </div>
    </div>
    <div className="ps-art ps-assistant-art" aria-hidden="true"><span className="ps-art-halo"/><span className="ps-orbit ps-orbit-one"/><div className="ps-assistant-emblem"><AssistantMark/></div><span className="ps-art-label"><span/><Sparkles size={13}/>PLANCK ASSISTANT</span></div>
   </div>
  </div>
 </section>;
}