// om/contact.jsx — "Get in touch" button that reveals the registered legal
// address. Marked up with schema.org microdata so the address is crawlable
// (SEO) even though it sits inside a disclosure.
//
// NOTE: the address / tax id below are PLACEHOLDERS — swap for the real
// registered office of Das Awesome Co., Ltd. before going live.

function AddressBlock() {
  return (
    <div className="addr" itemScope itemType="https://schema.org/Organization">
      <span className="addr-kicker label"><span className="dot"></span> Get in touch</span>
      <div className="addr-name" itemProp="name">Das Awesome Co., Ltd.</div>
      <address className="addr-lines" itemProp="address" itemScope itemType="https://schema.org/PostalAddress">
        <span itemProp="streetAddress">38/26 Tipamas Village, Moo 1</span>
        <span><span itemProp="addressLocality">Nikhom Phatthana Subdistrict, Nikhom Phatthana District</span></span>
        <span><span itemProp="addressRegion">Rayong Province</span> <span itemProp="postalCode">21180</span>, <span itemProp="addressCountry">Thailand</span></span>
      </address>
      <div className="addr-meta">Tax ID 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">Follow Us on Instagram! <Icon name="arrow-up-right" size={13} /></a>
    </div>
  );
}

// align: "right" (default) | "left" | "center" — controls which edge the popover hangs from
function GetInTouch({ label = 'Get in touch', 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="Contact Das Awesome" aria-hidden={!open}>
        <AddressBlock />
      </div>
    </div>
  );
}

// OurBrand — sister-brand button (two-line label) that reveals a small card
// for Design by Da, with the logo, a one-line description, and an outbound link.
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">Our brand</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 and e-commerce website development service based in Thailand.</p>
          <a className="btn btn-ink dbd-link" href="https://designbyda.com/" target="_blank" rel="noopener">
            Visit designbyda.com <Icon name="arrow-up-right" className="ico" size={14} />
          </a>
        </div>
      </div>
    </div>
  );
}

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