// om/contact-th.jsx — Thai version of the "Get in touch" / address popover.
// Replaces contact.jsx for the TH page; exports same window globals.

function AddressBlock() {
  return (
    <div className="addr" itemScope itemType="https://schema.org/Organization">
      <span className="addr-kicker label"><span className="dot"></span> ติดต่อเรา</span>
      <div className="addr-name" itemProp="name">บริษัท ดาส์ ออซัม จำกัด</div>
      <address className="addr-lines" itemProp="address" itemScope itemType="https://schema.org/PostalAddress">
        <span itemProp="streetAddress">38/26 หมู่บ้าน ทิพมาศ หมู่ที่ 1</span>
        <span itemProp="addressLocality">ตำบลนิคมพัฒนา อำเภอนิคมพัฒนา</span>
        <span><span itemProp="addressRegion">จ.ระยอง</span> <span itemProp="postalCode">21180</span></span>
      </address>
      <div className="addr-meta">เลขประจำตัวผู้เสียภาษี 0215568013011</div>
      <a className="addr-mail" itemProp="email" href="mailto:hello@das-awesome.com">
        hello@das-awesome.com <Icon name="arrow-up-right" size={13} />
      </a>
      <a className="addr-mail" href="https://www.instagram.com/dasawesomesolutions/" target="_blank" rel="noopener noreferrer">
        ฟอลเราใน IG เลย <Icon name="arrow-up-right" size={13} />
      </a>
    </div>);

}

function GetInTouch({ label = 'ข้อมูลบริษัท', align = 'right', size = '' }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!open) return;
    const onDoc = (e) => {if (ref.current && !ref.current.contains(e.target)) setOpen(false);};
    const onEsc = (e) => {if (e.key === 'Escape') setOpen(false);};
    document.addEventListener('mousedown', onDoc);
    document.addEventListener('keydown', onEsc);
    return () => {document.removeEventListener('mousedown', onDoc);document.removeEventListener('keydown', onEsc);};
  }, [open]);

  const wrapCls = 'gt-wrap' + (align === 'left' ? ' gt-left' : align === 'center' ? ' gt-center' : '');
  const btnCls = 'btn btn-ink' + (size === 'lg' ? ' btn-lg' : '');
  return (
    <div className={wrapCls} ref={ref}>
      <button className={btnCls} aria-expanded={open} aria-haspopup="dialog" onClick={() => setOpen((o) => !o)}>
        {label} <Icon name={open ? 'minus' : 'arrow-up-right'} className="ico" size={15} />
      </button>
      <div className={'gt-pop' + (open ? ' open' : '')} role="dialog" aria-label="ติดต่อ Das Awesome" aria-hidden={!open}>
        <AddressBlock />
      </div>
    </div>);

}

function OurBrand({ align = 'right', size = '' }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!open) return;
    const onDoc = (e) => {if (ref.current && !ref.current.contains(e.target)) setOpen(false);};
    const onEsc = (e) => {if (e.key === 'Escape') setOpen(false);};
    document.addEventListener('mousedown', onDoc);
    document.addEventListener('keydown', onEsc);
    return () => {document.removeEventListener('mousedown', onDoc);document.removeEventListener('keydown', onEsc);};
  }, [open]);

  const wrapCls = 'gt-wrap' + (align === 'left' ? ' gt-left' : align === 'center' ? ' gt-center' : '');
  const btnCls = 'btn btn-line btn-stack' + (size === 'lg' ? ' btn-lg' : '');
  return (
    <div className={wrapCls} ref={ref}>
      <button className={btnCls} aria-expanded={open} aria-haspopup="dialog" onClick={() => setOpen((o) => !o)}>
        <span className="bs-top">แบรนด์ของเรา</span>
        <span className="bs-main">DESIGNBYDA</span>
      </button>
      <div className={'gt-pop brand-pop' + (open ? ' open' : '')} role="dialog" aria-label="Design by Da" aria-hidden={!open}>
        <div className="dbd">
          <img className="dbd-logo" src="assets/designbyda-logo.svg" alt="Design by Da" />
          <p className="dbd-desc">บริษัทรับทำเว็บไซต์ WordPress
และ E-Commerce ครบวงจร
สำหรับธุรกิจทุกขนาด</p>
          <a className="btn btn-ink dbd-link" href="https://designbyda.com/" target="_blank" rel="noopener">
            ไปที่ designbyda.com <Icon name="arrow-up-right" className="ico" size={14} />
          </a>
        </div>
      </div>
    </div>);}

Object.assign(window, { GetInTouch, AddressBlock, OurBrand });