// Main sections: Hero, Services, Listings, Calculator, Testimonials, Team, Footer. // Forms live in forms.jsx. const { useState: useStateS, useMemo: useMemoS, useEffect: useEffectS } = React; // ============================================================ // HERO // ============================================================ function Hero({ lang, t }) { const isKo = lang === 'ko'; return (

{/* Left: headline block */}

{t.hero.eyebrow}

{isKo ? ( <> {t.hero.titleA} {t.hero.titleItalic}로 가는 {t.hero.titleC} ) : ( <> The key to your next move. )}

{/* Right: sub + CTAs + Korean pill */}

{t.hero.koPill}

{t.hero.sub}

{t.hero.ctaPrimary} {t.hero.ctaSecondary}

{/* Trust row */}

{t.hero.trust1} {t.hero.trust2} 한국어 상담 가능

); } // ============================================================ // TEAM BANNER — full-width photo strip // ============================================================ function TeamBanner({ lang, t }) { const isKo = lang === 'ko'; return (

{isKo ? 'EC 부동산 그룹 팀' : 'The EC Real Estate Group Team'}

); } // ============================================================ // SERVICES // ============================================================ function Services({ lang, t }) { const isKo = lang === 'ko'; return (

{t.services.eyebrow}

{t.services.title} {t.services.titleItalic}

{t.services.sub}

{t.services.items.map((item, idx) => { const imgKey = SERVICE_IMAGES[idx] || 'buy'; return (

{item.num}

{item.name}

{item.desc} ); })}

{/* Extras row */} — Also {t.services.extras.map((x, i) => ( {x} {i < t.services.extras.length - 1 ? : null} ))}

); } // ============================================================ // LISTINGS — featured gallery with filter chips // ============================================================ function Listings({ lang, t }) { const isKo = lang === 'ko'; const [filter, setFilter] = useStateS('all'); const filtered = useMemoS(() => { if (filter === 'all') return LISTINGS; return LISTINGS.filter(l => l.tagKey === filter); }, [filter]); const chips = [ { key: 'all', label: t.listings.filters.all }, { key: 'sale', label: t.listings.filters.sale }, { key: 'new', label: t.listings.filters.new }, { key: 'luxury', label: t.listings.filters.luxury }, ]; return (

{t.listings.eyebrow}

{isKo ? t.listings.title : <>A small,} {t.listings.titleItalic} {t.listings.titleB}

{t.listings.sub}

{/* Filter chips */}

{chips.map(c => ( ))}

{/* Grid */}

{filtered.map((l, idx) => { const realIdx = LISTINGS.findIndex(x => x.id === l.id); const imgKey = LISTING_IMAGES[realIdx] || 'banner1'; return (

{l.tag[lang]}

{`Listing — ${l.id.toUpperCase()}`}

{fmtPrice(l.price)}

{l.neighborhood[lang]}

{l.beds} {l.baths} {fmtSqft(l.sqft)}

{l.address[lang]}

{t.listings.cta}

); })}

{t.listings.zillow}

); } // ============================================================ // CALCULATOR // ============================================================ function Calculator({ lang, t }) { const isKo = lang === 'ko'; const [price, setPrice] = useStateS(750000); const [downPct, setDownPct] = useStateS(20); const [rate, setRate] = useStateS(6.5); const [term, setTerm] = useStateS(30); const downAmt = price * (downPct / 100); const loanAmt = price - downAmt; const n = term * 12; const r = (rate / 100) / 12; const monthly = r === 0 ? (loanAmt / n) : (loanAmt * r) / (1 - Math.pow(1 + r, -n)); const totalInt = monthly * n - loanAmt; return (

{t.calc.eyebrow}

{t.calc.title} {t.calc.titleItalic} {t.calc.titleB}

{t.calc.sub}

{/* Inputs */}

{/* Price */}

{t.calc.price} {fmtMoney(price)}

setPrice(parseInt(e.target.value, 10))} aria-label="Home price" />

$150K$3M

{/* Down payment */}

{t.calc.down} {downPct}% · {fmtMoney(downAmt)}

setDownPct(parseInt(e.target.value, 10))} aria-label="Down payment percent" />

3%50%

{/* Rate */}

{t.calc.rate} {rate.toFixed(2)}%

setRate(parseFloat(e.target.value))} aria-label="Interest rate" />

2.00%10.00%

{/* Term */}

{t.calc.term} {term} yr

{[15, 30].map(y => ( ))}

{/* Output */}

{t.calc.monthly}

{fmtMoney(monthly)}

/ month

{t.calc.loanAmt}

{fmtMoney(loanAmt)}

{t.calc.downAmt}

{fmtMoney(downAmt)}

{t.calc.totalInt}

{fmtMoney(totalInt)}

{t.calc.disclaimer}

); } // ============================================================ // TESTIMONIALS // ============================================================ function Testimonials({ lang, t }) { const isKo = lang === 'ko'; return (

{t.testimonials.eyebrow}

{t.testimonials.title} {t.testimonials.titleItalic} {t.testimonials.titleB}

{t.testimonials.sub}

{t.testimonials.items.map((item, idx) => ( {item.quote}

{item.name}

{item.neighborhood}

{String(idx + 1).padStart(2, '0')} / {String(t.testimonials.items.length).padStart(2, '0')}

))}

※ {t.testimonials.placeholderNote}

{t.testimonials.readMore}

); } // ============================================================ // TEAM // ============================================================ function Team({ lang, t }) { const isKo = lang === 'ko'; return (

{t.team.eyebrow}

{t.team.title} {t.team.titleItalic} {t.team.titleB}

{t.team.sub}

{t.team.members.map((m, idx) => { const portraitKey = TEAM_IMAGES[idx]; return (

{t.team.koTag}

{m.name}

{m.title}

{m.creds.map((c, i) => ( · {c} ))} {idx === 0 ? ( GRI — Graduate Realtor Institute

) : null}

{m.bio}

{m.phone} {m.email}

); })}

); } // ============================================================ // FOOTER // ============================================================ function Footer({ lang, t, setLang }) { const isKo = lang === 'ko'; const f = t.footer; return ( ); } Object.assign(window, { Hero, TeamBanner, Services, Listings, Calculator, Testimonials, Team, Footer });