// pages/home.jsx — Homepage. Re-implements existing 5 sections as Home component.
// Both desktop & mobile in one file (toggle by isMobile).

function HomeHero({ isMobile }) {
  const t = useT();
  if (isMobile) {
    return (
      <section style={{
        background: REF.paper, padding: '32px 24px 40px', position: 'relative', overflow: 'hidden',
      }}>
        <div aria-hidden style={{
          position: 'absolute', top: -80, right: -100, width: 360, height: 360,
          background: `radial-gradient(circle at 50% 50%, ${REF.accent}22 0%, ${REF.accent}00 65%)`,
          pointerEvents: 'none',
        }}/>
        <div aria-hidden style={{
          position: 'absolute', top: 0, right: -30, width: 280, height: 240,
          backgroundImage: `url(${IMG.qubiiEx})`,
          backgroundSize: 'cover', backgroundPosition: 'center',
          opacity: 0.22,
          maskImage: 'radial-gradient(ellipse at 70% 30%, #000 0%, transparent 70%)',
          WebkitMaskImage: 'radial-gradient(ellipse at 70% 30%, #000 0%, transparent 70%)',
          pointerEvents: 'none',
        }}/>

        <div className="mono" style={{
          fontSize: 10, fontWeight: 500, letterSpacing: '0.2em', textTransform: 'uppercase',
          display: 'inline-flex', alignItems: 'center', gap: 8, color: REF.ink3, position: 'relative',
        }}>
          <span aria-hidden style={{
            width: 6, height: 6, borderRadius: 999, background: REF.accent, display: 'inline-block',
          }}/>
          {t('home.hero.badge')}
        </div>
        <div style={{
          marginTop: 22, fontSize: 'clamp(64px, 22vw, 120px)', fontWeight: 200,
          lineHeight: 0.86, letterSpacing: '-0.06em', color: REF.ink,
          fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap', position: 'relative',
        }}>1,100,000<span style={{ color: REF.accent }}>.</span></div>
        <div style={{ marginTop: 14, fontSize: 14, color: REF.ink3, position: 'relative' }}>
          <span style={{ color: REF.ink2, fontWeight: 500 }}>{t('home.hero.units')}</span>
        </div>
        <h1 style={{
          margin: '32px 0 0', fontSize: 32, fontWeight: 500, letterSpacing: '-0.025em', lineHeight: 1.15,
          position: 'relative',
        }}>
          {t('home.hero.t1a')}<span style={{ color: REF.accent }}>{t('home.hero.t1accent')}</span>{t('home.hero.t1b')}<br/>
          <span style={{ color: REF.ink3, fontWeight: 300 }}>{t('home.hero.t2')}</span>
        </h1>
        <p style={{ margin: '16px 0 0', fontSize: 14, lineHeight: 1.65, color: REF.ink2, position: 'relative' }}>
          {t('home.hero.lead')}
        </p>
        <div style={{ display: 'flex', gap: 8, marginTop: 22, position: 'relative' }}>
          <Btn primary href="#/about" style={{ flex: 1, padding: '12px 18px', fontSize: 13, textAlign: 'center' }}>{t('home.hero.cta1')}</Btn>
          <Btn href="#/products" style={{ flex: 1, padding: '12px 18px', fontSize: 13, textAlign: 'center' }}>{t('home.hero.cta2')}</Btn>
        </div>
        <div style={{
          marginTop: 28, paddingTop: 18, borderTop: `1px solid ${REF.rule}`,
          display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18, position: 'relative',
        }}>
          <div>
            <div className="mono" style={{
              fontSize: 10, fontWeight: 500, letterSpacing: '0.18em',
              color: REF.accent, textTransform: 'uppercase',
            }}>{t('home.hero.col1.eyebrow')}</div>
            <p style={{ margin: '10px 0 0', fontSize: 13, lineHeight: 1.65, color: REF.ink2 }}>
              {t('home.hero.col1.body')}
            </p>
          </div>
          <div>
            <div className="mono" style={{
              fontSize: 10, fontWeight: 500, letterSpacing: '0.18em',
              color: REF.accent, textTransform: 'uppercase',
            }}>{t('home.hero.col2.eyebrow')}</div>
            <p style={{ margin: '10px 0 0', fontSize: 13, lineHeight: 1.65, color: REF.ink2 }}>
              {t('home.hero.col2.body')}
            </p>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section style={{
      position: 'relative', overflow: 'hidden',
      background: REF.paper, padding: '72px 80px 56px', minHeight: '92vh',
      display: 'flex', flexDirection: 'column',
    }}>
      <div aria-hidden style={{
        position: 'absolute', top: -120, right: -160, width: 720, height: 720,
        background: `radial-gradient(circle at 50% 50%, ${REF.accent}22 0%, ${REF.accent}00 60%)`,
        pointerEvents: 'none',
      }}/>
      <div aria-hidden style={{
        position: 'absolute', top: 0, right: 0, width: '46%', height: '70%',
        backgroundImage: `url(${IMG.qubiiEx})`,
        backgroundSize: 'cover', backgroundPosition: 'center',
        opacity: 0.18,
        maskImage: 'radial-gradient(ellipse at 70% 30%, #000 0%, transparent 70%)',
        WebkitMaskImage: 'radial-gradient(ellipse at 70% 30%, #000 0%, transparent 70%)',
        pointerEvents: 'none',
      }}/>

      <div style={{ position: 'relative' }}>
        <div className="mono" style={{
          fontSize: 12, fontWeight: 500, letterSpacing: '0.2em', textTransform: 'uppercase',
          display: 'inline-flex', alignItems: 'center', gap: 10,
          color: REF.ink3,
        }}>
          <span aria-hidden style={{
            width: 8, height: 8, borderRadius: 999, background: REF.accent,
            display: 'inline-block',
          }}/>
          {t('home.hero.badge')}
        </div>
      </div>
      <div style={{ marginTop: 28, position: 'relative' }}>
        <div style={{
          fontSize: 'clamp(96px, 17vw, 220px)', fontWeight: 200, lineHeight: 0.88, letterSpacing: '-0.07em',
          color: REF.ink, fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap',
        }}>1,100,000<span style={{ color: REF.accent, fontWeight: 300 }}>.</span></div>
        <div style={{
          marginTop: 18, fontSize: 22, fontWeight: 400, color: REF.ink3, letterSpacing: '-0.01em',
        }}>
          <span style={{ color: REF.ink2, fontWeight: 500 }}>{t('home.hero.units')}</span>
          <span style={{ margin: '0 12px' }}>·</span>
          {t('home.hero.unitsSuffix')}
        </div>
      </div>

      <div style={{
        marginTop: 56, paddingTop: 40, borderTop: `1px solid ${REF.rule}`,
        display: 'grid', gridTemplateColumns: '1.3fr 1fr 1fr', gap: 56, alignItems: 'start',
        position: 'relative',
      }}>
        <div>
          <h1 style={{ margin: 0, fontSize: 44, fontWeight: 500, letterSpacing: '-0.025em', lineHeight: 1.1 }}>
            {t('home.hero.t1a')}<span style={{ color: REF.accent }}>{t('home.hero.t1accent')}</span>{t('home.hero.t1b')}<br/>
            <span style={{ color: REF.ink3, fontWeight: 300 }}>{t('home.hero.t2')}</span>
          </h1>
          <p style={{ margin: '22px 0 0', fontSize: 16, lineHeight: 1.65, color: REF.ink2, maxWidth: 440 }}>
            {t('home.hero.leadDesktop')}
          </p>
          <div style={{ marginTop: 28, display: 'flex', gap: 10 }}>
            <Btn primary href="#/about">{t('home.hero.cta1')}</Btn>
            <Btn href="#/products">{t('home.hero.cta2')}</Btn>
          </div>
        </div>
        <div>
          <div className="mono" style={{
            fontSize: 11, fontWeight: 500, letterSpacing: '0.18em',
            color: REF.accent, textTransform: 'uppercase',
          }}>{t('home.hero.col1.eyebrow')}</div>
          <p style={{ margin: '14px 0 0', fontSize: 15, lineHeight: 1.65, color: REF.ink2 }}>
            {t('home.hero.col1.bodyDesktop')}
          </p>
        </div>
        <div>
          <div className="mono" style={{
            fontSize: 11, fontWeight: 500, letterSpacing: '0.18em',
            color: REF.accent, textTransform: 'uppercase',
          }}>{t('home.hero.col2.eyebrow')}</div>
          <p style={{ margin: '14px 0 0', fontSize: 15, lineHeight: 1.65, color: REF.ink2 }}>
            {t('home.hero.col2.bodyDesktop')}
          </p>
        </div>
      </div>

      <div style={{
        marginTop: 'auto', paddingTop: 32, display: 'flex', justifyContent: 'space-between',
        alignItems: 'center', fontSize: 12, color: REF.ink3, letterSpacing: '0.16em',
        borderTop: `1px solid ${REF.rule}`, position: 'relative',
      }} className="mono">
        <span>{t('home.hero.estLabel')}</span>
        <span style={{ display: 'flex', gap: 28, whiteSpace: 'nowrap' }}>
          <span>{t('cities.tokyo')}</span><span>{t('cities.bangkok')}</span><span>{t('cities.california')}</span><span>{t('cities.taipei')}</span>
        </span>
        <span>{t('home.hero.mfiLabel')}</span>
      </div>
    </section>
  );
}

function HomeProducts({ isMobile }) {
  const t = useT();
  const families = [
    { fam: '01 / Cube',     prod: t('home.products.qubii.name'),     sub: t('home.products.qubii.sub'),     img: IMG.qubiiEx,   items: ['Qubii Duo'] },
    { fam: '02 / Drive',    prod: t('home.products.piconizer.name'), sub: t('home.products.piconizer.sub'), img: IMG.piconizer, items: [] },
    { fam: '03 / Platform', prod: t('home.products.platform.name'),  sub: t('home.products.platform.sub'),  img: null,          items: [] },
  ];
  return (
    <Section alt mobile={isMobile}>
      <SectionHead
        mobile={isMobile}
        eyebrow="Product Index"
        title={<>{t('home.products.title1')}<br/>{t('home.products.title2')}</>}
        aside={!isMobile && <a href="#/products" style={{ color: REF.ink2, textDecoration: 'none', borderBottom: `1px solid ${REF.ink}`, paddingBottom: 2 }}>{t('home.products.viewAll')}</a>}
      />
      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
        gap: isMobile ? 16 : 24,
      }}>
        {families.map(f => (
          <a key={f.fam} href="#/products" style={{
            background: '#fff', borderRadius: 18, border: `1px solid ${REF.rule}`,
            overflow: 'hidden', display: 'flex', flexDirection: 'column',
            color: 'inherit', textDecoration: 'none',
          }}>
            <div style={{ height: isMobile ? 200 : 320, background: REF.paperAlt, position: 'relative', overflow: 'hidden' }}>
              {f.img ? (
                <img src={f.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              ) : (
                <div className="mono" style={{
                  width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 11, color: REF.ink3, letterSpacing: '0.14em',
                }}>[ {f.prod} ]</div>
              )}
              <div className="mono" style={{
                position: 'absolute', top: 14, left: 14, fontSize: 11, letterSpacing: '0.18em',
                color: '#fff', background: 'rgba(0,0,0,0.55)', padding: '5px 10px', borderRadius: 6,
              }}>{f.fam}</div>
            </div>
            <div style={{ padding: isMobile ? '20px 20px 22px' : '28px 28px 32px', flex: 1 }}>
              <div style={{ fontSize: isMobile ? 22 : 28, fontWeight: 600, letterSpacing: '-0.02em' }}>{f.prod}</div>
              <div style={{ fontSize: isMobile ? 13 : 15, color: REF.ink2, marginTop: 6 }}>{f.sub}</div>
              <div style={{
                marginTop: 16, paddingTop: 14, borderTop: `1px solid ${REF.rule}`,
                display: 'flex', flexWrap: 'wrap', gap: 6,
              }}>
                {f.items.map(i => (
                  <span key={i} style={{
                    fontSize: 12, padding: '4px 10px', borderRadius: 999,
                    background: REF.paperAlt, color: REF.ink2,
                  }}>{i}</span>
                ))}
              </div>
            </div>
          </a>
        ))}
      </div>
      {isMobile && (
        <div style={{ marginTop: 24, textAlign: 'center' }}>
          <Btn href="#/products">{t('home.products.viewAll')}</Btn>
        </div>
      )}
    </Section>
  );
}

