/* global React */

// ------------------------------------------------------------------
// i18n — all visible copy in one place
// ------------------------------------------------------------------
const COPY = {
  zh: {
    // Nav
    navBrand: '科迪芮雅',
    sceneLabels: ['序曲','定位','双联','四维','精神','实践','落款'],
    // Scene 01
    s01: {
      eyebrow: 'KDRHEA · 科迪芮雅医疗美容',
      line1: '是医疗，更是美学的深耕。',
      line2: '是定制，更是安全的承诺。',
      en1: 'Medicine held to the standard of beauty.',
      en2: 'Beauty held to the standard of care.',
      est: 'Est. 二〇二四',
      locale: 'JIANGSU · XUZHOU',
    },
    // Scene 02
    s02: {
      line1: '在医美行业，',
      line2a: '用', line2b: '严谨的科学态度', line2c: '深耕美学。',
      line3a: '让她，成为', line3b: '更好的自己', line3c: '。',
      caption: 'The science we trust, in service of the beauty she is.',
    },
    // Scene 03
    s03: {
      lHead1: '黄金比例', lHead1Soft: '是工具，', lHead2: '不是答案。',
      lCap: 'Proportion is a tool, not the answer.',
      rHead1: '美', rHead1Soft: '不是被创造，', rHead2: '是被呈现。',
      rCap: 'Beauty is not made. It is disclosed.',
    },
    // Scene 04
    s04: {
      headCh: '四个维度',
      headEn: 'Four dimensions, held together.',
      items: [
        { num:'I',   prefix:'是', word:'医疗',     body:'以医疗之实，承美学之名。',         en:'Aesthetic in intent. Clinical in practice.' },
        { num:'II',  prefix:'是', word:'美学深耕', body:'每一个决策，都带着审美的判断。',   en:'Every decision carries a judgment of taste.' },
        { num:'III', prefix:'是', word:'定制',     body:'一人一方案，随时动态调整。',       en:'One plan for one person. Revised as she changes.' },
        { num:'IV',  prefix:'是', word:'安全',     body:'从耗材到操作，每一环都可被追问。', en:'Every instrument, every hand. Traceable.' },
      ],
    },
    // Scene 05
    s05: { eyebrow:'— ethos —', title:'把一切做完美', body:'慢但对，胜过快但将就。', en:'Slow and right, over fast and passable.' },
    // Scene 06
    s06: {
      eyebrow: '我们做什么',
      caption: 'Four words. The whole of it.',
      glyphs: [
        { ch:'形', body:'轮廓与线条' },
        { ch:'光', body:'色泽与光感' },
        { ch:'肤', body:'质感与弹性' },
        { ch:'复', body:'修护与恢复' },
      ],
      runner: '形　·　光　·　肤　·　复',
    },
    // Scene 07
    s07: {
      addrH:'地址 · Address', addr1:'徐州市云龙区', addr2:'云东路 2 号 · 二层 1-202', addrEn:'2 Yundong Rd, 2F · Yunlong, Xuzhou',
      phoneH:'电话 · Phone', phone:'0516 3980 0001', phoneEn:'Consultation by appointment.',
      hoursH:'营业 · Hours', hours:'每日 10:00 — 19:00', hoursEn:'Open daily.',
      baseline1:'© 2026 KDRHEA CLINIC',
      baseline2:'医疗美容 · 科迪芮雅',
      baseline3:'All treatments administered by licensed medical professionals.',
    },
  },

  en: {
    navBrand: 'KDRHEA',
    sceneLabels: ['OVERTURE','POSITION','DIPTYCH','THE FOUR','ETHOS','PRACTICE','COLOPHON'],
    s01: {
      eyebrow: 'KDRHEA · Medical Aesthetics',
      line1: 'Medical in practice. Aesthetic in intent.',
      line2: 'Bespoke in plan. Safe in every hand.',
      en1: '科迪芮雅 · 医疗美容',
      en2: 'Medicine held to the standard of beauty.',
      est: 'Est. 2024',
      locale: 'JIANGSU · XUZHOU',
    },
    s02: {
      line1: 'In medical aesthetics,',
      line2a: 'we tend to beauty ', line2b: 'with the rigour of science', line2c: '.',
      line3a: 'So that she becomes ', line3b: 'more herself', line3c: '.',
      caption: '科学为手段，美为她本来的样子。',
    },
    s03: {
      lHead1:'The golden ratio ', lHead1Soft:'is a tool,', lHead2:'not the answer.',
      lCap:'黄金比例是工具，不是答案。',
      rHead1:'Beauty ', rHead1Soft:'is not created —', rHead2:'it is disclosed.',
      rCap:'美不是被创造，是被呈现。',
    },
    s04: {
      headCh:'Four Dimensions',
      headEn:'Held together as one.',
      items: [
        { num:'I',   prefix:'It is',  word:'medicine',  body:'Aesthetic in intent. Clinical in practice.',     en:'以医疗之实，承美学之名。' },
        { num:'II',  prefix:'It is',  word:'aesthetic', body:'Every decision carries a judgment of taste.',     en:'每一个决策，都带着审美的判断。' },
        { num:'III', prefix:'It is',  word:'bespoke',   body:'One plan for one person. Revised as she changes.',en:'一人一方案，随时动态调整。' },
        { num:'IV',  prefix:'It is',  word:'safe',      body:'Every instrument, every hand — traceable.',       en:'从耗材到操作，每一环都可被追问。' },
      ],
    },
    s05: { eyebrow:'— ethos —', title:'Do it all, perfectly.', body:'Slow and right, over fast and passable.', en:'慢但对，胜过快但将就。' },
    s06: {
      eyebrow: 'What we tend to',
      caption: '我们做什么。',
      glyphs: [
        { ch:'形', body:'Form' },
        { ch:'光', body:'Light' },
        { ch:'肤', body:'Skin' },
        { ch:'复', body:'Repair' },
      ],
      runner: 'Form　·　Light　·　Skin　·　Repair',
    },
    s07: {
      addrH:'Address · 地址', addr1:'Yunlong District, Xuzhou', addr2:'2 Yundong Rd, 2F · 1-202', addrEn:'徐州市云龙区 · 云东路 2 号',
      phoneH:'Phone · 电话', phone:'+86 516 3980 0001', phoneEn:'预约制问诊 · By appointment.',
      hoursH:'Hours · 营业', hours:'Daily · 10:00 — 19:00', hoursEn:'每日开诊。',
      baseline1:'© 2026 KDRHEA CLINIC',
      baseline2:'Medical Aesthetics · 科迪芮雅',
      baseline3:'All treatments administered by licensed medical professionals.',
    },
  },

  ko: {
    navBrand: '코디레아',
    sceneLabels: ['서곡','정의','대련','사유','정신','실천','낙관'],
    s01: {
      eyebrow: 'KDRHEA · 코디레아 메디컬 에스테틱',
      line1: '의료이면서, 미학의 깊이.',
      line2: '맞춤이면서, 안전의 약속.',
      en1: 'Medicine held to the standard of beauty.',
      en2: 'Beauty held to the standard of care.',
      est: 'Est. 2024',
      locale: 'JIANGSU · XUZHOU',
    },
    s02: {
      line1: '의료 미용의 영역에서,',
      line2a: '', line2b: '엄정한 과학의 태도', line2c: '로 미학을 탐구합니다.',
      line3a: '그녀가 ', line3b: '더 나은 자신', line3c: '이 되도록.',
      caption: '과학을 도구로, 그녀가 본래 지닌 아름다움을 위하여.',
    },
    s03: {
      lHead1:'황금비는 ', lHead1Soft:'도구이지,', lHead2:'답은 아닙니다.',
      lCap:'The golden ratio is a tool, not the answer.',
      rHead1:'아름다움은 ', rHead1Soft:'만들어지는 것이 아니라,', rHead2:'드러나는 것.',
      rCap:'Beauty is not made. It is disclosed.',
    },
    s04: {
      headCh:'네 가지 차원',
      headEn:'함께 지켜야 할 네 축.',
      items: [
        { num:'I',   prefix:'이것은', word:'의료',   body:'의료의 실로써, 미학의 이름을 지킵니다.', en:'Aesthetic in intent. Clinical in practice.' },
        { num:'II',  prefix:'이것은', word:'미학',   body:'모든 결정에는 미적 판단이 따릅니다.',     en:'Every decision carries a judgment of taste.' },
        { num:'III', prefix:'이것은', word:'맞춤',   body:'한 사람에 한 방안, 상시 조정합니다.',     en:'One plan for one person. Revised as she changes.' },
        { num:'IV',  prefix:'이것은', word:'안전',   body:'재료부터 시술까지, 모든 과정이 추적 가능합니다.', en:'Every instrument, every hand — traceable.' },
      ],
    },
    s05: { eyebrow:'— ethos —', title:'모든 것을 완벽하게', body:'느리지만 옳게, 빠르지만 타협하지 않게.', en:'Slow and right, over fast and passable.' },
    s06: {
      eyebrow: '우리가 하는 일',
      caption: '네 글자로, 모든 것.',
      glyphs: [
        { ch:'形', body:'윤곽' },
        { ch:'光', body:'톤' },
        { ch:'肤', body:'피부' },
        { ch:'复', body:'회복' },
      ],
      runner: '形　·　光　·　肤　·　复',
    },
    s07: {
      addrH:'주소 · Address', addr1:'장쑤성 쉬저우시 윈룽구', addr2:'윈둥로 2호 · 2층 1-202', addrEn:'2 Yundong Rd, 2F · Xuzhou',
      phoneH:'전화 · Phone', phone:'+86 516 3980 0001', phoneEn:'예약제 진료.',
      hoursH:'영업 · Hours', hours:'매일 10:00 — 19:00', hoursEn:'연중무휴.',
      baseline1:'© 2026 KDRHEA CLINIC',
      baseline2:'메디컬 에스테틱 · 코디레아',
      baseline3:'모든 시술은 면허를 가진 의료 전문가가 시행합니다.',
    },
  },

  ja: {
    navBrand: 'コーディリア',
    sceneLabels: ['序曲','位置','対聯','四相','精神','実践','落款'],
    s01: {
      eyebrow: 'KDRHEA · コーディリア 医療美容',
      line1: '医療であり、美学の深耕。',
      line2: 'オーダーメイドであり、安全の約束。',
      en1: 'Medicine held to the standard of beauty.',
      en2: 'Beauty held to the standard of care.',
      est: 'Est. 二〇二四',
      locale: 'JIANGSU · XUZHOU',
    },
    s02: {
      line1: '医療美容の領域において、',
      line2a: '', line2b: '厳正な科学の態度', line2c: 'で美学を深めます。',
      line3a: '彼女が、', line3b: 'より良い自分', line3c: 'へ。',
      caption: '科学を手立てに、彼女の本来の美しさへ。',
    },
    s03: {
      lHead1:'黄金比は', lHead1Soft:'道具であり、', lHead2:'答えではない。',
      lCap:'The golden ratio is a tool, not the answer.',
      rHead1:'美は', rHead1Soft:'創られるものではなく、', rHead2:'現れるもの。',
      rCap:'Beauty is not made. It is disclosed.',
    },
    s04: {
      headCh:'四つの軸',
      headEn:'ひとつに結ぶ四つの視点。',
      items: [
        { num:'I',   prefix:'これは', word:'医療',         body:'医療の実をもって、美学の名を負う。',           en:'Aesthetic in intent. Clinical in practice.' },
        { num:'II',  prefix:'これは', word:'美学',         body:'すべての判断に、美の目を添える。',               en:'Every decision carries a judgment of taste.' },
        { num:'III', prefix:'これは', word:'オーダー',     body:'一人に一案、常に調整を。',                       en:'One plan for one person. Revised as she changes.' },
        { num:'IV',  prefix:'これは', word:'安全',         body:'器材から手技まで、すべて辿れるように。',         en:'Every instrument, every hand — traceable.' },
      ],
    },
    s05: { eyebrow:'— ethos —', title:'すべてを完璧に', body:'遅くとも正しく、速くとも妥協せず。', en:'Slow and right, over fast and passable.' },
    s06: {
      eyebrow: '私たちが手がけること',
      caption: '四文字に、すべてを。',
      glyphs: [
        { ch:'形', body:'輪郭' },
        { ch:'光', body:'艶' },
        { ch:'肤', body:'肌' },
        { ch:'复', body:'回復' },
      ],
      runner: '形　·　光　·　肤　·　复',
    },
    s07: {
      addrH:'住所 · Address', addr1:'江蘇省 徐州市 雲龍区', addr2:'雲東路 2 号 · 2 階 1-202', addrEn:'2 Yundong Rd, 2F · Xuzhou',
      phoneH:'電話 · Phone', phone:'+86 516 3980 0001', phoneEn:'完全予約制。',
      hoursH:'営業 · Hours', hours:'毎日 10:00 — 19:00', hoursEn:'年中無休。',
      baseline1:'© 2026 KDRHEA CLINIC',
      baseline2:'医療美容 · コーディリア',
      baseline3:'すべての施術は有資格の医療従事者が行います。',
    },
  },
};

