// Rallimo LP — second half: use cases, pricing, flow, features, try-it, footer
const P = window.LP_PALETTE;
const Container = window.LP_Container;
const SectionEyebrow = window.LP_SectionEyebrow;
const SectionTitle = window.LP_SectionTitle;
const RallimoMark = window.LP_RallimoMark;

// ---- Use cases ----------------------------------------------------------

function UseCases() {
  const cases = [
    {
      t: '商店街', s: '回遊と来店促進',
      d: '加盟店をめぐるスタンプラリーで、商店街全体への送客と滞在時間を増やします。',
      bg: P.coral,
      svg: (
        <g>
          <rect x="6" y="22" width="60" height="6" fill="#fff" opacity="0.95" />
          <path d="M6 22 L66 22 L66 16 Q36 10 6 16 Z" fill="#fff" opacity="0.55" />
          <rect x="6" y="22" width="10" height="6" fill={P.terracotta} opacity="0.6" />
          <rect x="26" y="22" width="10" height="6" fill={P.terracotta} opacity="0.6" />
          <rect x="46" y="22" width="10" height="6" fill={P.terracotta} opacity="0.6" />
          <rect x="8" y="28" width="14" height="22" fill="#fff" opacity="0.95" />
          <rect x="24" y="32" width="14" height="18" fill="#fff" opacity="0.85" />
          <rect x="40" y="26" width="14" height="24" fill="#fff" opacity="0.95" />
          <rect x="56" y="32" width="10" height="18" fill="#fff" opacity="0.8" />
          <rect x="13" y="40" width="4" height="10" fill={P.coral} />
          <rect x="29" y="40" width="4" height="10" fill={P.coral} />
          <rect x="45" y="38" width="4" height="12" fill={P.coral} />
          <circle cx="36" cy="16" r="3" fill={P.sunny} />
        </g>
      ),
    },
    {
      t: '飲食店・小売店', s: '再来店・ファン化',
      d: '常連客の獲得や再来店促進に。スタンプを貯めると景品がもらえる仕組みで、ファン化を後押し。',
      bg: P.sunny,
      svg: (
        <g>
          <rect x="10" y="22" width="52" height="28" fill="#fff" opacity="0.95" />
          <path d="M8 22 L64 22 L60 14 L12 14 Z" fill="#fff" opacity="0.85" />
          <rect x="10" y="22" width="52" height="4" fill={P.terracotta} opacity="0.7" />
          <rect x="30" y="32" width="12" height="18" fill={P.coral} />
          <rect x="15" y="30" width="10" height="8" fill={P.coral} opacity="0.4" />
          <rect x="47" y="30" width="10" height="8" fill={P.coral} opacity="0.4" />
          <circle cx="36" cy="10" r="5" fill={P.terracotta} />
          <path d="M33 10 Q36 14 39 10" stroke="#fff" strokeWidth="1" fill="none" />
          <path d="M34 5 Q35 3 34 1" stroke={P.terracotta} strokeWidth="1" fill="none" />
          <path d="M38 5 Q39 3 38 1" stroke={P.terracotta} strokeWidth="1" fill="none" />
        </g>
      ),
    },
    {
      t: '展示会', s: 'ブース回遊・データ取得',
      d: '出展ブースを効率よく回ってもらいながら、来場者の関心や動きをデータとして取得。',
      bg: P.terracotta,
      svg: (
        <g>
          <path d="M8 50 L8 30 L24 22 L40 30 L40 50 Z" fill="#fff" opacity="0.95" />
          <path d="M32 50 L32 32 L48 24 L64 32 L64 50 Z" fill="#fff" opacity="0.8" />
          <rect x="14" y="38" width="6" height="12" fill={P.terracotta} />
          <rect x="38" y="40" width="6" height="10" fill={P.terracotta} opacity="0.7" />
          <line x1="24" y1="22" x2="24" y2="14" stroke="#fff" strokeWidth="1.2" />
          <path d="M24 14 L30 16 L24 18 Z" fill={P.coral} />
          <line x1="48" y1="24" x2="48" y2="16" stroke="#fff" strokeWidth="1.2" />
          <path d="M48 16 L54 18 L48 20 Z" fill={P.sunny} />
          <circle cx="6" cy="48" r="2" fill="#fff" opacity="0.7" />
          <circle cx="68" cy="48" r="2" fill="#fff" opacity="0.7" />
        </g>
      ),
    },
    {
      t: '商業施設', s: 'テナント送客・滞在UP',
      d: 'モール内のテナントへの誘導や回遊性アップに。施設全体の滞在時間と購買機会を最大化。',
      bg: P.coral,
      svg: (
        <g>
          <rect x="6" y="14" width="60" height="36" fill="#fff" opacity="0.95" />
          <line x1="6" y1="26" x2="66" y2="26" stroke={P.coral} strokeWidth="1" />
          <line x1="6" y1="38" x2="66" y2="38" stroke={P.coral} strokeWidth="1" />
          {[0,1,2,3,4].map(c => (
            <rect key={'a'+c} x={10 + c * 12} y="18" width="8" height="6" fill={P.coral} opacity="0.55" />
          ))}
          {[0,1,2,3,4].map(c => (
            <rect key={'b'+c} x={10 + c * 12} y="30" width="8" height="6" fill={P.coral} opacity="0.55" />
          ))}
          <rect x="30" y="42" width="12" height="8" fill={P.terracotta} />
          <g transform="translate(54,40)">
            <rect x="0" y="2" width="10" height="10" fill={P.sunny} />
            <path d="M2 2 Q2 -2 5 -2 Q8 -2 8 2" stroke={P.ink} strokeWidth="1" fill="none" />
          </g>
        </g>
      ),
    },
  ];

  return (
    <section id="cases" style={{ padding: '90px 0', background: P.paper }}>
      <Container>
        <SectionEyebrow>USE CASES</SectionEyebrow>
        <SectionTitle>こんなシーンで活躍します。</SectionTitle>
        <div style={{
          marginTop: 48,
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 20,
        }}>
          {cases.map((c, i) => (
            <div key={i} style={{
              background: P.cream,
              borderRadius: 16,
              border: `1px solid ${P.soft}`,
              overflow: 'hidden',
            }}>
              <div style={{
                width: '100%',
                height: 140,
                background: c.bg,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <svg viewBox="0 0 72 60" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
                  {c.svg}
                </svg>
              </div>
              <div style={{ padding: '20px 22px 22px' }}>
                <h3 style={{
                  fontFamily: '"Zen Maru Gothic", sans-serif',
                  fontWeight: 800,
                  fontSize: 19,
                  color: P.ink,
                  margin: 0,
                }}>{c.t}</h3>
                <div style={{
                  fontSize: 12,
                  color: P.terracotta,
                  fontWeight: 700,
                  marginTop: 4,
                  letterSpacing: '0.05em',
                }}>{c.s}</div>
                <p style={{
                  margin: '12px 0 0',
                  fontSize: 13,
                  lineHeight: 1.75,
                  color: P.ink,
                  opacity: 0.72,
                }}>{c.d}</p>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ---- Pricing -----------------------------------------------------------

function PriceRow({ label, original, value, suffix, note }) {
  return (
    <div style={{
      display: 'flex',
      alignItems: 'baseline',
      justifyContent: 'space-between',
      marginBottom: 8,
    }}>
      <div style={{ fontSize: 13, color: P.ink, opacity: 0.7 }}>{label}</div>
      <div style={{
        fontFamily: '"Quicksand", sans-serif',
        fontWeight: 700,
        fontSize: 22,
        color: P.ink,
        display: 'flex', alignItems: 'baseline', gap: 8,
      }}>
        {original && (
          <span style={{
            fontSize: 14, color: P.ink, opacity: 0.4,
            textDecoration: 'line-through',
          }}>{original}</span>
        )}
        <span style={{ color: original ? P.terracotta : P.ink }}>{value}</span>
        {suffix && <span style={{ fontSize: 13, opacity: 0.6 }}>{suffix}</span>}
        {note && (
          <span style={{
            fontSize: 10, background: P.terracotta, color: '#fff',
            padding: '3px 8px', borderRadius: 4, fontWeight: 800,
            fontFamily: '"Zen Maru Gothic", sans-serif',
          }}>{note}</span>
        )}
      </div>
    </div>
  );
}

function Pricing() {
  return (
    <section id="pricing" style={{ padding: '90px 0', background: P.cream }}>
      <Container>
        <SectionEyebrow>PRICING</SectionEyebrow>
        <SectionTitle>料金プラン</SectionTitle>

        {/* FREE TRIAL block */}
        <div style={{
          marginTop: 28,
          background: P.paper,
          border: `2px dashed ${P.terracotta}`,
          borderRadius: 14,
          padding: '20px 24px',
          display: 'flex',
          alignItems: 'center',
          gap: 20,
          flexWrap: 'wrap',
        }}>
          <div style={{ flex: 1, minWidth: 260 }}>
            <div style={{
              display: 'inline-block',
              fontSize: 11,
              fontFamily: '"Quicksand", sans-serif',
              fontWeight: 700,
              color: '#fff',
              background: P.terracotta,
              padding: '4px 12px',
              borderRadius: 999,
              letterSpacing: '0.14em',
            }}>FREE TRIAL</div>
            <div style={{
              display: 'flex',
              alignItems: 'center',
              gap: 14,
              marginTop: 10,
              flexWrap: 'wrap',
            }}>
              <div style={{
                fontFamily: '"Zen Maru Gothic", sans-serif',
                fontWeight: 900,
                fontSize: 24,
                color: P.ink,
                lineHeight: 1.3,
              }}>
                まずは<span style={{ color: P.terracotta }}>無料</span>ではじめる
              </div>
              <a href="https://rallimo.hondenext.com/register" style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                background: P.terracotta, color: '#fff',
                padding: '10px 22px',
                borderRadius: 999,
                fontSize: 14, fontWeight: 800,
                textDecoration: 'none',
                fontFamily: '"Zen Maru Gothic", sans-serif',
              }}>
                申込はこちら →
              </a>
            </div>
          </div>
          <div style={{
            width: 110, height: 110,
            background: '#fff',
            borderRadius: 8,
            padding: 4,
            border: `1px solid ${P.soft}`,
            flexShrink: 0,
          }}>
            <img src="assets/register-qr.png" alt="無料お試し登録QR"
                 onError={(e) => { e.currentTarget.style.display = 'none'; }}
                 style={{ width: '100%', height: '100%', display: 'block' }} />
          </div>
        </div>

        {/* Campaign banner */}
        <div style={{
          marginTop: 16,
          background: P.ink,
          color: P.cream,
          padding: '16px 24px',
          borderRadius: 14,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          flexWrap: 'wrap',
          gap: 12,
        }}>
          <div style={{
            fontFamily: '"Zen Maru Gothic", sans-serif',
            fontSize: 17, fontWeight: 800,
          }}>
            <span style={{ color: P.sunny }}>期間限定</span> 初期費用 ¥20,000 OFF キャンペーン実施中
          </div>
          <div style={{
            fontSize: 12,
            background: P.sunny,
            color: P.ink,
            padding: '6px 14px',
            borderRadius: 999,
            fontWeight: 800,
          }}>適用は申込時</div>
        </div>

        {/* Plans grid */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 24,
          marginTop: 24,
        }}>
          {/* Light */}
          <div style={{
            background: P.paper,
            border: `1px solid ${P.soft}`,
            borderRadius: 18,
            padding: '32px 32px 28px',
          }}>
            <div style={{
              fontFamily: '"Zen Maru Gothic", sans-serif',
              fontSize: 24, fontWeight: 800, color: P.ink,
            }}>ライト</div>
            <div style={{ fontSize: 13, color: P.ink, opacity: 0.6, marginTop: 4 }}>
              小規模イベント向け
            </div>
            <div style={{ height: 1, background: P.soft, margin: '20px 0' }} />
            <PriceRow label="初期費用" original="¥50,000" value="¥30,000" note="2万円OFF" />
            <PriceRow label="月額" value="¥5,000" suffix="/月" />
            <div style={{
              fontSize: 13, color: P.ink, opacity: 0.7,
              marginTop: 16, padding: '14px 0', borderTop: `1px solid ${P.soft}`,
              borderBottom: `1px solid ${P.soft}`,
            }}>
              スポット 5箇所 / 参加者 500名まで
            </div>
            <ul style={{
              listStyle: 'none', padding: 0, margin: '14px 0 0',
            }}>
              {['QRコードスタンプ', 'スタンプカード表示', '景品管理（全員配布）', 'アンケート', '基本デザインカスタマイズ'].map((f, i) => (
                <li key={i} style={{
                  fontSize: 13, color: P.ink, opacity: 0.85,
                  padding: '5px 0',
                  display: 'flex', alignItems: 'center', gap: 10,
                }}>
                  <span style={{ color: P.coral, fontWeight: 800 }}>✓</span>{f}
                </li>
              ))}
            </ul>
          </div>

          {/* Standard */}
          <div style={{
            background: P.paper,
            border: `2px solid ${P.coral}`,
            borderRadius: 18,
            padding: '32px 32px 28px',
            position: 'relative',
            boxShadow: `0 16px 40px ${P.coral}33`,
          }}>
            <div style={{
              position: 'absolute', top: -14, right: 24,
              background: P.terracotta, color: '#fff',
              fontSize: 12, fontWeight: 800,
              padding: '6px 16px', borderRadius: 999,
              fontFamily: '"Zen Maru Gothic", sans-serif',
            }}>おすすめ</div>
            <div style={{
              fontFamily: '"Zen Maru Gothic", sans-serif',
              fontSize: 24, fontWeight: 800, color: P.terracotta,
            }}>スタンダード</div>
            <div style={{ fontSize: 13, color: P.ink, opacity: 0.6, marginTop: 4 }}>
              中規模イベント・商店街向け
            </div>
            <div style={{ height: 1, background: P.soft, margin: '20px 0' }} />
            <PriceRow label="初期費用" original="¥50,000" value="¥30,000" note="2万円OFF" />
            <PriceRow label="月額" value="¥10,000" suffix="/月" />
            <div style={{
              fontSize: 13, color: P.ink, opacity: 0.7,
              marginTop: 16, padding: '14px 0', borderTop: `1px solid ${P.soft}`,
              borderBottom: `1px solid ${P.soft}`,
            }}>
              スポット 20箇所 / 参加者 3,000名まで
            </div>
            <ul style={{ listStyle: 'none', padding: 0, margin: '14px 0 0' }}>
              {['ライトプランの全機能', '抽選機能（当選確率設定）', 'GPS連携チェックイン', '営業時間連携チェックイン'].map((f, i) => (
                <li key={i} style={{
                  fontSize: 13, color: P.ink, opacity: 0.85,
                  padding: '5px 0',
                  display: 'flex', alignItems: 'center', gap: 10,
                }}>
                  <span style={{ color: P.coral, fontWeight: 800 }}>✓</span>{f}
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* Premium */}
        <div style={{
          marginTop: 20,
          background: P.paper,
          border: `1px solid ${P.soft}`,
          borderRadius: 16,
          padding: '24px 28px',
          display: 'flex',
          alignItems: 'center',
          gap: 28,
          flexWrap: 'wrap',
        }}>
          <div style={{
            fontFamily: '"Zen Maru Gothic", sans-serif',
            fontSize: 22, fontWeight: 800, color: P.ink, minWidth: 140,
          }}>プレミアム</div>
          <div style={{ fontSize: 14, color: P.ink, opacity: 0.7, flex: 1, minWidth: 220 }}>
            大規模・自治体・観光協会向け / スポット数・参加者数 無制限
          </div>
          <div style={{
            fontFamily: '"Zen Maru Gothic", sans-serif',
            fontSize: 18, fontWeight: 800, color: P.terracotta,
          }}>要お問い合わせ</div>
        </div>

        {/* Flexible note */}
        <div style={{
          marginTop: 20,
          background: P.sunny,
          borderRadius: 14,
          padding: '20px 24px',
          display: 'flex',
          alignItems: 'center',
          gap: 18,
        }}>
          <div style={{
            width: 44, height: 44, borderRadius: '50%', background: P.ink,
            color: P.sunny,
            fontFamily: '"Zen Maru Gothic", sans-serif',
            fontWeight: 900, fontSize: 22,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            flexShrink: 0,
          }}>!</div>
          <div>
            <div style={{
              fontFamily: '"Zen Maru Gothic", sans-serif',
              fontSize: 17, fontWeight: 800, color: P.ink,
            }}>使う月だけ。月単位のフレキシブル契約。</div>
            <div style={{ fontSize: 13, color: P.ink, opacity: 0.85, marginTop: 4, lineHeight: 1.7 }}>
              解約後もデータは6ヶ月保持。再契約時はそのまま再開でき、6ヶ月以内なら初期費用は不要です。
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

// ---- Flow ---------------------------------------------------------------

function Flow() {
  const steps = [
    { t: '申込', d: 'サービスページから\nかんたん登録' },
    { t: 'イベント設定', d: 'スポット・景品を\n管理画面から登録' },
    { t: '公開・運用', d: 'QRコード配布で\nスタート' },
    { t: '分析・改善', d: 'データを元に\n次回施策に活用' },
  ];
  return (
    <section id="flow" style={{ padding: '90px 0', background: P.paper }}>
      <Container>
        <SectionEyebrow>HOW TO START</SectionEyebrow>
        <SectionTitle>ご利用の流れ</SectionTitle>
        <div style={{
          marginTop: 48,
          display: 'flex',
          gap: 8,
          alignItems: 'flex-start',
        }}>
          {steps.map((s, i, arr) => (
            <React.Fragment key={i}>
              <div style={{ flex: 1, textAlign: 'center' }}>
                <div style={{
                  width: 64, height: 64,
                  borderRadius: '50%',
                  background: i === 0 ? P.terracotta : P.coral,
                  color: '#fff',
                  margin: '0 auto 16px',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: '"Quicksand", sans-serif',
                  fontWeight: 700, fontSize: 24,
                  boxShadow: `0 8px 16px ${P.coral}40`,
                }}>{i + 1}</div>
                <div style={{
                  fontFamily: '"Zen Maru Gothic", sans-serif',
                  fontSize: 17, fontWeight: 800,
                  color: P.ink,
                }}>{s.t}</div>
                <div style={{
                  fontSize: 12, color: P.ink, opacity: 0.65,
                  marginTop: 8, whiteSpace: 'pre-line', lineHeight: 1.7,
                }}>{s.d}</div>
              </div>
              {i < arr.length - 1 && (
                <div style={{
                  paddingTop: 18,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                    <circle cx="12" cy="12" r="11" fill={P.sunny} />
                    <path d="M9 7 L15 12 L9 17" stroke={P.ink} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" fill="none" />
                  </svg>
                </div>
              )}
            </React.Fragment>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ---- Admin features -----------------------------------------------------

function AdminFeatures() {
  const features = [
    { t: 'ダッシュボード', d: '参加者数・コンプリート率・景品交換数などを表示' },
    { t: 'イベント管理', d: '複製・公開・終了のステータスワークフローに対応' },
    { t: 'スポット管理', d: 'QRコード自動生成、GPS座標、有効/無効切替' },
    { t: '景品・抽選', d: '全員配布／抽選から選択可能、在庫・確率も設定可' },
    { t: '参加者管理', d: '検索・フィルタ・進捗可視化、CSV出力に対応' },
    { t: 'デザイン設定', d: 'カラー・レイアウト・画像をノーコードで自由に' },
  ];
  return (
    <section style={{ padding: '90px 0', background: P.cream }}>
      <Container>
        <SectionEyebrow>ADMIN DASHBOARD</SectionEyebrow>
        <SectionTitle>管理画面の主要機能</SectionTitle>
        <div style={{
          marginTop: 40,
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          columnGap: 56,
          rowGap: 0,
        }}>
          {features.map((f, i) => (
            <div key={i} style={{
              padding: '18px 4px',
              borderBottom: `1px dashed ${P.soft}`,
              display: 'flex',
              alignItems: 'baseline',
              gap: 18,
            }}>
              <div style={{
                fontFamily: '"Zen Maru Gothic", sans-serif',
                fontSize: 16, fontWeight: 800, color: P.terracotta,
                flexShrink: 0,
                minWidth: 120,
              }}>{f.t}</div>
              <div style={{
                fontSize: 14, color: P.ink, opacity: 0.78,
                lineHeight: 1.7,
              }}>{f.d}</div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

// ---- Try it (3 SPOT QRs) -----------------------------------------------

function TryIt() {
  return (
    <section style={{ padding: '90px 0', background: P.terracotta, color: '#fff' }}>
      <Container>
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1.2fr',
          gap: 56,
          alignItems: 'center',
        }}>
          <div>
            <SectionEyebrow color={P.sunny}>FREE DEMO</SectionEyebrow>
            <h2 style={{
              fontFamily: '"Zen Maru Gothic", sans-serif',
              fontWeight: 900,
              fontSize: 'clamp(28px, 3.4vw, 40px)',
              lineHeight: 1.3,
              letterSpacing: '-0.01em',
              color: '#fff',
              margin: '12px 0 0',
            }}>
              3つのQRを順に読み取って、<br />
              スタンプラリーを<span style={{ color: P.sunny }}>体験</span>!
            </h2>
            <p style={{
              marginTop: 20,
              fontSize: 15,
              lineHeight: 1.95,
              color: '#fff',
              opacity: 0.9,
            }}>
              実際にRallimoのスタンプラリーを体験いただけます。<br />
              スマホのカメラで下のQRコードをかざしてみてください。
            </p>
          </div>

          <div style={{
            background: '#fff',
            borderRadius: 20,
            padding: '32px',
            display: 'flex',
            justifyContent: 'space-around',
            alignItems: 'flex-start',
            gap: 56,
            color: P.ink,
          }}>
            {[1, 2, 3].map(n => (
              <div key={n} style={{ textAlign: 'center', flex: 1 }}>
                <div style={{
                  fontFamily: '"Quicksand", sans-serif',
                  fontWeight: 700,
                  fontSize: 12,
                  letterSpacing: '0.15em',
                  color: P.terracotta,
                }}>SPOT {n}</div>
                <img src={`assets/spot${n}-qr.png`} alt={`SPOT ${n} QR`}
                     style={{
                       width: '100%', maxWidth: 140,
                       marginTop: 12,
                       borderRadius: 8,
                       background: '#fff',
                       display: 'block',
                       marginLeft: 'auto', marginRight: 'auto',
                     }} />
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

// ---- Final CTA & Footer ------------------------------------------------

function FinalCTA() {
  return (
    <section style={{ padding: '90px 0', background: P.ink, color: P.cream }}>
      <Container>
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1.4fr 1fr',
          gap: 48,
          alignItems: 'center',
        }}>
          <div>
            <SectionEyebrow color={P.sunny}>CONTACT</SectionEyebrow>
            <h2 style={{
              fontFamily: '"Zen Maru Gothic", sans-serif',
              fontWeight: 900,
              fontSize: 'clamp(32px, 4vw, 48px)',
              lineHeight: 1.25,
              letterSpacing: '-0.01em',
              color: P.cream,
              margin: '12px 0 0',
            }}>
              <span style={{ color: P.sunny }}>無料相談・デモ</span>受付中
            </h2>
            <p style={{
              marginTop: 20,
              fontSize: 15,
              lineHeight: 1.95,
              color: P.cream,
              opacity: 0.85,
            }}>
              まずはサービスページからご登録、<br />
              もしくはLINE公式アカウントからお気軽にお問い合わせください。
            </p>
            <div style={{ display: 'flex', gap: 14, marginTop: 32, flexWrap: 'wrap' }}>
              <a href="https://rallimo.hondenext.com/register" style={{
                background: P.terracotta,
                color: '#fff',
                textDecoration: 'none',
                padding: '16px 28px',
                borderRadius: 999,
                fontFamily: '"Zen Maru Gothic", sans-serif',
                fontWeight: 800,
                fontSize: 16,
              }}>無料ではじめる →</a>
            </div>
          </div>

          <div style={{
            background: P.cream,
            color: P.ink,
            borderRadius: 18,
            padding: '24px',
            display: 'flex',
            alignItems: 'center',
            gap: 20,
          }}>
            <div style={{ flex: 1 }}>
              <div style={{
                fontSize: 11,
                color: P.terracotta,
                fontWeight: 800,
                letterSpacing: '0.12em',
              }}>無料相談・デモ受付中</div>
              <div style={{
                fontFamily: '"Zen Maru Gothic", sans-serif',
                fontSize: 17, fontWeight: 800,
                marginTop: 6, lineHeight: 1.4,
              }}>
                LINE公式アカウントから<br />
                <span style={{ color: P.terracotta }}>友だち追加でお問い合わせ</span>
              </div>
            </div>
            <div style={{ textAlign: 'center' }}>
              <img src="assets/line-qr.png" alt="LINE公式アカウント QR"
                   style={{
                     width: 120, height: 120, display: 'block',
                     background: '#fff', borderRadius: 8,
                   }} />
              <div style={{ fontSize: 10, opacity: 0.6, marginTop: 6 }}>友だち追加</div>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{
      background: '#2A1F17',
      color: P.cream,
      padding: '40px 0 32px',
    }}>
      <Container style={{
        display: 'flex',
        alignItems: 'flex-start',
        justifyContent: 'space-between',
        flexWrap: 'wrap',
        gap: 24,
      }}>
        <div>
          <RallimoMark size={28} color={P.cream} accent={P.sunny} />
          <div style={{
            marginTop: 14,
            fontSize: 13,
            opacity: 0.85,
            lineHeight: 1.8,
          }}>
            合同会社 Honde Next<br />
            三重県鈴鹿市小田町998番地の101<br />
            <a href="https://www.hondenext.com/" style={{ color: P.sunny, textDecoration: 'none' }}>
              https://www.hondenext.com/
            </a>
          </div>
        </div>
        <div style={{
          fontSize: 11,
          opacity: 0.5,
          alignSelf: 'flex-end',
        }}>
          © {new Date().getFullYear()} Honde Next, LLC. All rights reserved.
        </div>
      </Container>
    </footer>
  );
}

// ---- Page assembly -----------------------------------------------------

function App() {
  return (
    <div style={{
      background: P.paper,
      color: P.ink,
      fontFamily: '"Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif',
    }}>
      {React.createElement(window.LP_Nav)}
      {React.createElement(window.LP_Hero)}
      {React.createElement(window.LP_Highlights)}
      {React.createElement(window.LP_HowItFeels)}
      <UseCases />
      <Pricing />
      <Flow />
      <AdminFeatures />
      <TryIt />
      <FinalCTA />
      <Footer />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);