// WARM direction (C) — ricoas-faithful: heavy staging + framing.
// Speech-bubble CTAs, ribbon tabs, circular guarantee badges, emphasized
// italic numbers in headings, repeated staff-photo CTA bands, sticky
// bottom action bar. Warm cream + terracotta + sun.
function WarmTop() {
  const c = {
    bg: '#fff8ef',
    surface: '#ffffff',
    ink: '#2b2118',
    sub: '#857769',
    line: 'rgba(43,33,24,0.10)',
    primary: '#e8802f',
    primaryDk: '#c5641c',
    sun: '#f6b73f',
    green: '#5aa04a',
    soft: '#fdeee0',
    soft2: '#fbe4cf',
    shadow: '0 24px 50px -28px rgba(180,95,25,0.45)',
    shadowSoft: '0 16px 36px -26px rgba(180,95,25,0.4)',
  };
  const navLinks = ['ABOUT', 'PRODUCT', 'REASON', 'WORKS', 'VOICE', 'FRANCHISE', 'COMPANY', 'CONTACT'];

  // ── staging primitives ──────────────────────────────────────
  // Big emphasized italic number (ricoas signature)
  const Em = ({ children, size = 88 }) => (
    <span style={{ fontFamily:'"Archivo", sans-serif', fontStyle:'italic', fontWeight:800, color:c.primary, fontSize:size, lineHeight:0.9, letterSpacing:'-0.02em', margin:'0 4px', verticalAlign:'-0.06em' }}>{children}</span>
  );
  // Centered section header: EN kicker + JP title
  const SectionHead = ({ en, children, light }) => (
    <div style={{ textAlign:'center', marginBottom:44 }}>
      <div style={{ display:'inline-flex', alignItems:'center', gap:12, marginBottom:16 }}>
        <span style={{ width:26, height:2, background:c.primary, display:'inline-block' }} />
        <span style={{ fontFamily:'"Archivo",sans-serif', fontSize:14, fontWeight:800, letterSpacing:'0.2em', color:c.primary }}>{en}</span>
        <span style={{ width:26, height:2, background:c.primary, display:'inline-block' }} />
      </div>
      <div style={{ fontSize:34, fontWeight:800, lineHeight:1.4, color: light ? '#fff' : c.ink }}>{children}</div>
    </div>
  );
  // Speech bubble (points down to the button)
  const Bubble = ({ children, bg = c.ink, color = '#fff' }) => (
    <div style={{ position:'relative', background:bg, color, fontSize:13, fontWeight:700, padding:'9px 18px', borderRadius:12, marginBottom:12, whiteSpace:'nowrap', boxShadow:'0 6px 14px -8px rgba(0,0,0,0.4)' }}>
      {children}
      <span style={{ position:'absolute', bottom:-6, left:'50%', transform:'translateX(-50%) rotate(45deg)', width:12, height:12, background:bg }} />
    </div>
  );
  // The two signature CTA buttons with bubbles
  const DualCTA = ({ center }) => (
    <div style={{ display:'flex', gap:22, justifyContent: center ? 'center' : 'flex-start', flexWrap:'wrap' }}>
      <div style={{ display:'flex', flexDirection:'column', alignItems:'center' }}>
        <Bubble>導入費用は？どれくらいお得なの？</Bubble>
        <a style={{ display:'inline-flex', alignItems:'center', gap:12, background:c.surface, color:c.primaryDk, border:`2px solid ${c.primary}`, borderRadius:999, padding:'18px 32px', fontSize:16, fontWeight:800, cursor:'pointer', boxShadow:c.shadowSoft }}>
          料金シミュレーション<span style={{ fontFamily:'Archivo,sans-serif' }}>→</span>
        </a>
      </div>
      <div style={{ display:'flex', flexDirection:'column', alignItems:'center' }}>
        <Bubble bg={c.green}>経験豊富なプロが対応します</Bubble>
        <a style={{ display:'inline-flex', alignItems:'center', gap:12, background:`linear-gradient(120deg, ${c.sun}, ${c.primary})`, color:'#fff', borderRadius:999, padding:'18px 34px', fontSize:16, fontWeight:800, cursor:'pointer', boxShadow:c.shadow }}>
          無料で現地調査・見積り<span style={{ fontFamily:'Archivo,sans-serif' }}>→</span>
        </a>
      </div>
    </div>
  );
  // Ribbon tab (sits atop CTA bands)
  const Ribbon = ({ children }) => (
    <div style={{ display:'flex', justifyContent:'center', marginBottom:-1 }}>
      <div style={{ position:'relative', background:c.ink, color:'#fff', fontSize:15, fontWeight:700, padding:'13px 34px', borderRadius:'14px 14px 0 0', letterSpacing:'0.02em' }}>
        {children}
        <span style={{ position:'absolute', left:-16, bottom:0, width:16, height:16, background:c.ink, clipPath:'polygon(100% 0, 100% 100%, 0 100%)' }} />
        <span style={{ position:'absolute', right:-16, bottom:0, width:16, height:16, background:c.ink, clipPath:'polygon(0 0, 0 100%, 100% 100%)' }} />
      </div>
    </div>
  );
  // Circular guarantee badge (double ring)
  const Badge = ({ big, small, unit }) => (
    <div style={{ width:118, height:118, borderRadius:'50%', background:c.surface, border:`2px solid ${c.sun}`, boxShadow:'0 10px 22px -14px rgba(180,95,25,0.6)', display:'flex', alignItems:'center', justifyContent:'center', position:'relative' }}>
      <div style={{ position:'absolute', inset:6, borderRadius:'50%', border:`1px dashed ${c.soft2}` }} />
      <div style={{ textAlign:'center' }}>
        <div style={{ fontSize:11, color:c.sub, fontWeight:700 }}>{small}</div>
        <div style={{ fontFamily:'Archivo,sans-serif', fontWeight:800, fontSize:26, color:c.primaryDk, lineHeight:1 }}>{big}<span style={{ fontSize:13, marginLeft:1 }}>{unit}</span></div>
      </div>
    </div>
  );

  // ── content ─────────────────────────────────────────────────
  const services = [
    { jp:'UVコート', en:'UV', catch:'即日入居できる、いちばん人気', img: LSC_IMG.uv, tone:'darkwood' },
    { jp:'シリコンコート', en:'SILICONE', catch:'素材を選ばない、やさしい艶', img: LSC_IMG.silicon, tone:'wood' },
    { jp:'ガラスコート', en:'GLASS', catch:'最長30年クラスの超耐久', img: LSC_IMG.glass, tone:'stone' },
    { jp:'セラミックコート', en:'CERAMIC', catch:'熱にも傷にも強い、店舗にも', img: LSC_IMG.ceramic, tone:'coat' },
    { jp:'ワンニャンSMILE', en:'PET', catch:'ペット・赤ちゃんに、いちばん安心', img: LSC_IMG.petUV, tone:'living' },
  ];
  const features = [
    { t:'開発から施工まで自社一貫', d:'配合室と現場を往復して仕上げた独自コーティング剤。中間マージンがなく、品質も価格も納得。', i:'⚗' },
    { t:'即日入居できるスピード', d:'UV硬化技術で塗布から数分。お引越し当日に仕上げて、暮らしを止めません。', i:'⚡' },
    { t:'ペット・赤ちゃんにやさしい', d:'F☆☆☆☆相当の素材のみ。舐めても安心、抗菌・防カビ・滑り止めも検証済み。', i:'♡' },
    { t:'地域密着のアフター対応', d:'ご相談から施工、その後のメンテナンスまで、地域密着の体制で迅速に対応します。', i:'⌂' },
  ];
  const voices = [
    { area:'大阪府吹田市 K様', date:'2026.06.29', reason:['安全性','価格'], q:'赤ちゃんが生まれる前に。舐めても安心と聞いて即決でした。床がサラサラで掃除も本当に楽に…' },
    { area:'兵庫県西宮市 T様', date:'2026.06.18', reason:['対応の早さ'], q:'当日に入居できたのが本当に助かりました。営業さんの説明も丁寧で、仕上がりの艶も上品で…' },
    { area:'京都市左京区 M様', date:'2026.04.28', reason:['ペット対応','実績'], q:'犬が滑らなくなって足腰の負担が減ったみたい。相談から施工までとても丁寧に対応いただき…' },
  ];
  const works = [
    { date:'2026.06.26', t:'【大阪府吹田市 H様邸】UVコート 戸建てLDK 24㎡ セミグロス仕上げ', tags:['UV','戸建て'] },
    { date:'2026.06.22', t:'【京都市 Cafe様】ガラスコート 店舗フロア 60㎡ 高光沢仕上げ', tags:['ガラス','店舗'] },
    { date:'2026.06.12', t:'【兵庫県神戸市 クリニック様】セラミックコート 待合室 40㎡', tags:['セラミック','医療'] },
    { date:'2026.06.05', t:'【奈良県 M様邸】ワンニャンSMILE 全室 78㎡ ペット対応仕上げ', tags:['PET','戸建て'] },
    { date:'2026.05.29', t:'【大阪市 S様邸】シリコンコート 無垢材フロア 32㎡', tags:['シリコン','戸建て'] },
  ];

  return (
    <div style={{ width:1440, fontFamily:'"Noto Sans JP", system-ui, sans-serif', color:c.ink, background:c.bg, overflow:'hidden', paddingBottom:80 }}>
      {/* Top bar */}
      <div style={{ position:'sticky', top:0, zIndex:30, background:'rgba(255,248,239,0.94)', backdropFilter:'blur(10px)', borderBottom:`1px solid ${c.line}` }}>
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'14px 36px' }}>
          <div style={{ display:'flex', alignItems:'center', gap:12 }}>
            <div style={{ width:32, height:32, borderRadius:'50%', background:`radial-gradient(circle at 36% 32%, ${c.sun}, ${c.primary} 72%)`, boxShadow:'0 0 0 5px rgba(246,183,63,0.18)' }} />
            <div style={{ fontWeight:800, fontSize:18, letterSpacing:'0.03em' }}>LIVSMILE <span style={{ color:c.primary }}>COAT</span></div>
          </div>
          <nav style={{ display:'flex', gap:20, fontSize:12.5, fontWeight:700, letterSpacing:'0.03em' }}>
            {navLinks.map(l => <span key={l} style={{ color:c.ink, opacity:0.8 }}>{l}</span>)}
          </nav>
          <div style={{ display:'flex', alignItems:'center', gap:14 }}>
            <div style={{ textAlign:'right' }}>
              <div style={{ fontFamily:'Archivo,sans-serif', fontWeight:800, fontSize:22, color:c.primaryDk, lineHeight:1 }}>080-2392-9517</div>
              <div style={{ fontSize:10, color:c.sub, marginTop:2 }}>受付 9:00–19:00 / 日祝休</div>
            </div>
            <a style={{ background:`linear-gradient(120deg, ${c.sun}, ${c.primary})`, color:'#fff', borderRadius:999, padding:'12px 22px', fontSize:13, fontWeight:800, cursor:'pointer', boxShadow:c.shadowSoft }}>無料相談</a>
          </div>
        </div>
      </div>

      {/* ══ HERO ══ */}
      <section style={{ position:'relative', padding:'52px 36px 64px', background:`radial-gradient(120% 90% at 85% 0%, ${c.soft} 0%, ${c.bg} 55%)`, overflow:'hidden' }}>
        {/* deco sun */}
        <div style={{ position:'absolute', right:-120, top:-120, width:360, height:360, borderRadius:'50%', background:`radial-gradient(circle at 40% 40%, rgba(246,183,63,0.35), rgba(246,183,63,0) 68%)` }} />
        <div style={{ position:'relative', display:'grid', gridTemplateColumns:'1.05fr 0.95fr', gap:44, alignItems:'center' }}>
          <div>
            <span style={{ display:'inline-flex', alignItems:'center', gap:8, background:c.surface, color:c.primaryDk, borderRadius:999, padding:'9px 20px', fontSize:13, fontWeight:800, boxShadow:c.shadowSoft }}>
              ☀ フロアコーティング一筋・暮らしに笑顔を
            </span>
            <h1 style={{ fontSize:60, lineHeight:1.26, fontWeight:800, letterSpacing:'0.01em', margin:'22px 0 0' }}>
              床から、ずっとの<br/><span style={{ position:'relative', color:c.primary }}>安心<span style={{ position:'absolute', left:0, right:0, bottom:2, height:10, background:'rgba(246,183,63,0.4)', zIndex:-1 }} /></span>と<span style={{ color:c.primary }}>笑顔</span>を。
            </h1>
            <p style={{ marginTop:22, fontSize:16, lineHeight:2, color:c.sub, maxWidth:470 }}>
              開発・施工・卸を一貫して手がける、フロアコーティングの専門店。
              赤ちゃんもペットも、家族みんなが安心して暮らせる床へ。
            </p>
            {/* badges */}
            <div style={{ display:'flex', gap:16, marginTop:30 }}>
              <Badge small="最長" big="30" unit="年保証" />
              <Badge small="安全等級" big="F☆☆☆☆" />
              <Badge small="ペット・赤ちゃん" big="安心" unit="設計" />
            </div>
            <div style={{ marginTop:36 }}>
              <DualCTA />
            </div>
          </div>
          <div style={{ position:'relative' }}>
            <RealImage src={LSC_IMG.hero1} label="hero · living floor" tone="wood" style={{ width:'100%', aspectRatio:'4/5', borderRadius:'28px', boxShadow:c.shadow }} />
            {/* floating stat card */}
            <div style={{ position:'absolute', left:-26, bottom:40, background:c.surface, borderRadius:20, padding:'16px 22px', boxShadow:c.shadow, display:'flex', alignItems:'center', gap:14 }}>
              <div style={{ fontFamily:'Archivo,sans-serif', fontWeight:800, fontSize:44, fontStyle:'italic', color:c.primary, lineHeight:1 }}>5<span style={{ fontSize:16, marginLeft:2, fontStyle:'normal' }}>種</span></div>
              <div style={{ fontSize:12, color:c.sub, lineHeight:1.6, fontWeight:600 }}>用途で選べる<br/>コーティング</div>
            </div>
            {/* floating no.1 sticker */}
            <div style={{ position:'absolute', right:-10, top:24, width:88, height:88, borderRadius:'50%', background:`linear-gradient(135deg, ${c.sun}, ${c.primary})`, color:'#fff', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', boxShadow:c.shadow, transform:'rotate(8deg)', textAlign:'center' }}>
              <span style={{ fontSize:10, fontWeight:700 }}>地域施工</span>
              <span style={{ fontFamily:'Archivo,sans-serif', fontStyle:'italic', fontWeight:800, fontSize:24, lineHeight:1 }}>No.1</span>
              <span style={{ fontSize:8, opacity:0.85 }}>を目指して</span>
            </div>
          </div>
        </div>
      </section>

      {/* Quick links strip */}
      <section style={{ padding:'0 36px', marginTop:-8 }}>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:14 }}>
          {[
            { t:'リブスマイルの想いを知りたい', i:'♡' },
            { t:'コーティングを比較したい', i:'▦' },
            { t:'導入前と後でどれくらい違う？', i:'✦' },
            { t:'お客様の口コミが知りたい', i:'☺' },
          ].map(q => (
            <a key={q.t} style={{ background:c.surface, borderRadius:16, padding:'18px 18px', display:'flex', alignItems:'center', gap:12, boxShadow:c.shadowSoft, cursor:'pointer', border:`1px solid ${c.line}` }}>
              <span style={{ width:42, height:42, borderRadius:'50%', background:c.soft, color:c.primary, display:'flex', alignItems:'center', justifyContent:'center', fontSize:19, flexShrink:0 }}>{q.i}</span>
              <span style={{ fontSize:13, fontWeight:700, lineHeight:1.45 }}>{q.t}</span>
              <span style={{ marginLeft:'auto', color:c.primary, fontWeight:800 }}>›</span>
            </a>
          ))}
        </div>
      </section>

      {/* ══ REASON ══ */}
      <section style={{ background:`linear-gradient(180deg, ${c.bg} 0%, ${c.soft} 20%)`, padding:'88px 36px 80px', marginTop:64 }}>
        <SectionHead en="REASON">
          リブスマイルが選ばれる理由<br/>
          <span style={{ fontSize:22, fontWeight:700 }}>フロアコーティング一筋・<Em size={64}>5</Em>種の独自配合と<Em size={64}>30</Em>年保証</span>
        </SectionHead>

        {/* image + big stats */}
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1.15fr', gap:36, alignItems:'stretch', marginBottom:24 }}>
          <RealImage src={LSC_IMG.hero2} label="reason · craft" tone="floor" style={{ borderRadius:24, minHeight:340, boxShadow:c.shadowSoft }} />
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:16 }}>
            {[
              { lead:'開発・施工の実績', em:'2019', unit:'年〜', d:'塗装業として創業以来、現場で技術を磨き続けています。' },
              { lead:'独自配合コート', em:'5', unit:'種類', d:'用途で選べる5種を自社で設計・検証しています。' },
              { lead:'最長耐久・保証', em:'30', unit:'年', d:'剥離も塗り直しも不要。長く美しさが続きます。' },
              { lead:'安全等級', em:'F☆☆☆☆', unit:'', d:'舐めても安心。抗菌・防カビ・滑り止めも検証済み。' },
            ].map((s, i) => (
              <div key={i} style={{ background:c.surface, borderRadius:20, padding:'24px 22px', boxShadow:c.shadowSoft, border:`1px solid ${c.line}` }}>
                <div style={{ fontSize:12, color:c.sub, fontWeight:700 }}>{s.lead}</div>
                <div style={{ margin:'2px 0 8px' }}><Em size={s.em.length > 3 ? 40 : 58}>{s.em}</Em><span style={{ fontSize:15, fontWeight:800, color:c.primaryDk }}>{s.unit}</span></div>
                <div style={{ fontSize:12, lineHeight:1.75, color:c.sub }}>{s.d}</div>
              </div>
            ))}
          </div>
        </div>

        {/* feature cards */}
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:16, marginTop:20 }}>
          {features.map((f, i) => (
            <div key={i} style={{ background:c.surface, borderRadius:20, padding:'26px 22px', boxShadow:c.shadowSoft, border:`1px solid ${c.line}` }}>
              <div style={{ width:52, height:52, borderRadius:'50%', background:`linear-gradient(135deg, ${c.sun}, ${c.primary})`, color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontSize:22 }}>{f.i}</div>
              <h3 style={{ fontSize:17, fontWeight:800, margin:'16px 0 10px', lineHeight:1.5 }}>{f.t}</h3>
              <p style={{ fontSize:12.5, lineHeight:1.9, color:c.sub, margin:0 }}>{f.d}</p>
            </div>
          ))}
        </div>

        {/* certifications strip (maker-logos analog) */}
        <div style={{ marginTop:40, textAlign:'center' }}>
          <div style={{ fontSize:13, fontWeight:800, color:c.sub, letterSpacing:'0.1em', marginBottom:18 }}>対応床材・認証</div>
          <div style={{ display:'flex', gap:12, justifyContent:'center', flexWrap:'wrap' }}>
            {['複合フローリング','無垢材','クッションフロア','フロアタイル','F☆☆☆☆','抗菌SIAA相当','防カビ試験済','滑り止め検証済'].map(m => (
              <span key={m} style={{ background:c.surface, border:`1px solid ${c.line}`, borderRadius:999, padding:'10px 20px', fontSize:13, fontWeight:700, color:c.ink, boxShadow:'0 8px 18px -14px rgba(180,95,25,0.4)' }}>{m}</span>
            ))}
          </div>
        </div>
      </section>

      {/* ══ STRONG CTA BAND (staff photo) ══ */}
      <CTAband c={c} Ribbon={Ribbon} DualCTA={DualCTA} />

      {/* ══ SERVICE ══ */}
      <section style={{ padding:'88px 36px 80px' }}>
        <SectionHead en="PRODUCT">
          サービスのご案内<br/>
          <span style={{ fontSize:22, fontWeight:700 }}>床コーティングは<Em size={58}>一生に一度</Em>の買い物です</span>
        </SectionHead>
        <p style={{ textAlign:'center', fontSize:15, color:c.sub, margin:'-24px 0 44px' }}>どれを選べばいいか分からなくても大丈夫。フロアコーティング一筋のプロにお任せください。</p>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:20 }}>
          {services.map((s) => (
            <div key={s.en} style={{ background:c.surface, borderRadius:22, overflow:'hidden', boxShadow:c.shadowSoft, border:`1px solid ${c.line}`, display:'flex', flexDirection:'column' }}>
              <div style={{ position:'relative' }}>
                <RealImage src={s.img} label={s.en.toLowerCase()} tone={s.tone} style={{ aspectRatio:'16/10' }} />
                <span style={{ position:'absolute', left:14, top:14, background:c.ink, color:'#fff', borderRadius:999, padding:'6px 14px', fontSize:12, fontWeight:700 }}>{s.catch}</span>
              </div>
              <div style={{ padding:'22px 24px 26px', display:'flex', flexDirection:'column', flex:1 }}>
                <div style={{ display:'flex', alignItems:'baseline', gap:10 }}>
                  <h3 style={{ fontSize:22, fontWeight:800, margin:0 }}>{s.jp}</h3>
                  <span style={{ fontFamily:'Archivo,sans-serif', fontSize:12, fontWeight:800, fontStyle:'italic', color:c.primary, letterSpacing:'0.08em' }}>{s.en}</span>
                </div>
                <div style={{ display:'flex', gap:10, marginTop:'auto', paddingTop:20 }}>
                  <a style={{ flex:1, textAlign:'center', background:`linear-gradient(120deg, ${c.sun}, ${c.primary})`, color:'#fff', borderRadius:999, padding:'12px', fontSize:13, fontWeight:800, cursor:'pointer' }}>詳しく見る</a>
                  <a style={{ flex:1, textAlign:'center', background:c.soft, color:c.primaryDk, borderRadius:999, padding:'12px', fontSize:13, fontWeight:800, cursor:'pointer' }}>無料で相談</a>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ══ VOICE ══ */}
      <section style={{ background:`linear-gradient(180deg, ${c.soft} 0%, ${c.bg} 100%)`, padding:'88px 36px 80px' }}>
        <SectionHead en="VOICE">
          お客様の声<br/>
          <span style={{ fontSize:22, fontWeight:700 }}>リブスマイルに寄せられる<Em size={58}>お客様の声</Em>をご紹介します</span>
        </SectionHead>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:20 }}>
          {voices.map((v, i) => (
            <div key={i} style={{ background:c.surface, borderRadius:22, padding:'26px 26px 22px', boxShadow:c.shadowSoft, border:`1px solid ${c.line}`, display:'flex', flexDirection:'column' }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:14 }}>
                <span style={{ fontSize:14, fontWeight:800 }}>{v.area}</span>
                <span style={{ fontFamily:'Archivo,sans-serif', fontSize:11, color:c.sub }}>{v.date}</span>
              </div>
              <div style={{ color:c.sun, fontSize:15, letterSpacing:'2px' }}>★★★★★</div>
              <div style={{ fontSize:12, fontWeight:700, color:c.primaryDk, margin:'12px 0 6px' }}>選んだ決め手は？</div>
              <div style={{ display:'flex', gap:6, flexWrap:'wrap', marginBottom:12 }}>
                {v.reason.map(r => <span key={r} style={{ background:c.soft, color:c.primaryDk, borderRadius:999, padding:'4px 12px', fontSize:11, fontWeight:700 }}>{r}</span>)}
              </div>
              <p style={{ fontSize:13.5, lineHeight:1.95, color:c.ink, margin:'0 0 16px', flex:1 }}>「{v.q}」</p>
              <a style={{ fontSize:13, fontWeight:800, color:c.primaryDk, cursor:'pointer' }}>詳しく見る →</a>
            </div>
          ))}
        </div>
        <div style={{ textAlign:'center', marginTop:36 }}>
          <a style={{ display:'inline-flex', alignItems:'center', gap:10, background:c.surface, color:c.primaryDk, border:`2px solid ${c.primary}`, borderRadius:999, padding:'15px 34px', fontSize:14, fontWeight:800, cursor:'pointer', boxShadow:c.shadowSoft }}>お客様の声をもっと見る →</a>
        </div>
      </section>

      {/* ══ WORKS ══ */}
      <section style={{ padding:'88px 36px 80px' }}>
        <SectionHead en="WORKS">
          施工実績<br/>
          <span style={{ fontSize:22, fontWeight:700 }}>有資格者による<Em size={58}>質の高い施工</Em>を提供します</span>
        </SectionHead>
        <div style={{ background:c.surface, borderRadius:22, overflow:'hidden', boxShadow:c.shadowSoft, border:`1px solid ${c.line}` }}>
          {works.map((w, i) => (
            <a key={i} style={{ display:'flex', alignItems:'center', gap:20, padding:'22px 28px', borderTop: i === 0 ? 'none' : `1px solid ${c.line}`, cursor:'pointer' }}>
              <span style={{ fontFamily:'Archivo,sans-serif', fontSize:13, color:c.sub, fontWeight:600, minWidth:88 }}>{w.date}</span>
              <span style={{ flex:1, fontSize:14, fontWeight:600 }}>{w.t}</span>
              <div style={{ display:'flex', gap:8 }}>
                {w.tags.map(t => <span key={t} style={{ background:c.soft, color:c.primaryDk, borderRadius:999, padding:'5px 13px', fontSize:11, fontWeight:700 }}>{t}</span>)}
              </div>
              <span style={{ color:c.primary, fontWeight:800 }}>›</span>
            </a>
          ))}
        </div>
        <div style={{ textAlign:'center', marginTop:32 }}>
          <a style={{ display:'inline-flex', alignItems:'center', gap:10, background:c.surface, color:c.primaryDk, border:`2px solid ${c.primary}`, borderRadius:999, padding:'15px 34px', fontSize:14, fontWeight:800, cursor:'pointer', boxShadow:c.shadowSoft }}>施工実績の一覧へ →</a>
        </div>
      </section>

      {/* ══ AREA ══ */}
      <section style={{ background:c.soft, padding:'80px 36px' }}>
        <SectionHead en="AREA">施工対応エリア</SectionHead>
        <div style={{ display:'grid', gridTemplateColumns:'0.9fr 1.1fr', gap:40, alignItems:'center', maxWidth:1120, margin:'0 auto' }}>
          <RealImage src={LSC_IMG.hero3} label="area map" tone="cream" style={{ borderRadius:24, aspectRatio:'4/3', boxShadow:c.shadowSoft }} />
          <div>
            <div style={{ fontSize:20, fontWeight:800, marginBottom:12 }}>近畿一円、丁寧にお伺いします</div>
            {[
              ['大阪府','大阪市・吹田市・豊中市・堺市・高槻市・枚方市・茨木市 ほか全域'],
              ['兵庫県','神戸市・西宮市・尼崎市・芦屋市・宝塚市・伊丹市 ほか'],
              ['京都府','京都市・宇治市・長岡京市・向日市 ほか'],
              ['奈良県','奈良市・生駒市・大和郡山市・橿原市 ほか'],
            ].map((r, i) => (
              <div key={i} style={{ display:'grid', gridTemplateColumns:'90px 1fr', gap:16, padding:'14px 0', borderTop:`1px solid ${c.line}`, alignItems:'baseline' }}>
                <span style={{ fontSize:14, fontWeight:800, color:c.primaryDk }}>{r[0]}</span>
                <span style={{ fontSize:12.5, lineHeight:1.8, color:c.sub }}>{r[1]}</span>
              </div>
            ))}
            <p style={{ fontSize:12, color:c.sub, marginTop:14 }}>※上記以外の地域もお気軽にご相談ください。</p>
          </div>
        </div>
      </section>

      {/* ══ FRANCHISE (BtoB) ══ */}
      <section style={{ padding:'88px 36px 0' }}>
        <SectionHead en="FOR PARTNERS">
          同業者・独立をお考えの方へ<br/>
          <span style={{ fontSize:22, fontWeight:700 }}>塗装業の<Em size={58}>次の柱</Em>を、一緒につくりませんか</span>
        </SectionHead>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:0, borderRadius:28, overflow:'hidden', boxShadow:c.shadow, maxWidth:1160, margin:'0 auto' }}>
          <div style={{ background:c.ink, color:'#fff', padding:'48px 44px' }}>
            <span style={{ display:'inline-block', background:'rgba(255,255,255,0.16)', borderRadius:999, padding:'7px 18px', fontSize:12, fontWeight:700 }}>FRANCHISE PARTNER 募集中</span>
            <p style={{ fontSize:14, lineHeight:2, color:'rgba(255,255,255,0.85)', margin:'22px 0 26px' }}>
              独自配合のコーティング剤、技術研修、集客・営業支援まで。パートナーが成果を出す仕組みを一貫でご提供します。塗装業がもっと誇れる仕事になるように。
            </p>
            <div style={{ display:'flex', gap:12 }}>
              <a style={{ background:`linear-gradient(120deg, ${c.sun}, ${c.primary})`, color:'#fff', borderRadius:999, padding:'14px 26px', fontSize:14, fontWeight:800, cursor:'pointer' }}>パートナー募集の詳細 →</a>
              <a style={{ background:'transparent', color:'#fff', border:'2px solid rgba(255,255,255,0.35)', borderRadius:999, padding:'14px 26px', fontSize:14, fontWeight:800, cursor:'pointer' }}>資料請求</a>
            </div>
          </div>
          <RealImage src={LSC_IMG.company} label="franchise · training" tone="darkwood" style={{ minHeight:320 }} />
        </div>
      </section>

      {/* ══ COMPANY ══ */}
      <section style={{ padding:'88px 36px 80px' }}>
        <SectionHead en="ABOUT">会社案内・リブスマイルについて</SectionHead>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1.05fr', gap:48, alignItems:'center', maxWidth:1160, margin:'0 auto' }}>
          <RealImage src={LSC_IMG.hero2} label="company" tone="floor" style={{ borderRadius:24, aspectRatio:'4/3', boxShadow:c.shadowSoft }} />
          <div>
            <div style={{ fontSize:12, fontWeight:800, color:c.primary, 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:c.sub, margin:'0 0 26px' }}>
              もともと塗装業として地域のお客様と向き合うなかで、フローリングという素材の奥深さに魅せられ、コーティング剤の配合・開発まで事業を広げてきました。床から、暮らしとビジネスの両方を明るくしていきます。
            </p>
            <a style={{ display:'inline-flex', alignItems:'center', gap:10, background:c.surface, color:c.primaryDk, border:`2px solid ${c.primary}`, borderRadius:999, padding:'14px 30px', fontSize:14, fontWeight:800, cursor:'pointer', boxShadow:c.shadowSoft }}>会社案内を見る →</a>
          </div>
        </div>
      </section>

      {/* ══ FINAL CTA BAND ══ */}
      <CTAband c={c} Ribbon={Ribbon} DualCTA={DualCTA} />

      {/* Footer */}
      <footer style={{ background:c.ink, color:'#f3e9da', padding:'60px 36px 34px' }}>
        <div style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr', gap:44, paddingBottom:40, borderBottom:'1px solid rgba(243,233,218,0.16)' }}>
          <div>
            <div style={{ display:'flex', alignItems:'center', gap:12 }}>
              <div style={{ width:28, height:28, borderRadius:'50%', background:`radial-gradient(circle at 36% 34%, ${c.sun}, ${c.primary} 72%)` }} />
              <div style={{ fontWeight:800, fontSize:18 }}>LIVSMILE COAT</div>
            </div>
            <p style={{ marginTop:16, fontSize:13, lineHeight:2, color:'rgba(243,233,218,0.7)', maxWidth:340 }}>
              フロアコーティングの開発・施工・卸。<br/>赤ちゃんもペットも、家族みんなが安心して暮らせる床へ。
            </p>
            <div style={{ marginTop:18, fontFamily:'Archivo,sans-serif', fontWeight:800, fontSize:26, color:c.sun }}>080-2392-9517</div>
            <div style={{ fontSize:11, color:'rgba(243,233,218,0.6)' }}>受付 9:00–19:00 / 日祝休</div>
          </div>
          {[
            { t:'PRODUCT', items:['UVコート','シリコンコート','ガラスコート','セラミックコート','ワンニャンSMILE'] },
            { t:'ABOUT', items:['選ばれる理由','施工事例','お客様の声','会社概要','パートナー募集'] },
          ].map(col => (
            <div key={col.t}>
              <div style={{ fontFamily:'Archivo,sans-serif', fontSize:12, fontWeight:800, letterSpacing:'0.18em', color:c.sun, marginBottom:16 }}>{col.t}</div>
              {col.items.map(i => <div key={i} style={{ fontSize:13, marginTop:10, color:'rgba(243,233,218,0.85)' }}>{i}</div>)}
            </div>
          ))}
        </div>
        <div style={{ paddingTop:20, display:'flex', justifyContent:'space-between', fontSize:11, color:'rgba(243,233,218,0.5)' }}>
          <span>© LIVSMILE COAT 2026</span><span>PRIVACY · TERMS</span>
        </div>
      </footer>

      {/* ══ STICKY BOTTOM ACTION BAR (ricoas signature) ══ */}
      <div style={{ position:'fixed', left:0, right:0, bottom:0, zIndex:40, display:'flex', gap:2, background:c.ink, boxShadow:'0 -8px 24px -12px rgba(0,0,0,0.4)' }}>
        <a style={{ flex:1, display:'flex', alignItems:'center', justifyContent:'center', gap:12, padding:'16px', background:c.surface, color:c.primaryDk, fontSize:15, fontWeight:800, cursor:'pointer' }}>
          <span style={{ fontSize:20 }}>📄</span>シミュレーション資料はこちら
        </a>
        <a style={{ flex:1, display:'flex', alignItems:'center', justifyContent:'center', gap:12, padding:'16px', background:`linear-gradient(120deg, ${c.sun}, ${c.primary})`, color:'#fff', fontSize:15, fontWeight:800, cursor:'pointer' }}>
          <span style={{ fontSize:20 }}>✉</span>無料で現地調査・見積り相談
        </a>
        <div style={{ display:'flex', alignItems:'center', gap:10, padding:'12px 28px', background:c.ink, color:'#fff' }}>
          <div style={{ textAlign:'right' }}>
            <div style={{ fontFamily:'Archivo,sans-serif', fontWeight:800, fontSize:22, color:c.sun, lineHeight:1 }}>080-2392-9517</div>
            <div style={{ fontSize:10, color:'rgba(255,255,255,0.7)' }}>受付 9:00–19:00 / 日祝休</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// Repeated strong CTA band with staff photos + ribbon
