// Citely landing — page composers (Silent / Structured × desktop / mobile × kr / en)
// and the DesignCanvas wrapper.

// Full page — composes all sections with optional grid overlay for Structured.
function LandingPage({ copy, direction, mobile, lang }) {
  const rootRef = React.useRef(null);
  const [revealed, setRevealed] = React.useState(false);

  // Signature motion: reveal the citation tick when the answer-engine mock
  // scrolls into view inside this artboard.
  React.useEffect(() => {
    const root = rootRef.current;
    if (!root) return;
    const mock = root.querySelector('.ae-mock');
    if (!mock) return;
    const scroller = root;
    const check = () => {
      const rRoot = scroller.getBoundingClientRect();
      const rMock = mock.getBoundingClientRect();
      // reveal when mock enters the bottom 75% of the scroller
      const threshold = rRoot.top + rRoot.height * 0.75;
      if (rMock.top < threshold) setRevealed(true);
      else setRevealed(false);
    };
    scroller.addEventListener('scroll', check);
    // Also trigger after a tick (in case artboard is scrolled initially)
    const t = setTimeout(check, 100);
    return () => {
      scroller.removeEventListener('scroll', check);
      clearTimeout(t);
    };
  }, []);

  const klass = 'site' + (direction === 'structured' ? ' structured' : ' silent');
  return (
    <div ref={rootRef} className={klass} style={{
      width: '100%', height: '100%', overflowY: 'auto', overflowX: 'hidden',
      background: 'var(--paper)',
      lang: lang,
    }}>
      {direction === 'structured' && !mobile && <GridOverlay />}
      <Nav copy={copy} mobile={mobile} />
      <Hero copy={copy} direction={direction} mobile={mobile} />
      <SectionShift copy={copy} direction={direction} mobile={mobile} revealed={revealed} />
      <SectionPillars copy={copy} direction={direction} mobile={mobile} />
      <SectionModes copy={copy} mobile={mobile} />
      <SectionMethod copy={copy} mobile={mobile} />
      <SectionCases copy={copy} mobile={mobile} />
      <SectionFAQ copy={copy} mobile={mobile} />
      <SectionCTAFooter copy={copy} mobile={mobile} />
    </div>
  );
}

// 12-column grid guide — faint dotted lines for Structured direction
function GridOverlay() {
  return (
    <div style={{
      position: 'absolute', top: 0, bottom: 0, left: 72, right: 72,
      pointerEvents: 'none', zIndex: 0,
      display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 24,
    }}>
      {Array.from({ length: 12 }).map((_, i) => (
        <div key={i} style={{ borderLeft: '1px dashed rgba(10,10,10,0.05)' }} />
      ))}
    </div>
  );
}

// Hero-only render for KR/EN comparison artboards.
function HeroOnly({ copy, direction, lang }) {
  return (
    <div className={'site ' + (direction === 'structured' ? 'structured' : 'silent')} style={{
      width: '100%', height: '100%', background: 'var(--paper)', lang,
      overflow: 'auto',
    }}>
      <Nav copy={copy} />
      <Hero copy={copy} direction={direction} />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Canvas
// ─────────────────────────────────────────────────────────────
function App() {
  const { ko, en } = window.CITELY_COPY;

  return (
    <DesignCanvas>
      <DCSection id="overview" title="Citely · Landing Page" subtitle="Two extreme-minimalist directions · 1440 desktop · 390 mobile · KR/EN">
        <DCArtboard id="A-desktop" label="A · Silent · Desktop" width={1440} height={3200}>
          <LandingPage copy={ko} direction="silent" lang="ko" />
        </DCArtboard>
        <DCArtboard id="B-desktop" label="B · Structured · Desktop" width={1440} height={3200}>
          <LandingPage copy={ko} direction="structured" lang="ko" />
        </DCArtboard>
      </DCSection>

      <DCSection id="mobile" title="Mobile — 390" subtitle="Full-page on both directions">
        <DCArtboard id="A-mobile" label="A · Silent · Mobile" width={390} height={2800}>
          <LandingPage copy={ko} direction="silent" mobile lang="ko" />
        </DCArtboard>
        <DCArtboard id="B-mobile" label="B · Structured · Mobile" width={390} height={2800}>
          <LandingPage copy={ko} direction="structured" mobile lang="ko" />
        </DCArtboard>
      </DCSection>

      <DCSection id="bilingual" title="Bilingual hero pair" subtitle="Pretendard + Inter Tight — optical match across KR/EN">
        <DCArtboard id="hero-kr-silent" label="KR · Silent" width={1440} height={920}>
          <HeroOnly copy={ko} direction="silent" lang="ko" />
        </DCArtboard>
        <DCArtboard id="hero-en-silent" label="EN · Silent" width={1440} height={920}>
          <HeroOnly copy={en} direction="silent" lang="en" />
        </DCArtboard>
        <DCArtboard id="hero-kr-structured" label="KR · Structured" width={1440} height={920}>
          <HeroOnly copy={ko} direction="structured" lang="ko" />
        </DCArtboard>
        <DCArtboard id="hero-en-structured" label="EN · Structured" width={1440} height={920}>
          <HeroOnly copy={en} direction="structured" lang="en" />
        </DCArtboard>
      </DCSection>
    </DesignCanvas>
  );
}

// ─────────────────────────────────────────────────────────────
// Tweaks
// ─────────────────────────────────────────────────────────────
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#D94F2A",
  "paper": "#FAFAF7"
}/*EDITMODE-END*/;
let tweaks = { ...TWEAK_DEFAULTS };

function applyTweaks() {
  document.documentElement.style.setProperty('--accent', tweaks.accent);
  document.documentElement.style.setProperty('--paper', tweaks.paper);
  document.querySelectorAll('.tweaks-panel .opts').forEach(g => {
    const k = g.dataset.key;
    g.querySelectorAll('button').forEach(b => {
      b.setAttribute('aria-pressed', String(b.dataset.val) === String(tweaks[k]) ? 'true' : 'false');
    });
  });
}

function mountTweaksListeners() {
  document.querySelectorAll('.tweaks-panel .opts').forEach(g => {
    g.addEventListener('click', e => {
      const b = e.target.closest('button'); if (!b) return;
      const k = g.dataset.key, v = b.dataset.val;
      tweaks[k] = v;
      applyTweaks();
      window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
    });
  });
  window.addEventListener('message', (e) => {
    const d = e.data || {};
    if (d.type === '__activate_edit_mode') document.querySelector('.tweaks-panel').classList.add('visible');
    if (d.type === '__deactivate_edit_mode') document.querySelector('.tweaks-panel').classList.remove('visible');
  });
  window.parent.postMessage({ type: '__edit_mode_available' }, '*');
  applyTweaks();
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
window.addEventListener('DOMContentLoaded', mountTweaksListeners);
if (document.readyState !== 'loading') mountTweaksListeners();