// Shared assets and tiny helpers used by all 5 LP variants. // Keep this lean — each LP supplies its own styling. // Resolve through window.__resources when running as a standalone bundle, // otherwise fall back to the on-disk path. const _R = (typeof window !== 'undefined' && window.__resources) || {}; // SLOT_OVERRIDES is now populated only from the Cloudflare CMS asset map. const _SLOT = (typeof window !== 'undefined' && window.SLOT_OVERRIDES) || {}; const _A = (id, path) => _SLOT[id] || _R[id] || path; const { hasText, hasImageRef } = window.SmartlifeEmptyContract; const COPY = { 'top.badge': '広島の屋根・外壁・住まいの相談窓口', 'top.hero.line1': '屋根・外壁・リフォームなど', 'top.hero.line2a': '建物のご相談は', 'top.hero.line2b': '株式会社スマートライフに。', 'top.hero.line2c': '', 'top.hero.lead1': '住まいの修理は、株式会社スマートライフへ。', 'top.hero.lead2': '広島での屋根・外壁・住まいのメンテナンスを、ひとつの窓口で承ります。', 'top.hero.note': '屋根・外壁・雨漏り・内装・水回りまで、住まいの修理を一窓口でご相談いただけます。', 'top.promise.1.title': '住まいのことを窓口ひとつで', 'top.promise.1.body': '屋根・外壁・雨漏り・内装・水回りまで、まとめてご相談いただけます。', 'top.promise.2.title': '広島市・周辺エリア対応', 'top.promise.2.body': '地域密着で活動しているため、現地確認にも迅速に伺います。', 'top.promise.3.title': '写真を交えてご説明', 'top.promise.3.body': '屋根の上など見えにくい場所も、撮影した写真をお見せしながらご説明します。', 'cta.title': 'お問い合わせ', 'cta.lead1': '屋根や外壁、住まいのことで気になることはありませんか？', 'cta.lead2': '小さなことでも、お電話またはメールフォームよりお気軽にご相談ください。', 'privacy.contact.heading': '個人情報の取り扱いについて', 'privacy.contact.body': 'いただいたお名前・ご連絡先・ご相談内容は、お問い合わせへのご回答とご相談内容の確認のためにのみ使用します。ご本人の同意なく第三者へ提供することはありません。取り扱いに関するお問い合わせは、お電話（{電話番号}）またはこのフォームよりご連絡ください。', 'footer.description.1': '広島市・周辺エリアの屋根・外壁・住まいの相談窓口です。', 'footer.description.2': '気になることがあれば、お電話またはメールでお気軽にお問い合わせください。', }; const copyText = (id, fallback) => { const value = COPY[id]; return typeof value === 'string' && value.trim() ? value : fallback; }; // CMSの保存値そのもの（未設定なら undefined、管理者が空にしたなら ''）。 // 「未設定＝既定値を出す／明示的に空＝その要素を隠す」を表示側で区別するために使う。 const rawCopyValue = (id) => { const value = COPY[id]; return typeof value === 'string' ? value : undefined; }; const slHref = (page) => `index.html?page=${page}`; const slDetailHref = (page, param, value) => `${slHref(page)}&${param}=${encodeURIComponent(value)}`; const slServiceHref = (serviceId) => slDetailHref('service-detail', 'service', serviceId); const slArticleHref = (articleId) => slDetailHref('knowledge-detail', 'article', articleId); const slCaseHref = (caseId) => slDetailHref('case-detail', 'case', caseId); const slNavHref = (id) => { if (id === 'home') return slHref('top'); if (id === 'flow') return `${slHref('top')}#flow`; return slHref(id); }; function dialablePhone(value, fallback = '082-299-6008') { const normalized = String(value || '') .replace(/[０-９]/g, (ch) => String.fromCharCode(ch.charCodeAt(0) - 0xFEE0)) .replace(/[－ー―‐‑‒–—]/g, '-') .replace(/[＋]/g, '+'); const match = normalized.match(/(?:\+?81|0)[0-9\s().-]{8,18}/); const dial = String(match ? match[0] : normalized).replace(/[^\d+]/g, ''); return dial || fallback.replace(/[^\d+]/g, ''); } const ASSETS = { logo: _A('logo', 'assets/logo-smartlife.png'), heroLogo: _A('heroLogo', 'assets/logo-smartlife-deepgreen.png'), logoGreen: _A('logoGreen', 'assets/logo-mark-green-v4.png'), /* 2026-06-12 image_gen生成のプロ版マーク */ logoOrange: _A('logoOrange', 'assets/logo-mark-orange-v4.png'), logoBlack: _A('logoBlack', 'assets/smartlife-logo-black.svg'), heroMain: _A('heroMain', 'assets/hero-roof-main-flop-w1200.jpg'), /* slot: HERO-01（既定=反転版。候補: hero-roof-main-w1200 / hero-roof-wide-01-w1400 / hero-roof-wide-02-w1400） */ heroFlip: _A('heroFlip', 'assets/hero-roof-main-flop-w1200.jpg'), /* 後方互換（heroMainと同値） */ heroWide1: _A('heroWide1', 'assets/hero-roof-wide-01-w1400.jpg'), heroWide2: _A('heroWide2', 'assets/hero-roof-wide-02-w1400.jpg'), case1: _A('case1', 'assets/case-roof-after-01.png'), case2: _A('case2', 'assets/case-roof-after-02.png'), case3: _A('case3', 'assets/case-roof-after-03.png'), case4: _A('case4', 'assets/case-roof-after-04.png'), caseYayamaBefore: _A('caseYayamaBefore', 'assets/case-yane-fukikae-before-masaaki-20260526.jpg'), caseYayamaAfter: _A('caseYayamaAfter', 'assets/case-yane-fukikae-after-masaaki-20260526.jpg'), caseYayamaFlowCheck: _A('caseYayamaFlowCheck', 'assets/case-yayama-flow-check-sl0589.jpg'), caseYayamaFlowWork: _A('caseYayamaFlowWork', 'assets/case-yayama-flow-work-sl0603.jpg'), caseHatashiBefore: _A('caseHatashiBefore', 'assets/case-hatashi-before-sl0581.jpg'), caseHatashiAfter: _A('caseHatashiAfter', 'assets/case-hatashi-after-sl0568.jpg'), caseRedBefore: _A('caseRedBefore', 'assets/case-red-before-sl1081.jpg'), caseRedAfter: _A('caseRedAfter', 'assets/case-red-after-sl1092.jpg'), svcLeak: _A('svcLeak', 'assets/service-leak-w1200.jpg'), svcLarge: _A('svcLarge', 'assets/service-large-w1200.jpg'), svcSmall: _A('svcSmall', 'assets/service-small-w1200.jpg'), svcMaint: _A('svcMaint', 'assets/service-maintenance-real.jpg'), svcFull: _A('svcFull', 'assets/service-full-real.jpg'), philosophyPhoto: _A('philosophyPhoto', ''), serviceWallReal: _A('serviceWallReal', 'assets/service-wall-real.jpg'), serviceGutterReal: _A('serviceGutterReal', 'assets/service-gutter-real.jpg'), knowFaq: _A('knowFaq', 'assets/knowledge-estimate-watercolor.jpg'), knowLevel: _A('knowLevel', 'assets/knowledge-home-repair-watercolor.jpg'), knowRoof: _A('knowRoof', 'assets/knowledge-roof-watercolor.jpg'), knowLeakWatercolor: _A('knowLeakWatercolor', 'assets/knowledge-leak-watercolor.jpg'), knowRoofWatercolor: _A('knowRoofWatercolor', 'assets/knowledge-roof-watercolor.jpg'), knowWallWatercolor: _A('knowWallWatercolor', 'assets/knowledge-wall-watercolor.jpg'), knowEstimateWatercolor: _A('knowEstimateWatercolor', 'assets/knowledge-estimate-watercolor.jpg'), knowInspectionWatercolor: _A('knowInspectionWatercolor', 'assets/knowledge-inspection-watercolor.jpg'), knowHomeRepairWatercolor: _A('knowHomeRepairWatercolor', 'assets/knowledge-home-repair-watercolor.jpg'), }; // Smartlife real info — never make up numbers const COMPANY = { name: '株式会社スマートライフ', area: '広島市周辺', phone: '082-299-6008', // 受付時間はCMSのcompany.hoursだけから受け取る。repo既定値は持たない。 hours: '', address: '〒733-0035 広島県広島市西区南観音1丁目11-17', representative: '角屋 政明', established: '2010年5月', tagline: '広島の屋根・外壁・住まいの相談を、わかりやすく。', }; function coverImageAlt(src) { const path = String(src || ''); if (path === ASSETS.heroMain || path === ASSETS.heroFlip) return '青空の下で見える住宅の屋根'; if (path === ASSETS.heroWide1 || path === ASSETS.heroWide2) return '住宅の屋根と外観'; if (path === ASSETS.caseYayamaBefore) return '屋根工事の施工前写真'; if (path === ASSETS.caseYayamaAfter) return '屋根工事の施工後写真'; if (path === ASSETS.caseYayamaFlowCheck) return '屋根の状態を確認している様子'; if (path === ASSETS.caseYayamaFlowWork) return '屋根工事の施工中写真'; if (path === ASSETS.caseHatashiBefore) return '棟板金工事の施工前写真'; if (path === ASSETS.caseHatashiAfter) return '棟板金工事の施工後写真'; if (path === ASSETS.caseRedBefore) return '金属屋根の施工前写真'; if (path === ASSETS.caseRedAfter) return '金属屋根の施工後写真'; if (path === ASSETS.serviceWallReal) return '外壁工事の参考写真'; if (path === ASSETS.serviceGutterReal) return '雨樋まわりの参考写真'; if (path === ASSETS.svcLeak) return '雨漏り修理の参考写真'; if (path === ASSETS.svcLarge || path === ASSETS.svcSmall || path === ASSETS.svcMaint || path === ASSETS.svcFull) return '住まいの修理の参考写真'; if (path.indexOf('knowledge-') !== -1) return '住まいのお役立ち情報のイメージ'; if (path.indexOf('case-') !== -1) return '施工事例の写真'; if (path.indexOf('service-') !== -1) return 'サービスの参考写真'; return ''; } // Service list — 6 categories matching the 01-service-index mock. // `aliases` keeps legacy service IDs (spot/maint/full/reform) resolvable without touching read-only files. const SERVICES = [ { id: 'roof', aliases: ['full', 'spot'], name: '屋根工事' /* slot: TEXT-SERVICE-ROOF-NAME */, photo: ASSETS.caseYayamaAfter, blurb: _A('svcRoofBlurb', '屋根の葺き替えやカバー工法など、屋根全体を整えます。') /* slot: TEXT-SERVICE-ROOF-BLURB */, symptoms: [ /* slot: TEXT-SERVICE-ROOF-SYMPTOMS */ { t: '屋根全体の劣化が気になる', d: '部分補修でよいか、全体改修が必要かを現地で確認します。' }, { t: '葺き替え・カバー工法を検討したい', d: '建物の状態とご希望に合わせて、工法の選択肢を整理します。' }, { t: '瓦・板金のずれが気になる', d: '台風や強風のあとに見えるずれは、早めに確認しておくと安心です。' }, ], durations: [ /* slot: TEXT-SERVICE-ROOF-DURATIONS */ { kind: '現地調査', day: '半日程度' }, { kind: '部分補修', day: '数日〜1週間程度' }, { kind: '全体改修', day: '1〜2週間程度' }, ], }, { id: 'wall', aliases: [], name: '外壁工事' /* slot: TEXT-SERVICE-WALL-NAME */, photo: ASSETS.serviceWallReal, blurb: _A('svcWallBlurb', '外壁の塗装や張り替えで、住まいの印象と耐久性を高めます。') /* slot: TEXT-SERVICE-WALL-BLURB */, symptoms: [ /* slot: TEXT-SERVICE-WALL-SYMPTOMS */ { t: '外壁のヒビ・剥がれが気になる', d: '塗装だけでよいか、下地やシーリングも含めて確認します。' }, { t: '外壁の色あせが気になる', d: '塗膜の劣化のサインかどうか、現地で状態を確認します。' }, { t: '目地のシーリングが傷んできた', d: '目地まわりの状態を見て、補修の必要性を整理します。' }, ], durations: [ /* slot: TEXT-SERVICE-WALL-DURATIONS */ { kind: '現地確認', day: '半日程度' }, { kind: '部分補修', day: '数日〜1週間程度' }, { kind: '全面塗装', day: '1〜2週間程度' }, ], }, { id: 'leak', aliases: [], name: '雨漏り修理' /* slot: TEXT-SERVICE-LEAK-NAME */, photo: ASSETS.svcLeak, blurb: _A('svcLeakBlurb', '原因を丁寧に調査し、雨漏りの再発を防ぎます。') /* slot: TEXT-SERVICE-LEAK-BLURB */, symptoms: [ /* slot: TEXT-SERVICE-LEAK-SYMPTOMS */ { t: '天井・壁にシミが出てきた', d: '雨が降った後だけ広がるなら、雨水の経路がある可能性があります。' }, { t: '雨の日に音がする', d: '屋根や外壁のどこかから、雨水が入り込んでいる可能性があります。' }, { t: '台風後に瓦・板金がずれた', d: '見えるずれの他に、隠れたずれがある場合があります。' }, ], durations: [ /* slot: TEXT-SERVICE-LEAK-DURATIONS */ { kind: '応急処置', day: '半日〜1日程度' }, { kind: '部分補修', day: '数日〜1週間程度' }, { kind: '全体改修', day: '1〜2週間程度' }, ], }, { id: 'interior', aliases: ['reform'], name: '内装・水回り' /* slot: TEXT-SERVICE-INTERIOR-NAME */, photo: ASSETS.svcFull, blurb: _A('svcInteriorBlurb', 'クロス張り替えや水回りの設備工事まで幅広く対応します。') /* slot: TEXT-SERVICE-INTERIOR-BLURB */, symptoms: [ /* slot: TEXT-SERVICE-INTERIOR-SYMPTOMS */ { t: 'クロスの汚れ・剥がれが気になる', d: '部屋ごとの張り替えなど、必要な範囲からご相談いただけます。' }, { t: '水回りの設備が古くなってきた', d: '使い方やご希望に合わせて、設備の入れ替えをご提案します。' }, { t: '内装や水回りもまとめて相談したい', d: '屋根・外壁以外の住まいの修理も、窓口を分けずにご相談いただけます。' }, ], durations: [ /* slot: TEXT-SERVICE-INTERIOR-DURATIONS */ { kind: '現地確認', day: '半日程度' }, { kind: '部分工事', day: '数日〜1週間程度' }, { kind: '複数箇所', day: '内容により要確認' }, ], }, { id: 'exterior', aliases: [], name: '玄関・外構' /* slot: TEXT-SERVICE-EXTERIOR-NAME */, photo: ASSETS.svcSmall, blurb: _A('svcExteriorBlurb', '玄関まわりや外構の工事で、快適な住まいに。') /* slot: TEXT-SERVICE-EXTERIOR-BLURB */, symptoms: [ /* slot: TEXT-SERVICE-EXTERIOR-SYMPTOMS */ { t: '玄関まわりの傷みが気になる', d: '玄関ドアや土間まわりの状態を見て、必要な工事を整理します。' }, { t: 'フェンス・塀の傾きや劣化がある', d: '安全面も含めて現地で確認し、補修の方法をご案内します。' }, { t: '外まわりをまとめて整えたい', d: '気になる箇所を整理し、優先順位をつけてご提案します。' }, ], durations: [ /* slot: TEXT-SERVICE-EXTERIOR-DURATIONS */ { kind: '現地確認', day: '半日程度' }, { kind: '部分工事', day: '数日〜1週間程度' }, { kind: '外構全体', day: '内容により要確認' }, ], }, { id: 'whole', aliases: ['maint'], name: '住まい全体の相談' /* slot: TEXT-SERVICE-WHOLE-NAME */, photo: ASSETS.svcMaint, blurb: _A('svcWholeBlurb', 'リフォームや将来の計画まで、住まい全体のご相談を承ります。') /* slot: TEXT-SERVICE-WHOLE-BLURB */, symptoms: [ /* slot: TEXT-SERVICE-WHOLE-SYMPTOMS */ { t: '築年数が経って状態を確認したい', d: '屋根材や板金まわりの状態を見て、必要な対応を整理します。' }, { t: '台風・大雨のあとに点検したい', d: '普段見えにくい屋根の上も、写真を交えて確認します。' }, { t: 'どこから手を付ければよいか相談したい', d: '気になる箇所を整理し、優先順位をつけてご提案します。' }, ], durations: [ /* slot: TEXT-SERVICE-WHOLE-DURATIONS */ { kind: '現地確認', day: '半日程度' }, { kind: '軽微補修', day: '1日〜数日程度' }, { kind: '定期対応', day: '内容により要確認' }, ], }, ]; // Generic placeholder for "photo we don't have yet" function PhotoPlaceholder({ label, ratio = '16/9', tone = 'warm', radius = 12, style }) { const tokens = window.R3_TOK; const bgA = tone === 'warm' ? tokens.placeholderWarmA : tokens.placeholderCoolA; const bgB = tone === 'warm' ? tokens.placeholderWarmB : tokens.placeholderCoolB; return (
[ {label} ]
); } // Cropping helper: cover-fit image inside a fixed aspect box function CoverImg({ src, srcSet, sizes, alt, ratio = '16/9', radius = 0, style, loading = 'lazy', decoding = 'async', fetchPriority, priority = false, dataEmptyContract, dataServiceId }) { const imageLoading = priority ? 'eager' : loading; const imageFetchPriority = priority ? 'high' : fetchPriority; const [failed, setFailed] = React.useState(false); React.useEffect(() => { setFailed(false); }, [src]); const [intrinsicWidth, intrinsicHeight] = ratio.split('/').map((value) => Number(value)); const imageAlt = alt == null ? coverImageAlt(src) : alt; const tokens = window.R3_TOK; if (!src || failed) { return (