function useFinalStartFlowComplete() {
  const getIsComplete = () => Boolean(window.ATELA_AUTH?.isSignedIn?.());
  const [isComplete, setIsComplete] = React.useState(getIsComplete);

  React.useEffect(() => {
    const syncState = (event) => {
      const nextValue = event?.detail?.isSignedIn;
      setIsComplete(Boolean(nextValue ?? window.ATELA_AUTH?.isSignedIn?.()));
    };

    window.addEventListener('atela:auth-state-change', syncState);
    return () => {
      window.removeEventListener('atela:auth-state-change', syncState);
    };
  }, []);

  return isComplete;
}

function FinalCta(props) {
  const sectionKey = props.sectionKey || 'finalCta';
  const sectionId = props.sectionId || 'final-cta';
  const secondaryPageId = props.secondaryPageId || 'home';
  const copy = window.atelaGetCopySection(sectionKey);
  const authCopy = window.atelaGetCopySection('auth');
  const openStartFlow = window.atelaOpenStartFlow;
  const trackCtaClick = window.atelaTrackCtaClick;
  const currentLocale = window.atelaGetCurrentLocale ? window.atelaGetCurrentLocale() : 'ko';
  const buildPageUrl = window.atelaBuildPageUrl || ((pageId, locale) => (
    pageId && pageId !== 'home' ? `/${locale}/${pageId}` : `/${locale}`
  ));
  const isStartFlowComplete = useFinalStartFlowComplete();
  const leadLines = String(copy.titleLines[0] || '').split('\n');
  const highlightLines = String(copy.titleLines[1] || '').split('\n');
  const primaryCtaLabel = isStartFlowComplete ? (authCopy?.completedCta || copy.primaryCta) : copy.primaryCta;
  const hasSecondaryCta = Boolean(copy.secondaryCta);
  const secondaryHref = buildPageUrl(secondaryPageId, currentLocale);
  const completedIcon = isStartFlowComplete ? (
    <span className="atela-cta-complete-check" aria-hidden="true">
      <svg viewBox="0 0 16 16" focusable="false">
        <path d="M3.5 8.5 6.5 11.5 12.5 4.5" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    </span>
  ) : null;
  const handlePrimaryCtaClick = (event) => {
    if (trackCtaClick) {
      trackCtaClick({
        sectionId,
        ctaId: 'final_primary',
        ctaLabel: primaryCtaLabel,
        destination: window.location.pathname,
        is_start_flow_complete: isStartFlowComplete,
      });
    }

    if (openStartFlow) {
      event.preventDefault();
      if (isStartFlowComplete) return;
      openStartFlow({ source: sectionId });
    }
  };
  const handleSecondaryCtaClick = () => {
    if (trackCtaClick) {
      trackCtaClick({
        sectionId,
        ctaId: 'final_secondary',
        ctaLabel: copy.secondaryCta,
        destination: secondaryHref,
      });
    }
  };
  return (
    <section id={sectionId} className="atela-final">
      <div className="atela-container">
        <div className="atela-final-card">
          <span className="atela-eyebrow" style={{color:'#0A0A0A', opacity: 0.6}}>{copy.eyebrow}</span>
          <h2 className="atela-display">
            {leadLines.map((line, index) => (
              <React.Fragment key={`${line}-${index}`}>
                {index > 0 ? <br/> : null}
                {line}
              </React.Fragment>
            ))}
            <br/>
            {highlightLines.map((line, index) => (
              <React.Fragment key={`${line}-${index}`}>
                {index > 0 ? <br/> : null}
                <span className="atela-mark">{line}</span>
              </React.Fragment>
            ))}
          </h2>
          <p>{copy.body}</p>
          <div className="atela-hero-cta center">
            <a
              className="atela-btn-ink"
              href={window.location.pathname}
              onClick={handlePrimaryCtaClick}
              aria-disabled={isStartFlowComplete || undefined}
            >
              {primaryCtaLabel}
              {completedIcon}
            </a>
            {hasSecondaryCta ? (
              <a className="atela-btn-ghost" href={secondaryHref} onClick={handleSecondaryCtaClick}>{copy.secondaryCta}</a>
            ) : null}
          </div>
        </div>
      </div>
    </section>
  );
}
window.FinalCta = FinalCta;

function Footer() {
  const copy = window.atelaGetCopySection('footer');
  const currentLocale = window.atelaGetCurrentLocale ? window.atelaGetCurrentLocale() : 'ko';
  const buildPageUrl = window.atelaBuildPageUrl || ((pageId, locale) => (
    pageId && pageId !== 'home' ? `/${locale}/${pageId}` : `/${locale}`
  ));
  const termsHref = buildPageUrl('terms', currentLocale);
  const privacyHref = buildPageUrl('privacy', currentLocale);

  return (
    <footer className="atela-footer on-ink">
      <div className="atela-container">
        <div className="atela-footer-bottom atela-footer-line">
          <span>{copy.bottomLeft}</span>
          <span className="atela-footer-links">
            <a href={termsHref}>{copy.termsLabel || 'Terms'}</a>
            <span aria-hidden="true">·</span>
            <a href={privacyHref}>{copy.privacyLabel || 'Privacy'}</a>
          </span>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;