// ------------------------------------------------------------------
// Reveal hook
// ------------------------------------------------------------------
const useReveal = (threshold = 0.2) => {
  const ref = React.useRef(null);
  const [inView, setInView] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) { setInView(true); io.unobserve(e.target); }
        });
      },
      { threshold, rootMargin: '-5% 0px -5% 0px' }
    );
    io.observe(ref.current);
    return () => io.disconnect();
  }, [threshold]);
  return [ref, inView];
};

const Line = ({ children }) => <span className="line"><span>{children}</span></span>;

const SplitChars = ({ text, className = '', start = 0, step = 55 }) => {
  const chars = Array.from(String(text));
  return (
    <span className={`split ${className}`}>
      {chars.map((c, i) => (
        <span key={i} className="char" style={{ transitionDelay: `${start + i * step}ms` }}>
          {c === ' ' ? '\u00A0' : c}
        </span>
      ))}
    </span>
  );
};

const Screen = ({ id, index, label, labelEn, className = '', children, onEnter }) => {
  const [ref, inView] = useReveal(0.25);
  React.useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(
      (entries) => { entries.forEach(e => { if (e.intersectionRatio > 0.5) onEnter && onEnter(index); }); },
      { threshold: [0.5, 0.75] }
    );
    io.observe(ref.current);
    return () => io.disconnect();
  }, [index, onEnter]);

  const pad = String(index + 1).padStart(2, '0');
  return (
    <section
      id={id}
      ref={ref}
      data-screen-label={`${pad} ${labelEn}`}
      className={`screen reveal ${inView ? 'in' : ''} ${className}`}
    >
      <div className="screen__label">
        <span className="tick" />
        <span>{label}</span>
      </div>
      {children}
    </section>
  );
};

