// GREEN (E) — About page, faithful ricoas "リコアスについて" reproduction.
function GreenAbout() {
  const g = window.GREEN;
  const cream = '#f6f1dc';
  const mint = '#e7f3ec';
  const coral = '#ef7d5a';

  // dark-photo CTA band (about variant)
  const CTAdark = () => (
    <section style={{ position:'relative', padding:'54px 34px', overflow:'hidden' }}>
      <RealImage src={LSC_IMG.company} label="consult" tone="darkwood" style={{ position:'absolute', inset:0, width:'100%', height:'100%' }} />
      <div style={{ position:'absolute', inset:0, background:'rgba(28,38,30,0.74)' }} />
      <div style={{ position:'relative', textAlign:'center' }}>
        <div style={{ fontSize:13, fontWeight:700, color:'#fff', marginBottom:14 }}>コーティングの種類や費用について、お気軽にご相談ください。</div>
        <h2 style={{ color:'#fff', fontSize:29, fontWeight:800, lineHeight:1.5, margin:'0 0 26px' }}>リブスマイルは、フロアコーティング施工だけでなく、<br/>施工後のメンテナンスまで見据えたご提案を行っています。</h2>
        <div style={{ display:'inline-flex', flexDirection:'column', alignItems:'center' }}>
          <span style={{ background:'#fff', color:g.ink, borderRadius:999, padding:'6px 20px', fontSize:12, fontWeight:700, marginBottom:14 }}>はじめての導入で不安な方も、まずはお気軽にご相談ください。</span>
          <div style={{ display:'flex', gap:14 }}>
            <a style={{ background:coral, color:'#fff', borderRadius:10, padding:'15px 30px', fontSize:15, fontWeight:800, cursor:'pointer', display:'flex', alignItems:'center', gap:14 }}>無料で資料ダウンロード <span style={{ width:24, height:24, borderRadius:'50%', background:'rgba(255,255,255,0.25)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:12 }}>→</span></a>
            <a style={{ background:g.yellow, color:g.ink, borderRadius:10, padding:'15px 30px', fontSize:15, fontWeight:800, cursor:'pointer', display:'flex', alignItems:'center', gap:14 }}>無料で相談する <span style={{ width:24, height:24, borderRadius:'50%', background:'rgba(0,0,0,0.14)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:12 }}>→</span></a>
          </div>
        </div>
      </div>
    </section>
  );

  const strengths = [
    { img: LSC_IMG.company, t:['フロアコーティングの','会社として20年'], d:'経験、実績を積んだ熟練の職人とスタッフが在籍しています。', c:g.greenText },
    { img: LSC_IMG.uv, t:['施工は','「自社一貫施工」'], d:'配合から施工まで自社で完結。打ち合わせから施工中、完了まで安心しておまかせください。', c:g.greenText },
    { img: LSC_IMG.glass, t:['最長30年','保証制度'], d:'20年の実績経験があるからお約束できる長期保証。確かな品質・高い技術で、かゆい所にも手が届く対応力を提供します。', c:g.greenText },
    { img: LSC_IMG.petSilicon, t:['10年ずっと安心','アフターメンテナンス'], d:'不具合時の点検対応は無償で対応。さらに定期点検も長期で無償対応することが可能です。（※ご利用条件があります）', c:coral },
    { img: LSC_IMG.hero2, t:['長期の品質をお約束する','独自配合の技術力'], d:'研究室と現場を往復して仕上げた実用品質のコーティング剤。長く美しい床をお約束します。', c:coral },
    { img: LSC_IMG.silicon, t:['外壁・屋根塗装も','一括しておまかせください！'], d:'もともと塗装業。床だけでなく、住まい全体のメンテナンスも一切おまかせいただけます。', c:coral },
  ];

  const promises = [
    { no:'01', img: LSC_IMG.company, t:['こだわりと自信をもって','「品質の良品・確実な施工・','良いサービス」を提供します'], d:'ほとんどのお客様にとって床コーティングは一生に一度の買い物です。「もっと調べれば良かった」「他社で施工した友人に聞いたら価格も全然違う」such後悔の声があるのも事実です。', box:true },
    { no:'02', img: LSC_IMG.glass, t:['素材と用途に合わせて','最適な仕様をご提案'], d:'UV・シリコン・ガラス・セラミック・ペット対応の全5種。ご予算とお住まいに合わせて、無理のない最適な組み合わせをご提案します。' },
    { no:'03', img: LSC_IMG.uv, t:['20年以上の現場経験の','プロによる確かな施工'], d:'経験豊富な専門スタッフが丁寧に施工。安全性と耐久性を重視した高品質な仕上げを提供します。下地処理から養生まで、細部まで手を抜きません。' },
    { no:'04', img: LSC_IMG.petUV, t:['大切な家族にとって','安心できる自然素材'], d:'F☆☆☆☆相当の素材のみを使用。舐めても安心、抗菌・防カビ・滑り止め性能も第三者機関で検証済みです。' },
    { no:'05', img: LSC_IMG.company, t:['アフターサポートも安心'], d:'施工後のご相談・メンテナンスも地域密着の体制で迅速に対応。長いお付き合いを大切にしています。' },
  ];

  return (
    <div style={{ width:1440, fontFamily:'"Noto Sans JP",system-ui,sans-serif', color:g.ink, background:cream, overflow:'hidden', paddingBottom:78 }}>
      <GTopBar />

      {/* green header with breadcrumb + wave */}
      <div style={{ background:`linear-gradient(120deg, ${g.green}, ${g.greenDeep})`, padding:'16px 34px 0', position:'relative' }}>
        <div style={{ textAlign:'right', fontSize:11, color:'rgba(255,255,255,0.9)' }}>トップ ＞ リブスマイルについて</div>
        <GWave color={cream} dir="bottom" h={54} />
      </div>

      <div style={{ padding:'20px 34px 0', textAlign:'center' }}>
        <h1 style={{ fontSize:34, fontWeight:800, color:g.greenText, margin:0 }}>リブスマイルについて</h1>
      </div>

      {/* Hero card with tab strip + skewed photo */}
      <section style={{ padding:'36px 34px 0' }}>
        <div style={{ maxWidth:1000, margin:'0 auto' }}>
          <div style={{ display:'flex', gap:2, marginLeft:20 }}>
            {['お悩み','6つの強み','安心の保証内容'].map(t => (
              <a key={t} style={{ background:g.green, color:'#fff', borderRadius:'12px 12px 0 0', padding:'12px 22px', fontSize:13, fontWeight:800, cursor:'pointer', display:'flex', alignItems:'center', gap:8 }}>{t}<span style={{ width:18, height:18, borderRadius:'50%', background:'rgba(255,255,255,0.28)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:10 }}>↓</span></a>
            ))}
          </div>
          <div style={{ position:'relative', borderRadius:16, overflow:'hidden', boxShadow:g.shadow }}>
            <RealImage src={LSC_IMG.company} label="hero" tone="darkwood" style={{ width:'100%', aspectRatio:'21/9' }} />
            <div style={{ position:'absolute', inset:0, background:'linear-gradient(90deg, rgba(20,30,20,0.72) 0%, rgba(20,30,20,0.3) 45%, rgba(20,30,20,0) 70%)' }} />
            <div style={{ position:'absolute', left:44, top:'50%', transform:'translateY(-50%)', color:'#fff', maxWidth:440 }}>
              <h2 style={{ fontSize:34, fontWeight:800, lineHeight:1.4, margin:0 }}>リブスマイルは<br/>フロアコーティング一筋で20年</h2>
              <p style={{ fontSize:13, lineHeight:1.9, margin:'16px 0 0', color:'rgba(255,255,255,0.9)' }}>
                塗装業として住まいのメンテナンスを支えてきました。フローリングの奥深さに魅せられ、コーティング剤の配合・開発まで事業を拡大。数多くの施工実績と技術力を積み重ね、安心してご利用いただけるサービスを提供しています。
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* お悩み */}
      <section style={{ padding:'64px 34px 0', textAlign:'center' }}>
        <div style={{ fontSize:14, fontWeight:800, color:g.greenText, marginBottom:12 }}>はじめてフロアコーティングをご検討の方へ</div>
        <h2 style={{ fontSize:38, fontWeight:800, lineHeight:1.4, margin:0, color:g.greenText }}>こんな<span style={{ color:coral }}>お悩み</span>は<br/>ありませんか？</h2>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:20, maxWidth:900, margin:'40px auto 0' }}>
          {['ワックスの塗り直しが大変で、手間を減らしたい','コーティングを検討しているけど、どこに相談すればいいか分からない','保証やアフターメンテナンスが受けられるか心配','赤ちゃんやペットがいても、安心して使えるか知りたい'].map((w,i) => (
            <div key={i} style={{ background:'#fff', border:`2px solid ${g.green}`, borderRadius:999, padding:'24px 30px', fontSize:15, fontWeight:800, color:coral, lineHeight:1.6, display:'flex', alignItems:'center', justifyContent:'center', minHeight:88 }}>{w}</div>
          ))}
        </div>
        {/* arrow */}
        <div style={{ display:'flex', justifyContent:'center', margin:'8px 0 0' }}>
          <div style={{ width:0, height:0, borderLeft:'32px solid transparent', borderRight:'32px solid transparent', borderTop:`26px solid ${g.green}`, marginTop:20 }} />
        </div>
        <h3 style={{ fontSize:30, fontWeight:800, lineHeight:1.55, color:g.greenText, margin:'24px 0 0' }}>
          リブスマイルなら開発から施工、<br/>保証からアフターサポートまで<br/>一貫して<span style={{ color:coral }}>サポート</span>します
        </h3>
        {/* circular photos */}
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:20, maxWidth:1100, margin:'44px auto 0' }}>
          {[LSC_IMG.uv, LSC_IMG.company, LSC_IMG.glass, LSC_IMG.hero2].map((src,i) => (
            <RealImage key={i} src={src} label="photo" tone="floor" style={{ aspectRatio:'1', borderRadius:'50%', boxShadow:g.shadowSoft }} />
          ))}
        </div>
      </section>

      <div style={{ height:56 }} />
      <CTAdark />

      {/* 6つの強み (mint bg) */}
      <section style={{ background:mint, padding:'64px 34px 72px' }}>
        <div style={{ textAlign:'center', marginBottom:44 }}>
          <div style={{ fontSize:14, fontWeight:800, color:g.greenText }}>リブスマイルの</div>
          <h2 style={{ fontSize:40, fontWeight:800, margin:'6px 0 0', color:g.greenText }}>6つの<span style={{ color:coral }}>強み</span></h2>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:'44px 32px', maxWidth:1060, margin:'0 auto' }}>
          {strengths.map((s,i) => (
            <div key={i} style={{ textAlign:'center' }}>
              <div style={{ padding:5, borderRadius:'50% 50% 46% 46%', background:`linear-gradient(150deg, ${g.green}, ${g.greenDeep})`, marginBottom:18 }}>
                <RealImage src={s.img} label="strength" tone="floor" style={{ aspectRatio:'16/11', borderRadius:'50% 50% 44% 44%' }} />
              </div>
              <h3 style={{ fontSize:20, fontWeight:800, lineHeight:1.5, margin:'0 0 12px', color:s.c }}>{s.t.map((l,j) => <span key={j}>{l}<br/></span>)}</h3>
              <p style={{ fontSize:13, lineHeight:1.9, color:g.sub, margin:0, textAlign:'left' }}>{s.d}</p>
            </div>
          ))}
        </div>
      </section>

      <CTAdark />

      {/* お客様へのお約束 (green band) */}
      <section style={{ background:`linear-gradient(180deg, ${g.green} 0%, ${g.greenDeep} 100%)`, padding:'64px 34px 76px' }}>
        <h2 style={{ textAlign:'center', fontSize:36, fontWeight:800, color:'#fff', margin:'0 0 48px' }}>お客様への<span style={{ color:g.yellow }}>お約束</span></h2>
        <div style={{ maxWidth:1000, margin:'0 auto', display:'flex', flexDirection:'column', gap:44 }}>
          {promises.map((p,i) => (
            <div key={i}>
              <div style={{ display:'grid', gridTemplateColumns: i%2===0 ? '1.2fr 0.8fr' : '0.8fr 1.2fr', gap:40, alignItems:'center' }}>
                <div style={{ order: i%2===0 ? 1 : 2 }}>
                  <div style={{ width:44, height:44, borderRadius:'50%', border:'2px solid rgba(255,255,255,0.6)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'Archivo,sans-serif', fontWeight:800, fontStyle:'italic', fontSize:16, marginBottom:16 }}>{p.no}</div>
                  <h3 style={{ fontSize:24, fontWeight:800, color:'#fff', lineHeight:1.5, margin:'0 0 14px' }}>{p.t.map((l,j) => <span key={j}>{l}<br/></span>)}</h3>
                  <p style={{ fontSize:13.5, lineHeight:1.95, color:'rgba(255,255,255,0.9)', margin:0 }}>{p.d}</p>
                </div>
                <RealImage src={p.img} label="promise" tone="darkwood" style={{ order: i%2===0 ? 2 : 1, aspectRatio:'4/3', borderRadius:'50%', boxShadow:g.shadow }} />
              </div>
              {p.box && (
                <div style={{ border:'1px solid rgba(255,255,255,0.4)', borderRadius:16, padding:'26px 30px', marginTop:28 }}>
                  <div style={{ fontSize:15, fontWeight:800, color:'#fff', marginBottom:14 }}>わたしたちリブスマイルは</div>
                  {[['全メーカー・全工法の中から、','メリット・デメリットも十分に比較検討','したうえでご納得いただく。'],['施工時から10年先を考えた','最良かつ確実な施工','によってご安心いただく。'],['施工後も安心','してお付き合いいただけるサポート。']].map((row,k) => (
                    <div key={k} style={{ display:'flex', gap:10, fontSize:13.5, color:'#fff', padding:'5px 0', lineHeight:1.7 }}>
                      <span style={{ color:g.yellow }}>・</span>
                      <span>{row.map((seg,si) => si===1 ? <span key={si} style={{ color:g.yellow, fontWeight:800 }}>{seg}</span> : <span key={si}>{seg}</span>)}</span>
                    </div>
                  ))}
                  <p style={{ fontSize:12.5, lineHeight:1.9, color:'rgba(255,255,255,0.85)', margin:'14px 0 0' }}>
                    これらのサービスを提供可能な豊富な知識と経験を持っております。その提供と努力を惜しみませんので、施工をご検討の方は是非一度お声掛けくださいませ。
                  </p>
                </div>
              )}
            </div>
          ))}
        </div>
      </section>

      {/* 安心の保証内容 (white doc section) */}
      <section style={{ background:cream, padding:'64px 34px 72px' }}>
        <h2 style={{ textAlign:'center', fontSize:32, fontWeight:800, color:g.greenText, margin:'0 0 12px' }}>安心の<span style={{ color:coral }}>保証内容</span></h2>
        <p style={{ textAlign:'center', fontSize:14, color:g.sub, margin:'0 0 28px' }}>リブスマイルの3つの保証で、施工後も末永く安心をお届けします。</p>
        <div style={{ display:'flex', justifyContent:'center', gap:12, marginBottom:32 }}>
          {['① 製品保証','② 施工保証','③ 長期メンテ'].map(t => (
            <span key={t} style={{ background:'#fff', border:`1.5px solid ${g.green}`, color:g.greenText, borderRadius:999, padding:'10px 22px', fontSize:13, fontWeight:800 }}>{t}</span>
          ))}
        </div>
        <div style={{ maxWidth:900, margin:'0 auto', background:'#fff', borderRadius:16, boxShadow:g.shadowSoft, overflow:'hidden' }}>
          {[
            { no:'1', t:'製品保証', d:'コーティング被膜の剥離・著しい変色・膨れ等の初期不良に対し、最長30年の製品保証をお付けします（コーティング種類・施工条件により異なります）。', items:['被膜の剥離・浮き','著しい変色・白化','通常使用における摩耗劣化'] },
            { no:'2', t:'施工保証', d:'施工に起因する不具合が発生した場合、無償で再施工・補修対応いたします。下地処理から仕上げまで、責任をもって対応します。', items:['施工不良に起因するムラ・気泡','養生不良による周辺への影響','塗り継ぎ部の不具合'] },
            { no:'3', t:'長期メンテナンス', d:'施工後も定期点検を実施。トラブル時の点検対応は無償で承ります（※ご利用条件があります）。長いお付き合いを大切にします。', items:['定期点検（無償）','トラブル時の点検対応','お手入れ方法のアドバイス'] },
          ].map((s,i) => (
            <div key={i} style={{ padding:'32px 40px', borderTop: i>0?`1px solid ${g.line}`:'none' }}>
              <div style={{ textAlign:'center', marginBottom:16 }}>
                <div style={{ fontFamily:'Archivo,sans-serif', fontWeight:800, fontStyle:'italic', fontSize:28, color:g.green }}>{s.no}</div>
                <h3 style={{ fontSize:22, fontWeight:800, margin:'2px 0 0', color:g.ink }}>{s.t}</h3>
              </div>
              <p style={{ fontSize:13.5, lineHeight:2, color:g.sub, margin:'0 0 16px' }}>{s.d}</p>
              <div style={{ display:'flex', gap:10, flexWrap:'wrap', justifyContent:'center' }}>
                {s.items.map(it => <span key={it} style={{ background:g.lightGreen, color:g.greenText, borderRadius:8, padding:'8px 16px', fontSize:12.5, fontWeight:700 }}>✓ {it}</span>)}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* bottom nav to about pages */}
      <section style={{ background:cream, padding:'0 34px 64px', textAlign:'center' }}>
        <h3 style={{ fontSize:22, fontWeight:800, color:g.greenText, margin:'0 0 24px' }}>リブスマイルについて</h3>
        <div style={{ display:'flex', justifyContent:'center', gap:14, flexWrap:'wrap' }}>
          {['会社概要','サービス','お問い合わせ'].map(t => (
            <a key={t} style={{ background:'#fff', border:`1.5px solid ${g.green}`, color:g.greenText, borderRadius:999, padding:'14px 34px', fontSize:14, fontWeight:800, cursor:'pointer' }}>{t} →</a>
          ))}
        </div>
      </section>

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