// GREEN design system (ricoas-faithful) — shared primitives for D & E.
// Rich lime-green bands with wave dividers, orange CTAs & numbers,
// speech-bubble buttons, circular double-ring badges, sticky bottom bar.
window.GREEN = {
  bg: '#ffffff',
  green: '#6cb23a',
  greenMid: '#54a038',
  greenDeep: '#2f8a45',
  greenBand: '#34974a',
  greenBandDk: '#2c8140',
  greenText: '#2f7a3a',
  lightGreen: '#e3f1e4',
  lightGreen2: '#eef7ea',
  orange: '#ef7e2e',
  orangeDk: '#dd6a1a',
  yellow: '#f4c01f',
  ink: '#2f2a24',
  sub: '#6f7568',
  line: 'rgba(47,42,36,0.10)',
  shadow: '0 22px 46px -26px rgba(40,110,45,0.4)',
  shadowSoft: '0 14px 32px -22px rgba(40,110,45,0.35)',
};

// Leaf logo mark
function GLogo({ dark }) {
  const g = window.GREEN;
  return (
    <div style={{ display:'flex', alignItems:'center', gap:10 }}>
      <div style={{ position:'relative', width:30, height:30 }}>
        <div style={{ position:'absolute', inset:0, borderRadius:'50% 0 50% 50%', background:`linear-gradient(135deg, ${g.yellow}, ${g.green})`, transform:'rotate(45deg)' }} />
      </div>
      <div style={{ fontWeight:800, fontSize:19, letterSpacing:'0.02em', color: dark ? '#fff' : g.ink }}>LIVSMILE<span style={{ color:g.green }}> COAT</span></div>
    </div>
  );
}
window.GLogo = GLogo;

// Section header: small leaf pill kicker + big JP heading with orange emphasized nums
function GHead({ kicker, children, light }) {
  const g = window.GREEN;
  return (
    <div style={{ textAlign:'center', marginBottom:40 }}>
      <div style={{ display:'inline-flex', alignItems:'center', gap:8, background: light ? 'rgba(255,255,255,0.15)' : g.lightGreen, color: light ? '#fff' : g.greenText, borderRadius:999, padding:'8px 22px', fontSize:14, fontWeight:800, marginBottom:18 }}>
        <span>🌱</span>{kicker}
      </div>
      <div style={{ fontSize:34, fontWeight:800, lineHeight:1.42, color: light ? '#fff' : g.ink }}>{children}</div>
    </div>
  );
}
window.GHead = GHead;

// Orange emphasized number
function GEm({ children, size = 64 }) {
  const g = window.GREEN;
  return <span style={{ fontFamily:'"Archivo",sans-serif', fontWeight:800, fontStyle:'italic', color:g.orange, fontSize:size, lineHeight:0.9, letterSpacing:'-0.02em', margin:'0 3px', verticalAlign:'-0.05em' }}>{children}</span>;
}
window.GEm = GEm;

// Speech bubble
function GBubble({ children, bg, color = '#fff' }) {
  const g = window.GREEN;
  const b = bg || g.greenText;
  return (
    <div style={{ position:'relative', background:b, color, fontSize:13, fontWeight:700, padding:'8px 18px', borderRadius:12, marginBottom:11, whiteSpace:'nowrap', boxShadow:'0 6px 14px -8px rgba(0,0,0,0.35)' }}>
      {children}
      <span style={{ position:'absolute', bottom:-6, left:'50%', transform:'translateX(-50%) rotate(45deg)', width:12, height:12, background:b }} />
    </div>
  );
}
window.GBubble = GBubble;

// The two signature CTA buttons (orange pair) with bubbles
function GDualCTA({ center }) {
  const g = window.GREEN;
  return (
    <div style={{ display:'flex', gap:20, justifyContent: center ? 'center' : 'flex-start', flexWrap:'wrap' }}>
      <div style={{ display:'flex', flexDirection:'column', alignItems:'center' }}>
        <GBubble>導入費用は？どれくらいお得なの？</GBubble>
        <a style={{ display:'inline-flex', alignItems:'center', gap:14, background:g.orange, color:'#fff', borderRadius:14, padding:'17px 30px', fontSize:15.5, fontWeight:800, cursor:'pointer', boxShadow:g.shadowSoft, lineHeight:1.35 }}>
          シミュレーション資料はこちら
          <span style={{ width:26, height:26, borderRadius:'50%', background:'rgba(255,255,255,0.25)', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'Archivo,sans-serif', fontSize:13 }}>→</span>
        </a>
      </div>
      <div style={{ display:'flex', flexDirection:'column', alignItems:'center' }}>
        <GBubble>経験豊富なプロが対応します</GBubble>
        <a style={{ display:'inline-flex', alignItems:'center', gap:14, background:g.yellow, color:g.ink, borderRadius:14, padding:'17px 30px', fontSize:15.5, fontWeight:800, cursor:'pointer', boxShadow:g.shadowSoft, lineHeight:1.35 }}>
          無料で現地調査・見積り相談
          <span style={{ width:26, height:26, borderRadius:'50%', background:'rgba(0,0,0,0.14)', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'Archivo,sans-serif', fontSize:13 }}>→</span>
        </a>
      </div>
    </div>
  );
}
window.GDualCTA = GDualCTA;

