// sections-1.jsx — shared helpers, Nav, Hero, Problem
// Exports: Reveal, Eyebrow, BrandMark, StoreButtons, ThemeLangToggles, NavBar, HeroSection, ProblemSection
const { useState, useEffect, useRef } = React;
const APP_STORE = 'https://apps.apple.com/kr/app/id6770225626';
const PLAY_STORE = 'https://play.google.com/store/apps/details?id=kr.co.devstory.ifeel.app';
// ── reveal-on-scroll wrapper ──
function Reveal({ children, as = 'div', delay = 0, className = '', style = {}, ...rest }) {
const ref = useRef(null);
// Only "arm" (hide-then-animate) when the document is actually visible at mount.
// In a hidden pane, arming is skipped so content is always shown — never stuck invisible.
const [armed] = useState(() => typeof document !== 'undefined'
&& document.visibilityState === 'visible'
&& typeof IntersectionObserver !== 'undefined');
const [inView, setInView] = useState(false);
useEffect(() => {
if (!armed) return;
const el = ref.current;
if (!el) return;
let done = false;
const reveal = () => { if (!done) { done = true; setInView(true); } };
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) { reveal(); io.disconnect(); } });
}, { threshold: 0.12, rootMargin: '0px 0px -6% 0px' });
io.observe(el);
const t = setTimeout(reveal, 1600); // safety net
return () => { io.disconnect(); clearTimeout(t); };
}, [armed]);
const Tag = as;
const cls = armed ? `reveal armed ${inView ? 'in' : ''}` : 'reveal';
return {children};
}
function Eyebrow({ children, style = {} }) {
return {children};
}
function BrandMark({ height = 30, withWordmark = true }) {
const { theme, lang } = useI18n();
const R = (typeof window !== 'undefined' && window.__resources) || {};
const src = theme === 'dark'
? (R.logoDark || 'assets/logo_dark_transparent.png')
: (R.logoLight || 'assets/logo_light_transparent.png');
const wordmark = lang === 'en' ? 'Yaksok' : '약속';
return (
{withWordmark && {wordmark}}
);
}
// ── App store badges ──
function AppleGlyph({ s = 20 }) {
return (
);
}
function PlayGlyph({ s = 18 }) {
return (
);
}
function StoreButtons({ block = false, stack = false }) {
const { S } = useI18n();
const base = {
display: 'inline-flex', alignItems: 'center', gap: 11, textDecoration: 'none',
background: 'var(--text)', color: 'var(--page-bg)', borderRadius: 14,
padding: '12px 20px 12px 18px', minHeight: 56, boxSizing: 'border-box',
boxShadow: 'var(--shadow-card)', transition: 'transform .15s ease, opacity .15s ease',
};
const sub = { fontSize: 11, fontWeight: 600, letterSpacing: 0.4, opacity: 0.78, lineHeight: 1, marginBottom: 3 };
const main = { fontSize: 18, fontWeight: 700, letterSpacing: -0.3, lineHeight: 1, fontFamily: 'var(--font-sans)' };
const hov = (e, v) => { e.currentTarget.style.transform = v ? 'translateY(-2px)' : 'translateY(0)'; e.currentTarget.style.opacity = v ? '0.92' : '1'; };
return (
);
}
// ── Theme + language toggles ──
function ThemeLangToggles() {
const { lang, setLang, theme, setTheme, S } = useI18n();
const btn = {
height: 42, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
background: 'var(--card-bg)', border: '1px solid var(--card-border)', borderRadius: 999,
cursor: 'pointer', color: 'var(--text)', fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 14,
};
return (
);
}
// ── Nav ──
function NavBar() {
const { S } = useI18n();
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const on = () => setScrolled(window.scrollY > 12);
on(); window.addEventListener('scroll', on, { passive: true });
return () => window.removeEventListener('scroll', on);
}, []);
const links = [['#problem', S.nav.problem], ['#features', S.nav.features], ['#accessibility', S.nav.accessibility]];
return (
);
}
// ── Hero ──
function HeroSection() {
const { S, theme } = useI18n();
return (
{/* ambient scan-bracket motif */}
{S.hero.eyebrow}
{S.hero.headline.map((l, i) => {l})}
{S.hero.sub}
{S.hero.trust && (
{S.hero.trust}
)}
);
}
// ── Problem ──
function StatCard({ n, l, big }) {
return (
{n}
{l}
);
}
function ProblemSection() {
const { S } = useI18n();
const p = S.problem;
return (
{p.eyebrow}
{p.heading.map((l, i) => {l})}
{p.intro}
{p.stats.map((s, i) => )}
{p.closing}
);
}
Object.assign(window, { Reveal, Eyebrow, BrandMark, StoreButtons, ThemeLangToggles, NavBar, HeroSection, ProblemSection, APP_STORE, PLAY_STORE });