function CTAband({ c, Ribbon, DualCTA }) {
  return (
    <section style={{ padding:'8px 36px 0' }}>
      <div style={{ maxWidth:1200, margin:'0 auto' }}>
        <Ribbon>現地調査・お見積りは無料で承ります</Ribbon>
        <div style={{ position:'relative', background:`linear-gradient(120deg, ${c.primary}, ${c.primaryDk})`, borderRadius:'0 0 28px 28px', padding:'52px 52px', overflow:'hidden', color:'#fff' }}>
          <div style={{ position:'absolute', right:-40, top:-40, width:220, height:220, borderRadius:'50%', background:'rgba(255,255,255,0.12)' }} />
          <div style={{ position:'absolute', right:150, bottom:-70, width:180, height:180, borderRadius:'50%', background:'rgba(255,255,255,0.10)' }} />
          <div style={{ position:'relative', display:'flex', justifyContent:'space-between', alignItems:'center', gap:36 }}>
            <div style={{ flex:1 }}>
              <h2 style={{ fontSize:36, fontWeight:800, margin:'0 0 12px', lineHeight:1.4 }}>床のお悩みは、<br/>なんでもご相談ください。</h2>
              <p style={{ fontSize:14.5, lineHeight:1.9, color:'rgba(255,255,255,0.9)', margin:'0 0 28px' }}>
                事前の現地調査や、お手入れコストの無料シミュレーションも承ります。安心してご相談ください。
              </p>
              <DualCTA />
            </div>
            <div style={{ display:'flex', gap:10, flexShrink:0 }}>
              <div style={{ width:120, height:150, borderRadius:18, overflow:'hidden', boxShadow:c.shadow }}>
                <RealImage src={LSC_IMG.company} label="staff" tone="darkwood" style={{ width:'100%', height:'100%' }} />
              </div>
              <div style={{ width:120, height:150, borderRadius:18, overflow:'hidden', boxShadow:c.shadow, marginTop:20 }}>
                <RealImage src={LSC_IMG.hero1} label="staff" tone="wood" style={{ width:'100%', height:'100%' }} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.WarmTop = WarmTop;