// Wave divider — convex bulge. dir 'top' bulges up into section above, 'bottom' bulges down.
function GWave({ color, dir = 'top', h = 70 }) {
  const radius = dir === 'top' ? '50% 50% 0 0 / 100% 100% 0 0' : '0 0 50% 50% / 0 0 100% 100%';
  return <div style={{ height:h, background:color, borderRadius:radius, margin: dir === 'top' ? '0 0 -1px' : '-1px 0 0' }} />;
}
window.GWave = GWave;

// Circular double-ring badge (reason section)
function GBadge({ children, size = 260 }) {
  const g = window.GREEN;
  return (
    <div style={{ width:size, height:size, borderRadius:'50%', background:`linear-gradient(150deg, ${g.green} 0%, ${g.greenDeep} 100%)`, padding:9, boxShadow:g.shadowSoft, margin:'0 auto' }}>
      <div style={{ width:'100%', height:'100%', borderRadius:'50%', background:'#fff', border:`3px solid ${g.lightGreen}`, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', textAlign:'center', padding:'0 30px' }}>
        {children}
      </div>
    </div>
  );
}
window.GBadge = GBadge;
function GPill({ children }) {
  const g = window.GREEN;
  return <span style={{ display:'inline-block', border:`1.5px solid ${g.green}`, color:g.greenText, borderRadius:999, padding:'5px 16px', fontSize:13, fontWeight:800, marginBottom:8 }}>{children}</span>;
}
window.GPill = GPill;

// Top navigation bar (white, floating)
function GTopBar({ routes = {} }) {
  const g = window.GREEN;
  const links = [['リブスマイルについて','company'],['サービス','product'],['施工実績','index'],['お客様の声','index'],['お役立ち情報','index'],['会社概要','company'],['お問い合わせ','contact']];
  return (
    <div style={{ position:'sticky', top:0, zIndex:30, background:'#fff', boxShadow:'0 2px 12px -6px rgba(0,0,0,0.15)' }}>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'14px 34px' }}>
        <div style={{ display:'flex', alignItems:'flex-start', gap:14 }}>
          <GLogo />
          <span style={{ fontSize:10, color:g.sub, lineHeight:1.5, marginTop:3, maxWidth:150 }}>近畿のフロアコーティング<br/>開発・施工・卸の専門店</span>
        </div>
        <nav style={{ display:'flex', gap:18, fontSize:12.5, fontWeight:700, alignItems:'center' }}>
          {links.map(([l]) => (
            <span key={l} style={{ display:'flex', alignItems:'center', gap:5, color:g.ink }}>
              <span style={{ width:6, height:6, borderRadius:'50%', background:g.green }} />{l}
            </span>
          ))}
        </nav>
        <div style={{ display:'flex', flexDirection:'column', alignItems:'flex-end', gap:2 }}>
          <div style={{ display:'flex', alignItems:'center', gap:8 }}>
            <span style={{ width:22, height:22, borderRadius:'50%', background:g.green, color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontSize:12 }}>☎</span>
            <span style={{ fontFamily:'Archivo,sans-serif', fontWeight:800, fontSize:20, fontStyle:'italic', color:g.greenText }}>080-2392-9517</span>
          </div>
          <span style={{ fontSize:10, color:g.sub }}>受付 9:00〜19:00 / 日祝休</span>
        </div>
      </div>
    </div>
  );
}
window.GTopBar = GTopBar;

