// GREEN (D) — TOP page, faithful ricoas reproduction for LIVSMILE.
function GreenTop() {
  const g = window.GREEN;
  const services = [
    { jp:'太陽光発電システム改めUVコート', title:'UVコート', catch:'塗ったその日に使える、いちばん人気', lead:'はじめよう、\n手間いらずのフロアコーティング', img: LSC_IMG.uv, tone:'darkwood' },
    { jp:'蓄電池', title:'シリコン・ガラスコート', catch:'素材と用途で選べる本格仕様', lead:'長く美しく、\n暮らしに寄り添う被膜を', img: LSC_IMG.glass, tone:'stone' },
    { jp:'V2H', title:'ワンニャンSMILE', catch:'ペット・赤ちゃんに、いちばん安心', lead:'すべりにくく舐めても安心、\n家族みんなにやさしい床へ', img: LSC_IMG.petUV, tone:'living' },
  ];
  return (
    <div style={{ width:1440, fontFamily:'"Noto Sans JP",system-ui,sans-serif', color:g.ink, background:'#fff', overflow:'hidden', paddingBottom:78 }}>
      <GTopBar />

      {/* ══ HERO ══ */}
      <section style={{ position:'relative', background:`linear-gradient(120deg, ${g.green} 0%, ${g.greenDeep} 100%)`, overflow:'hidden' }}>
        {/* photo right */}
        <div style={{ position:'absolute', right:0, top:0, bottom:0, width:'52%' }}>
          <RealImage src={LSC_IMG.company} label="staff" tone="darkwood" style={{ width:'100%', height:'100%' }} objectPosition="center" />
          <div style={{ position:'absolute', inset:0, background:`linear-gradient(100deg, ${g.green} 0%, rgba(108,178,58,0.5) 30%, rgba(108,178,58,0) 60%)` }} />
        </div>
        {/* deco swoosh */}
        <div style={{ position:'absolute', left:-100, top:-60, width:520, height:520, borderRadius:'50%', background:'rgba(255,255,255,0.08)' }} />
        <div style={{ position:'relative', padding:'52px 34px 0', minHeight:560 }}>
          <span style={{ display:'inline-block', background:'#fff', color:g.greenText, borderRadius:999, padding:'9px 24px', fontSize:15, fontWeight:800 }}>フロアコーティング一筋・暮らしに笑顔を</span>
          <h1 style={{ color:'#fff', fontSize:58, fontWeight:800, lineHeight:1.32, margin:'22px 0 0', textShadow:'0 2px 12px rgba(0,0,0,0.15)' }}>
            床のように、まっすぐに。<br/>家族の毎日を照らす。
          </h1>
          {/* CTA */}
          <div style={{ marginTop:40 }}><GDualCTA /></div>
          {/* badges */}
          <div style={{ display:'flex', gap:14, marginTop:40 }}>
            {[['品質保証','30','年'],['安全等級','F☆☆☆☆',''],['ペット安心','◎','設計']].map((b,i) => (
              <div key={i} style={{ width:104, height:104, borderRadius:'50%', background:'#fff', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', boxShadow:g.shadow, textAlign:'center' }}>
                <span style={{ fontSize:10, color:g.greenText, fontWeight:800 }}>{b[0]}</span>
                <span style={{ fontFamily:'Archivo,sans-serif', fontWeight:800, fontSize:b[1].length>3?18:30, fontStyle:'italic', color:g.orange, lineHeight:1 }}>{b[1]}<span style={{ fontSize:11, color:g.ink }}>{b[2]}</span></span>
              </div>
            ))}
            <div style={{ alignSelf:'flex-end', fontSize:10, color:'rgba(255,255,255,0.85)', paddingBottom:6 }}>※自社基準・試験に基づく</div>
          </div>
        </div>
        {/* quick links strip */}
        <div style={{ position:'relative', display:'grid', gridTemplateColumns:'repeat(4,1fr)', marginTop:36, background:'rgba(0,0,0,0.14)' }}>
          {[['✦','リブスマイルの想いを知りたい'],['☀','コーティングについて知りたい'],['✎','導入前と後でどれくらい違う？'],['☺','口コミが知りたい']].map((q,i) => (
            <a key={i} style={{ display:'flex', alignItems:'center', gap:12, padding:'20px 26px', color:'#fff', fontSize:14, fontWeight:700, cursor:'pointer', borderLeft: i>0?'1px solid rgba(255,255,255,0.18)':'none' }}>
              <span style={{ fontSize:18, color:g.yellow }}>{q[0]}</span>{q[1]}
            </a>
          ))}
        </div>
      </section>

      {/* ══ PICK UP ══ */}
      <section style={{ padding:'44px 34px 20px', textAlign:'center' }}>
        <div style={{ fontFamily:'Archivo,sans-serif', fontSize:14, fontWeight:800, letterSpacing:'0.2em', color:g.green, marginBottom:18 }}>PICK UP</div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:16 }}>
          {[['期間限定','新築・引越しキャンペーン',g.green],['人気No.1','UVコート 施工プラン',g.orange],['お役立ち','お手入れコスト診断',g.yellow]].map((p,i) => (
            <a key={i} style={{ background:p[2], color: i===2?g.ink:'#fff', borderRadius:16, padding:'22px 24px', textAlign:'left', display:'flex', flexDirection:'column', gap:6, cursor:'pointer', boxShadow:g.shadowSoft }}>
              <span style={{ fontSize:12, fontWeight:800, opacity:0.9 }}>{p[0]}</span>
              <span style={{ fontSize:19, fontWeight:800 }}>{p[1]} →</span>
            </a>
          ))}
        </div>
      </section>

      {/* ══ REASON ══ */}
      <section style={{ position:'relative', marginTop:40 }}>
        <GWave color={g.lightGreen} dir="top" />
        <div style={{ background:g.lightGreen, padding:'40px 34px 72px' }}>
          <GHead kicker="選ばれる理由">
            フロアコーティング一筋<br/>
            <span>独自配合<GEm size={58}>5</GEm>種・最長<GEm size={58}>30</GEm>年保証の安心</span>
          </GHead>
          {/* 6 circular badges */}
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:'28px 24px', maxWidth:1120, margin:'0 auto' }}>
            <GBadge>
              <GPill>開発・施工</GPill>
              <div><GEm size={54}>2019</GEm><span style={{ fontSize:15, fontWeight:800, color:g.ink }}>年〜</span></div>
              <p style={{ fontSize:12.5, lineHeight:1.8, color:g.sub, margin:'8px 0 0' }}>塗装業として創業以来、現場で技術を磨き続けています。</p>
            </GBadge>
            <GBadge>
              <GPill>独自配合コート</GPill>
              <div><GEm size={54}>5</GEm><span style={{ fontSize:15, fontWeight:800, color:g.ink }}>種類</span></div>
              <p style={{ fontSize:12.5, lineHeight:1.8, color:g.sub, margin:'8px 0 0' }}>用途で選べる5種を自社で設計・検証。最適な仕様をご提案します。</p>
            </GBadge>
            <GBadge>
              <div style={{ display:'flex', gap:8 }}><GPill>製品保証</GPill><GPill>メンテ</GPill></div>
              <div><GEm size={44}>30</GEm><span style={{ fontSize:13, fontWeight:800, color:g.ink }}>年</span><span style={{ margin:'0 6px' }} /><GEm size={44}>10</GEm><span style={{ fontSize:13, fontWeight:800, color:g.ink }}>年</span></div>
              <p style={{ fontSize:12.5, lineHeight:1.8, color:g.sub, margin:'8px 0 0' }}>剥離も塗り直しも不要。定期点検も長期で無償対応します。</p>
            </GBadge>
            {[
              { i:'🛠', t:'高品質な施工', d:'経験豊富な専門スタッフが丁寧に施工。安全性と耐久性を重視した高品質な仕上げを提供します。' },
              { i:'💰', t:'優れたコストパフォーマンス', d:'開発から施工まで自社一貫。中間マージンがなく、適正価格で長期のお得を実現します。' },
              { i:'🤝', t:'地域密着による迅速な対応', d:'ご相談から施工、アフターサポートまで、地域密着の体制で迅速に対応いたします。' },
            ].map((f,i) => (
              <GBadge key={i}>
                <GPill>{f.t}</GPill>
                <div style={{ width:56, height:56, borderRadius:'50%', background:g.lightGreen, display:'flex', alignItems:'center', justifyContent:'center', fontSize:26, margin:'6px 0' }}>{f.i}</div>
                <p style={{ fontSize:12.5, lineHeight:1.8, color:g.sub, margin:0 }}>{f.d}</p>
              </GBadge>
            ))}
          </div>
          {/* certifications */}
          <div style={{ marginTop:44, textAlign:'center' }}>
            <span style={{ display:'inline-block', background:g.greenText, color:'#fff', borderRadius:999, padding:'7px 22px', fontSize:13, fontWeight:800, marginBottom:18 }}>対応床材・認証</span>
            <div style={{ display:'flex', gap:12, justifyContent:'center', flexWrap:'wrap' }}>
              {['複合フローリング','無垢材','クッションフロア','フロアタイル','F☆☆☆☆','抗菌SIAA相当','防カビ試験済','滑り止め検証済'].map(m => (
                <span key={m} style={{ background:'#fff', borderRadius:999, padding:'11px 22px', fontSize:13, fontWeight:700, boxShadow:g.shadowSoft }}>{m}</span>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ══ CTA BAND ══ */}
      <GCTAband />

      {/* ══ SERVICE ══ */}
      <section style={{ padding:'72px 34px 76px' }}>
        <GHead kicker="サービスのご案内">
          フロアコーティングは<GEm size={54}>一生に一度</GEm>の買い物です
        </GHead>
        <p style={{ textAlign:'center', fontSize:15, color:g.sub, margin:'-24px 0 44px' }}>フロアコーティング一筋のリブスマイルに、安心してお任せください。</p>
        <div style={{ maxWidth:1080, margin:'0 auto', display:'flex', flexDirection:'column', gap:0 }}>
          {services.map((s,i) => (
            <div key={i} style={{ display:'grid', gridTemplateColumns:'0.9fr 1.1fr', gap:40, alignItems:'center', padding:'36px 0', borderTop: i>0?`1px solid ${g.line}`:'none' }}>
              <RealImage src={s.img} label={s.title} tone={s.tone} style={{ borderRadius:18, aspectRatio:'4/3', boxShadow:g.shadowSoft }} />
              <div>
                <span style={{ display:'inline-block', background:g.lightGreen, color:g.greenText, borderRadius:999, padding:'6px 16px', fontSize:12.5, fontWeight:800 }}>{s.catch}</span>
                <h3 style={{ fontSize:30, fontWeight:800, margin:'16px 0 12px' }}>{s.title}</h3>
                <p style={{ fontSize:15, lineHeight:1.9, color:g.sub, margin:'0 0 24px', whiteSpace:'pre-line' }}>{s.lead}</p>
                <div style={{ display:'flex', gap:12 }}>
                  <a style={{ background:'#fff', color:g.greenText, border:`2px solid ${g.green}`, borderRadius:12, padding:'13px 28px', fontSize:14, fontWeight:800, cursor:'pointer' }}>詳しく見る →</a>
                  <a style={{ background:g.orange, color:'#fff', borderRadius:12, padding:'13px 28px', fontSize:14, fontWeight:800, cursor:'pointer' }}>無料で相談する →</a>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ══ 見積り・ご相談 dark band ══ */}
      <section style={{ position:'relative', padding:'56px 34px', textAlign:'center', overflow:'hidden' }}>
        <RealImage src={LSC_IMG.uv} label="floor detail" tone="coat" style={{ position:'absolute', inset:0, width:'100%', height:'100%' }} />
        <div style={{ position:'absolute', inset:0, background:'rgba(30,40,26,0.78)' }} />
        <div style={{ position:'relative' }}>
          <div style={{ fontSize:13, fontWeight:800, color:g.yellow, letterSpacing:'0.1em' }}>お見積り・ご相談</div>
          <h2 style={{ color:'#fff', fontSize:30, fontWeight:800, margin:'12px 0 24px' }}>コーティングの種類や費用について、<br/>お気軽にご相談ください。</h2>
          <div style={{ display:'flex', justifyContent:'center', gap:18, alignItems:'center', flexWrap:'wrap' }}>
            <a style={{ background:g.orange, color:'#fff', borderRadius:14, padding:'17px 34px', fontSize:15, fontWeight:800, cursor:'pointer', boxShadow:g.shadow }}>無料で現地調査・見積り相談 →</a>
            <div style={{ color:'#fff', display:'flex', alignItems:'center', gap:10 }}>
              <span>☎</span><span style={{ fontFamily:'Archivo,sans-serif', fontWeight:800, fontSize:30, fontStyle:'italic' }}>080-2392-9517</span>
              <span style={{ fontSize:12, opacity:0.85 }}>9:00〜19:00</span>
            </div>
          </div>
        </div>
      </section>

      {/* ══ AREA ══ */}
      <section style={{ padding:'72px 34px' }}>
        <GHead kicker="施工対応エリア">近畿一円、丁寧にお伺いします</GHead>
        <div style={{ background:'#fff', border:`1px solid ${g.line}`, borderRadius:24, boxShadow:g.shadowSoft, maxWidth:1000, margin:'0 auto', display:'grid', gridTemplateColumns:'0.8fr 1.2fr', overflow:'hidden' }}>
          <RealImage src={LSC_IMG.hero3} label="area map" tone="cream" style={{ minHeight:260 }} />
          <div style={{ padding:'32px 36px' }}>
            {[['大阪府','大阪市・吹田市・豊中市・堺市・高槻市・枚方市・茨木市 ほか全域'],['兵庫県','神戸市・西宮市・尼崎市・芦屋市・宝塚市・伊丹市 ほか'],['京都府','京都市・宇治市・長岡京市・向日市 ほか'],['奈良県','奈良市・生駒市・大和郡山市・橿原市 ほか']].map((r,i) => (
              <div key={i} style={{ display:'grid', gridTemplateColumns:'80px 1fr', gap:14, padding:'13px 0', borderTop: i>0?`1px solid ${g.line}`:'none', alignItems:'baseline' }}>
                <span style={{ fontSize:14, fontWeight:800, color:g.greenText }}>{r[0]}</span>
                <span style={{ fontSize:12.5, lineHeight:1.8, color:g.sub }}>{r[1]}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ══ VOICE (green band) ══ */}
      <section style={{ position:'relative' }}>
        <GWave color={g.lightGreen} dir="top" />
        <div style={{ background:g.lightGreen, padding:'40px 34px 72px' }}>
          <GHead kicker="お客様の声">
            リブスマイルに寄せられる<br/><span><GEm size={52}>お客様の声</GEm>をご紹介します</span>
          </GHead>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:20, maxWidth:1120, margin:'0 auto' }}>
            {[
              { area:'大阪府吹田市 K様', date:'2026.06.29', reason:['安全性','価格'], q:'赤ちゃんが生まれる前に。舐めても安心と聞いて即決でした。床がサラサラで掃除も本当に楽に…' },
              { area:'兵庫県西宮市 T様', date:'2026.06.18', reason:['対応の早さ'], q:'当日に入居できたのが本当に助かりました。営業さんの説明も丁寧で、仕上がりの艶も上品で…' },
              { area:'京都市左京区 M様', date:'2026.04.28', reason:['ペット対応','実績'], q:'犬が滑らなくなって足腰の負担が減ったみたい。相談から施工までとても丁寧に対応いただき…' },
            ].map((v,i) => (
              <div key={i} style={{ background:'#fff', borderRadius:20, padding:'24px 24px 20px', boxShadow:g.shadowSoft }}>
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:12 }}>
                  <span style={{ display:'flex', alignItems:'center', gap:8, fontSize:14, fontWeight:800 }}>
                    <span style={{ width:34, height:34, borderRadius:'50%', background:g.lightGreen, display:'flex', alignItems:'center', justifyContent:'center', fontSize:15 }}>😊</span>{v.area}
                  </span>
                  <span style={{ fontFamily:'Archivo,sans-serif', fontSize:11, color:g.sub }}>{v.date}</span>
                </div>
                <div style={{ fontSize:12, fontWeight:800, color:g.greenText, marginBottom:6 }}>選んだ決め手は？</div>
                <div style={{ display:'flex', gap:6, flexWrap:'wrap', marginBottom:12 }}>
                  {v.reason.map(r => <span key={r} style={{ background:g.lightGreen, color:g.greenText, borderRadius:999, padding:'4px 12px', fontSize:11, fontWeight:700 }}>{r}</span>)}
                </div>
                <p style={{ fontSize:13, lineHeight:1.9, color:g.ink, margin:'0 0 14px' }}>「{v.q}」</p>
                <a style={{ fontSize:13, fontWeight:800, color:g.orange, cursor:'pointer' }}>詳しく見る →</a>
              </div>
            ))}
          </div>

          {/* WORKS */}
          <div style={{ marginTop:64 }}>
            <GHead kicker="施工実績">
              有資格者による<GEm size={52}>質の高い施工</GEm>を提供します
            </GHead>
            <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:20, maxWidth:1120, margin:'0 auto' }}>
              {[
                { img: LSC_IMG.hero2, date:'2026.06.26', t:'【大阪府吹田市 H様邸】UVコート 戸建てLDK 24㎡', tags:['UV','戸建て'] },
                { img: LSC_IMG.glass, date:'2026.06.22', t:'【京都市 Cafe様】ガラスコート 店舗 60㎡ 高光沢', tags:['ガラス','店舗'] },
                { img: LSC_IMG.petSilicon, date:'2026.06.12', t:'【兵庫県神戸市 クリニック様】セラミック 待合 40㎡', tags:['セラミック','医療'] },
              ].map((w,i) => (
                <a key={i} style={{ background:'#fff', borderRadius:20, overflow:'hidden', boxShadow:g.shadowSoft, cursor:'pointer', display:'flex', flexDirection:'column' }}>
                  <RealImage src={w.img} label="work" tone="floor" style={{ aspectRatio:'16/10' }} />
                  <div style={{ padding:'18px 20px' }}>
                    <div style={{ fontFamily:'Archivo,sans-serif', fontSize:12, color:g.sub, fontWeight:600 }}>{w.date}</div>
                    <div style={{ fontSize:13.5, fontWeight:700, lineHeight:1.6, margin:'6px 0 12px' }}>{w.t}</div>
                    <div style={{ display:'flex', gap:8 }}>
                      {w.tags.map(t => <span key={t} style={{ background:g.lightGreen, color:g.greenText, borderRadius:999, padding:'4px 12px', fontSize:11, fontWeight:700 }}>{t}</span>)}
                    </div>
                  </div>
                </a>
              ))}
            </div>
            <div style={{ textAlign:'center', marginTop:32 }}>
              <a style={{ display:'inline-block', background:'#fff', color:g.greenText, border:`2px solid ${g.green}`, borderRadius:12, padding:'14px 34px', fontSize:14, fontWeight:800, cursor:'pointer' }}>施工実績の一覧へ →</a>
            </div>
          </div>
        </div>
      </section>

      {/* ══ CTA BAND ══ */}
      <GCTAband />

      {/* ══ COMPANY ══ */}
      <section style={{ padding:'72px 34px 80px' }}>
        <GHead kicker="会社案内">リブスマイルについて</GHead>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1.05fr', gap:48, alignItems:'center', maxWidth:1120, margin:'0 auto' }}>
          <div>
            <div style={{ fontSize:12, fontWeight:800, color:g.green, letterSpacing:'0.1em' }}>企業理念</div>
            <h3 style={{ fontSize:30, fontWeight:800, margin:'10px 0 20px', lineHeight:1.5 }}>暮らしに笑顔を、<br/>ビジネスに改革を。</h3>
            <p style={{ fontSize:14.5, lineHeight:2.1, color:g.sub, margin:'0 0 26px' }}>
              もともと塗装業として地域のお客様と向き合うなかで、フローリングという素材の奥深さに魅せられ、コーティング剤の配合・開発まで事業を広げてきました。床から、暮らしとビジネスの両方を明るくしていきます。
            </p>
            <a style={{ display:'inline-block', background:'#fff', color:g.greenText, border:`2px solid ${g.green}`, borderRadius:12, padding:'14px 30px', fontSize:14, fontWeight:800, cursor:'pointer' }}>詳しく見る →</a>
          </div>
          <RealImage src={LSC_IMG.hero2} label="team" tone="floor" style={{ borderRadius:24, aspectRatio:'4/3', boxShadow:g.shadowSoft }} />
        </div>
      </section>

      <GCTAband />
      <GFooter />
      <GStickyBar />
    </div>
  );
}
window.GreenTop = GreenTop;