// sections-2.jsx — Features showcase, AI demo, Accessibility, CTA, Footer // Exports: FeaturesSection, DemoSection, AccessSection, CtaSection, Footer const { useState: useS2, useEffect: useE2, useRef: useR2 } = React; // ── TTS voice selection ──────────────────────────────────────────────── // Browsers ship several voices per language; the default is often a low-quality // fallback that sounds raspy/hoarse (especially en-US). We explicitly pick the // best available natural voice so read-aloud sounds clear. function pickVoice(voices, lang) { const want = lang === 'en' ? 'en' : 'ko'; const matches = voices.filter(v => (v.lang || '').toLowerCase().startsWith(want)); if (!matches.length) return null; // Higher score = better. Prefer modern "natural/neural" engines and known-good // named voices; demote eSpeak and other low-fidelity defaults. const score = (v) => { const n = (v.name || '').toLowerCase(); let s = 0; if (/natural|neural|premium|enhanced/.test(n)) s += 60; if (/google/.test(n)) s += 40; if (/microsoft/.test(n)) s += 25; if (/(samantha|ava|allison|aaron|jenny|aria|nova|siri|nicky|evan|joelle)/.test(n)) s += 30; // Apple/MS quality voices if (/(yuna|sora|heami|injoon)/.test(n)) s += 30; // Apple/MS Korean quality voices if (v.localService) s += 8; if (/espeak|compact|pico|festival/.test(n)) s -= 50; // raspy/robotic engines if ((v.lang || '').toLowerCase() === (want === 'en' ? 'en-us' : 'ko-kr')) s += 6; return s; }; return matches.slice().sort((a, b) => score(b) - score(a))[0]; } // Voices load asynchronously; resolve once they're available. function getVoicesAsync() { return new Promise((resolve) => { const synth = window.speechSynthesis; if (!synth) { resolve([]); return; } let v = synth.getVoices(); if (v && v.length) { resolve(v); return; } let done = false; const finish = () => { if (done) return; done = true; resolve(synth.getVoices() || []); }; synth.addEventListener && synth.addEventListener('voiceschanged', finish, { once: true }); setTimeout(finish, 600); // fallback if the event never fires }); } function useMedia(q) { const [m, setM] = useS2(() => (typeof matchMedia !== 'undefined' ? matchMedia(q).matches : true)); useE2(() => { const mq = matchMedia(q); const fn = () => setM(mq.matches); fn(); mq.addEventListener ? mq.addEventListener('change', fn) : mq.addListener(fn); return () => (mq.removeEventListener ? mq.removeEventListener('change', fn) : mq.removeListener(fn)); }, [q]); return m; } function SectionHead({ eyebrow, heading, sub, center }) { return (
{eyebrow} {heading.map((l, i) => {l})} {sub && {sub}}
); } // ── Features: scroll-driven phone showcase ── function featureScreens(theme) { const td = theme === 'dark'; return [ { dark: true, label: '바코드 식별 화면', el: }, { dark: true, label: 'OCR 글자 읽기 화면', el: }, { dark: td, label: 'AI 쉬운 설명 화면', el: }, ]; } // (feature blocks are now rendered inline in FeaturesSection with scroll-synced active state) // Self-contained drug-detail demo screen used as feature 03's device. // Two modes — AI plain-language (default) and the official text — with REAL // text-to-speech read-aloud (Web Speech API), mirroring the app's TTS flow. const DEMO_KEYS = ['AI 쉬운 설명', '원문']; const DEMO_LABELS = ['AI', '원문']; function DrugDemoScreen({ dark }) { const { S, lang } = useI18n(); const d = S.demo; const [mode, setMode] = useS2(0); const [reading, setReading] = useS2(-1); const sections = d.sections[DEMO_KEYS[mode]]; const fallback = useR2(null); const stop = () => { try { if (window.speechSynthesis) window.speechSynthesis.cancel(); } catch (e) {} if (fallback.current) { clearInterval(fallback.current); fallback.current = null; } setReading(-1); }; useE2(() => () => stop(), []); useE2(() => { stop(); }, [mode]); const onRead = () => { if (reading >= 0) { stop(); return; } setReading(0); const synth = window.speechSynthesis; if (synth && typeof SpeechSynthesisUtterance !== 'undefined') { synth.cancel(); getVoicesAsync().then((voices) => { const voice = pickVoice(voices, lang); sections.forEach((s, i) => { const u = new SpeechSynthesisUtterance(`${s.label}. ${s.body}`); u.lang = lang === 'en' ? 'en-US' : 'ko-KR'; if (voice) u.voice = voice; u.rate = 1.0; u.pitch = 1; u.volume = 1; u.onstart = () => setReading(i); u.onend = () => { if (i === sections.length - 1) setReading(-1); }; synth.speak(u); }); }); } else { // no speech engine — advance the highlight on a timer so the cue still reads let n = 0; fallback.current = setInterval(() => { n += 1; if (n >= sections.length) { clearInterval(fallback.current); fallback.current = null; setReading(-1); } else setReading(n); }, 1900); } }; return ; } function RagCard({ S }) { const f = S.features; return (
); } function FeaturesSection() { const { S, theme } = useI18n(); const wide = useMedia('(min-width: 920px)'); const [active, setActive] = useS2(0); const items = S.features.items; const screens = featureScreens(theme); const blockRefs = useR2([]); useE2(() => { if (!wide) return; const onScroll = () => { const mid = window.innerHeight / 2; let best = 0, bestDist = Infinity; blockRefs.current.forEach((el, i) => { if (!el) return; const r = el.getBoundingClientRect(); const c = r.top + r.height / 2; const dist = Math.abs(c - mid); if (dist < bestDist) { bestDist = dist; best = i; } }); setActive(best); }; onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); }; }, [wide, items.length]); return (
{wide ? (
{items.map((it, i) => { const on = active === i; return (
{ blockRefs.current[i] = el; }} style={{ minHeight: '78vh', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>

{it.title}

{it.body}

); })}
{screens.map((s, i) => (
{s.el}
))}
) : (
{items.map((it, i) => (
{it.tag}

{it.title}

{it.body}

{screens[i].el} ))}
)}
); } // ── AI demo: interactive drug screen ── function InteractiveDrugScreen({ dark, mode, setMode, reading, onRead }) { const { S } = useI18n(); const d = S.demo; const c = scrColors(dark); const sections = d.sections[DEMO_KEYS[mode]]; return (
{d.drug.cat}