function HomeArchitecture({ isMobile }) {
  const t = useT();
  const layers = [
    { id: '01', t: t('home.arch.l1.t'), spec: 'Since 2011', d: t('home.arch.l1.d') },
    { id: '02', t: t('home.arch.l2.t'), spec: '9th Gen',    d: t('home.arch.l2.d') },
    { id: '03', t: t('home.arch.l3.t'), spec: 'What\u2019s Next', d: t('home.arch.l3.d') },
  ];
  return (
    <Section dark mobile={isMobile} style={{ position: 'relative', overflow: 'hidden' }}>
      {!isMobile && (
        <div aria-hidden style={{
          position: 'absolute', inset: 0, opacity: 0.6,
          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="Why Maktar"
          title={<>{t('home.arch.title1')}<br/><span style={{ color: 'rgba(255,255,255,0.55)', fontWeight: 300 }}>{t('home.arch.title2')}</span></>}
          aside={!isMobile && (
            <p style={{ margin: 0, fontSize: 16, lineHeight: 1.65, color: 'rgba(255,255,255,0.7)', maxWidth: 360 }}>
              {t('home.arch.aside')}
            </p>
          )}
        />
        {isMobile && (
          <p style={{ margin: '0 0 24px', fontSize: 14, lineHeight: 1.65, color: 'rgba(255,255,255,0.7)' }}>
            {t('home.arch.aside')}
          </p>
        )}
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
          gap: isMobile ? 12 : 16,
        }}>
          {layers.map(l => (
            <div key={l.id} style={{
              background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.1)',
              borderRadius: 16, padding: isMobile ? '22px 22px 26px' : '32px 32px 36px',
              position: 'relative',
            }}>
              <div className="mono" style={{
                position: 'absolute', top: isMobile ? 20 : 28, right: isMobile ? 22 : 28,
                fontSize: 11, color: REF.accent, letterSpacing: '0.18em',
              }}>{l.id}</div>
              <div className="mono" style={{
                fontSize: 11, letterSpacing: '0.18em',
                color: 'rgba(255,255,255,0.5)', marginBottom: 14,
              }}>{l.spec}</div>
              <div style={{
                fontSize: isMobile ? 22 : 30, fontWeight: 500, letterSpacing: '-0.02em', marginBottom: 10,
              }}>{l.t}</div>
              <p style={{ margin: 0, fontSize: isMobile ? 13 : 15, lineHeight: 1.6, color: 'rgba(255,255,255,0.7)' }}>{l.d}</p>
            </div>
          ))}
        </div>
        <div style={{ marginTop: isMobile ? 24 : 40 }}>
          <Btn primary dark href="#/technology">{t('home.arch.cta')}</Btn>
        </div>
      </div>
    </Section>
  );
}

function HomeFootprint({ isMobile }) {
  const t = useT();
  const regions = [
    { city: t('cities.taipei'),     role: 'HQ',     detail: t('home.foot.taipei') },
    { city: t('cities.tokyo'),      role: 'Office', detail: t('home.foot.tokyo') },
    { city: t('cities.bangkok'),    role: 'Office', detail: t('home.foot.bangkok') },
    { city: t('cities.california'), role: 'Office', detail: t('home.foot.california') },
  ];
  return (
    <Section color="#fff" mobile={isMobile}>
      <SectionHead
        mobile={isMobile}
        eyebrow="Global Footprint"
        title={<>{t('home.foot.title1')}<br/>{t('home.foot.title2')}</>}
        aside={!isMobile && (
          <p style={{ margin: 0, fontSize: 15, color: REF.ink2, lineHeight: 1.65, maxWidth: 320 }}>
            {t('home.foot.aside')}
          </p>
        )}
      />
      <div style={{
        position: 'relative', borderRadius: isMobile ? 14 : 18, overflow: 'hidden',
        background: REF.paperAlt, border: `1px solid ${REF.rule}`,
        height: isMobile ? 'auto' : 480,
      }}>
        {!isMobile && (
          <img src={IMG.worldMap} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', opacity: 0.5 }} />
        )}
        <div style={{
          position: isMobile ? 'static' : 'absolute', inset: 0, padding: isMobile ? 14 : 48,
          display: 'grid',
          gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)',
          alignItems: 'flex-end', gap: isMobile ? 10 : 24,
        }}>
          {regions.map(r => (
            <div key={r.city} style={{
              background: 'rgba(255,255,255,0.94)', backdropFilter: 'blur(20px)',
              padding: isMobile ? '14px 16px' : '20px 22px',
              borderRadius: 12, border: `1px solid ${REF.rule}`,
            }}>
              <div className="mono" style={{ fontSize: 10, color: REF.ink3, letterSpacing: '0.18em' }}>{r.role}</div>
              <div style={{ fontSize: isMobile ? 20 : 26, fontWeight: 600, marginTop: 6, letterSpacing: '-0.02em' }}>{r.city}</div>
              <div style={{ fontSize: isMobile ? 11 : 13, color: REF.ink2, marginTop: 4 }}>{r.detail}</div>
            </div>
          ))}
        </div>
      </div>
    </Section>
  );
}