// ------------------------------------------------------------------
// Scenes (consume lang prop)
// ------------------------------------------------------------------
const Scene01 = ({ lang, ...props }) => {
  const t = COPY[lang].s01;
  return (
    <Screen {...props} id="s01" label={COPY[lang].sceneLabels[0]} labelEn="OVERTURE">
      <div className="s01__wrap s01__wrap--split">
        <div className="s01__copy">
          <div className="s01__eyebrow soft">{t.eyebrow}</div>
          <h1 className="s01__title" key={'s01-' + lang}>
            <div className="s01__line"><SplitChars text={t.line1} start={200} step={70} /></div>
            <div className="s01__line"><SplitChars text={t.line2} start={1200} step={70} /></div>
          </h1>
          <div className="s01__foot">
            <div className="s01__en soft soft--delay-5">
              {t.en1}<br/>{t.en2}
            </div>
          </div>
        </div>
        <div className="s01__visual">
          {window.Globe ? <window.Globe /> : null}
        </div>
        <div className="soft soft--delay-5 s01__est">
          {t.est}<br/><span className="s01__est-locale">{t.locale}</span>
        </div>
      </div>
    </Screen>
  );
};

const Scene02 = ({ lang, ...props }) => {
  const t = COPY[lang].s02;
  return (
    <Screen {...props} id="s02" label={COPY[lang].sceneLabels[1]} labelEn="POSITION">
      <div className="s02__wrap">
        <p className="s02__body">
          <span className="wipe" style={{ transitionDelay: '100ms' }}>{t.line1}</span>
          <span className="wipe" style={{ transitionDelay: '450ms' }}>
            {t.line2a}<span className="accent">{t.line2b}</span>{t.line2c}
          </span>
          <span className="wipe" style={{ transitionDelay: '900ms' }}>
            {t.line3a}<span className="accent">{t.line3b}</span>{t.line3c}
          </span>
        </p>
        <div className="soft soft--delay-4 s02__footer">
          <div className="draw-hline" style={{ width: 120 }} />
          <span className="s02__caption">{t.caption}</span>
        </div>
      </div>
    </Screen>
  );
};

