// pages/contact.jsx — 聯絡我們（i18n 化）

function ContactHero({ isMobile }) {
  const t = useT();
  return (
    <Section mobile={isMobile} style={{ paddingTop: isMobile ? 56 : 120, paddingBottom: isMobile ? 32 : 64 }}>
      <Eyebrow>{t('ct.hero.eyebrow')}</Eyebrow>
      <h1 style={{
        margin: '16px 0 0', fontSize: isMobile ? 40 : 84,
        fontWeight: 500, letterSpacing: '-0.035em', lineHeight: 1.05, maxWidth: 1100,
      }}>
        {t('ct.hero.title1')}<br/>
        <span style={{ color: REF.ink3, fontWeight: 300 }}>{t('ct.hero.title2')}</span>
      </h1>
      <p style={{
        margin: '32px 0 0', fontSize: isMobile ? 15 : 18,
        color: REF.ink2, lineHeight: 1.65, maxWidth: 720,
      }}>{t('ct.hero.body')}</p>
    </Section>
  );
}

function ContactGeneral({ isMobile }) {
  const t = useT();
  return (
    <Section alt mobile={isMobile} style={{ paddingTop: isMobile ? 32 : 64, paddingBottom: isMobile ? 32 : 64 }}>
      <Eyebrow>{t('ct.gen.eyebrow')}</Eyebrow>
      <div style={{
        marginTop: 18,
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
        gap: isMobile ? 14 : 24,
      }}>
        <a href="mailto:sales@maktar.com" style={{
          background: '#fff', border: `1px solid ${REF.rule}`, borderRadius: 14,
          padding: isMobile ? '20px 22px' : '28px 32px',
          color: 'inherit', textDecoration: 'none', display: 'block',
        }}>
          <div className="mono" style={{ fontSize: 11, color: REF.ink3, letterSpacing: '0.18em' }}>EMAIL</div>
          <div style={{ marginTop: 8, fontSize: isMobile ? 22 : 28, fontWeight: 600, letterSpacing: '-0.02em' }}>
            sales@maktar.com
          </div>
        </a>
        <a href="tel:+886266040020" style={{
          background: '#fff', border: `1px solid ${REF.rule}`, borderRadius: 14,
          padding: isMobile ? '20px 22px' : '28px 32px',
          color: 'inherit', textDecoration: 'none', display: 'block',
        }}>
          <div className="mono" style={{ fontSize: 11, color: REF.ink3, letterSpacing: '0.18em' }}>PHONE</div>
          <div style={{ marginTop: 8, fontSize: isMobile ? 22 : 28, fontWeight: 600, letterSpacing: '-0.02em' }}>
            02-6604-0020
          </div>
        </a>
      </div>
    </Section>
  );
}

function ContactOffices({ isMobile }) {
  const t = useT();
  const offices = [
    { city: t('ct.of.tw.city'), tag: t('ct.of.tw.tag'), name: t('ct.of.tw.name'), addr: [t('ct.of.tw.a1')] },
    { city: t('ct.of.jp.city'), tag: t('ct.of.jp.tag'), name: t('ct.of.jp.name'), addr: [t('ct.of.jp.a1'), t('ct.of.jp.a2'), t('ct.of.jp.a3')] },
    { city: t('ct.of.th.city'), tag: t('ct.of.th.tag'), name: t('ct.of.th.name'), addr: [t('ct.of.th.a1')] },
    { city: t('ct.of.us.city'), tag: t('ct.of.us.tag'), name: t('ct.of.us.name'), addr: [t('ct.of.us.a1')] },
  ];
  return (
    <Section color="#fff" mobile={isMobile}>
      <SectionHead mobile={isMobile} eyebrow={t('ct.of.eyebrow')} title={<>{t('ct.of.title')}</>} />
      <div style={{
        display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)',
        gap: isMobile ? 12 : 16,
      }}>
        {offices.map(o => (
          <div key={o.city} style={{
            border: `1px solid ${REF.rule}`, borderRadius: 16,
            padding: isMobile ? '22px 22px 26px' : '32px 32px 36px',
            background: REF.paper,
          }}>
            <div style={{
              display: 'flex', alignItems: 'baseline', gap: 14, justifyContent: 'space-between',
            }}>
              <div style={{ fontSize: isMobile ? 26 : 32, fontWeight: 600, letterSpacing: '-0.025em' }}>{o.city}</div>
              <div className="mono" style={{ fontSize: 11, color: REF.ink3, letterSpacing: '0.18em' }}>{o.tag}</div>
            </div>
            <div style={{
              marginTop: 10, fontSize: isMobile ? 14 : 15, fontWeight: 500, letterSpacing: '-0.01em', color: REF.ink,
            }}>{o.name}</div>
            {o.addr.length > 0 && (
              <div style={{
                marginTop: 14, fontSize: isMobile ? 13 : 14, color: REF.ink2, lineHeight: 1.65,
              }}>
                {o.addr.map((line, i) => <div key={i}>{line}</div>)}
              </div>
            )}
          </div>
        ))}
      </div>
    </Section>
  );
}

