// om/coming-th.jsx — Thai standalone teaser page.
// Hero only, no nav menu (just the wordmark + day/night toggle).
// Marquee, logo, and heading stay in English per brief.

function csClockMode() {const h = new Date().getHours();return h >= 6 && h < 18 ? 'light' : 'dark';}

function LangToggle() {
  return (
    <div className="langs">
      <a className="lang" href="/">EN</a>
      <span className="lang on">TH</span>
    </div>
  );
}

function ComingMarquee() {
  // Marquee not translated — stays English per brief
  const items = ['Coming soon', 'We make awesome things, on purpose!', "That\u2019s Awesome!", 'A clear signal in a noisy web'];
  const run = [...items, ...items, ...items];
  return (
    <div className="marquee cs-marquee" aria-hidden="true">
      <div className="marquee-track">
        {run.map((t, i) =>
        <span key={i}>{t}<span className="sep"><Icon name="sparkle" size={20} /></span></span>
        )}
      </div>
    </div>);

}

function ComingHero() {
  return (
    <header id="top" className="hero cs-hero">
      <div className="wrap">
        <div className="hero-flank reveal in">
          <div className="fl-right">งานดีไซน์จริง ๆ จากคนจริง ๆ จะเกิดขึ้นที่นี่ <br /> บริษัท ดาส์ ออซัม จำกัด<br />  เดอะนิวดิจิตอลเอเจนซี่ ที่ชอบทำอะไรเจ๋ง ๆ</div>
        </div>
        <div className="hero-stage">
          <div className="hero-object">
            <img className="hero-object-img" src="assets/das-awesome.webp" alt="" />
          </div>
          <HeroWord />
        </div>
        <p className="hero-sub">We will be make awesome things, on purpose, soon!</p>
        <div className="hero-cta">
          <GetInTouch label="ข้อมูลบริษัท" align="center" size="lg" />
          <OurBrand align="center" size="lg" />
        </div>
      </div>
    </header>);}function ComingApp() {
  const [mode, setMode] = React.useState(() => {
    const s = typeof localStorage !== 'undefined' && localStorage.getItem('da-mode');
    return s === 'dark' || s === 'light' ? s : csClockMode();
  });
  useReveal();

  React.useEffect(() => {
    const r = document.documentElement;
    r.setAttribute('data-mode', mode);
    r.setAttribute('data-motion', 'on');
  }, [mode]);

  const toggle = () => setMode((p) => {
    const n = p === 'dark' ? 'light' : 'dark';
    localStorage.setItem('da-mode', n);
    return n;
  });

  const grainRef = React.useRef(null);
  React.useEffect(() => {
    if (grainRef.current && window.DASky) grainRef.current.style.backgroundImage = `url(${window.DASky.grainURL(130)})`;
  }, []);

  return (
    <div className="cs-page">
      <div className="grain" ref={grainRef} aria-hidden="true"></div>
      <div className="cs-top">
        <BrandMark />
        <div className="cs-top-right">
          <ModeToggle mode={mode} onToggle={toggle} />
          <LangToggle />
        </div>
      </div>
      <ComingHero />
      <ComingMarquee />
    </div>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<ComingApp />);