const Scene03 = ({ lang, ...props }) => {
  const t = COPY[lang].s03;
  return (
    <Screen {...props} id="s03" label={COPY[lang].sceneLabels[2]} labelEn="DIPTYCH">
      <div className="s03__wrap">
        <div className="s03__col s03__col--slideL">
          <div className="s03__rule" />
          <h2 className="s03__quote">
            <Line>{t.lHead1}<span className="soft-accent">{t.lHead1Soft}</span></Line>
            <Line>{t.lHead2}</Line>
          </h2>
          <p className="s03__caption soft soft--delay-3">{t.lCap}</p>
        </div>
        <div className="s03__divider draw-vline" />
        <div className="s03__col s03__col--right s03__col--slideR">
          <div className="s03__rule" />
          <h2 className="s03__quote">
            <Line>{t.rHead1}<span className="soft-accent">{t.rHead1Soft}</span></Line>
            <Line>{t.rHead2}</Line>
          </h2>
          <p className="s03__caption soft soft--delay-3">{t.rCap}</p>
        </div>
      </div>
    </Screen>
  );
};

const Scene04 = ({ lang, ...props }) => {
  const t = COPY[lang].s04;
  return (
    <Screen {...props} id="s04" label={COPY[lang].sceneLabels[3]} labelEn="THE FOUR" className="s04">
      <div className="s04__wrap">
        <div className="soft s04__head-row">
          <h2 className="s04__head-ch">{t.headCh}</h2>
          <span className="s04__head-en">{t.headEn}</span>
        </div>
        <div className="s04__grid" key={'s04-' + lang}>
          {t.items.map((f, i) => (
            <div key={i} className="s04__item" style={{ '--i': i }}>
              <div className="s04__rule draw-hline" style={{ transitionDelay: `${200 + i * 220}ms` }} />
              <div className="s04__num soft" style={{ transitionDelay: `${500 + i * 220}ms` }}>— {f.num}</div>
              <div className="s04__head">
                <span className="s04__is soft" style={{ transitionDelay: `${600 + i * 220}ms` }}>{f.prefix}</span>
                <span className="s04__what">
                  <SplitChars text={f.word} start={700 + i * 220} step={80} />
                </span>
              </div>
              <p className="s04__body soft" style={{ transitionDelay: `${900 + i * 220}ms` }}>{f.body}</p>
              <p className="s04__en soft" style={{ transitionDelay: `${1050 + i * 220}ms` }}>{f.en}</p>
            </div>
          ))}
        </div>
      </div>
    </Screen>
  );
};