function HomeEnterpriseCTA({ isMobile }) {
  const t = useT();
  return (
    <Section mobile={isMobile}>
      <div style={{
        display: isMobile ? 'block' : 'flex',
        justifyContent: 'space-between', alignItems: 'flex-end', gap: 56,
      }}>
        <div>
          <Eyebrow>Contact</Eyebrow>
          <h2 style={{
            margin: '12px 0 0', fontSize: isMobile ? 28 : 48,
            fontWeight: 600, letterSpacing: '-0.03em', lineHeight: 1.05,
          }}>{t('home.cta.title')}</h2>
          <p style={{
            margin: '16px 0 0', fontSize: isMobile ? 14 : 16, color: REF.ink2,
            maxWidth: 600, lineHeight: 1.65,
          }}>
            {t('home.cta.body')}
          </p>
        </div>
        <div style={{
          marginTop: isMobile ? 18 : 0,
          display: 'flex', flexDirection: 'column', gap: 10, alignItems: isMobile ? 'flex-start' : 'flex-end',
        }}>
          <Btn primary href="mailto:sales@maktar.com">{t('cta.contact_sales')}</Btn>
          <a href="#/contact#stores" className="mono" style={{
            fontSize: 12, color: REF.ink3, letterSpacing: '0.04em', textDecoration: 'none',
          }}>{t('home.cta.stores')}</a>
        </div>
      </div>
    </Section>
  );
}

function HomePage() {
  const isMobile = useIsMobile();
  return (
    <>
      <HomeHero isMobile={isMobile} />
      <HomeProducts isMobile={isMobile} />
      <HomeArchitecture isMobile={isMobile} />
      <HomeFootprint isMobile={isMobile} />
      <HomeEnterpriseCTA isMobile={isMobile} />
    </>
  );
}

Object.assign(window, { HomePage });