function ContactShops({ isMobile }) {
  const t = useT();
  const shops = [
    ['tw', t('stores.tw.name'), t('stores.tw.url'), t('stores.tw.note'), 'https://shop.maktar.com'],
    ['jp', t('stores.jp.name'), t('stores.jp.url'), t('stores.jp.note'), 'https://jp.maktar.com'],
    ['us', t('stores.us.name'), t('stores.us.url'), t('stores.us.note'), 'https://us.maktar.com'],
    ['th', t('stores.th.name'), t('stores.th.url'), t('stores.th.note'), 'https://th.maktar.com'],
  ];
  return (
    <Section color={REF.ink} mobile={isMobile} style={{ position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden style={{
        position: 'absolute', inset: 0, opacity: 0.4,
        backgroundImage: `linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
                          linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)`,
        backgroundSize: '64px 64px', pointerEvents: 'none',
      }}/>
      <div style={{ position: 'relative' }}>
        <SectionHead
          dark mobile={isMobile}
          eyebrow={t('ct.shops.eyebrow')}
          title={<>{t('stores.title')}。</>}
          aside={!isMobile && (
            <p style={{ margin: 0, fontSize: 15, color: 'rgba(255,255,255,0.7)', lineHeight: 1.65, maxWidth: 360 }}>
              {t('stores.subtitle')}
            </p>
          )}
        />
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)',
          gap: isMobile ? 12 : 14,
        }}>
          {shops.map(([code, name, host, note, url]) => (
            <a key={code} href={url} target="_blank" rel="noopener" style={{
              position: 'relative',
              background: 'rgba(255,255,255,0.03)',
              border: '1px solid rgba(255,255,255,0.1)',
              borderRadius: isMobile ? 14 : 18,
              padding: isMobile ? '24px 24px 26px' : '36px 36px 40px',
              color: '#fff', textDecoration: 'none',
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              minHeight: isMobile ? 160 : 220,
              transition: 'background .18s, border-color .18s, transform .18s',
              overflow: 'hidden',
            }}
            onMouseEnter={e => {
              e.currentTarget.style.background = 'rgba(194,84,59,0.12)';
              e.currentTarget.style.borderColor = 'rgba(194,84,59,0.5)';
              e.currentTarget.style.transform = 'translateY(-2px)';
            }}
            onMouseLeave={e => {
              e.currentTarget.style.background = 'rgba(255,255,255,0.03)';
              e.currentTarget.style.borderColor = 'rgba(255,255,255,0.1)';
              e.currentTarget.style.transform = 'translateY(0)';
            }}>
              <div>
                <div className="mono" style={{
                  fontSize: 11, color: REF.accent, letterSpacing: '0.18em', textTransform: 'uppercase',
                }}>{code === 'tw' ? t('ct.shops.hq') : t('ct.shops.region')}</div>
                <div style={{
                  marginTop: 12,
                  fontSize: isMobile ? 28 : 40,
                  fontWeight: 500, letterSpacing: '-0.025em', lineHeight: 1.05,
                }}>{name}</div>
                <div style={{
                  marginTop: 8, fontSize: isMobile ? 13 : 14,
                  color: 'rgba(255,255,255,0.6)', lineHeight: 1.5,
                }}>{note}</div>
              </div>
              <div style={{
                marginTop: isMobile ? 20 : 28,
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              }}>
                <div className="mono" style={{
                  fontSize: isMobile ? 12 : 13,
                  color: 'rgba(255,255,255,0.7)', letterSpacing: '0.04em',
                }}>{host}</div>
                <div style={{
                  fontSize: isMobile ? 18 : 22,
                  color: REF.accent, fontWeight: 500,
                }}>↗</div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </Section>
  );
}

function ContactCompanyInfo({ isMobile }) {
  const t = useT();
  const rows = [
    [t('ct.co.r1.k'), t('ct.co.r1.v')],
    [t('ct.co.r2.k'), t('ct.co.r2.v')],
    [t('ct.co.r3.k'), t('ct.co.r3.v')],
    [t('ct.co.r4.k'), t('ct.co.r4.v')],
    [t('ct.co.r5.k'), t('ct.co.r5.v')],
    [t('ct.co.r6.k'), t('ct.co.r6.v')],
    [t('ct.co.r7.k'), t('ct.co.r7.v')],
  ];
  return (
    <Section color="#fff" mobile={isMobile}>
      <SectionHead mobile={isMobile} eyebrow={t('ct.co.eyebrow')} title={<>{t('ct.co.title')}</>} />
      <div style={{
        background: REF.paper, borderRadius: isMobile ? 14 : 18,
        border: `1px solid ${REF.rule}`, overflow: 'hidden',
      }}>
        {rows.map((r, i) => (
          <div key={r[0]} style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '110px 1fr' : '220px 1fr',
            gap: isMobile ? 16 : 32,
            padding: isMobile ? '14px 18px' : '20px 28px',
            borderTop: i === 0 ? 'none' : `1px solid ${REF.rule}`,
            fontSize: isMobile ? 13 : 15,
          }}>
            <span style={{ color: REF.ink3 }} className="mono">{r[0]}</span>
            <span style={{ color: REF.ink, fontWeight: 500, letterSpacing: '-0.01em' }}>{r[1]}</span>
          </div>
        ))}
      </div>
    </Section>
  );
}

function ContactPage() {
  const isMobile = useIsMobile();
  return (
    <>
      <ContactHero isMobile={isMobile} />
      <div id="stores" />
      <ContactShops isMobile={isMobile} />
      <ContactGeneral isMobile={isMobile} />
      <ContactOffices isMobile={isMobile} />
      <ContactCompanyInfo isMobile={isMobile} />
    </>
  );
}
Object.assign(window, { ContactPage });