const Scene05 = ({ lang, ...props }) => {
  const t = COPY[lang].s05;
  return (
    <Screen {...props} id="s05" label={COPY[lang].sceneLabels[4]} labelEn="ETHOS" className="s05">
      <div className="s05__wrap">
        <div className="s05__eyebrow soft">{t.eyebrow}</div>
        <h2 className="s05__title" key={'s05-' + lang}>
          <SplitChars text={t.title} start={300} step={180} />
        </h2>
        <div className="s05__rule" />
        <p className="s05__body soft soft--delay-4">{t.body}</p>
        <p className="s05__en soft soft--delay-5">{t.en}</p>
      </div>
    </Screen>
  );
};

const Scene06 = ({ lang, ...props }) => {
  const t = COPY[lang].s06;
  return (
    <Screen {...props} id="s06" label={COPY[lang].sceneLabels[5]} labelEn="PRACTICE">
      <div className="s06__wrap">
        <div className="s06__header soft">
          <div className="s06__eyebrow">{t.eyebrow}</div>
          <div className="s06__caption">{t.caption}</div>
        </div>
        <div className="s06__row">
          {t.glyphs.map((g, i) => (
            <div key={i} className="s06__cell" style={{ '--i': i }}>
              <div className="s06__glyph-wrap">
                <span className="s06__glyph">{g.ch}</span>
              </div>
              <div className="s06__foot">
                <span className="s06__body">{g.body}</span>
              </div>
            </div>
          ))}
        </div>
        <div className="soft soft--delay-5 s06__runner">{t.runner}</div>
      </div>
    </Screen>
  );
};

const Scene07 = ({ lang, ...props }) => {
  const t = COPY[lang].s07;
  return (
    <Screen {...props} id="s07" label={COPY[lang].sceneLabels[6]} labelEn="COLOPHON" className="s07">
      <div className="s07__wrap">
        <div className="s07__lockup">
          <img src="assets/logo-white.png" alt="KDRHEA" className="s07__logo" />
        </div>
        <div className="s07__info">
          <div className="s07__group soft soft--delay-3">
            <h4>{t.addrH}</h4>
            <p>{t.addr1}<br/>{t.addr2}</p>
            <span className="en">{t.addrEn}</span>
          </div>
          <div className="s07__group soft soft--delay-4">
            <h4>{t.phoneH}</h4>
            <p>{t.phone}</p>
            <span className="en">{t.phoneEn}</span>
          </div>
          <div className="s07__group soft soft--delay-5">
            <h4>{t.hoursH}</h4>
            <p>{t.hours}</p>
            <span className="en">{t.hoursEn}</span>
          </div>
        </div>
        <div className="s07__baseline soft soft--delay-5">
          <span>{t.baseline1}</span>
          <span>{t.baseline2}</span>
          <span>{t.baseline3}</span>
        </div>
      </div>
    </Screen>
  );
};

Object.assign(window, {
  COPY, useReveal, Line, SplitChars, Screen,
  Scene01, Scene02, Scene03, Scene04, Scene05, Scene06, Scene07,
});