// Strong CTA band (green, wave top/bottom, staff photos, orange CTAs)
function GCTAband() {
  const g = window.GREEN;
  return (
    <section style={{ position:'relative' }}>
      <GWave color={g.greenBand} dir="top" />
      <div style={{ background:g.greenBand, padding:'20px 34px 8px', textAlign:'center' }}>
        <span style={{ display:'inline-block', background:'#fff', color:g.greenText, borderRadius:999, padding:'8px 24px', fontSize:14, fontWeight:800, marginBottom:20 }}>現地調査・お見積りは無料で承ります</span>
        <h2 style={{ color:'#fff', fontSize:36, fontWeight:800, margin:'0 0 28px', lineHeight:1.4 }}>床のお悩みは、なんでもご相談ください。</h2>
        <div style={{ display:'flex', justifyContent:'center', gap:24, alignItems:'flex-end', flexWrap:'wrap' }}>
          <div style={{ width:130, height:104, borderRadius:16, overflow:'hidden', boxShadow:g.shadow }}>
            <RealImage src={LSC_IMG.company} label="staff" tone="darkwood" style={{ width:'100%', height:'100%' }} />
          </div>
          <GDualCTA center />
        </div>
        <div style={{ display:'inline-flex', alignItems:'center', gap:14, marginTop:24, color:'#fff' }}>
          <span style={{ fontSize:13 }}>☎</span>
          <span style={{ fontFamily:'Archivo,sans-serif', fontWeight:800, fontSize:34, fontStyle:'italic' }}>080-2392-9517</span>
          <span style={{ fontSize:12, opacity:0.9 }}>受付 9:00〜19:00 / 日祝休</span>
        </div>
        <p style={{ color:'rgba(255,255,255,0.88)', fontSize:12.5, lineHeight:1.9, margin:'14px 0 0' }}>
          事前の現地調査や、お手入れコストの無料シミュレーションもお受けしております。<br/>安心してご相談・お問い合わせください。
        </p>
      </div>
      <GWave color={g.greenBand} dir="bottom" />
    </section>
  );
}
window.GCTAband = GCTAband;

// Sticky bottom action bar
function GStickyBar() {
  const g = window.GREEN;
  return (
    <div style={{ position:'fixed', left:0, right:0, bottom:0, zIndex:40, display:'flex', gap:2, background:g.greenDeep, boxShadow:'0 -8px 24px -12px rgba(0,0,0,0.4)' }}>
      <a style={{ flex:1, display:'flex', alignItems:'center', justifyContent:'center', gap:10, padding:'15px', background:g.orange, color:'#fff', fontSize:15, fontWeight:800, cursor:'pointer' }}>
        <span style={{ fontSize:18 }}>📄</span>シミュレーション資料はこちら
      </a>
      <a style={{ flex:1, display:'flex', alignItems:'center', justifyContent:'center', gap:10, padding:'15px', background:g.yellow, color:g.ink, fontSize:15, fontWeight:800, cursor:'pointer' }}>
        <span style={{ fontSize:18 }}>✉</span>無料で現地調査・見積り相談
      </a>
      <div style={{ display:'flex', alignItems:'center', gap:10, padding:'10px 26px', background:g.greenDeep, color:'#fff' }}>
        <div style={{ textAlign:'right' }}>
          <div style={{ fontFamily:'Archivo,sans-serif', fontWeight:800, fontSize:21, fontStyle:'italic', lineHeight:1 }}>080-2392-9517</div>
          <div style={{ fontSize:10, color:'rgba(255,255,255,0.75)' }}>受付 9:00〜19:00 / 日祝休</div>
        </div>
      </div>
    </div>
  );
}
window.GStickyBar = GStickyBar;

// Footer
function GFooter() {
  const g = window.GREEN;
  return (
    <footer style={{ background:'#2b3327', color:'#e6ecdf', padding:'56px 34px 32px' }}>
      <div style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr', gap:44, paddingBottom:36, borderBottom:'1px solid rgba(230,236,223,0.16)' }}>
        <div>
          <GLogo dark />
          <p style={{ marginTop:16, fontSize:13, lineHeight:2, color:'rgba(230,236,223,0.7)', maxWidth:330 }}>
            フロアコーティングの開発・施工・卸。<br/>赤ちゃんもペットも、家族みんなが安心して暮らせる床へ。
          </p>
          <div style={{ marginTop:16, fontFamily:'Archivo,sans-serif', fontWeight:800, fontSize:25, fontStyle:'italic', color:g.yellow }}>080-2392-9517</div>
        </div>
        {[
          { t:'サービス', items:['UVコート','シリコンコート','ガラスコート','セラミックコート','ワンニャンSMILE'] },
          { t:'リブスマイルについて', items:['選ばれる理由','施工実績','お客様の声','会社概要','パートナー募集'] },
        ].map(col => (
          <div key={col.t}>
            <div style={{ fontSize:13, fontWeight:800, color:g.yellow, marginBottom:14 }}>{col.t}</div>
            {col.items.map(i => <div key={i} style={{ fontSize:13, marginTop:9, color:'rgba(230,236,223,0.85)' }}>{i}</div>)}
          </div>
        ))}
      </div>
      <div style={{ paddingTop:18, fontSize:11, color:'rgba(230,236,223,0.5)' }}>© LIVSMILE COAT 2026</div>
    </footer>
  );
}
window.GFooter = GFooter;