{d.drug.name}

{d.drug.maker}
{sections.map((s, n) => { const act = reading === n; return (
{s.label}

{s.body}

); })}
setMode(i)} dark={dark} height={44} fs={14} />
); } function DemoSection() { const { S, theme } = useI18n(); const d = S.demo; const [mode, setMode] = useS2(2); const [reading, setReading] = useS2(-1); const timer = useR2(null); const keys = ['원문', 'e약은요', 'AI 쉬운 설명']; const count = d.sections[keys[mode]].length; useE2(() => () => clearInterval(timer.current), []); useE2(() => { clearInterval(timer.current); setReading(-1); }, [mode]); const onRead = () => { if (reading >= 0) { clearInterval(timer.current); setReading(-1); return; } let n = 0; setReading(0); timer.current = setInterval(() => { n += 1; if (n >= count) { clearInterval(timer.current); setReading(-1); } else setReading(n); }, 1700); }; return (
{d.modeHint} · {d.read}
); } // ── Accessibility ── function AccessSection() { const { S } = useI18n(); const a = S.access; return (
{a.items.map((it, i) => (

{it.title}

{it.body}

 ))}
); } // ── Download CTA ── function CtaSection() { const { S, theme } = useI18n(); return (
); } // ── Footer ── function Footer() { const { S } = useI18n(); const f = S.footer; const links = [['#problem', S.nav.problem], ['#features', S.nav.features], ['#accessibility', S.nav.accessibility], ['#download', S.nav.download]]; return ( ); } Object.assign(window, { FeaturesSection, DemoSection, AccessSection, CtaSection, Footer, useMedia, SectionHead });