// Scroll fade-in wrapper + reusable section header for the LP.
// Uses IntersectionObserver — once visible, stays visible.

const FadeIn = ({ children, delay = 0, y = 28 }) => {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    // If the element is already on-screen at mount (e.g. above-the-fold),
    // skip the observer entirely. IntersectionObserver can occasionally fail
    // to fire its initial callback when several large wrappers stack.
    const r = el.getBoundingClientRect();
    if (r.top < window.innerHeight * 0.95) {
      setVisible(true);
      return;
    }
    const obs = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setVisible(true);
          obs.disconnect();
        }
      },
      { threshold: 0.08, rootMargin: '0px 0px -60px 0px' }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return (
    <div
      ref={ref}
      style={{
        opacity: visible ? 1 : 0,
        transform: visible ? 'translateY(0)' : `translateY(${y}px)`,
        transition: `opacity 900ms cubic-bezier(.2,.7,.2,1) ${delay}ms, transform 900ms cubic-bezier(.2,.7,.2,1) ${delay}ms`,
        willChange: 'opacity, transform',
      }}
    >
      {children}
    </div>
  );
};

// Reusable section header — matches Mission/Challenges pattern.
//   num: "04", titleEn: "THE APPROACH.", titleJp: "...", lead: "..." (optional)
//   dark: true → invert for dark-bg sections
//   accent: 'teal' | 'sky' | 'amber' → swap number / rule color per section
//   readMore: optional text for an ACSL-style "READ MORE →" CTA on the right
const SectionHead = ({ num, titleEn, titleJp, lead, dark = false, accent = 'teal', readMore }) => {
  const fg = dark ? '#FFFFFF' : 'var(--navy)';
  const sub = dark ? 'rgba(255,255,255,0.6)' : 'var(--ink-60)';
  const subStrong = dark ? '#FFFFFF' : 'var(--ink)';
  const rule = dark ? 'rgba(255,255,255,0.12)' : 'var(--rule)';
  const accentColor =
    accent === 'sky' ? 'var(--sky-bright)' :
    accent === 'amber' ? 'var(--amber-deep)' :
    'var(--teal)';
  return (
    <div
      style={{
        display: 'grid',
        gridTemplateColumns: '180px 1fr',
        alignItems: 'start',
        gap: 56,
        paddingBottom: 64,
        borderBottom: `1px solid ${rule}`,
        marginBottom: 88,
      }}
    >
      <div>
        <div className="ej-mono" style={{ fontSize: 12, color: sub, marginBottom: 24 }}>
          ／ SECTION
        </div>
        <div
          className="ej-en"
          style={{
            fontSize: 112,
            fontWeight: 400,
            lineHeight: 0.85,
            color: accentColor,
            letterSpacing: '-0.04em',
          }}
        >
          {num}
        </div>
        <div style={{ width: 56, height: 1, background: accentColor, marginTop: 18 }}></div>
      </div>

      <div>
        <h2
          className="ej-en"
          style={{
            fontSize: 80,
            fontWeight: 400,
            lineHeight: 0.95,
            color: fg,
            letterSpacing: '-0.035em',
            margin: 0,
            textTransform: 'uppercase',
          }}
        >
          {titleEn}
        </h2>
        {titleJp ? (
          <div
            className="ej-jp"
            style={{ marginTop: 18, fontSize: 15, color: sub, letterSpacing: '0.08em' }}
          >
            {titleJp}
          </div>
        ) : null}
        {lead ? (
          <div
            className="ej-jp"
            style={{
              marginTop: 28,
              fontSize: 14,
              color: subStrong,
              lineHeight: 1.95,
              maxWidth: 640,
            }}
          >
            {lead}
          </div>
        ) : null}
        {readMore ? (
          <a
            href="#"
            className="ej-mono"
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 14,
              marginTop: 36, padding: '14px 20px 14px 0',
              fontSize: 13, color: fg, textDecoration: 'none',
              letterSpacing: '0.22em', borderBottom: `1px solid ${dark ? 'rgba(255,255,255,0.25)' : 'var(--rule)'}`,
            }}
          >
            {readMore}
            <span style={{
              width: 32, height: 32, borderRadius: '50%',
              border: `1px solid ${accentColor}`,
              color: accentColor,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 13,
            }}>→</span>
          </a>
        ) : null}
      </div>
    </div>
  );
};

// Amber check pill — pulled out for reuse.
const AmberCheck = ({ size = 20 }) => (
  <span
    style={{
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      width: size,
      height: size,
      borderRadius: '50%',
      background: 'var(--amber)',
      color: 'var(--navy)',
      flexShrink: 0,
    }}
  >
    <svg viewBox="0 0 12 12" fill="none" width={size * 0.55} height={size * 0.55}>
      <path d="M2 6 L5 9 L10 3" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  </span>
);

window.FadeIn = FadeIn;
window.SectionHead = SectionHead;
window.AmberCheck = AmberCheck;